@ctzhian/tiptap 1.13.9 → 2.1.0

package/dist/extension/node/TableOfContents/index.d.ts

@@ -1,4 +1,6 @@
 import { TocList } from "../../../type";
-export declare const TableOfContentsExtension: ({ onTocUpdate }: {
-    onTocUpdate?: ((toc: TocList) => void) | undefined;
-}) => import("@tiptap/core").Extension<import("@tiptap/extension-table-of-contents").TableOfContentsOptions, import("@tiptap/extension-table-of-contents").TableOfContentsStorage>;
+interface TableOfContentsOptions {
+    onTocUpdate?: (toc: TocList) => void;
+}
+export declare const TableOfContentsExtension: ({ onTocUpdate }: TableOfContentsOptions) => import("@tiptap/core").Extension<import("@tiptap/extension-table-of-contents").TableOfContentsOptions, import("@tiptap/extension-table-of-contents").TableOfContentsStorage>;
+export {};

package/dist/extension/node/TableOfContents/index.js

@@ -1,7 +1,27 @@
 import { getHierarchicalIndexes, TableOfContents } from '@tiptap/extension-table-of-contents';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
 export var TableOfContentsExtension = function TableOfContentsExtension(_ref) {
   var onTocUpdate = _ref.onTocUpdate;
-  return TableOfContents.configure({
+  return TableOfContents.extend({
+    addProseMirrorPlugins: function addProseMirrorPlugins() {
+      var imeCompositionPluginKey = new PluginKey('imeComposition');
+      return [new Plugin({
+        key: new PluginKey('tableOfContentImeFix'),
+        appendTransaction: function appendTransaction(transactions, _oldState, newState) {
+          if (transactions.some(function (tr) {
+            return tr.getMeta('composition');
+          })) {
+            return null;
+          }
+          var imePluginState = imeCompositionPluginKey.getState(newState);
+          if (imePluginState !== null && imePluginState !== void 0 && imePluginState.isComposing) {
+            return null;
+          }
+          return null;
+        }
+      })];
+    }
+  }).configure({
     getIndex: getHierarchicalIndexes,
     onUpdate: function onUpdate(data) {
       setTimeout(function () {
@@ -17,7 +37,7 @@ export var TableOfContentsExtension = function TableOfContentsExtension(_ref) {
             textContent: content.textContent
           };
         }));
-      }, 0);
+      }, 60);
     }
   });
 };

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

@@ -9,6 +9,7 @@ declare module '@tiptap/core' {
             setVideo: (options: {
                 src: string;
                 width?: number;
+                align?: 'left' | 'center' | 'right';
                 controls?: boolean;
                 autoplay?: boolean;
                 loop?: boolean;

package/dist/extension/node/Video.js

@@ -107,16 +107,33 @@ export var VideoExtension = function VideoExtension(props) {
           }
         },
         width: {
-          default: 760,
+          default: null,
           parseHTML: function parseHTML(element) {
             var width = element.getAttribute('width');
-            return width ? parseInt(width, 10) : 760;
+            if (width) {
+              if (width.endsWith('%')) return width;
+              var numWidth = parseInt(width, 10);
+              return isNaN(numWidth) ? null : numWidth;
+            }
+            return null;
           },
           renderHTML: function renderHTML(attributes) {
             return {
               width: attributes.width
             };
           }
+        },
+        align: {
+          default: null,
+          parseHTML: function parseHTML(element) {
+            return element.getAttribute('data-align');
+          },
+          renderHTML: function renderHTML(attributes) {
+            if (!attributes.align) return {};
+            return {
+              'data-align': attributes.align
+            };
+          }
         }
       };
     },
@@ -127,6 +144,18 @@ export var VideoExtension = function VideoExtension(props) {
           if (!(dom instanceof HTMLElement)) return false;
           var src = dom.getAttribute('src');
           if (!src) return false;
+          var widthAttr = dom.getAttribute('width');
+          var width = 760;
+          if (widthAttr) {
+            // 如果是百分比，保留字符串格式
+            if (widthAttr.endsWith('%')) {
+              width = widthAttr;
+            } else {
+              // 否则解析为数字
+              var numWidth = parseInt(widthAttr, 10);
+              width = isNaN(numWidth) ? 760 : numWidth;
+            }
+          }
           return {
             src: src,
             controls: dom.hasAttribute('controls'),
@@ -134,7 +163,8 @@ export var VideoExtension = function VideoExtension(props) {
             loop: dom.hasAttribute('loop'),
             muted: dom.hasAttribute('muted'),
             poster: dom.getAttribute('poster'),
-            width: dom.getAttribute('width') ? parseInt(dom.getAttribute('width'), 10) : 760
+            width: width,
+            align: dom.getAttribute('data-align') || dom.getAttribute('align')
           };
         }
       }];
@@ -151,9 +181,10 @@ export var VideoExtension = function VideoExtension(props) {
         autoplay = _ref2.autoplay,
         loop = _ref2.loop,
         muted = _ref2.muted,
-        poster = _ref2.poster;
+        poster = _ref2.poster,
+        align = _ref2['data-align'];
       if (!src) return '';
-      return "<video src=\"".concat(src, "\" ").concat(width ? "width=\"".concat(width, "\"") : '', " ").concat(controls ? 'controls' : '', " ").concat(autoplay ? 'autoplay' : '', " ").concat(loop ? 'loop' : '', " ").concat(muted ? 'muted' : '', " ").concat(poster ? "poster=\"".concat(poster, "\"") : '', "></video>");
+      return "<video src=\"".concat(src, "\" ").concat(width ? "width=\"".concat(width, "\"") : '', " ").concat(controls ? 'controls' : '', " ").concat(autoplay ? 'autoplay' : '', " ").concat(loop ? 'loop' : '', " ").concat(muted ? 'muted' : '', " ").concat(poster ? "poster=\"".concat(poster, "\"") : '', " ").concat(align ? "data-align=\"".concat(align, "\"") : '', "></video>");
     },
     addCommands: function addCommands() {
       var _this2 = this;
@@ -170,7 +201,8 @@ export var VideoExtension = function VideoExtension(props) {
                 autoplay: options.autoplay || false,
                 loop: options.loop || false,
                 muted: options.muted || false,
-                poster: options.poster || null
+                poster: options.poster || null,
+                align: options.align || null
               }
             });
           };

package/dist/hook/index.js

@@ -50,7 +50,7 @@ var useTiptap = function useTiptap(_ref) {
     editorProps: {
       handleKeyDown: function handleKeyDown(view, event) {
         // 编辑模式下保存
-        if (event.key === 's' && (event.metaKey || event.ctrlKey) && editable) {
+        if (event.key === 's' && (event.metaKey || event.ctrlKey) && editable && onSave) {
           event.preventDefault();
           onSave === null || onSave === void 0 || onSave(editor);
           return true;

package/dist/index.css

@@ -2,15 +2,16 @@
 
 :root {
   --common-row-font-size: 16px;
-  --common-row-line-height: 26px;
+  --common-row-line-height: 1.625;
   --udtoken-quote-bar-bg: #bbbfc4;
 }
 
 .tiptap.ProseMirror {
   overflow-y: auto;
   outline: none;
+  font-size: var(--common-row-font-size);
   color: var(--mui-palette-text-primary);
-  line-height: 1.8;
+  line-height: var(--common-row-line-height);
 }
 
 /* 节点缩进（依赖 data-indent 属性） */
@@ -59,17 +60,13 @@
 }
 
 .tiptap.ProseMirror p {
-  line-height: var(--common-row-line-height);
-  font-size: var(--common-row-font-size);
   margin: 8px 0;
 }
 
-/* blockquote */
 .tiptap.ProseMirror blockquote {
   position: relative;
   padding: 8px 16px 8px 24px;
   margin: 8px 0;
-  line-height: var(--common-row-line-height);
   color: var(--mui-palette-text-tertiary);
   background-color: var(--mui-palette-background-paper3);
 }
@@ -111,8 +108,6 @@
   top: 0;
   left: -24px;
   content: counter(list-counter) '.' !important;
-  font-size: 16px;
-  line-height: 26px;
   color: var(--mui-palette-primary-main);
 }
 
@@ -146,8 +141,6 @@
   position: absolute;
   top: 0;
   left: -24px;
-  font-size: 16px;
-  line-height: 26px;
   font-size: 20px;
   color: var(--mui-palette-primary-main);
 }
@@ -223,7 +216,6 @@
 .tiptap.ProseMirror pre {
   position: relative;
   border: 1px solid;
-  line-height: 22px;
   border-color: var(--mui-palette-divider);
   border-radius: var(--mui-shape-borderRadius);
   color: var(--mui-palette-text-tertiary);
@@ -240,8 +232,6 @@
 .tiptap.ProseMirror code {
   padding: 2px 8px;
   margin: 0 4px;
-  line-height: 1.625;
-  font-size: inherit;
   word-break: break-all;
   /* font-weight: 500; */
   border: 1px solid;
@@ -269,7 +259,6 @@
 .tiptap.ProseMirror .cq-details {
   display: flex;
   gap: 0.25rem;
-  line-height: 1.625;
   margin: 20px 0;
   border: 1px solid var(--mui-palette-divider);
   border-radius: var(--mui-shape-borderRadius);
@@ -355,7 +344,6 @@
   position: relative;
   color: inherit;
   font-style: inherit;
-  line-height: 1.4;
   font-weight: 500;
 }
 
@@ -410,7 +398,6 @@
 
 .tiptap.ProseMirror table p {
   font-size: 14px;
-  line-height: 24px;
 }
 
 .tiptap.ProseMirror table th *,
@@ -418,7 +405,6 @@
   word-break: break-all;
 }
 
-/* 表格单元格基础样式 */
 .tiptap.ProseMirror table td,
 .tiptap.ProseMirror table th {
   border: none;
@@ -441,12 +427,12 @@
   margin-bottom: 0;
 }
 
-/* 表格表头样式 */
 .tiptap.ProseMirror table th {
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   text-align: left;
+  background-color: var(--mui-palette-background-paper3);
 }
 
 .tiptap.ProseMirror[contenteditable="true"] table .selectedCell * {
@@ -454,9 +440,8 @@
   user-select: none;
 }
 
-/* 表格选择状态 */
 .tiptap.ProseMirror[contenteditable="true"] table .selectedCell:after {
-  background-color: color-mix(in srgb, var(--mui-palette-primary-main) 12%, transparent);
+  background-color: color-mix(in srgb, var(--mui-palette-primary-main) 5%, transparent);
   content: '';
   left: 0;
   right: 0;
@@ -467,7 +452,6 @@
   z-index: 2;
 }
 
-/* 表格列调整手柄 */
 .tiptap.ProseMirror[contenteditable="true"] table .column-resize-handle {
   border-right: 2px dotted var(--mui-palette-primary-main);
   bottom: -2px;
@@ -481,18 +465,54 @@
   transition: all 0.2s ease-in-out;
 }
 
+.tiptap-table-dropcursor {
+  position: absolute !important;
+  z-index: 20;
+  pointer-events: none;
+  background-color: var(--mui-palette-primary-main, #1976d2);
+}
+
 .tiptap.ProseMirror.resize-cursor {
   cursor: col-resize;
 }
 
-/* 表格包装器样式 */
 .tiptap.ProseMirror .tableWrapper {
   width: 100%;
   overflow-x: auto;
+  overflow-y: hidden;
+  position: relative;
   margin: 20px 0;
 }
 
-/* 表格滚动条样式 */
+.tiptap.ProseMirror[contenteditable="true"] .tableWrapper {
+  padding-top: 16px;
+  padding-left: 16px;
+  padding-bottom: 16px;
+  padding-right: 16px;
+}
+
+.tiptap.ProseMirror .table-controls {
+  position: relative;
+  overflow: visible;
+  pointer-events: none;
+  z-index: 10;
+}
+
+.tiptap.ProseMirror .table-controls>* {
+  pointer-events: auto;
+}
+
+.tiptap.ProseMirror .table-selection-overlay-container {
+  position: relative;
+  overflow: visible;
+  pointer-events: none;
+  z-index: 10;
+}
+
+.tiptap.ProseMirror .table-selection-overlay-container>* {
+  pointer-events: auto;
+}
+
 .tiptap.ProseMirror .tableWrapper::-webkit-scrollbar {
   height: 5px;
   cursor: pointer;
@@ -510,7 +530,6 @@
   cursor: pointer;
 }
 
-/* youtube */
 .tiptap.ProseMirror div[data-youtube-video] {
   cursor: move;
   padding-right: 1.5rem;
@@ -537,21 +556,19 @@
   }
 }
 
-.slash-decoration[data-decoration-content].is-empty {
+.tiptap.ProseMirror .slash-decoration[data-decoration-content].is-empty {
   padding: 4px 8px;
   background-color: var(--mui-palette-background-paper2);
   border-radius: var(--mui-shape-borderRadius);
 }
 
-.slash-decoration[data-decoration-content].is-empty::after {
+.tiptap.ProseMirror .slash-decoration[data-decoration-content].is-empty::after {
   content: attr(data-decoration-content);
   color: var(--mui-palette-text-disabled);
   padding-left: 0.25rem;
   font-size: 14px;
-  line-height: 24px;
 }
 
-/* AI 续写建议样式 */
 .tiptap.ProseMirror .ai-writing-suggestion {
   color: color-mix(in srgb, var(--mui-palette-text-primary) 15%, transparent);
   pointer-events: none;
@@ -559,7 +576,6 @@
   white-space: pre-wrap;
 }
 
-/* placeholder */
 .tiptap.ProseMirror .cq-details[data-placeholder]::before,
 .tiptap.ProseMirror table *[data-placeholder]::before,
 .tiptap.ProseMirror li p[data-placeholder]::before {

package/dist/type/index.d.ts

@@ -37,6 +37,8 @@ export interface MenuProps {
         transformOrigin?: PopoverOrigin;
     };
     zIndex?: number;
+    onOpen?: () => void;
+    onClose?: () => void;
 }
 export type ToolbarItemType = {
     id: string;

package/dist/util/index.d.ts

@@ -13,3 +13,12 @@ export declare const hasMarksInBlock: (node: Node | null | undefined) => boolean
 export declare const hasMarksInSelection: (state: EditorState) => boolean;
 export declare function addOpacityToColor(color: string, opacity: number): string;
 export declare const getLinkTitle: (href: string) => string;
+/**
+ * 获取当前选中文本并返回链接属性
+ * 如果有选中文本，将文本设置为 title
+ * @param editor Tiptap 编辑器实例
+ * @returns 包含 title 的链接属性对象（如果有选中文本）
+ */
+export declare const getLinkAttributesWithSelectedText: (editor: Editor) => {
+    title?: string;
+};

package/dist/util/index.js

@@ -62,4 +62,30 @@ export var getLinkTitle = function getLinkTitle(href) {
     return it.trim().length > 0;
   });
   return paths[paths.length - 1];
+};
+
+/**
+ * 获取当前选中文本并返回链接属性
+ * 如果有选中文本，将文本设置为 title
+ * @param editor Tiptap 编辑器实例
+ * @returns 包含 title 的链接属性对象（如果有选中文本）
+ */
+export var getLinkAttributesWithSelectedText = function getLinkAttributesWithSelectedText(editor) {
+  if (!editor) {
+    return {};
+  }
+  var selection = editor.state.selection;
+  var from = selection.from,
+    to = selection.to;
+  if (selection.empty || from === to) {
+    return {};
+  }
+  var selectedText = editor.state.doc.textBetween(from, to, '');
+  var trimmedText = selectedText.trim();
+  if (trimmedText.length > 0) {
+    return {
+      title: trimmedText
+    };
+  }
+  return {};
 };

package/dist/util/table-utils.d.ts

@@ -0,0 +1,161 @@
+import type { Node } from '@tiptap/pm/model';
+import { type EditorState, type Transaction } from '@tiptap/pm/state';
+import type { FindNodeResult } from '@tiptap/pm/tables';
+import { TableMap } from '@tiptap/pm/tables';
+import type { Editor } from '@tiptap/react';
+export declare const RESIZE_MIN_WIDTH = 35;
+export declare const EMPTY_CELL_WIDTH = 120;
+export declare const EMPTY_CELL_HEIGHT = 40;
+export type Orientation = 'row' | 'column';
+export interface CellInfo extends FindNodeResult {
+    row: number;
+    column: number;
+}
+export type CellCoordinates = {
+    row: number;
+    col: number;
+};
+export type SelectionReturnMode = 'state' | 'transaction' | 'dispatch';
+export type BaseSelectionOptions = {
+    mode?: SelectionReturnMode;
+};
+export type DispatchSelectionOptions = {
+    mode: 'dispatch';
+    dispatch: (tr: Transaction) => void;
+};
+export type TransactionSelectionOptions = {
+    mode: 'transaction';
+};
+export type StateSelectionOptions = {
+    mode?: 'state';
+};
+export type TableInfo = {
+    map: TableMap;
+} & FindNodeResult;
+export declare function isHTMLElement(n: unknown): n is HTMLElement;
+export type DomCellAroundResult = {
+    type: 'cell';
+    domNode: HTMLElement;
+    tbodyNode: HTMLTableSectionElement | null;
+} | {
+    type: 'wrapper';
+    domNode: HTMLElement;
+    tbodyNode: HTMLTableSectionElement | null;
+};
+export declare function safeClosest<T extends Element>(start: Element | null, selector: string): T | null;
+/**
+ * Walk up from an element until we find a TD/TH or the table wrapper.
+ * Returns the found element plus its tbody (if present).
+ */
+export declare function domCellAround(target: Element): DomCellAroundResult | undefined;
+/**
+ * Clamps a value between min and max bounds
+ */
+export declare function clamp(value: number, min: number, max: number): number;
+/**
+ * Checks if a cell is merged (has colspan or rowspan > 1)
+ */
+export declare function isCellMerged(node: Node | null): boolean;
+/**
+ * Get information about the table at the current selection or a specific position.
+ */
+export declare function getTable(editor: Editor | null, tablePos?: number): {
+    map: TableMap;
+    node: Node;
+    pos: number;
+    start: number;
+    depth: number;
+} | null;
+/**
+ * Checks if the current text selection is inside a table cell.
+ */
+export declare function isSelectionInCell(state: EditorState): boolean;
+/**
+ * Runs a function while preserving the editor's selection.
+ */
+export declare function runPreservingCursor(editor: Editor, fn: () => void): boolean;
+/**
+ * Determines whether a table cell is effectively empty.
+ */
+export declare function isCellEmpty(cellNode: Node): boolean;
+/**
+ * Counts how many consecutive empty rows exist at the bottom of a given table.
+ */
+export declare function countEmptyRowsFromEnd(editor: Editor, tablePos: number): number;
+/**
+ * Counts how many consecutive empty columns exist at the right edge of a given table.
+ */
+export declare function countEmptyColumnsFromEnd(editor: Editor, tablePos: number): number;
+/**
+ * Rounds a number with a symmetric "dead-zone" around integer boundaries.
+ */
+export declare function marginRound(num: number, margin?: number): number;
+/**
+ * Selects table cells by their (row, col) coordinates.
+ */
+export declare function selectCellsByCoords(editor: Editor | null, tablePos: number, coords: {
+    row: number;
+    col: number;
+}[], options?: BaseSelectionOptions | DispatchSelectionOptions): EditorState | Transaction | void;
+/**
+ * Select the cell at (row, col) using `cellAround` to respect merged cells.
+ */
+export declare function selectCellAt({ editor, row, col, tablePos, dispatch, }: {
+    editor: Editor | null;
+    row: number;
+    col: number;
+    tablePos?: number;
+    dispatch?: (tr: Transaction) => void;
+}): boolean;
+/**
+ * Selects a boundary cell of the table based on orientation.
+ */
+export declare function selectLastCell(editor: Editor, tableNode: Node, tablePos: number, orientation: Orientation): boolean;
+/**
+ * Get all (row, col) coordinates for a given row or column index.
+ */
+export declare function getIndexCoordinates({ editor, index, orientation, tablePos, }: {
+    editor: Editor | null;
+    index: number;
+    orientation?: Orientation;
+    tablePos?: number;
+}): {
+    row: number;
+    col: number;
+}[] | null;
+/**
+ * Given a DOM cell element, find its (row, col) indices within the table.
+ */
+export declare function getCellIndicesFromDOM(cell: HTMLTableCellElement, tableNode: Node | null, editor: Editor): {
+    rowIndex: number;
+    colIndex: number;
+} | null;
+/**
+ * Given a DOM element inside a table, find the corresponding table node and its position.
+ */
+export declare function getTableFromDOM(tableElement: HTMLElement, editor: Editor): {
+    node: Node;
+    pos: number;
+} | null;
+/**
+ * Checks if a node is a table node
+ */
+export declare function isTableNode(node: Node | null | undefined): node is Node;
+/**
+ * Get all cells (and unique merged cells) from a specific row.
+ */
+export declare function getRowCells(editor: Editor | null, rowIndex?: number, tablePos?: number): {
+    cells: CellInfo[];
+    mergedCells: CellInfo[];
+};
+/**
+ * Collect cells (and unique merged cells) from the current table.
+ */
+export declare function getColumnCells(editor: Editor | null, columnIndex?: number, tablePos?: number): {
+    cells: CellInfo[];
+    mergedCells: CellInfo[];
+};
+/**
+ * Compare two DOMRects for equality (within a small tolerance)
+ */
+export declare function rectEq(rect1: DOMRect | null, rect2: DOMRect | null): boolean;