@meta-1/editor 1.0.2 → 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.2",
+  "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;
   }
 }