@groupher/rich-editor 0.0.9 → 0.0.11

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@groupher/rich-editor",
   "private": false,
-  "version": "0.0.9",
+  "version": "0.0.11",
   "main": "dist/rich-editor.umd.js",
   "module": "dist/rich-editor.es.js",
   "type": "module",
@@ -11,7 +11,7 @@
     "clean": "rm -rf dist",
     "typecheck": "tsc -p tsconfig.types.json",
     "build:vite": "vite build",
-    "publish": "npm publish --access public",
+    "release": "npm publish --access public",
     "preview": "vite preview"
   },
   "overrides": {

package/src/RichEditor.tsx

@@ -15,8 +15,6 @@ 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";
-
 const defaultValue: Value = [
 	{
 		type: "h1",
@@ -67,46 +65,58 @@ const defaultValue: Value = [
 	},
 ];
 
-type TRichEditorProps = {
+export type TRichEditorProps = {
+	value?: Value;
+	defaultValue?: Value;
+	onChange?: (value: Value) => void;
 	locale?: TLocale;
 	mentionOptions?: TMentionOption[];
 	onMentionSearch?: (query: string) => void;
 };
 
-function RichEditorInner() {
+type TRichEditorInnerProps = {
+	value?: Value;
+	defaultValue: Value;
+	onChange?: (value: Value) => void;
+};
+
+function RichEditorInner({
+	value: controlledValue,
+	defaultValue,
+	onChange,
+}: TRichEditorInnerProps) {
 	const i18n = useI18n();
+	const isControlled = controlledValue !== undefined;
 	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;
-		}
+		if (isControlled) return controlledValue;
+		return defaultValue;
 	});
+	const currentValue = isControlled ? controlledValue : value;
 	const [jsonInput, setJsonInput] = React.useState("");
 	const [jsonError, setJsonError] = React.useState("");
-	const [readOnlyValue, setReadOnlyValue] = React.useState<Value>(value);
+	const [readOnlyValue, setReadOnlyValue] = React.useState<Value>(currentValue);
 
 	const editor = usePlateEditor({
 		plugins: EditorKit,
-		value,
+		value: currentValue,
 	});
 	const readOnlyEditor = usePlateEditor({
 		plugins: EditorKit,
 		value: readOnlyValue,
 	});
 
+	React.useEffect(() => {
+		if (!isControlled) return;
+
+		editor.tf.setValue(controlledValue);
+	}, [controlledValue, editor, isControlled]);
+
 	const handleExport = React.useCallback(() => {
-		const nextJson = JSON.stringify(value, null, 2);
+		const nextJson = JSON.stringify(currentValue, null, 2);
 		setJsonInput(nextJson);
-		setReadOnlyValue(value);
+		setReadOnlyValue(currentValue);
 		setJsonError("");
-	}, [value]);
+	}, [currentValue]);
 
 	const handleRenderReadonly = React.useCallback(() => {
 		try {
@@ -127,8 +137,11 @@ function RichEditorInner() {
 		<Plate
 			editor={editor}
 			onChange={({ value }) => {
-				setValue(value);
-				localStorage.setItem(storageKey, JSON.stringify(value));
+				if (!isControlled) {
+					setValue(value);
+				}
+
+				onChange?.(value);
 			}}
 		>
 				<FloatingToolbar>
@@ -197,6 +210,9 @@ function RichEditorInner() {
 }
 
 export default function RichEditor({
+	value,
+	defaultValue: defaultValueProp = defaultValue,
+	onChange,
 	locale,
 	mentionOptions,
 	onMentionSearch,
@@ -207,7 +223,11 @@ export default function RichEditor({
 				mentionOptions={mentionOptions}
 				onMentionSearch={onMentionSearch}
 			>
-				<RichEditorInner />
+				<RichEditorInner
+					value={value}
+					defaultValue={defaultValueProp}
+					onChange={onChange}
+				/>
 			</MentionProvider>
 		</I18nProvider>
 	);