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, 0 insertions, 61 deletions

diff --git a/apps/web/components/ui/markdown-component.tsx b/apps/web/components/ui/markdown-component.tsx
deleted file mode 100644
index d3c832ac..00000000
--- a/apps/web/components/ui/markdown-component.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from "react";

-import CopyBtn from "@/components/ui/copy-button";

-import { cn } from "@/lib/utils";

-import Markdown from "react-markdown";

-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";

-import { dracula } from "react-syntax-highlighter/dist/cjs/styles/prism";

-import remarkBreaks from "remark-breaks";

-import remarkGfm from "remark-gfm";

-

-function PreWithCopyBtn({ className, ...props }: React.ComponentProps<"pre">) {

-  const ref = React.useRef<HTMLPreElement>(null);

-  return (

-    <span className="group relative">

-      <CopyBtn

-        className="absolute right-1 top-1 m-1 hidden text-white group-hover:block"

-        getStringToCopy={() => {

-          return ref.current?.textContent ?? "";

-        }}

-      />

-      <pre ref={ref} className={cn(className, "")} {...props} />

-    </span>

-  );

-}

-

-export function MarkdownComponent({

-  children: markdown,

-}: {

-  children: string;

-}) {

-  return (

-    <Markdown

-      remarkPlugins={[remarkGfm, remarkBreaks]}

-      className="prose dark:prose-invert"

-      components={{

-        pre({ ...props }) {

-          return <PreWithCopyBtn {...props} />;

-        },

-        code({ className, children, ...props }) {

-          const match = /language-(\w+)/.exec(className ?? "");

-          return match ? (

-            // @ts-expect-error -- Refs are not compatible for some reason

-            <SyntaxHighlighter

-              PreTag="div"

-              language={match[1]}

-              {...props}

-              style={dracula}

-            >

-              {String(children).replace(/\n$/, "")}

-            </SyntaxHighlighter>

-          ) : (

-            <code className={className} {...props}>

-              {children}

-            </code>

-          );

-        },

-      }}

-    >

-      {markdown}

-    </Markdown>

-  );

-}