@ctzhian/tiptap 1.6.5 → 1.6.7

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/Editor/demo.js

@@ -102,7 +102,7 @@ var Reader = function Reader() {
         }
         return onUpload;
       }(),
-      content: ""
+      content: "<p>Hello Tiptap</p><p></p>"
     }),
     editor = _useTiptap.editor;
   return /*#__PURE__*/React.createElement(EditorThemeProvider, {

package/dist/component/CustomDragHandle/index.js

@@ -370,10 +370,7 @@ var CustomDragHandle = function CustomDragHandle(_ref3) {
       key: 'insert-divider',
       onClick: function onClick() {
         if (current.node && current.pos !== undefined) {
-          var afterPos = current.pos + current.node.nodeSize;
-          current.editor.chain().focus().insertContentAt(afterPos, {
-            type: 'horizontalRule'
-          }).run();
+          current.editor.chain().focus().setHorizontalRule().run();
         }
       },
       icon: /*#__PURE__*/React.createElement(SeparatorIcon, {
@@ -1066,7 +1063,7 @@ var CustomDragHandle = function CustomDragHandle(_ref3) {
         }),
         key: 'divider3'
       }, {
-        label: '引用块',
+        label: '引用',
         selected: ((_current$node13 = current.node) === null || _current$node13 === void 0 ? void 0 : _current$node13.type.name) === 'blockquote',
         key: 'convert-to-blockquote',
         icon: /*#__PURE__*/React.createElement(QuoteTextIcon, {

package/dist/component/Icons/index.d.ts

@@ -120,6 +120,7 @@ export { TitleIcon } from './title-icon';
 export { UnderlineIcon } from './underline-icon';
 export { UploadCloud2LineIcon } from './upload-cloud-2-line-icon';
 export { UploadIcon } from './upload-icon';
+export { UserSmileFillIcon } from './user-smile-fill-icon';
 export { VolumeMuteLineIcon } from './volume-mute-line-icon';
 export { VolumeUpLineIcon } from './volume-up-line-icon';
 export { WindowFillIcon } from './window-fill-icon';

package/dist/component/Icons/index.js

@@ -123,6 +123,7 @@ export { TitleIcon } from "./title-icon";
 export { UnderlineIcon } from "./underline-icon";
 export { UploadCloud2LineIcon } from "./upload-cloud-2-line-icon";
 export { UploadIcon } from "./upload-icon";
+export { UserSmileFillIcon } from "./user-smile-fill-icon";
 export { VolumeMuteLineIcon } from "./volume-mute-line-icon";
 export { VolumeUpLineIcon } from "./volume-up-line-icon";
 export { WindowFillIcon } from "./window-fill-icon";

package/dist/component/Icons/user-smile-fill-icon.d.ts

@@ -0,0 +1,6 @@
+import { SvgIconProps } from "@mui/material";
+import * as React from "react";
+export declare const UserSmileFillIcon: {
+    (props: SvgIconProps): React.JSX.Element;
+    displayName: string;
+};

package/dist/component/Icons/user-smile-fill-icon.js

@@ -0,0 +1,13 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import { SvgIcon } from "@mui/material";
+import * as React from "react";
+export var UserSmileFillIcon = function UserSmileFillIcon(props) {
+  return /*#__PURE__*/React.createElement(SvgIcon, _extends({
+    viewBox: "0 0 24 24",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM7 12C7 14.7614 9.23858 17 12 17C14.7614 17 17 14.7614 17 12H15C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12H7Z"
+  }));
+};
+UserSmileFillIcon.displayName = 'icon-user-smile-fill';

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

@@ -1,7 +1,7 @@
 import { getShortcutKeyText } from "../../../util";
 import { Typography } from '@mui/material';
 import React from 'react';
-import { AddCircleFillIcon, ArrowDownSLineIcon, AttachmentLineIcon, CheckboxCircleFillIcon, CloseCircleFillIcon, CodeBoxLineIcon, CodeLineIcon, CodeSSlashLineIcon, DoubleQuotesLIcon, ErrorWarningFillIcon, Folder2LineIcon, FormulaIcon, FunctionsIcon, ImageLineIcon, Information2FillIcon, Information2LineIcon, MenuFold2FillIcon, MovieLineIcon, Music2LineIcon, SeparatorIcon, SquareRootIcon, Table2Icon, WindowFillIcon } from "../../Icons";
+import { AddCircleFillIcon, ArrowDownSLineIcon, AttachmentLineIcon, CheckboxCircleFillIcon, CloseCircleFillIcon, CodeBoxLineIcon, CodeLineIcon, CodeSSlashLineIcon, DoubleQuotesLIcon, ErrorWarningFillIcon, Folder2LineIcon, FormulaIcon, FunctionsIcon, ImageLineIcon, Information2FillIcon, Information2LineIcon, MenuFold2FillIcon, MovieLineIcon, Music2LineIcon, SeparatorIcon, SquareRootIcon, Table2Icon, UserSmileFillIcon, WindowFillIcon } from "../../Icons";
 import Menu from "../../Menu";
 import ToolbarItem from "../Item";
 import TableSizePicker from "../TableSizePicker";
@@ -180,12 +180,10 @@ var EditorInsert = function EditorInsert(_ref) {
         }
       }),
       onClick: function onClick() {
-        return editor.commands.insertContentAt(editor.state.selection.from, {
-          type: 'horizontalRule'
-        });
+        return editor.chain().focus().setHorizontalRule().run();
       }
     }, {
-      label: '引用块',
+      label: '引用',
       key: 'blockquote',
       icon: /*#__PURE__*/React.createElement(DoubleQuotesLIcon, {
         sx: {
@@ -202,7 +200,7 @@ var EditorInsert = function EditorInsert(_ref) {
         return editor.chain().focus().toggleBlockquote().run();
       }
     }, {
-      label: '折叠块',
+      label: '折叠面板',
       key: 'details',
       icon: /*#__PURE__*/React.createElement(MenuFold2FillIcon, {
         sx: {
@@ -236,10 +234,10 @@ var EditorInsert = function EditorInsert(_ref) {
           }
         }),
         onClick: function onClick() {
-          editor.commands.setAlert({
+          editor.chain().focus().setAlert({
             type: 'icon',
             variant: 'info'
-          });
+          }).run();
         }
       }, {
         label: '警告 Warning',
@@ -251,10 +249,10 @@ var EditorInsert = function EditorInsert(_ref) {
           }
         }),
         onClick: function onClick() {
-          editor.commands.setAlert({
+          editor.chain().focus().setAlert({
             type: 'icon',
             variant: 'warning'
-          });
+          }).run();
         }
       }, {
         label: '错误 Error',
@@ -266,10 +264,10 @@ var EditorInsert = function EditorInsert(_ref) {
           }
         }),
         onClick: function onClick() {
-          editor.commands.setAlert({
+          editor.chain().focus().setAlert({
             type: 'icon',
             variant: 'error'
-          });
+          }).run();
         }
       }, {
         label: '成功 Success',
@@ -281,10 +279,25 @@ var EditorInsert = function EditorInsert(_ref) {
           }
         }),
         onClick: function onClick() {
-          editor.commands.setAlert({
+          editor.chain().focus().setAlert({
             type: 'icon',
             variant: 'success'
-          });
+          }).run();
+        }
+      }, {
+        label: '默认 Default',
+        key: 'default',
+        icon: /*#__PURE__*/React.createElement(UserSmileFillIcon, {
+          sx: {
+            fontSize: '1rem',
+            color: 'text.disabled'
+          }
+        }),
+        onClick: function onClick() {
+          editor.chain().focus().setAlert({
+            type: 'icon',
+            variant: 'default'
+          }).run();
         }
       }]
     }, {
@@ -320,7 +333,7 @@ var EditorInsert = function EditorInsert(_ref) {
           }
         }, getShortcutKeyText(['ctrl', 'E'], '+')),
         onClick: function onClick() {
-          return editor.commands.toggleCode();
+          return editor.chain().focus().toggleCode().run();
         }
       }, {
         label: '代码块',
@@ -337,7 +350,7 @@ var EditorInsert = function EditorInsert(_ref) {
           }
         }, getShortcutKeyText(['ctrl', 'alt', 'C'], '+')),
         onClick: function onClick() {
-          return editor.commands.toggleCodeBlock();
+          return editor.chain().focus().toggleCodeBlock().run();
         }
       }]
     }, {

package/dist/contants/enums.js

@@ -64,7 +64,7 @@ export var NODE_TYPE_LABEL = (_NODE_TYPE_LABEL = {}, _defineProperty(_defineProp
   align: true,
   convert: true
 }), NodeTypeEnum.Blockquote, {
-  label: '引用块',
+  label: '引用',
   color: true,
   fontSize: true,
   align: true,
@@ -73,7 +73,7 @@ export var NODE_TYPE_LABEL = (_NODE_TYPE_LABEL = {}, _defineProperty(_defineProp
   label: '代码块',
   convert: true
 }), NodeTypeEnum.Details, {
-  label: '折叠块',
+  label: '折叠面板',
   align: true
 }), NodeTypeEnum.BlockMath, {
   label: '块公式'

package/dist/contants/placeholder.d.ts

@@ -7,10 +7,10 @@ export declare const PLACEHOLDER: {
         5: string;
         6: string;
     };
+    detailsSummary: string;
     orderedList: string;
     bulletList: string;
     taskList: string;
-    blockquote: string;
     paragraph: string;
     default: string;
 };

package/dist/contants/placeholder.js

@@ -7,10 +7,10 @@ export var PLACEHOLDER = {
     5: '五级标题',
     6: '六级标题'
   },
+  detailsSummary: '输入面板标题',
   orderedList: '列表',
   bulletList: '列表',
   taskList: '列表',
-  blockquote: '引用',
   paragraph: '输入 "/" 插入内容',
   default: '写点什么吧，输入 "/" 插入内容'
 };

package/dist/contants/shortcut-key.js

@@ -72,7 +72,7 @@ export var SHORTCUT_KEYS = {
       value: 'Block Math',
       keys: ['ctrl', '7']
     }, {
-      label: '折叠块',
+      label: '折叠面板',
       value: 'Details',
       keys: ['ctrl', '8']
     }, {
@@ -152,7 +152,7 @@ export var SHORTCUT_KEYS = {
       value: 'Task list',
       keys: ['ctrl', 'shift', '9']
     }, {
-      label: '引用块',
+      label: '引用',
       value: 'Blockquote',
       keys: ['ctrl', 'shift', 'B']
     }, {

package/dist/contants/slash-commands.js

@@ -154,7 +154,7 @@ export var slashCommands = [{
     editor.chain().focus().deleteRange(range).setHorizontalRule().run();
   }
 }, {
-  title: '引用块',
+  title: '引用',
   shortcutKey: ['ctrl', 'shift', 'B'],
   icon: /*#__PURE__*/React.createElement(DoubleQuotesLIcon, {
     sx: {
@@ -208,7 +208,7 @@ export var slashCommands = [{
     }).run();
   }
 }, {
-  title: '折叠块',
+  title: '折叠面板',
   shortcutKey: ['ctrl', '8'],
   icon: /*#__PURE__*/React.createElement(MenuFold2FillIcon, {
     sx: {
@@ -271,7 +271,7 @@ export var slashCommands = [{
     }).run();
   }
 }, {
-  title: '折叠块',
+  title: '折叠面板',
   icon: /*#__PURE__*/React.createElement(MenuFold2FillIcon, {
     sx: {
       fontSize: '1rem'

package/dist/extension/component/Alert/index.d.ts

@@ -2,7 +2,7 @@ import { NodeViewProps } from '@tiptap/react';
 import React from 'react';
 export interface AlertAttributes {
     id?: string;
-    variant?: 'info' | 'warning' | 'error' | 'success';
+    variant?: 'info' | 'warning' | 'error' | 'success' | 'default';
     type?: 'text' | 'icon';
 }
 declare const AlertView: React.FC<NodeViewProps>;

package/dist/extension/component/Alert/index.js

@@ -5,7 +5,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { FloatingPopover } from "../../../component";
-import { CheckboxCircleFillIcon, CloseCircleFillIcon, ErrorWarningFillIcon, Information2FillIcon, ScrollToBottomLineIcon, TextIcon } from "../../../component/Icons";
+import { CheckboxCircleFillIcon, CloseCircleFillIcon, ErrorWarningFillIcon, Information2FillIcon, ScrollToBottomLineIcon, TextIcon, UserSmileFillIcon } from "../../../component/Icons";
 import { ToolbarItem } from "../../../component/Toolbar";
 import { Box, Divider, Stack } from '@mui/material';
 import { NodeViewContent, NodeViewWrapper } from '@tiptap/react';
@@ -42,6 +42,14 @@ var VARIANT_DATA = {
       }
     }),
     color: 'var(--mui-palette-success-main)'
+  },
+  default: {
+    icon: /*#__PURE__*/React.createElement(UserSmileFillIcon, {
+      sx: {
+        fontSize: '1.25rem'
+      }
+    }),
+    color: 'var(--mui-palette-divider)'
   }
 };
 var AlertView = function AlertView(_ref) {
@@ -75,20 +83,21 @@ var AlertView = function AlertView(_ref) {
       marginLeft: (_node$attrs = node.attrs) !== null && _node$attrs !== void 0 && _node$attrs.indent ? node.attrs.indent * 32 : undefined,
       border: '1px solid',
       borderColor: variantData.color,
-      color: variantData.color,
+      color: attrs.variant === 'default' ? 'var(--mui-palette-text-primary)' : variantData.color,
       borderRadius: '10px',
       padding: '12px 16px',
       lineHeight: 1.625,
       display: 'flex',
       alignItems: 'flex-start',
       gap: '16px',
-      background: "color-mix(in srgb, ".concat(variantData.color, " 10%, transparent)")
+      background: attrs.variant === 'default' ? 'var(--mui-palette-background-paper3)' : "color-mix(in srgb, ".concat(variantData.color, " 10%, transparent)")
     },
     onClick: handleShowOperationPopover
   }, showIcon && /*#__PURE__*/React.createElement(Box, {
     sx: {
       pt: '2px',
-      lineHeight: 1
+      lineHeight: 1,
+      color: attrs.variant === 'default' ? 'text.disabled' : variantData.color
     }
   }, variantData.icon), /*#__PURE__*/React.createElement(Box, {
     sx: {
@@ -163,6 +172,20 @@ var AlertView = function AlertView(_ref) {
       });
     },
     className: attrs.variant === 'success' ? 'tool-active' : ''
+  }), /*#__PURE__*/React.createElement(ToolbarItem, {
+    icon: /*#__PURE__*/React.createElement(UserSmileFillIcon, {
+      sx: {
+        fontSize: '1rem',
+        color: 'text.disabled'
+      }
+    }),
+    tip: "\u9ED8\u8BA4",
+    onClick: function onClick() {
+      return updateAttributes({
+        variant: 'default'
+      });
+    },
+    className: attrs.variant === 'default' ? 'tool-active' : ''
   }), /*#__PURE__*/React.createElement(Divider, {
     orientation: "vertical",
     flexItem: true,

package/dist/extension/component/Image/index.js

@@ -222,12 +222,12 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
   }
   return /*#__PURE__*/React.createElement(NodeViewWrapper, {
     className: "image-wrapper ".concat(selected ? 'ProseMirror-selectednode' : ''),
-    "data-drag-handle": true
+    "data-drag-handle": true,
+    as: 'span'
   }, /*#__PURE__*/React.createElement(Box, {
     component: 'span',
     sx: {
       position: 'relative',
-      display: 'inline-block',
       border: '1px solid',
       borderColor: 'divider',
       borderRadius: 'var(--mui-shape-borderRadius)',

package/dist/extension/index.js

@@ -63,6 +63,8 @@ export var getExtensions = function getExtensions(_ref) {
   }), Placeholder.configure({
     emptyNodeClass: 'custom-placeholder-node',
     showOnlyWhenEditable: true,
+    showOnlyCurrent: true,
+    includeChildren: true,
     placeholder: function placeholder(_ref2) {
       var _storage;
       var editor = _ref2.editor,
@@ -70,7 +72,7 @@ export var getExtensions = function getExtensions(_ref) {
         pos = _ref2.pos;
       var type = node.type,
         attrs = node.attrs;
-      if (pos === 0) {
+      if (pos === 0 && editor.isEmpty) {
         return PLACEHOLDER.default;
       }
       var aiWritingEnabled = !!(editor !== null && editor !== void 0 && (_storage = editor.storage) !== null && _storage !== void 0 && (_storage = _storage.aiWriting) !== null && _storage !== void 0 && _storage.enabled);

package/dist/extension/node/Alert.d.ts

@@ -1,9 +1,9 @@
 import { Node } from '@tiptap/core';
-export type AlertVariant = 'info' | 'warning' | 'error' | 'success';
+export type AlertVariant = 'info' | 'warning' | 'error' | 'success' | 'default';
 export type AlertType = 'text' | 'icon';
 export interface AlertOptions {
     /**
-     * HTML attributes to add to the blockquote element
+     * HTML attributes to add to the alert element
      * @default {}
      * @example { class: 'foo' }
      */

package/dist/extension/node/Details.js

@@ -35,5 +35,13 @@ export var DetailsExtension = CustomDetails.configure({
     class: 'cq-details'
   }
 });
-export var DetailsSummaryExtension = DetailsSummary.configure({});
-export var DetailsContentExtension = DetailsContent.configure({});
+export var DetailsSummaryExtension = DetailsSummary.configure({
+  HTMLAttributes: {
+    class: 'cq-details-summary'
+  }
+});
+export var DetailsContentExtension = DetailsContent.configure({
+  HTMLAttributes: {
+    class: 'cq-details-content'
+  }
+});

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);
 }
 
@@ -225,7 +224,7 @@
   font-size: 0.625rem;
   border: none;
   width: 1.25rem;
-  height: 1.25rem;
+  height: 1.5rem;
   margin-top: 0.1rem;
   padding: 0;
 }
@@ -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,8 +553,18 @@
 
 /* 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;
+}
+
+/* placeholder */
+.tiptap.ProseMirror .cq-details[data-placeholder]::before,
+.tiptap.ProseMirror .table-row[data-placeholder]::before {
+  display: none;
+}
+
+.tiptap.ProseMirror li p[data-placeholder]::before {
+  display: none;
 }

package/package.json

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