基础

2026-09-12 05:45:17 +08:00 · 2026-07-10 22:38:58 +08:00
commit 34c7cf34fd
56 changed files with 16425 additions and 0 deletions
@@ -0,0 +1,127 @@
+"use client";
+
+import type { Editor, JSONContent } from "@/components/kibo-ui/editor";
+import {
+  EditorBubbleMenu,
+  EditorCharacterCount,
+  EditorClearFormatting,
+  EditorFloatingMenu,
+  EditorFormatBold,
+  EditorFormatCode,
+  EditorFormatItalic,
+  EditorFormatStrike,
+  EditorFormatSubscript,
+  EditorFormatSuperscript,
+  EditorFormatUnderline,
+  EditorLinkSelector,
+  EditorNodeBulletList,
+  EditorNodeCode,
+  EditorNodeHeading1,
+  EditorNodeHeading2,
+  EditorNodeHeading3,
+  EditorNodeOrderedList,
+  EditorNodeQuote,
+  EditorNodeTable,
+  EditorNodeTaskList,
+  EditorNodeText,
+  EditorProvider,
+  EditorSelector,
+  EditorTableColumnAfter,
+  EditorTableColumnBefore,
+  EditorTableColumnDelete,
+  EditorTableColumnMenu,
+  EditorTableDelete,
+  EditorTableFix,
+  EditorTableGlobalMenu,
+  EditorTableHeaderColumnToggle,
+  EditorTableHeaderRowToggle,
+  EditorTableMenu,
+  EditorTableMergeCells,
+  EditorTableRowAfter,
+  EditorTableRowBefore,
+  EditorTableRowDelete,
+  EditorTableRowMenu,
+  EditorTableSplitCell
+} from "@/components/kibo-ui/editor";
+import { useState } from "react";
+import { cn } from "@/lib/utils";
+
+interface NewsEditorProps {
+  className?: string
+}
+
+export default function NewsEditor({ className }: NewsEditorProps) {
+  const [content, setContent] = useState<JSONContent>({
+    type: "doc",
+    content: []
+  });
+
+    const handleUpdate = ({ editor }: { editor: Editor }) => {
+      const json = editor.getJSON();
+
+      setContent(json);
+      console.log(JSON.stringify(json));
+    };
+
+    return (
+      <EditorProvider
+        className={cn("h-full w-full overflow-y-auto rounded-lg border bg-background p-4", className)}
+        content={content}
+        onUpdate={handleUpdate}
+        placeholder="Start typing..."
+      >
+        <EditorFloatingMenu>
+          <EditorNodeHeading1 hideName />
+          <EditorNodeBulletList hideName />
+          <EditorNodeQuote hideName />
+          <EditorNodeCode hideName />
+          <EditorNodeTable hideName />
+        </EditorFloatingMenu>
+        <EditorBubbleMenu>
+          <EditorSelector title="Text">
+            <EditorNodeText />
+            <EditorNodeHeading1 />
+            <EditorNodeHeading2 />
+            <EditorNodeHeading3 />
+            <EditorNodeBulletList />
+            <EditorNodeOrderedList />
+            <EditorNodeTaskList />
+            <EditorNodeQuote />
+            <EditorNodeCode />
+          </EditorSelector>
+          <EditorSelector title="Format">
+            <EditorFormatBold />
+            <EditorFormatItalic />
+            <EditorFormatUnderline />
+            <EditorFormatStrike />
+            <EditorFormatCode />
+            <EditorFormatSuperscript />
+            <EditorFormatSubscript />
+          </EditorSelector>
+          <EditorLinkSelector />
+          <EditorClearFormatting />
+        </EditorBubbleMenu>
+        <EditorTableMenu>
+          <EditorTableColumnMenu>
+            <EditorTableColumnBefore />
+            <EditorTableColumnAfter />
+            <EditorTableColumnDelete />
+          </EditorTableColumnMenu>
+          <EditorTableRowMenu>
+            <EditorTableRowBefore />
+            <EditorTableRowAfter />
+            <EditorTableRowDelete />
+          </EditorTableRowMenu>
+          <EditorTableGlobalMenu>
+            <EditorTableHeaderColumnToggle />
+            <EditorTableHeaderRowToggle />
+            <EditorTableDelete />
+            <EditorTableMergeCells />
+            <EditorTableSplitCell />
+            <EditorTableFix />
+          </EditorTableGlobalMenu>
+        </EditorTableMenu>
+        <EditorCharacterCount.Words>Words: </EditorCharacterCount.Words>
+      </EditorProvider>
+    );
+};