@ctzhian/tiptap 2.1.0 → 2.1.2

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

@@ -139,18 +139,34 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
   useEffect(function () {
     if (attrs.src && (!attrs.width || attrs.width <= 0)) {
       getImageDimensions(attrs.src).then(function (dimensions) {
-        updateAttributes({
-          src: attrs.src,
-          width: dimensions.width
-        });
+        try {
+          var pos = typeof getPos === 'function' ? getPos() : null;
+          if (pos === null || pos === undefined) return;
+          var currentNode = editor.state.doc.nodeAt(pos);
+          if (!currentNode || currentNode.type.name !== 'image') return;
+          updateAttributes({
+            src: attrs.src,
+            width: dimensions.width
+          });
+        } catch (error) {
+          console.warn('Failed to update image dimensions:', error);
+        }
       }).catch(function (error) {
-        updateAttributes({
-          src: attrs.src,
-          width: 400
-        });
+        try {
+          var pos = typeof getPos === 'function' ? getPos() : null;
+          if (pos === null || pos === undefined) return;
+          var currentNode = editor.state.doc.nodeAt(pos);
+          if (!currentNode || currentNode.type.name !== 'image') return;
+          updateAttributes({
+            src: attrs.src,
+            width: 400
+          });
+        } catch (updateError) {
+          console.warn('Failed to update image attributes with fallback width:', updateError);
+        }
       });
     }
-  }, [attrs.src, attrs.width, updateAttributes]);
+  }, [attrs.src, attrs.width, updateAttributes, getPos, editor]);
   var handleMouseDown = function handleMouseDown(e, corner) {
     e.preventDefault();
     e.stopPropagation();

package/dist/extension/component/Link/LinkContent.js

@@ -22,6 +22,7 @@ export var LinkContent = function LinkContent(_ref) {
     border: '1px solid',
     borderColor: 'divider',
     cursor: 'pointer',
+    textAlign: 'left',
     borderRadius: 'var(--mui-shape-borderRadius)',
     p: 2,
     textDecoration: 'none',
@@ -39,6 +40,7 @@ export var LinkContent = function LinkContent(_ref) {
     borderColor: 'divider',
     color: 'text.primary',
     cursor: 'pointer',
+    textAlign: 'left',
     borderRadius: 'var(--mui-shape-borderRadius)',
     p: 2,
     ':hover': {

package/dist/extension/component/TableHandle/TableHandleAddButton.d.ts

@@ -0,0 +1,14 @@
+import type { Node } from '@tiptap/pm/model';
+import type { Editor } from '@tiptap/react';
+import React from 'react';
+import type { Orientation } from '../../../util/table-utils';
+interface TableHandleAddButtonProps {
+    editor?: Editor | null;
+    orientation: Orientation;
+    index?: number;
+    tableNode?: Node;
+    tablePos?: number;
+    direction: 'before' | 'after';
+}
+export declare const TableHandleAddButton: ({ editor, orientation, index, tableNode, tablePos, direction, }: TableHandleAddButtonProps) => React.JSX.Element | null;
+export {};

package/dist/extension/component/TableHandle/TableHandleAddButton.js

@@ -0,0 +1,87 @@
+import { SkipDownIcon, SkipLeftIcon, SkipRightIcon, SkipUpIcon } from "../../../component/Icons";
+import { Box } from '@mui/material';
+import { TableMap } from '@tiptap/pm/tables';
+import React, { useCallback } from 'react';
+import { selectCellsByCoords } from "../../../util/table-utils";
+export var TableHandleAddButton = function TableHandleAddButton(_ref) {
+  var editor = _ref.editor,
+    orientation = _ref.orientation,
+    index = _ref.index,
+    tableNode = _ref.tableNode,
+    tablePos = _ref.tablePos,
+    direction = _ref.direction;
+  var handleClick = useCallback(function () {
+    if (!editor || !tableNode || typeof tablePos !== 'number' || typeof index !== 'number') {
+      return;
+    }
+    try {
+      // 先选中当前行/列
+      var _TableMap$get = TableMap.get(tableNode),
+        width = _TableMap$get.width,
+        height = _TableMap$get.height;
+      var start = orientation === 'row' ? {
+        row: index,
+        col: 0
+      } : {
+        row: 0,
+        col: index
+      };
+      var end = orientation === 'row' ? {
+        row: index,
+        col: width - 1
+      } : {
+        row: height - 1,
+        col: index
+      };
+
+      // 选中行/列
+      selectCellsByCoords(editor, tablePos, [start, end], {
+        mode: 'dispatch',
+        dispatch: editor.view.dispatch.bind(editor.view)
+      });
+
+      // 执行插入操作
+      if (orientation === 'row') {
+        editor.chain().focus()[direction === 'before' ? 'addRowBefore' : 'addRowAfter']().run();
+      } else {
+        editor.chain().focus()[direction === 'before' ? 'addColumnBefore' : 'addColumnAfter']().run();
+      }
+    } catch (error) {
+      console.warn('Failed to add row/column:', error);
+    }
+  }, [editor, orientation, index, tableNode, tablePos, direction]);
+  if (!(editor !== null && editor !== void 0 && editor.isEditable)) return null;
+  var iconStyle = {
+    width: '0.75rem',
+    height: '0.75rem',
+    flexShrink: 0
+  };
+  var Icon = orientation === 'row' ? direction === 'before' ? SkipUpIcon : SkipDownIcon : direction === 'before' ? SkipLeftIcon : SkipRightIcon;
+  var ariaLabel = orientation === 'row' ? direction === 'before' ? '上方插入行' : '下方插入行' : direction === 'before' ? '左侧插入列' : '右侧插入列';
+  return /*#__PURE__*/React.createElement(Box, {
+    component: "button",
+    onClick: handleClick,
+    sx: {
+      border: 'none',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: 'var(--mui-palette-background-paper3)',
+      borderRadius: 'var(--mui-shape-borderRadius)',
+      cursor: 'pointer',
+      padding: 0,
+      width: orientation === 'row' ? '0.75rem' : '2rem',
+      height: '0.75rem',
+      transition: 'background-color 0.2s ease-in-out',
+      '&:hover': {
+        backgroundColor: 'var(--mui-palette-primary-main)',
+        '& .MuiSvgIcon-root': {
+          color: 'var(--mui-palette-common-white)'
+        }
+      }
+    },
+    "aria-label": ariaLabel
+  }, /*#__PURE__*/React.createElement(Icon, {
+    sx: iconStyle
+  }));
+};

package/dist/extension/component/TableHandle/TableHandleMenu.css

@@ -32,5 +32,4 @@
 
 .tiptap-table-handle-menu.column {
   height: 0.75rem;
-  width: var(--table-handle-ref-width);
 }

package/dist/extension/component/TableHandle/TableHandleMenu.js

@@ -615,7 +615,7 @@ export var TableHandleMenu = function TableHandleMenu(_ref) {
   }, []);
   var ariaLabel = orientation === 'row' ? 'Row actions' : 'Column actions';
   if (!(editor !== null && editor !== void 0 && editor.isEditable)) return null;
-  var handleButton = /*#__PURE__*/React.createElement(Box, {
+  var menuButton = /*#__PURE__*/React.createElement(Box, {
     component: "button",
     className: "tiptap-table-handle-menu ".concat(isDragging ? 'is-dragging' : '', " ").concat(orientation),
     draggable: true,
@@ -634,11 +634,12 @@ export var TableHandleMenu = function TableHandleMenu(_ref) {
       padding: 0
     }, orientation === 'row' ? {
       width: '0.75rem',
-      height: 'var(--table-handle-ref-height, 40px)'
+      height: '0.75rem'
     } : {
-      height: '0.75rem',
-      width: 'var(--table-handle-ref-width, 100px)'
+      width: '100%',
+      height: '0.75rem'
     }), {}, {
+      transition: 'background-color 0.2s ease-in-out',
       '&.is-dragging': {
         backgroundColor: 'var(--mui-palette-primary-main)',
         '& .MuiSvgIcon-root': {
@@ -663,7 +664,7 @@ export var TableHandleMenu = function TableHandleMenu(_ref) {
   }));
   return /*#__PURE__*/React.createElement(Menu, {
     width: 216,
-    context: handleButton,
+    context: menuButton,
     list: menuList,
     anchorOrigin: {
       vertical: orientation === 'row' ? 'top' : 'bottom',

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

@@ -7,6 +7,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { FloatingPortal } from '@floating-ui/react';
 import React, { useCallback, useMemo, useState } from 'react';
 import { colDragStart, rowDragStart } from "../../node/TableHandler/plugin";
+import { TableHandleAddButton } from "./TableHandleAddButton";
 import { TableHandleMenu } from "./TableHandleMenu";
 import { useTableHandlePositioning } from "./use-table-handle-positioning";
 import { useTableHandleState } from "./use-table-handle-state";
@@ -63,7 +64,22 @@ export function TableHandle(_ref) {
   }, shouldShowRow && /*#__PURE__*/React.createElement("div", {
     ref: rowHandle.ref,
     style: rowHandle.style
-  }, /*#__PURE__*/React.createElement(TableHandleMenu, {
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '0.125rem',
+      width: '0.75rem',
+      height: 'var(--table-handle-ref-height, 40px)'
+    }
+  }, /*#__PURE__*/React.createElement(TableHandleAddButton, {
+    editor: editor,
+    orientation: "row",
+    index: state.rowIndex,
+    tablePos: state.blockPos,
+    tableNode: state.block,
+    direction: "before"
+  }), /*#__PURE__*/React.createElement(TableHandleMenu, {
     editor: editor,
     orientation: "row",
     index: state.rowIndex,
@@ -74,9 +90,36 @@ export function TableHandle(_ref) {
     onOpenChange: function onOpenChange(open) {
       return handleMenuOpenChange('row', open);
     }
-  })), shouldShowColumn && /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement(TableHandleAddButton, {
+    editor: editor,
+    orientation: "row",
+    index: state.rowIndex,
+    tablePos: state.blockPos,
+    tableNode: state.block,
+    direction: "after"
+  }))), shouldShowColumn && /*#__PURE__*/React.createElement("div", {
     ref: colHandle.ref,
     style: colHandle.style
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'row',
+      gap: '0.125rem',
+      height: '0.75rem',
+      width: 'var(--table-handle-ref-width, 100px)'
+    }
+  }, /*#__PURE__*/React.createElement(TableHandleAddButton, {
+    editor: editor,
+    orientation: "column",
+    index: state.colIndex,
+    tablePos: state.blockPos,
+    tableNode: state.block,
+    direction: "before"
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      minWidth: 0
+    }
   }, /*#__PURE__*/React.createElement(TableHandleMenu, {
     editor: editor,
     orientation: "column",
@@ -88,6 +131,13 @@ export function TableHandle(_ref) {
     onOpenChange: function onOpenChange(open) {
       return handleMenuOpenChange('column', open);
     }
-  })));
+  })), /*#__PURE__*/React.createElement(TableHandleAddButton, {
+    editor: editor,
+    orientation: "column",
+    index: state.colIndex,
+    tablePos: state.blockPos,
+    tableNode: state.block,
+    direction: "after"
+  }))));
 }
 TableHandle.displayName = 'TableHandle';

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

@@ -386,10 +386,9 @@ export var TableSelectionOverlay = function TableSelectionOverlay(_ref2) {
     var c = tableDom === null || tableDom === void 0 ? void 0 : tableDom.querySelector('.table-selection-overlay-container');
     containerRef.current = c !== null && c !== void 0 ? c : null;
   }, [tableDom]);
-  if (!isVisible || !selectionRect) {
+  if (!isVisible || !selectionRect || !editor || !editor.isEditable) {
     return null;
   }
-  if (!editor) return null;
   var renderCellMenu = function renderCellMenu() {
     if (!CellMenu) return null;
     return /*#__PURE__*/React.createElement("span", {

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

@@ -283,6 +283,15 @@ var VideoViewWrapper = function VideoViewWrapper(_ref) {
         video.click();
         document.body.removeChild(video);
       }
+    }), /*#__PURE__*/React.createElement(Divider, {
+      orientation: "vertical",
+      flexItem: true,
+      sx: {
+        height: '1rem',
+        mx: 0.5,
+        alignSelf: 'center',
+        borderColor: 'divider'
+      }
     }), /*#__PURE__*/React.createElement(ToolbarItem, {
       icon: /*#__PURE__*/React.createElement(AlignLeftIcon, {
         sx: {

package/dist/extension/node/CodeBlockLowlight.js

@@ -36,8 +36,9 @@ var CustomCodeBlock = CodeBlockLowlight.configure({
     });
   },
   parseMarkdown: function parseMarkdown(token, helpers) {
-    var _token$raw;
-    if (((_token$raw = token.raw) === null || _token$raw === void 0 ? void 0 : _token$raw.startsWith('```')) === false && token.codeBlockStyle !== 'indented') {
+    var isFenced = token.codeBlockStyle === 'fenced' || token.raw && /^\s*```/.test(token.raw);
+    var isIndented = token.codeBlockStyle === 'indented';
+    if (!isFenced && !isIndented) {
       return [];
     }
     if (token.lang === 'mermaid') {

package/dist/index.css

@@ -424,7 +424,7 @@
 
 .tiptap.ProseMirror table td>*,
 .tiptap.ProseMirror table th>* {
-  margin-bottom: 0;
+  margin-bottom: 0 !important;
 }
 
 .tiptap.ProseMirror table th {

package/package.json

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

package/dist/extension/component/Audio/Readonly.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-import { AudioAttributes } from ".";
-interface ReadonlyAudioProps {
-    attrs: AudioAttributes;
-    onError?: (error: Error) => void;
-}
-declare const ReadonlyAudio: ({ attrs, onError }: ReadonlyAudioProps) => React.JSX.Element;
-export default ReadonlyAudio;