#701 Improve note support : WYSIWYG markdown

[Tukks]

First implementation with a wysiwyg markdown editor. Update:

• Add Lexical markdown editor
• consistent rendering between card and preview
• removed edit modal, replaced by preview with save action
• simple markdown shortcut: underline, bold, italic etc...

[Tukks]

This is a first implementation, I will keep it simple for the moment.
Later I will add codeblock, Headings, and other format who I think can be interesting in Hoarder.

here's a full implementation example : https://playground.lexical.dev/?showTreeView=false&isAutocomplete=true

Let me know if everything all right in the PR.

[Tukks]

Added useTranslation to all string

[MohamedBassem]

Ok, I spent a lot of time today reading about lexical and understanding how it works. It's pretty cool and thanks for introducing it into the codebase. I've pushed a bunch of modifications/fixes to the PR that I hope you don't mind:

1. Dropped alignment and underline support as those are not supported in markdown.
2. Dropped the history undo/redo buttons for now just to simplify things a bit. Kept the history plugin though as the keyboard shortcuts still work.
3. Added markdown shortcuts such that the markdown is rendered as you type it.
4. Fixed a bug in the toolbar not correctly reflecting highlights and code.

Now, to merge this PR. There's a couple of things that we need to do:

1. I don't like the flicker that happens in the bookmark cards in homepage on load. Seems like lexical only works on the client side (Feature: Server-Side Rendering (SSR) Support for Lexical Editor facebook/lexical#4960). Which means that I think we should continue using react-markdown in the bookmark cards to avoid this flicker. Unfortunate but can't find a way around it.
2. We don't actually need to use a theme. Just adding prose dark:prose-invert prose-p:m-0to theContentEditablegets us most of the way there. The benefit of that is that it'll make the styling look similar toreact-markdown` and to what it'll look like on the mobile app.
3. Not a blocker, but I think we should move the Save button to the toolbar.
4. We should add an escape hatch in the editor to toggle editing raw markdown so that people don't get frustrated from fighting with the editor.

[Tukks]

Hello,

Thank for your feedback and review.
I saw you removed the UpdateMarkdownPlugin, it was needed when you updated the markdown in the editor to make change appear in the grid. I will not be needed if we use react-markdown on the grid.

• Dropped alignment and underline support as those are not supported in markdown.

You're right.

• Dropped the history undo/redo buttons for now just to simplify things a bit. Kept the history plugin though as the keyboard shortcuts still work.

No problem, I understand.

• Added markdown shortcuts such that the markdown is rendered as you type it.

Yes, I will add a little tooltip helper so

1. I don't like the flicker that happens in the bookmark cards in homepage on load. Seems like lexical only works on the client side

Yes, it bother me too, I didn't know how we can find a way around it.
I will give it a try with react-markdown and prose dark:prose-invert prose-p:m-0 (I did'nt understand how this can work, but let see)

3. Not a blocker, but I think we should move the Save button to the toolbar.

Why not, I have no opinion on that.

4. We should add an escape hatch in the editor to toggle editing raw markdown so that people don't get frustrated from fighting with the editor.

Definitely yes, you can see a button in the lexical playground here

[Tukks]

Hello,
Make some change :

• added ListPlugin because if absent, there's a bug where you can't escape a list with enter + enter
• added codeblock plugin
• added prose dark:prose-invert prose-p:m-0 like you said (there's room for improvement I think, don't took the time to deep dive in) and removed theme
• Added a switch to show raw markdown
• Added back the react markdown for card (SSR)

Todo ?

• Save button in toolbar ?
• Some testing

[Tukks]

Hello @MohamedBassem,

Removing the theme for the code highlight make the code not so clear on the lexical part.
The react markdown 'reader' use a custom components for code (prism) and highlight color.

Tried to replace the codeNode in lexical with the prism components, but no luck.

I think we can add back only the code part from theme.ts and use prose from tailwind for the rest.

What do you think?
Hope this is clear.

[MohamedBassem]

@Tukks Sure, let's do that 👍

[Tukks]

@MohamedBassem theme.ts is back.

let me know if evrythings is okay

[MohamedBassem]

@Tukks I made the following changes:

1. Given that the editor is new, I didn't want to use it in the bookmark preview for now as there's no escape hatch there if something goes wrong. So I moved the editor back to the edit bookmark option. If it proves to be reliable enough, we can add it back to the bookmark preview page.
2. I didn't like the hack of handling raw markdown (aka using codeblocks). It wasn't very intuitive and was causing a bunch of trouble for me. So for raw markdown, I changed the code to use plain text editor instead of the rich one.
3. I moved the save button to the toolbar as we agreed.
4. I moved the markdown component out of the ui directory as this directory is meant to be generic, and that component was not (e.g. it had a dependency on the update bookmark hook).

I think this PR is now ready to get merged. Let me know what you think.

[Tukks]

1. Given that the editor is new, I didn't want to use it in the bookmark preview for now as there's no escape hatch there if something goes wrong. So I moved the editor back to the edit bookmark option. If it proves to be reliable enough, we can add it back to the bookmark preview page.

I understand, let it play secure for now.

2. I didn't like the hack of handling raw markdown (aka using codeblocks). It wasn't very intuitive and was causing a bunch of trouble for me. So for raw markdown, I changed the code to use plain text editor instead of the rich one.

I took the codeblock things from lexical playground, but you're right, I prefer your way.

3. I moved the save button to the toolbar as we agreed.

Yes perfect

4. I moved the markdown component out of the ui directory as this directory is meant to be generic, and that component was not (e.g. it had a dependency on the update bookmark hook).

ok

I just tested your change right now the PR can be merged for me too.
Thank for your help.