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, 6 insertions, 5 deletions

diff --git a/apps/web/components/dashboard/bookmarks/TextCard.tsx b/apps/web/components/dashboard/bookmarks/TextCard.tsx
index 14a4f905..9d168910 100644
--- a/apps/web/components/dashboard/bookmarks/TextCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/TextCard.tsx
@@ -2,7 +2,7 @@
 
 import Image from "next/image";
 import Link from "next/link";
-import { MarkdownComponent } from "@/components/ui/markdown-component";
+import { BookmarkMarkdownComponent } from "@/components/dashboard/bookmarks/BookmarkMarkdownComponent";
 import { bookmarkLayoutSwitch } from "@/lib/userLocalSettings/bookmarksLayout";
 import { cn } from "@/lib/utils";
 
@@ -20,15 +20,16 @@ export default function TextCard({
   bookmark: ZBookmarkTypeText;
   className?: string;
 }) {
-  const bookmarkedText = bookmark.content;
-
   const banner = bookmark.assets.find((a) => a.assetType == "bannerImage");
-
   return (
     <>
       <BookmarkLayoutAdaptingCard
         title={bookmark.title}
-        content={<MarkdownComponent>{bookmarkedText.text}</MarkdownComponent>}
+        content={
+          <BookmarkMarkdownComponent readOnly={true}>
+            {bookmark}
+          </BookmarkMarkdownComponent>
+        }
         footer={
           getSourceUrl(bookmark) && (
             <FooterLinkURL url={getSourceUrl(bookmark)} />