@meta-1/editor 1.0.3 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meta-1/editor",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "keywords": [
     "meta",
     "tailwindcss",

package/src/editor/index.tsx

@@ -69,24 +69,35 @@ export function EditorContentArea() {
 export type Meta1EditorProps = Meta1EditorOptions & {
   /** Editor instance created by Meta1Editor.useEditor() */
   editor?: Meta1EditorInstance;
+  /** Controlled value - works with FormItem */
+  value?: Meta1EditorValue;
+  /** onChange callback - works with FormItem */
+  onChange?: (content: Meta1EditorValue) => void;
 };
 
 const Meta1EditorInner: FC<Meta1EditorProps> = (props) => {
-  const { editor: editorInstance, ...options } = props;
+  const { editor: editorInstance, value, onChange, ...options } = props;
 
   // Create the actual tiptap editor with value/onChange support
-  const tiptapEditor = useMeta1Editor(options);
+  const tiptapEditor = useMeta1Editor({
+    ...options,
+    value,
+    onChange,
+  });
 
   // Update the instance reference when editor changes
   useEffect(() => {
-    if (editorInstance?._setEditor) {
+    if (editorInstance?._setEditor && tiptapEditor) {
       editorInstance._setEditor(tiptapEditor);
+      if (options.contentType) {
+        editorInstance._contentType = options.contentType;
+      }
       editorInstance._nodeExclude = options.nodeExclude;
     }
     return () => {
       editorInstance?._setEditor?.(null);
     };
-  }, [tiptapEditor, editorInstance, options.nodeExclude]);
+  }, [tiptapEditor, editorInstance, options.contentType, options.nodeExclude]);
 
   if (!tiptapEditor) {
     return null;

package/src/hooks/use-editor.ts

@@ -1,4 +1,4 @@
-import { useCallback, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { Highlight } from "@tiptap/extension-highlight";
 import { TaskItem, TaskList } from "@tiptap/extension-list";
 import { Mathematics } from "@tiptap/extension-mathematics";
@@ -46,9 +46,7 @@ export type Meta1EditorOptions = {
   contentType?: ContentType;
   editable?: boolean;
   imageUpload?: ImageUploadOptions;
-  value?: Meta1EditorValue;
-  onChange?: (content: Meta1EditorValue) => void;
-  /** Node types to exclude from output (e.g., ['imageUpload']) */
+  /** Node types to exclude from output (e.g., ['imageUpload'] for filtering upload placeholders) */
   nodeExclude?: string[];
 };
 
@@ -58,6 +56,8 @@ export type Meta1EditorOptions = {
 export interface Meta1EditorInstance {
   /** Internal: set the actual editor reference */
   _setEditor?: (editor: Editor | null) => void;
+  /** Internal: set contentType for value conversion */
+  _contentType?: ContentType;
   /** Internal: set nodeExclude for filtering */
   _nodeExclude?: string[];
   /** Get the underlying tiptap Editor instance */
@@ -100,14 +100,12 @@ const filterJsonNodes = (json: Record<string, unknown>, excludeTypes: string[]):
  * Filter out excluded nodes from HTML content
  */
 const filterHtmlNodes = (html: string, excludeTypes: string[]): string => {
-  // Create patterns for each excluded type
-  // imageUpload renders as: <div data-type="image-upload" ...></div>
   let result = html;
   for (const type of excludeTypes) {
     // Convert camelCase to kebab-case for data-type attribute
     const kebabType = type.replace(/([A-Z])/g, "-$1").toLowerCase();
-    // Match self-closing or content divs with data-type
-    const pattern = new RegExp(`<div[^>]*data-type="${kebabType}"[^>]*>.*?</div>`, "gi");
+    // Match divs with data-type attribute (handles both self-closing and content divs)
+    const pattern = new RegExp(`<div[^>]*data-type="${kebabType}"[^>]*>.*?</div>`, "gis");
     result = result.replace(pattern, "");
   }
   return result;
@@ -130,7 +128,7 @@ const getValueFromEditor = (editor: Editor, contentType: ContentType, nodeExclud
       return html;
     }
     case "markdown":
-      // Markdown doesn't output unsupported nodes, so no filtering needed
+      // Markdown export typically doesn't include custom nodes like imageUpload
       return editor.getMarkdown();
     default:
       return JSON.stringify(editor.getJSON());
@@ -162,6 +160,7 @@ export const useEditorInstance = (): Meta1EditorInstance => {
   if (!instanceRef.current) {
     instanceRef.current = {
       _setEditor,
+      _contentType: "json",
       get _nodeExclude() {
         return nodeExcludeRef.current;
       },
@@ -194,7 +193,10 @@ export const useEditorInstance = (): Meta1EditorInstance => {
   return instanceRef.current;
 };
 
-export type UseMeta1EditorProps = Meta1EditorOptions;
+export type UseMeta1EditorProps = Meta1EditorOptions & {
+  value?: Meta1EditorValue;
+  onChange?: (content: Meta1EditorValue) => void;
+};
 
 /**
  * Internal hook that creates the actual tiptap editor.
@@ -210,9 +212,11 @@ export const useMeta1Editor = (props: UseMeta1EditorProps) => {
     contentType = "json",
     editable = true,
     imageUpload,
-    nodeExclude,
+    nodeExclude = ["imageUpload"],
   } = props;
   const isUpdatingFromPropsRef = useRef(false);
+  // Track the last value we sent via onChange to avoid sync loops
+  const lastEmittedValueRef = useRef<string | undefined>(undefined);
 
   const editor = useEditor({
     content: value,
@@ -220,7 +224,10 @@ export const useMeta1Editor = (props: UseMeta1EditorProps) => {
     editable,
     onUpdate: ({ editor }) => {
       if (!isUpdatingFromPropsRef.current) {
-        onChange?.(getValueFromEditor(editor, contentType, nodeExclude));
+        const newValue = getValueFromEditor(editor, contentType, nodeExclude);
+        const newValueStr = typeof newValue === "string" ? newValue : JSON.stringify(newValue);
+        lastEmittedValueRef.current = newValueStr;
+        onChange?.(newValue);
       }
     },
     editorProps: {
@@ -282,5 +289,27 @@ export const useMeta1Editor = (props: UseMeta1EditorProps) => {
     immediatelyRender: false,
   });
 
+  // Sync value from props to editor (only for external changes)
+  useEffect(() => {
+    if (!editor || value === undefined) {
+      return;
+    }
+
+    const valueStr = typeof value === "string" ? value : JSON.stringify(value);
+
+    if (lastEmittedValueRef.current === valueStr) {
+      return;
+    }
+
+    const currentContent = getValueFromEditor(editor, contentType, nodeExclude);
+    const currentStr = typeof currentContent === "string" ? currentContent : JSON.stringify(currentContent);
+
+    if (valueStr !== currentStr) {
+      isUpdatingFromPropsRef.current = true;
+      editor.commands.setContent(value);
+      isUpdatingFromPropsRef.current = false;
+    }
+  }, [editor, value, contentType, nodeExclude]);
+
   return editor;
 };

package/README.md

@@ -1,218 +0,0 @@
-# @meta-1/editor
-
-一个基于 [Tiptap](https://tiptap.dev) 构建的现代化富文本编辑器，提供类似 Notion 的编辑体验。
-
-[![npm version](https://img.shields.io/npm/v/@meta-1/editor.svg)](https://www.npmjs.com/package/@meta-1/editor)
-[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
-
-## ✨ 特性
-
-- 🎨 **类 Notion 编辑体验** - 支持斜杠命令、拖拽排序、浮动工具栏
-- 📝 **丰富的内容格式** - 标题、列表、引用、代码块、表格等
-- 🖼️ **图片上传** - 内置图片上传组件，支持自定义上传函数
-- 📊 **表格编辑** - 完整的表格支持，包括合并单元格、调整大小
-- 🔢 **数学公式** - 支持 LaTeX 数学公式渲染
-- 🎯 **多种输出格式** - 支持 JSON、HTML、Markdown 输出
-- 🌐 **国际化** - 内置中文简体、中文繁体、英文语言包
-- 🔄 **协作编辑** - 基于 Yjs 的实时协作支持
-
-## 📦 安装
-
-```bash
-pnpm add @meta-1/editor
-# 或
-npm install @meta-1/editor
-# 或
-yarn add @meta-1/editor
-```
-
-### Peer Dependencies
-
-```bash
-pnpm add react-i18next i18next
-```
-
-## 🚀 快速开始
-
-### 基础用法
-
-```tsx
-import { Meta1Editor } from "@meta-1/editor";
-import { useState } from "react";
-
-function App() {
-  const [content, setContent] = useState({});
-
-  return (
-    <Meta1Editor
-      value={content}
-      onChange={setContent}
-      placeholder="输入内容..."
-    />
-  );
-}
-```
-
-### 使用 Editor 实例
-
-```tsx
-import { Meta1Editor } from "@meta-1/editor";
-import { useState } from "react";
-
-function App() {
-  const editor = Meta1Editor.useEditor();
-  const [content, setContent] = useState({});
-
-  const handleSave = () => {
-    const json = editor.getJSON();
-    const html = editor.getHTML();
-    const markdown = editor.getMarkdown();
-    console.log({ json, html, markdown });
-  };
-
-  return (
-    <>
-      <Meta1Editor
-        editor={editor}
-        value={content}
-        onChange={setContent}
-        placeholder="输入内容..."
-      />
-      <button onClick={handleSave}>保存</button>
-    </>
-  );
-}
-```
-
-### 配置图片上传
-
-```tsx
-import { Meta1Editor } from "@meta-1/editor";
-
-function App() {
-  return (
-    <Meta1Editor
-      imageUpload={{
-        upload: async (file) => {
-          const formData = new FormData();
-          formData.append("file", file);
-          const response = await fetch("/api/upload", {
-            method: "POST",
-            body: formData,
-          });
-          const { url } = await response.json();
-          return url;
-        },
-        accept: "image/*",
-        maxSize: 5 * 1024 * 1024, // 5MB
-        limit: 3,
-        onError: (error) => console.error("上传失败:", error),
-        onSuccess: (url) => console.log("上传成功:", url),
-      }}
-    />
-  );
-}
-```
-
-### 设置内容类型
-
-```tsx
-// JSON 格式 (默认)
-<Meta1Editor contentType="json" />
-
-// HTML 格式
-<Meta1Editor contentType="html" />
-
-// Markdown 格式
-<Meta1Editor contentType="markdown" />
-```
-
-## 📖 API
-
-### Meta1Editor Props
-
-| 属性 | 类型 | 默认值 | 说明 |
-|------|------|--------|------|
-| `value` | `string \| Record<string, unknown>` | - | 编辑器内容 |
-| `onChange` | `(content: Meta1EditorValue) => void` | - | 内容变化回调 |
-| `editor` | `Meta1EditorInstance` | - | 编辑器实例 |
-| `placeholder` | `string` | - | 占位符文本 |
-| `contentType` | `'json' \| 'html' \| 'markdown'` | `'json'` | 内容格式 |
-| `editable` | `boolean` | `true` | 是否可编辑 |
-| `imageUpload` | `ImageUploadOptions` | - | 图片上传配置 |
-| `nodeExclude` | `string[]` | - | 输出时排除的节点类型 |
-| `extensions` | `Extensions` | - | 额外的 Tiptap 扩展 |
-| `className` | `string` | - | 自定义 CSS 类名 |
-
-### Meta1EditorInstance 方法
-
-| 方法 | 返回类型 | 说明 |
-|------|----------|------|
-| `getEditor()` | `Editor \| null` | 获取底层 Tiptap Editor 实例 |
-| `getJSON()` | `Record<string, unknown> \| null` | 获取 JSON 格式内容 |
-| `getHTML()` | `string \| null` | 获取 HTML 格式内容 |
-| `getMarkdown()` | `string \| null` | 获取 Markdown 格式内容 |
-| `focus()` | `void` | 聚焦编辑器 |
-| `isEmpty()` | `boolean` | 检查编辑器是否为空 |
-
-### ImageUploadOptions
-
-| 属性 | 类型 | 默认值 | 说明 |
-|------|------|--------|------|
-| `upload` | `(file: File) => Promise<string>` | - | 上传函数，返回图片 URL |
-| `accept` | `string` | `'image/*'` | 接受的文件类型 |
-| `maxSize` | `number` | `10MB` | 最大文件大小 (bytes) |
-| `limit` | `number` | `3` | 最大同时上传数量 |
-| `onError` | `(error: Error) => void` | - | 上传错误回调 |
-| `onSuccess` | `(url: string) => void` | - | 上传成功回调 |
-
-## 🌐 国际化
-
-编辑器内置多语言支持，可通过以下方式导入语言包：
-
-```tsx
-import zhCN from "@meta-1/editor/locales/zh-CN";
-import zhTW from "@meta-1/editor/locales/zh-TW";
-import en from "@meta-1/editor/locales/en";
-
-// 配置 i18next
-i18n.init({
-  resources: {
-    "zh-CN": { editor: zhCN },
-    "zh-TW": { editor: zhTW },
-    en: { editor: en },
-  },
-});
-```
-
-## 🎨 内置功能
-
-### 文本格式
-- 粗体、斜体、下划线、删除线
-- 文字颜色、背景高亮
-- 上标、下标
-- 行内代码
-
-### 块级元素
-- 标题 (H1-H6)
-- 段落
-- 有序列表、无序列表、任务列表
-- 引用块
-- 代码块
-- 表格
-- 分割线
-- 图片
-
-### 高级功能
-- 斜杠命令菜单 (`/`)
-- @ 提及功能
-- 拖拽排序
-- 浮动工具栏
-- 数学公式 (LaTeX)
-- 文本对齐
-- 节点唯一 ID
-
-## 📄 License
-
-[MIT](https://opensource.org/licenses/MIT)
-