@groupher/rich-editor 0.0.8 → 0.0.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@groupher/rich-editor",
   "private": false,
-  "version": "0.0.8",
+  "version": "0.0.9",
   "main": "dist/rich-editor.umd.js",
   "module": "dist/rich-editor.es.js",
   "type": "module",
@@ -20,14 +20,29 @@
     "slate-react": "0.117.4"
   },
   "dependencies": {
-    "@groupher/rich-editor": "^0.0.7",
+    "@groupher/rich-editor": "^0.0.8",
+    "@ariakit/react": "^0.4.12",
+    "@emoji-mart/data": "^1.2.1",
     "@platejs/basic-nodes": "^49.0.0",
+    "@platejs/autoformat": "^49.0.0",
+    "@platejs/callout": "^49.0.0",
+    "@platejs/combobox": "^49.0.0",
+    "@platejs/emoji": "^49.0.0",
+    "@platejs/floating": "^49.0.0",
+    "@platejs/indent": "^49.0.0",
+    "@platejs/link": "^49.0.0",
+    "@platejs/list": "^49.0.0",
+    "@platejs/mention": "^49.0.0",
+    "@platejs/slash-command": "^49.0.0",
+    "@platejs/toggle": "^49.0.0",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-toolbar": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "@radix-ui/react-popover": "^1.1.7",
     "@tailwindcss/vite": "^4.1.12",
+    "@udecode/cn": "^44.0.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.542.0",

package/src/RichEditor.tsx

@@ -1,102 +1,214 @@
+import * as React from "react";
+
 import type { Value } from "platejs";
 
-import {
-  BlockquotePlugin,
-  H1Plugin,
-  H2Plugin,
-  H3Plugin,
-  BoldPlugin,
-  ItalicPlugin,
-  UnderlinePlugin,
-} from "@platejs/basic-nodes/react";
+import { Bold, Italic, Strikethrough, Underline } from "lucide-react";
 import { Plate, usePlateEditor } from "platejs/react";
 
+import { EditorKit } from "@/components/editor/editor-kit";
+import { ActionBar } from "@/components/ui/action-bar";
+import { Button } from "@/components/ui/button";
 import { Editor, EditorContainer } from "@/components/ui/editor";
-import { BlockquoteElement } from "@/components/ui/blockquote-node";
-import { H1Element, H2Element, H3Element } from "@/components/ui/heading-node";
-import { ToolbarButton } from "@/components/ui/toolbar"; // Generic toolbar button
-
-import { FixedToolbar } from "@/components/ui/fixed-toolbar";
+import { FloatingToolbar } from "@/components/ui/floating-toolbar";
+import { LinkToolbarButton } from "@/components/ui/link-toolbar-button";
 import { MarkToolbarButton } from "@/components/ui/mark-toolbar-button";
+import { I18nProvider, type TLocale, useI18n } from "@/i18n";
+import { MentionProvider, type TMentionOption } from "@/mention-context";
+
+const storageKey = "groupher-rich-editor-value";
 
-import { EditorStatic } from "@/components/ui/editor-static";
-
-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." },
-    ],
-  },
+const defaultValue: Value = [
+	{
+		type: "h1",
+		children: [{ text: "Plate Editor" }],
+	},
+	{
+		type: "p",
+		children: [
+			{ text: "Use " },
+			{ text: "/", bold: true },
+			{ text: " to open the slash menu and " },
+			{ text: "@", bold: true },
+			{ text: " to mention." },
+		],
+	},
+	{
+		type: "blockquote",
+		children: [{ text: "A short quote block for emphasis." }],
+	},
+	{
+		type: "callout",
+		icon: "💡",
+		children: [{ text: "Callout blocks highlight important notes." }],
+	},
+	{
+		type: "toggle",
+		id: "toggle-1",
+		children: [{ text: "Toggle blocks can hide content." }],
+	},
+	{
+		type: "p",
+		indent: 1,
+		listStyleType: "disc",
+		children: [{ text: "Bulleted list item." }],
+	},
+	{
+		type: "p",
+		indent: 1,
+		listStyleType: "decimal",
+		children: [{ text: "Numbered list item." }],
+	},
+	{
+		type: "p",
+		indent: 1,
+		listStyleType: "todo",
+		checked: false,
+		children: [{ text: "Todo list item." }],
+	},
 ];
 
-export default function RichEditor() {
-  const editor = usePlateEditor({
-    plugins: [
-      BoldPlugin,
-      ItalicPlugin,
-      UnderlinePlugin,
-      H1Plugin.withComponent(H1Element),
-      H2Plugin.withComponent(H2Element),
-      H3Plugin.withComponent(H3Element),
-      BlockquotePlugin.withComponent(BlockquoteElement),
-    ], // mark plugins
-    // value: initialValue, // initial content
-    value: () => {
-      const savedValue = localStorage.getItem("installation-react-demo");
-      return savedValue ? JSON.parse(savedValue) : initialValue;
-    },
-  });
-
-  return (
-    <div className="m-5 debug">
-      <Plate
-        editor={editor}
-        onChange={({ value }) => {
-          console.log("## on change: ", value)
-          localStorage.setItem("installation-react-demo", JSON.stringify(value));
-        }}
-      >
-        <FixedToolbar className="justify-start rounded-t-lg">
-          <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>
-
-          <MarkToolbarButton nodeType="bold" tooltip="Bold (⌘+B)">
-            B
-          </MarkToolbarButton>
-          <MarkToolbarButton nodeType="italic" tooltip="Italic (⌘+I)">
-            I
-          </MarkToolbarButton>
-          <MarkToolbarButton nodeType="underline" tooltip="Underline (⌘+U)">
-            U
-          </MarkToolbarButton>
-
-          <div className="flex-1" />
-          <ToolbarButton className="px-2" onClick={() => editor.tf.setValue(initialValue)}>
-            Reset
-          </ToolbarButton>
-        </FixedToolbar>
-        <EditorContainer>
-          <Editor placeholder="Type your amazing content here..." />
-          <EditorStatic editor={editor} />
-        </EditorContainer>
-      </Plate>
-    </div>
-  );
+type TRichEditorProps = {
+	locale?: TLocale;
+	mentionOptions?: TMentionOption[];
+	onMentionSearch?: (query: string) => void;
+};
+
+function RichEditorInner() {
+	const i18n = useI18n();
+	const [value, setValue] = React.useState<Value>(() => {
+		if (typeof window === "undefined") return defaultValue;
+
+		const savedValue = localStorage.getItem(storageKey);
+
+		if (!savedValue) return defaultValue;
+
+		try {
+			return JSON.parse(savedValue) as Value;
+		} catch {
+			return defaultValue;
+		}
+	});
+	const [jsonInput, setJsonInput] = React.useState("");
+	const [jsonError, setJsonError] = React.useState("");
+	const [readOnlyValue, setReadOnlyValue] = React.useState<Value>(value);
+
+	const editor = usePlateEditor({
+		plugins: EditorKit,
+		value,
+	});
+	const readOnlyEditor = usePlateEditor({
+		plugins: EditorKit,
+		value: readOnlyValue,
+	});
+
+	const handleExport = React.useCallback(() => {
+		const nextJson = JSON.stringify(value, null, 2);
+		setJsonInput(nextJson);
+		setReadOnlyValue(value);
+		setJsonError("");
+	}, [value]);
+
+	const handleRenderReadonly = React.useCallback(() => {
+		try {
+			const parsed = JSON.parse(jsonInput) as Value;
+			setReadOnlyValue(parsed);
+			setJsonError("");
+		} catch {
+			setJsonError(i18n.export.invalidJson);
+		}
+	}, [i18n.export.invalidJson, jsonInput]);
+
+	React.useEffect(() => {
+		readOnlyEditor.tf.setValue(readOnlyValue);
+	}, [readOnlyEditor, readOnlyValue]);
+
+	return (
+		<div className="m-6 space-y-6">
+		<Plate
+			editor={editor}
+			onChange={({ value }) => {
+				setValue(value);
+				localStorage.setItem(storageKey, JSON.stringify(value));
+			}}
+		>
+				<FloatingToolbar>
+					<MarkToolbarButton nodeType="bold" tooltip={i18n.toolbar.bold}>
+						<Bold className="size-4" />
+					</MarkToolbarButton>
+					<MarkToolbarButton nodeType="italic" tooltip={i18n.toolbar.italic}>
+						<Italic className="size-4" />
+					</MarkToolbarButton>
+					<MarkToolbarButton
+						nodeType="underline"
+						tooltip={i18n.toolbar.underline}
+					>
+						<Underline className="size-4" />
+					</MarkToolbarButton>
+					<MarkToolbarButton
+						nodeType="strikethrough"
+						tooltip={i18n.toolbar.strikethrough}
+					>
+						<Strikethrough className="size-4" />
+					</MarkToolbarButton>
+					<LinkToolbarButton />
+				</FloatingToolbar>
+
+			<EditorContainer>
+				<Editor placeholder={i18n.placeholder} />
+				<ActionBar />
+			</EditorContainer>
+		</Plate>
+
+			<div className="rounded-lg border border-border bg-card p-4">
+				<div className="flex flex-wrap items-center justify-between gap-3">
+					<h3 className="text-sm font-semibold">{i18n.export.title}</h3>
+					<div className="flex items-center gap-2">
+						<Button size="sm" onClick={handleExport}>
+							{i18n.export.button}
+						</Button>
+						<Button size="sm" variant="outline" onClick={handleRenderReadonly}>
+							{i18n.export.loadButton}
+						</Button>
+					</div>
+				</div>
+				<textarea
+					className="mt-3 h-40 w-full rounded-md border border-input bg-background p-3 text-xs font-mono text-foreground"
+					placeholder={i18n.export.placeholder}
+					value={jsonInput}
+					onChange={(event) => setJsonInput(event.target.value)}
+				/>
+				{jsonError ? (
+					<p className="mt-2 text-xs text-destructive">{jsonError}</p>
+				) : null}
+			</div>
+
+			<div className="rounded-lg border border-border bg-card">
+				<div className="border-b border-border px-4 py-2 text-sm font-semibold">
+					{i18n.export.readonlyTitle}
+				</div>
+				<Plate editor={readOnlyEditor} readOnly>
+					<EditorContainer>
+						<Editor variant="demo" />
+					</EditorContainer>
+				</Plate>
+			</div>
+		</div>
+	);
+}
+
+export default function RichEditor({
+	locale,
+	mentionOptions,
+	onMentionSearch,
+}: TRichEditorProps) {
+	return (
+		<I18nProvider locale={locale}>
+			<MentionProvider
+				mentionOptions={mentionOptions}
+				onMentionSearch={onMentionSearch}
+			>
+				<RichEditorInner />
+			</MentionProvider>
+		</I18nProvider>
+	);
 }

package/src/components/editor/editor-kit.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { BasicBlocksKit } from '@/components/editor/plugins/basic-blocks-kit';
+import { BasicMarksKit } from '@/components/editor/plugins/basic-marks-kit';
+import { AutoformatKit } from '@/components/editor/plugins/autoformat-kit';
+import { CalloutKit } from '@/components/editor/plugins/callout-kit';
+import { EmojiKit } from '@/components/editor/plugins/emoji-kit';
+import { IndentKit } from '@/components/editor/plugins/indent-kit';
+import { LinkKit } from '@/components/editor/plugins/link-kit';
+import { ListKit } from '@/components/editor/plugins/list-kit';
+import { MentionKit } from '@/components/editor/plugins/mention-kit';
+import { SlashKit } from '@/components/editor/plugins/slash-kit';
+import { ToggleKit } from '@/components/editor/plugins/toggle-kit';
+
+export const EditorKit = [
+  ...BasicBlocksKit,
+  ...BasicMarksKit,
+  ...AutoformatKit,
+  ...EmojiKit,
+  ...IndentKit,
+  ...ListKit,
+  ...ToggleKit,
+  ...CalloutKit,
+  ...LinkKit,
+  ...MentionKit,
+  ...SlashKit,
+];

package/src/components/editor/plugins/autoformat-kit.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import type { AutoformatRule } from '@platejs/autoformat';
+
+import { AutoformatPlugin } from '@platejs/autoformat';
+import { toggleList } from '@platejs/list';
+import { KEYS } from 'platejs';
+import type { PlateEditor } from 'platejs/react';
+
+const autoformatBlocks: AutoformatRule[] = [
+  {
+    match: '# ',
+    mode: 'block',
+    type: KEYS.h1,
+  },
+  {
+    match: '## ',
+    mode: 'block',
+    type: KEYS.h2,
+  },
+  {
+    match: '### ',
+    mode: 'block',
+    type: KEYS.h3,
+  },
+  {
+    match: '> ',
+    mode: 'block',
+    type: KEYS.blockquote,
+  },
+];
+
+const autoformatLists: AutoformatRule[] = [
+  {
+    match: ['* ', '- '],
+    mode: 'block',
+    type: 'list',
+    format: (editor: PlateEditor) => {
+      toggleList(editor, {
+        listStyleType: KEYS.ul,
+      });
+    },
+  },
+  {
+    match: [String.raw`^\d+\.$ `, String.raw`^\d+\)$ `],
+    matchByRegex: true,
+    mode: 'block',
+    type: 'list',
+    format: (editor: PlateEditor, { matchString }: { matchString: string }) => {
+      toggleList(editor, {
+        listRestartPolite: Number(matchString) || 1,
+        listStyleType: KEYS.ol,
+      });
+    },
+  },
+  {
+    match: ['[] '],
+    mode: 'block',
+    type: 'list',
+    format: (editor: PlateEditor) => {
+      toggleList(editor, {
+        listStyleType: KEYS.listTodo,
+      });
+      editor.tf.setNodes({
+        checked: false,
+        listStyleType: KEYS.listTodo,
+      });
+    },
+  },
+  {
+    match: ['[x] '],
+    mode: 'block',
+    type: 'list',
+    format: (editor: PlateEditor) => {
+      toggleList(editor, {
+        listStyleType: KEYS.listTodo,
+      });
+      editor.tf.setNodes({
+        checked: true,
+        listStyleType: KEYS.listTodo,
+      });
+    },
+  },
+];
+
+export const AutoformatKit = [
+  AutoformatPlugin.configure({
+    options: {
+      enableUndoOnDelete: true,
+      rules: [...autoformatBlocks, ...autoformatLists].map((rule) => ({
+        ...rule,
+        query: (editor: PlateEditor) =>
+          !editor.api.some({
+            match: { type: editor.getType(KEYS.codeBlock) },
+          }),
+      })),
+    },
+  }),
+];

package/src/components/editor/plugins/callout-kit.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import { CalloutPlugin } from '@platejs/callout/react';
+
+import { CalloutElement } from '@/components/ui/callout-node';
+
+export const CalloutKit = [CalloutPlugin.withComponent(CalloutElement)];

package/src/components/editor/plugins/emoji-kit.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import emojiMartData from '@emoji-mart/data';
+import type { EmojiMartData } from '@emoji-mart/data';
+import { EmojiInputPlugin, EmojiPlugin } from '@platejs/emoji/react';
+
+import { EmojiInputElement } from '@/components/ui/emoji-node';
+
+export const EmojiKit = [
+  EmojiPlugin.configure({
+    options: { data: emojiMartData as EmojiMartData },
+  }),
+  EmojiInputPlugin.withComponent(EmojiInputElement),
+];

package/src/components/editor/plugins/indent-kit.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import { IndentPlugin } from '@platejs/indent/react';
+import { KEYS } from 'platejs';
+
+export const IndentKit = [
+  IndentPlugin.configure({
+    inject: {
+      targetPlugins: [...KEYS.heading, KEYS.p, KEYS.blockquote, KEYS.toggle],
+    },
+  }),
+];

package/src/components/editor/plugins/link-kit.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { LinkPlugin } from '@platejs/link/react';
+
+import { LinkElement } from '@/components/ui/link-node';
+
+export const LinkKit = [
+  LinkPlugin.configure({
+    render: {
+      node: LinkElement,
+    },
+  }),
+];

package/src/components/editor/plugins/list-kit.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { ListPlugin } from '@platejs/list/react';
+import { KEYS } from 'platejs';
+
+import { BlockList } from '@/components/ui/block-list';
+
+export const ListKit = [
+  ListPlugin.configure({
+    inject: {
+      targetPlugins: [...KEYS.heading, KEYS.p, KEYS.blockquote, KEYS.toggle],
+    },
+    render: {
+      belowNodes: BlockList,
+    },
+  }),
+];

package/src/components/editor/plugins/mention-kit.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { MentionInputPlugin, MentionPlugin } from '@platejs/mention/react';
+
+import {
+  MentionElement,
+  MentionInputElement,
+} from '@/components/ui/mention-node';
+
+export const MentionKit = [
+  MentionPlugin.configure({
+    options: {
+      triggerPreviousCharPattern: /^$|^[\s"']$/,
+    },
+  }).withComponent(MentionElement),
+  MentionInputPlugin.withComponent(MentionInputElement),
+];

package/src/components/editor/plugins/slash-kit.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { SlashInputPlugin, SlashPlugin } from '@platejs/slash-command/react';
+
+import { SlashInputElement } from '@/components/ui/slash-node';
+
+export const SlashKit = [
+  SlashPlugin.configure({
+    options: {
+      trigger: '/',
+      triggerPreviousCharPattern: /^\s?$/,
+    },
+  }),
+  SlashInputPlugin.withComponent(SlashInputElement),
+];

package/src/components/editor/plugins/toggle-kit.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import { TogglePlugin } from '@platejs/toggle/react';
+
+import { ToggleElement } from '@/components/ui/toggle-node';
+
+export const ToggleKit = [TogglePlugin.withComponent(ToggleElement)];