ToS Editor

src/components/items/commissions/tos/TosEditor.tsx

@@ -4,57 +4,107 @@ import type { Value } from 'platejs';
 
 import { BasicBlocksKit } from '@/components/editor/plugins/basic-blocks-kit';
 import { BasicMarksKit } from '@/components/editor/plugins/basic-marks-kit';
+import { MarkdownKit } from '@/components/editor/plugins/markdown-kit';
 import { Editor, EditorContainer } from '@/components/ui/editor';
 import { FixedToolbar } from '@/components/ui/fixed-toolbar';
 import { MarkToolbarButton } from '@/components/ui/mark-toolbar-button';
 import { ToolbarButton } from '@/components/ui/toolbar';
+import {
+  Bold,
+  Braces,
+  Code,
+  Heading1,
+  Heading2,
+  Heading3,
+  Italic,
+  Quote,
+  Save,
+  Strikethrough,
+  Underline
+} from "lucide-react";
 import { Plate, usePlateEditor } from 'platejs/react';
+import { useEffect } from 'react';
 
+import { saveTosAction } from '@/actions/items/commissions/tos/saveTosAction';
+import { CodeBlockKit } from '@/components/editor/plugins/code-block-kit';
+import { ListKit } from '@/components/editor/plugins/list-kit';
+import { BulletedListToolbarButton, NumberedListToolbarButton } from '@/components/ui/list-toolbar-button';
 
 const initialValue: Value = [
-  {
-    children: [{ text: 'Title' }],
-    type: 'h3',
-  },
-  {
-    children: [{ text: 'This is a quote.' }],
-    type: 'blockquote',
-  },
-  {
-    type: 'p',
-    children: [
-      { text: 'Hello! Try out the ' },
-      { text: 'bold', bold: true },
-      { text: ', ' },
-      { text: 'italic', italic: true },
-      { text: ', and ' },
-      { text: 'underline', underline: true },
-      { text: ' formatting.' },
-    ],
-  },
 ];
 
-export default function TosEditor() {
+
+export default function TosEditor({ markdown }: { markdown: string | null }) {
+  // const [isSaving, setIsSaving] = useState(false);
   const editor = usePlateEditor({
     plugins: [
       ...BasicBlocksKit,
+      ...CodeBlockKit,
+      ...ListKit,
       ...BasicMarksKit,
-    ], // Add the mark plugins
-    value: initialValue,         // Set initial content
+      ...MarkdownKit,
+    ],
+    value: initialValue,
   });
 
+  useEffect(() => {
+    if (markdown && editor.api.markdown.deserialize) {
+      const markdownValue = editor.api.markdown.deserialize(markdown);
+      console.log(markdownValue);
+      editor.children = markdownValue;
+    }
+  }, [editor, markdown]);
+
+  const handleSave = async () => {
+    console.log(editor);
+    if (!editor.api.markdown.serialize) return;
+    // setIsSaving(true);
+    const markdown = editor.api.markdown.serialize();
+    await saveTosAction(markdown);
+    // setIsSaving(false);
+  };
+
   return (
     <Plate editor={editor}>      {/* Provides editor context */}
       <FixedToolbar className="justify-start rounded-t-lg">
-        {/* Element Toolbar Buttons */}
-        <ToolbarButton onClick={() => editor.tf.h1.toggle()}>H1</ToolbarButton>
-        <ToolbarButton onClick={() => editor.tf.h2.toggle()}>H2</ToolbarButton>
-        <ToolbarButton onClick={() => editor.tf.h3.toggle()}>H3</ToolbarButton>
-        <ToolbarButton onClick={() => editor.tf.blockquote.toggle()}>Quote</ToolbarButton>
+        {/* Blocks */}
+        <ToolbarButton onClick={() => editor.tf.h1.toggle()} tooltip="Heading 1">
+          <Heading1 className="w-4 h-4" />
+        </ToolbarButton>
+        <ToolbarButton onClick={() => editor.tf.h2.toggle()} tooltip="Heading 2">
+          <Heading2 className="w-4 h-4" />
+        </ToolbarButton>
+        <ToolbarButton onClick={() => editor.tf.h3.toggle()} tooltip="Heading 3">
+          <Heading3 className="w-4 h-4" />
+        </ToolbarButton>
+        <ToolbarButton onClick={() => editor.tf.blockquote.toggle()} tooltip="Blockquote">
+          <Quote className="w-4 h-4" />
+        </ToolbarButton>
+        <ToolbarButton onClick={() => editor.tf.code_block.toggle()} tooltip="Code Block">
+          <Braces className="w-4 h-4" />
+        </ToolbarButton>
+        <BulletedListToolbarButton />
+        <NumberedListToolbarButton />
         {/* Mark Toolbar Buttons */}
-        <MarkToolbarButton nodeType="bold" tooltip="Bold (⌘+B)">B</MarkToolbarButton>
-        <MarkToolbarButton nodeType="italic" tooltip="Italic (⌘+I)">I</MarkToolbarButton>
-        <MarkToolbarButton nodeType="underline" tooltip="Underline (⌘+U)">U</MarkToolbarButton>
+        <MarkToolbarButton nodeType="bold" tooltip="Bold">
+          <Bold className="w-4 h-4" />
+        </MarkToolbarButton>
+        <MarkToolbarButton nodeType="italic" tooltip="Italic">
+          <Italic className="w-4 h-4" />
+        </MarkToolbarButton>
+        <MarkToolbarButton nodeType="underline" tooltip="Underline">
+          <Underline className="w-4 h-4" />
+        </MarkToolbarButton>
+        <MarkToolbarButton nodeType="strikethrough" tooltip="Strikethrough">
+          <Strikethrough className="w-4 h-4" />
+        </MarkToolbarButton>
+        <MarkToolbarButton nodeType="code" tooltip="Code">
+          <Code className="w-4 h-4" />
+        </MarkToolbarButton>
+        {/* Save Button */}
+        <ToolbarButton onClick={handleSave} tooltip="Save">
+          <Save className="w-4 h-4" />
+        </ToolbarButton>
       </FixedToolbar>
       <EditorContainer>         {/* Styles the editor area */}
         <Editor placeholder="Type your amazing content here..." />