@meta-1/editor 1.0.1 → 1.0.3

package/README.md

@@ -0,0 +1,218 @@
+# @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)
+

package/package.json

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

package/src/components/tiptap-node/heading-node/heading-node.css

@@ -8,26 +8,21 @@
     @apply relative;
     color: inherit;
     font-style: inherit;
-
-    &:first-child,
-    &:first-of-type {
-      @apply mt-0;
-    }
   }
 
   h1 {
-    @apply text-2xl font-bold mt-12;
+    @apply text-2xl font-bold;
   }
 
   h2 {
-    @apply text-xl font-bold mt-10;
+    @apply text-xl font-bold;
   }
 
   h3 {
-    @apply text-lg font-semibold mt-8;
+    @apply text-lg font-semibold;
   }
 
   h4 {
-    @apply text-base font-semibold mt-8;
+    @apply text-base font-semibold;
   }
 }

package/src/editor/index.tsx

@@ -69,34 +69,24 @@ 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, value, onChange, ...options } = props;
+  const { editor: editorInstance, ...options } = props;
 
   // Create the actual tiptap editor with value/onChange support
-  const tiptapEditor = useMeta1Editor({
-    ...options,
-    value,
-    onChange,
-  });
+  const tiptapEditor = useMeta1Editor(options);
 
   // Update the instance reference when editor changes
   useEffect(() => {
     if (editorInstance?._setEditor) {
       editorInstance._setEditor(tiptapEditor);
-      if (options.contentType) {
-        editorInstance._contentType = options.contentType;
-      }
+      editorInstance._nodeExclude = options.nodeExclude;
     }
     return () => {
       editorInstance?._setEditor?.(null);
     };
-  }, [tiptapEditor, editorInstance, options.contentType]);
+  }, [tiptapEditor, editorInstance, options.nodeExclude]);
 
   if (!tiptapEditor) {
     return null;

package/src/hooks/use-editor.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useRef } from "react";
 import { Highlight } from "@tiptap/extension-highlight";
 import { TaskItem, TaskList } from "@tiptap/extension-list";
 import { Mathematics } from "@tiptap/extension-mathematics";
@@ -46,6 +46,10 @@ export type Meta1EditorOptions = {
   contentType?: ContentType;
   editable?: boolean;
   imageUpload?: ImageUploadOptions;
+  value?: Meta1EditorValue;
+  onChange?: (content: Meta1EditorValue) => void;
+  /** Node types to exclude from output (e.g., ['imageUpload']) */
+  nodeExclude?: string[];
 };
 
 /**
@@ -54,13 +58,13 @@ 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 */
   getEditor: () => Editor | null;
-  /** Get current content as JSON */
+  /** Get current content as JSON (with nodeExclude filtering applied) */
   getJSON: () => Record<string, unknown> | null;
-  /** Get current content as HTML */
+  /** Get current content as HTML (with nodeExclude filtering applied) */
   getHTML: () => string | null;
   /** Get current content as Markdown */
   getMarkdown: () => string | null;
@@ -70,13 +74,63 @@ export interface Meta1EditorInstance {
   isEmpty: () => boolean;
 }
 
-const getValueFromEditor = (editor: Editor, contentType: ContentType): Meta1EditorValue => {
+/**
+ * Filter out excluded nodes from JSON content recursively
+ */
+const filterJsonNodes = (json: Record<string, unknown>, excludeTypes: string[]): Record<string, unknown> | null => {
+  if (excludeTypes.includes(json.type as string)) {
+    return null;
+  }
+
+  if (Array.isArray(json.content)) {
+    const filteredContent = json.content
+      .map((node) => filterJsonNodes(node as Record<string, unknown>, excludeTypes))
+      .filter((node): node is Record<string, unknown> => node !== null);
+
+    return {
+      ...json,
+      content: filteredContent,
+    };
+  }
+
+  return json;
+};
+
+/**
+ * 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");
+    result = result.replace(pattern, "");
+  }
+  return result;
+};
+
+const getValueFromEditor = (editor: Editor, contentType: ContentType, nodeExclude?: string[]): Meta1EditorValue => {
   switch (contentType) {
-    case "json":
-      return editor.getJSON();
-    case "html":
-      return editor.getHTML();
+    case "json": {
+      const json = editor.getJSON();
+      if (nodeExclude?.length) {
+        return filterJsonNodes(json, nodeExclude) ?? { type: "doc", content: [] };
+      }
+      return json;
+    }
+    case "html": {
+      const html = editor.getHTML();
+      if (nodeExclude?.length) {
+        return filterHtmlNodes(html, nodeExclude);
+      }
+      return html;
+    }
     case "markdown":
+      // Markdown doesn't output unsupported nodes, so no filtering needed
       return editor.getMarkdown();
     default:
       return JSON.stringify(editor.getJSON());
@@ -99,6 +153,7 @@ const getValueFromEditor = (editor: Editor, contentType: ContentType): Meta1Edit
 export const useEditorInstance = (): Meta1EditorInstance => {
   const editorRef = useRef<Editor | null>(null);
   const instanceRef = useRef<Meta1EditorInstance | null>(null);
+  const nodeExcludeRef = useRef<string[]>([]);
 
   const _setEditor = useCallback((editor: Editor | null) => {
     editorRef.current = editor;
@@ -107,10 +162,29 @@ export const useEditorInstance = (): Meta1EditorInstance => {
   if (!instanceRef.current) {
     instanceRef.current = {
       _setEditor,
-      _contentType: "json",
+      get _nodeExclude() {
+        return nodeExcludeRef.current;
+      },
+      set _nodeExclude(value: string[] | undefined) {
+        nodeExcludeRef.current = value ?? [];
+      },
       getEditor: () => editorRef.current,
-      getJSON: () => editorRef.current?.getJSON() ?? null,
-      getHTML: () => editorRef.current?.getHTML() ?? null,
+      getJSON: () => {
+        if (!editorRef.current) return null;
+        const json = editorRef.current.getJSON();
+        if (nodeExcludeRef.current.length) {
+          return filterJsonNodes(json, nodeExcludeRef.current) ?? { type: "doc", content: [] };
+        }
+        return json;
+      },
+      getHTML: () => {
+        if (!editorRef.current) return null;
+        const html = editorRef.current.getHTML();
+        if (nodeExcludeRef.current.length) {
+          return filterHtmlNodes(html, nodeExcludeRef.current);
+        }
+        return html;
+      },
       getMarkdown: () => editorRef.current?.getMarkdown() ?? null,
       focus: () => editorRef.current?.commands.focus(),
       isEmpty: () => editorRef.current?.isEmpty ?? true,
@@ -120,10 +194,7 @@ export const useEditorInstance = (): Meta1EditorInstance => {
   return instanceRef.current;
 };
 
-export type UseMeta1EditorProps = Meta1EditorOptions & {
-  value?: Meta1EditorValue;
-  onChange?: (content: Meta1EditorValue) => void;
-};
+export type UseMeta1EditorProps = Meta1EditorOptions;
 
 /**
  * Internal hook that creates the actual tiptap editor.
@@ -139,6 +210,7 @@ export const useMeta1Editor = (props: UseMeta1EditorProps) => {
     contentType = "json",
     editable = true,
     imageUpload,
+    nodeExclude,
   } = props;
   const isUpdatingFromPropsRef = useRef(false);
 
@@ -148,7 +220,7 @@ export const useMeta1Editor = (props: UseMeta1EditorProps) => {
     editable,
     onUpdate: ({ editor }) => {
       if (!isUpdatingFromPropsRef.current) {
-        onChange?.(getValueFromEditor(editor, contentType));
+        onChange?.(getValueFromEditor(editor, contentType, nodeExclude));
       }
     },
     editorProps: {
@@ -210,28 +282,5 @@ export const useMeta1Editor = (props: UseMeta1EditorProps) => {
     immediatelyRender: false,
   });
 
-  // Sync value from props to editor
-  useEffect(() => {
-    if (!editor || value === undefined) {
-      return;
-    }
-
-    const currentContent = getValueFromEditor(editor, contentType);
-    const isContentEqual =
-      typeof value === "string" && typeof currentContent === "string"
-        ? value === currentContent
-        : JSON.stringify(value) === JSON.stringify(currentContent);
-
-    if (!isContentEqual) {
-      queueMicrotask(() => {
-        isUpdatingFromPropsRef.current = true;
-        editor.commands.setContent(value);
-        requestAnimationFrame(() => {
-          isUpdatingFromPropsRef.current = false;
-        });
-      });
-    }
-  }, [editor, value, contentType]);
-
   return editor;
 };