@ctzhian/tiptap 1.6.4 → 1.6.6

package/README.md

@@ -3,39 +3,148 @@
 [![NPM version](https://img.shields.io/npm/v/@ctzhian/tiptap.svg?style=flat)](https://npmjs.org/package/@ctzhian/tiptap)
 [![NPM downloads](http://img.shields.io/npm/dm/@ctzhian/tiptap.svg?style=flat)](https://npmjs.org/package/@ctzhian/tiptap)
 
-A react library developed with dumi
+基于 Tiptap v3 二次开发的 React 富文本编辑器组件集，内置工具栏、主题、结构化 Diff、高亮、表格、附件/音视频/数学等常用扩展，开箱即用。
 
-## Usage
+- 核心能力：`useTiptap`、`Editor`、`EditorToolbar`、`EditorDiff`
+- 技术栈：React 18、Tiptap v3、MUI v7、Emotion 11
 
-TODO
+## 安装
 
-## Options
+```bash
+pnpm add @ctzhian/tiptap
+# 同时安装 peer 依赖
+pnpm add @mui/material @mui/icons-material @emotion/react @emotion/styled
+```
+
+样式（必须）：
+
+```ts
+import '@ctzhian/tiptap/dist/index.css';
+```
+
+## 快速开始
+
+```tsx
+import React from 'react';
+import {
+  EditorThemeProvider,
+  EditorToolbar,
+  Editor,
+  useTiptap,
+} from '@ctzhian/tiptap';
+import '@ctzhian/tiptap/dist/index.css';
+
+export default function Demo() {
+  const { editor } = useTiptap({
+    editable: true,
+    content: '<p>Hello Tiptap</p>',
+    exclude: ['invisibleCharacters'],
+    onSave: (ed) => console.log('save:', ed.getHTML()),
+  });
+
+  return (
+    <EditorThemeProvider mode="light">
+      <div
+        style={{
+          border: '1px solid #eee',
+          borderRadius: 10,
+          padding: '0 10px 10px',
+        }}
+      >
+        <div style={{ borderBottom: '1px solid #eee', marginBottom: 30 }}>
+          <EditorToolbar editor={editor} />
+        </div>
+        <Editor editor={editor} />
+      </div>
+    </EditorThemeProvider>
+  );
+}
+```
+
+## 模块说明
+
+### useTiptap（核心 Hook）
+
+创建并管理 Tiptap 实例，统一扩展与回调。
+
+- 常用入参：
+  - `editable?: boolean` 是否可编辑（默认 true）
+  - `content?: string | JSON` 初始内容
+  - `exclude?: string[]` 需要禁用的内置扩展名
+  - `extensions?: Extension[]` 自定义扩展
+  - `mentionItems?: string[]`、`onMentionFilter?: ({ query }) => Promise<string[]>`
+  - `onSave?(editor)`、`onError?(error)`
+  - `onUpload?(file, onProgress)` 自定义上传，返回可访问地址
+  - `onTocUpdate?(toc)`、`onAiWritingGetSuggestion?({ prefix, suffix }) => Promise<string>`
+- 返回：`{ editor, getText, getHTML, getJSON, getMarkdownByJSON }`
+
+```tsx
+const { editor } = useTiptap({
+  editable: true,
+  onSave: (ed) => console.log(ed.getHTML()),
+  onUpload: async (file, onProgress) => {
+    onProgress?.({ progress: 1 });
+    return 'https://example.com/file/url';
+  },
+});
+```
+
+### EditorToolbar（工具栏）
+
+与 `editor` 绑定的可视化工具栏：撤销/重做、标题/字号、加粗/斜体/上下标、颜色、列表、对齐、链接、更多菜单，以及 AI 伴写开关。
+
+- Props：`{ editor: Editor; menuInToolbarMore?: ToolbarItemType[] }`
 
-TODO
+```tsx
+<EditorToolbar
+  editor={editor}
+  menuInToolbarMore={[{ id: 'my-action', label: '自定义' }]}
+/>
+```
+
+### Editor（编辑区）
+
+渲染编辑区域，包含文字选择气泡菜单与拖拽锚点菜单。
+
+- Props：`{ editor: Editor; menuInDragHandle?: MenuItem[]; menuInBubbleMenu?: MenuItem[]; onTip?: (type, tip) => void }`
+
+```tsx
+<Editor editor={editor} />
+```
+
+### EditorDiff（结构化对比）
+
+以只读方式展示两段 HTML 的结构化差异。
+
+- Props：`{ oldHtml: string; newHtml: string }`
+
+```tsx
+<EditorDiff oldHtml={'<p>old</p>'} newHtml={'<p><strong>new</strong></p>'} />
+```
 
 ## Development
 
 ```bash
 # install dependencies
-$ pnpm install
+pnpm install
 
 # develop library by docs demo
-$ pnpm start
+pnpm start
 
 # build library source code
-$ pnpm run build
+pnpm run build
 
 # build library source code in watch mode
-$ pnpm run build:watch
+pnpm run build:watch
 
 # build docs
-$ pnpm run docs:build
+pnpm run docs:build
 
 # Locally preview the production build.
-$ pnpm run docs:preview
+pnpm run docs:preview
 
 # check your project for potential problems
-$ pnpm run doctor
+pnpm run doctor
 ```
 
 ## LICENSE

package/dist/component/Toolbar/EditorInsert/index.js

@@ -287,21 +287,6 @@ var EditorInsert = function EditorInsert(_ref) {
           });
         }
       }]
-    }, {
-      label: 'Iframe 链接',
-      key: 'iframe',
-      icon: /*#__PURE__*/React.createElement(WindowFillIcon, {
-        sx: {
-          fontSize: '1rem'
-        }
-      }),
-      onClick: function onClick() {
-        return editor.commands.setIframe({
-          src: '',
-          width: 760,
-          height: 400
-        });
-      }
     }, {
       customLabel: /*#__PURE__*/React.createElement(Typography, {
         sx: {

package/dist/index.css

@@ -3,7 +3,7 @@
 .tiptap.ProseMirror {
   overflow-y: auto;
   outline: none;
-  color: var(--mui-palette-text-secondary);
+  color: var(--mui-palette-text-primary);
 }
 
 /* 节点缩进（依赖 data-indent 属性） */
@@ -74,7 +74,6 @@
   margin: 0 0 20px;
   border-radius: 10px;
   border: 1px solid var(--mui-palette-divider);
-  color: var(--mui-palette-text-secondary);
   background-color: var(--mui-palette-background-paper3);
 }
 
@@ -291,7 +290,6 @@
   position: relative;
   color: inherit;
   font-style: inherit;
-  color: var(--mui-palette-text-primary);
 }
 
 .tiptap.ProseMirror h1 {
@@ -389,7 +387,6 @@
 .tiptap.ProseMirror table th {
   background-color: var(--mui-palette-background-paper3);
   font-weight: 600;
-  color: var(--mui-palette-text-primary);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   text-align: left;
@@ -556,7 +553,7 @@
 
 /* AI 续写建议样式 */
 .tiptap.ProseMirror .ai-writing-suggestion {
-  color: var(--mui-palette-text-disabled);
+  color: color-mix(in srgb, var(--mui-palette-text-primary) 15%, transparent);
   pointer-events: none;
   user-select: none;
   white-space: pre-wrap;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctzhian/tiptap",
-  "version": "1.6.4",
+  "version": "1.6.6",
   "description": "基于 Tiptap 二次开发的编辑器组件",
   "main": "dist/index.js",
   "module": "dist/index.js",