From 40c5262a9c2fcb8c89d7c464ccfdc3016f933eb3 Mon Sep 17 00:00:00 2001
From: Giuseppe <Giuseppe06@gmail.com>
Date: Sat, 21 Dec 2024 14:09:30 +0100
Subject: 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>
---
 .../bookmarks/BookmarkMarkdownComponent.tsx        | 43 ++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 apps/web/components/dashboard/bookmarks/BookmarkMarkdownComponent.tsx

(limited to 'apps/web/components/dashboard/bookmarks/BookmarkMarkdownComponent.tsx')

diff --git a/apps/web/components/dashboard/bookmarks/BookmarkMarkdownComponent.tsx b/apps/web/components/dashboard/bookmarks/BookmarkMarkdownComponent.tsx
new file mode 100644
index 00000000..74eb0868
--- /dev/null
+++ b/apps/web/components/dashboard/bookmarks/BookmarkMarkdownComponent.tsx
@@ -0,0 +1,43 @@
+import MarkdownEditor from "@/components/ui/markdown/markdown-editor";
+import { MarkdownReadonly } from "@/components/ui/markdown/markdown-readonly";
+import { toast } from "@/components/ui/use-toast";
+
+import type { ZBookmarkTypeText } from "@hoarder/shared/types/bookmarks";
+import { useUpdateBookmarkText } from "@hoarder/shared-react/hooks/bookmarks";
+
+export function BookmarkMarkdownComponent({
+  children: bookmark,
+  readOnly = true,
+}: {
+  children: ZBookmarkTypeText;
+  readOnly?: boolean;
+}) {
+  const { mutate: updateBookmarkMutator, isPending } = useUpdateBookmarkText({
+    onSuccess: () => {
+      toast({
+        description: "Note updated!",
+      });
+    },
+    onError: () => {
+      toast({ description: "Something went wrong", variant: "destructive" });
+    },
+  });
+
+  const onSave = (text: string) => {
+    updateBookmarkMutator({
+      bookmarkId: bookmark.id,
+      text,
+    });
+  };
+  return (
+    <div className="h-full overflow-hidden">
+      {readOnly ? (
+        <MarkdownReadonly>{bookmark.content.text}</MarkdownReadonly>
+      ) : (
+        <MarkdownEditor onSave={onSave} isSaving={isPending}>
+          {bookmark.content.text}
+        </MarkdownEditor>
+      )}
+    </div>
+  );
+}
-- 
cgit v1.2.3-70-g09d2