#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