Add guidelines

2025-12-27 12:59:42 +01:00
parent 13685d100c
commit 9d18b6da02
7 changed files with 186 additions and 1 deletions
--- a/src/components/commissions/guidelines/Editor.tsx
+++ b/src/components/commissions/guidelines/Editor.tsx
@ -0,0 +1,113 @@
+"use client"
+
+import type { Value } from 'platejs';
+
+import { saveGuidelines } from '@/actions/commissions/guidelines/saveGuidelines';
+import { BasicBlocksKit } from '@/components/editor/plugins/basic-blocks-kit';
+import { BasicMarksKit } from '@/components/editor/plugins/basic-marks-kit';
+import { CodeBlockKit } from '@/components/editor/plugins/code-block-kit';
+import { ListKit } from '@/components/editor/plugins/list-kit';
+import { MarkdownKit } from '@/components/editor/plugins/markdown-kit';
+import { Editor, EditorContainer } from '@/components/ui/editor';
+import { FixedToolbar } from '@/components/ui/fixed-toolbar';
+import { BulletedListToolbarButton, NumberedListToolbarButton } from '@/components/ui/list-toolbar-button';
+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';
+
+const initialValue: Value = [
+];
+
+
+export default function GuidelinesEditor({ markdown }: { markdown: string | null }) {
+  // const [isSaving, setIsSaving] = useState(false);
+  const editor = usePlateEditor({
+    plugins: [
+      ...BasicBlocksKit,
+      ...CodeBlockKit,
+      ...ListKit,
+      ...BasicMarksKit,
+      ...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 saveGuidelines(markdown);
+    // setIsSaving(false);
+  };
+
+  return (
+    <Plate editor={editor}>      {/* Provides editor context */}
+      <FixedToolbar className="justify-start rounded-t-lg">
+        {/* 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">
+          <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..." />
+      </EditorContainer>
+    </Plate>
+  );
+}