feature: WYSIWYG markdown for notes. Fixes #701 (#715)

* #701 Improve note support : WYSIWYG markdown

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...

* #701 Improve note support : WYSIWYG markdown

improved performance to not rerender all note card when one is updated

* Use markdown shortcuts

* Remove the alignment actions

* Drop history buttons

* Fix code and highlighting buttons

* Remove the unneeded update markdown plugin

* Remove underline support as it's not markdown native

* - 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 too deep dive in) and removed theme
    - Added a switch to show raw markdown
    - Added back the react markdown for card (SSR)

* delete theme.ts

* add theme back for code element to be more like prism theme from markdown-readonly

* move the new editor back to the edit menu

* move the bookmark markdown component into dashboard/bookmark

* move the tooltip into its own component

* move save button to toolbar

* Better raw markdown

---------

Co-authored-by: Giuseppe Lapenta <giuseppe.lapenta@enovacom.com>
Co-authored-by: Mohamed Bassem <me@mbassem.com>

1 files changed, 35 insertions, 0 deletions

diff --git a/apps/web/components/ui/markdown/theme.ts b/apps/web/components/ui/markdown/theme.ts
new file mode 100644
index 00000000..ff088e32
--- /dev/null
+++ b/apps/web/components/ui/markdown/theme.ts
@@ -0,0 +1,35 @@
+export const MarkdownEditorTheme = {
+  code: "bg-[#282A36] text-[#F8F8F2] font-mono block px-4 py-2 my-2 text-sm overflow-x-auto relative rounded-md shadow-sm",
+  codeHighlight: {
+    atrule: "text-[#8BE9FD]",
+    attr: "text-[#8BE9FD]",
+    boolean: "text-[#FF79C6]",
+    builtin: "text-[#50FA7B]",
+    cdata: "text-[#6272A4]",
+    char: "text-[#50FA7B]",
+    class: "text-[#FF79C6]",
+    "class-name": "text-[#FF79C6]",
+    comment: "text-[#6272A4]",
+    constant: "text-[#FF79C6]",
+    deleted: "text-[#FF5555]",
+    doctype: "text-[#6272A4]",
+    entity: "text-[#FFB86C]",
+    function: "text-[#50FA7B]",
+    important: "text-[#F1FA8C]",
+    inserted: "text-[#50FA7B]",
+    keyword: "text-[#FF79C6]",
+    namespace: "text-[#F1FA8C]",
+    number: "text-[#BD93F9]",
+    operator: "text-[#FFB86C]",
+    prolog: "text-[#6272A4]",
+    property: "text-[#FFB86C]",
+    punctuation: "text-[#F8F8F2]",
+    regex: "text-[#FF5555]",
+    selector: "text-[#50FA7B]",
+    string: "text-[#F1FA8C]",
+    symbol: "text-[#FF79C6]",
+    tag: "text-[#FF79C6]",
+    url: "text-[#8BE9FD]",
+    variable: "text-[#F1FA8C]",
+  },
+};