feat(web): add markdown round-trip and replace textarea with Tiptap (#501)

Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>

apps/web/src/components/knowledge/KnowledgeEditor.tsx

@@ -11,18 +11,20 @@ import { TableCell } from "@tiptap/extension-table-cell";
 import { TableHeader } from "@tiptap/extension-table-header";
 import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
 import Placeholder from "@tiptap/extension-placeholder";
+import { Markdown } from "tiptap-markdown";
 import { common, createLowlight } from "lowlight";
 import type { Editor } from "@tiptap/react";
+import type { MarkdownStorage } from "tiptap-markdown";
 
 import "./KnowledgeEditor.css";
 
 const lowlight = createLowlight(common);
 
 export interface KnowledgeEditorProps {
-  /** HTML content for the editor */
+  /** Markdown content for the editor */
   content: string;
-  /** Called when editor content changes (provides HTML) */
-  onChange: (html: string) => void;
+  /** Called when editor content changes (provides markdown) */
+  onChange: (markdown: string) => void;
   /** Placeholder text when editor is empty */
   placeholder?: string;
   /** Whether the editor is editable */
@@ -366,7 +368,11 @@ export function KnowledgeEditor({
 }: KnowledgeEditorProps): ReactElement {
   const handleUpdate = useCallback(
     ({ editor: e }: { editor: Editor }) => {
-      onChange(e.getHTML());
+      const s = e.storage as unknown as Record<string, MarkdownStorage>;
+      const mdStorage = s.markdown;
+      if (mdStorage) {
+        onChange(mdStorage.getMarkdown());
+      }
     },
     [onChange]
   );
@@ -395,6 +401,13 @@ export function KnowledgeEditor({
       Placeholder.configure({
         placeholder,
       }),
+      Markdown.configure({
+        html: true,
+        breaks: false,
+        tightLists: true,
+        transformPastedText: true,
+        transformCopiedText: true,
+      }),
     ],
     content,
     editable,