@ctzhian/tiptap 1.13.8 → 2.0.0

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

@@ -0,0 +1,460 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { FloatingPortal, useFloating } from '@floating-ui/react';
+import { CellSelection, cellAround, columnResizingPluginKey } from '@tiptap/pm/tables';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { domCellAround, getTable, rectEq } from "../../../util/table-utils";
+
+// tl = top-left
+// tr = top-right
+// bl = bottom-left
+// br = bottom-right
+
+// if an element's edge is within 5px of the selection edge,
+// it is treated as aligned.
+var CORNER_DETECTION_TOLERANCE = 5;
+var getCellAtCoordinates = function getCellAtCoordinates(state, view, x, y) {
+  var _view$posAtCoords;
+  var pos = (_view$posAtCoords = view.posAtCoords({
+    left: x,
+    top: y
+  })) === null || _view$posAtCoords === void 0 ? void 0 : _view$posAtCoords.pos;
+  if (pos == null) return null;
+  var $pos = state.doc.resolve(pos);
+  return cellAround($pos);
+};
+var getSelectionBoundingRect = function getSelectionBoundingRect(view, selection) {
+  var cells = [];
+  selection.forEachCell(function (_node, pos) {
+    var dom = view.nodeDOM(pos);
+    if (dom) cells.push(dom);
+  });
+  if (cells.length === 0) return null;
+  var bounds = {
+    left: Infinity,
+    top: Infinity,
+    right: -Infinity,
+    bottom: -Infinity
+  };
+  cells.forEach(function (cell) {
+    var rect = cell.getBoundingClientRect();
+    bounds.left = Math.min(bounds.left, rect.left);
+    bounds.top = Math.min(bounds.top, rect.top);
+    bounds.right = Math.max(bounds.right, rect.right);
+    bounds.bottom = Math.max(bounds.bottom, rect.bottom);
+  });
+  return new DOMRect(bounds.left, bounds.top, bounds.right - bounds.left, bounds.bottom - bounds.top);
+};
+var getSingleCellBoundingRect = function getSingleCellBoundingRect(view, cellPos) {
+  var cellDom = view.nodeDOM(cellPos);
+  if (!cellDom) return null;
+  var rect = cellDom.getBoundingClientRect();
+  return new DOMRect(rect.left, rect.top, rect.width, rect.height);
+};
+var createVirtualReference = function createVirtualReference(rect) {
+  return {
+    getBoundingClientRect: function getBoundingClientRect() {
+      return rect;
+    }
+  };
+};
+var findCornerCells = function findCornerCells(view, selection, selectionRect) {
+  var corners = {
+    topLeft: null,
+    topRight: null,
+    bottomLeft: null,
+    bottomRight: null
+  };
+  var isNearEdge = function isNearEdge(value1, value2) {
+    return Math.abs(value1 - value2) < CORNER_DETECTION_TOLERANCE;
+  };
+  selection.forEachCell(function (_node, pos) {
+    var dom = view.nodeDOM(pos);
+    if (!dom) return;
+    var cellRect = dom.getBoundingClientRect();
+
+    // Top-left corner
+    if (isNearEdge(cellRect.left, selectionRect.left) && isNearEdge(cellRect.top, selectionRect.top)) {
+      corners.topLeft = pos;
+    }
+
+    // Top-right corner
+    if (isNearEdge(cellRect.right, selectionRect.right) && isNearEdge(cellRect.top, selectionRect.top)) {
+      corners.topRight = pos;
+    }
+
+    // Bottom-left corner
+    if (isNearEdge(cellRect.left, selectionRect.left) && isNearEdge(cellRect.bottom, selectionRect.bottom)) {
+      corners.bottomLeft = pos;
+    }
+
+    // Bottom-right corner
+    if (isNearEdge(cellRect.right, selectionRect.right) && isNearEdge(cellRect.bottom, selectionRect.bottom)) {
+      corners.bottomRight = pos;
+    }
+  });
+  return corners;
+};
+var getAnchorCellForHandle = function getAnchorCellForHandle(view, selection, selectionRect, handle) {
+  if (!handle) return null;
+  var corners = findCornerCells(view, selection, selectionRect);
+  var anchorMap = {
+    tl: 'bottomRight',
+    tr: 'bottomLeft',
+    bl: 'topRight',
+    br: 'topLeft'
+  };
+  var anchorPos = corners[anchorMap[handle]];
+  return anchorPos ? {
+    pos: anchorPos
+  } : null;
+};
+var createHandleStyles = function createHandleStyles() {
+  return {
+    position: 'absolute',
+    width: 15,
+    height: 15,
+    borderRadius: '50%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    background: 'transparent',
+    pointerEvents: 'auto',
+    zIndex: 10
+  };
+};
+var createCornerHandleStyles = function createCornerHandleStyles(position, isActiveHandle) {
+  var isDisabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var baseStyles = createHandleStyles();
+  var positionStyles = {
+    tl: {
+      top: -7.5,
+      left: -7.5,
+      cursor: isDisabled ? 'default' : 'nwse-resize'
+    },
+    tr: {
+      top: -7.5,
+      right: -7.5,
+      cursor: isDisabled ? 'default' : 'nesw-resize'
+    },
+    bl: {
+      bottom: -7.5,
+      left: -7.5,
+      cursor: isDisabled ? 'default' : 'nesw-resize'
+    },
+    br: {
+      bottom: -7.5,
+      right: -7.5,
+      cursor: isDisabled ? 'default' : 'nwse-resize'
+    }
+  };
+  return _objectSpread(_objectSpread(_objectSpread({}, baseStyles), positionStyles[position]), {}, {
+    opacity: isDisabled ? 0.3 : isActiveHandle ? 1 : 0.5,
+    pointerEvents: isDisabled ? 'none' : 'auto'
+  });
+};
+export function useResizeOverlay(editor, updateSelectionRect) {
+  var rafId = useRef(null);
+  var stopLoop = useCallback(function () {
+    if (rafId.current != null) {
+      cancelAnimationFrame(rafId.current);
+      rafId.current = null;
+    }
+  }, []);
+  var startLoop = useCallback(function () {
+    if (rafId.current != null) return;
+    var tick = function tick() {
+      var st = columnResizingPluginKey.getState(editor.state);
+      var dragging = !!(st !== null && st !== void 0 && st.dragging);
+      updateSelectionRect();
+      if (dragging) {
+        rafId.current = requestAnimationFrame(tick);
+      } else {
+        stopLoop();
+        updateSelectionRect();
+      }
+    };
+    rafId.current = requestAnimationFrame(tick);
+  }, [editor, updateSelectionRect, stopLoop]);
+  useEffect(function () {
+    if (!editor) return;
+    var onTx = function onTx(_ref) {
+      var transaction = _ref.transaction;
+      updateSelectionRect();
+      var meta = transaction.getMeta(columnResizingPluginKey);
+      if (!meta) return;
+      if (Object.prototype.hasOwnProperty.call(meta, 'setDragging') && meta.setDragging) {
+        startLoop();
+      }
+      if (Object.prototype.hasOwnProperty.call(meta, 'setDragging') && meta.setDragging == null) {
+        stopLoop();
+        updateSelectionRect();
+      }
+      if (Object.prototype.hasOwnProperty.call(meta, 'setHandle')) {
+        updateSelectionRect();
+      }
+    };
+    editor.on('transaction', onTx);
+    return function () {
+      editor.off('transaction', onTx);
+      stopLoop();
+    };
+  }, [editor, startLoop, stopLoop, updateSelectionRect]);
+}
+export var TableSelectionOverlay = function TableSelectionOverlay(_ref2) {
+  var providedEditor = _ref2.editor,
+    CellMenu = _ref2.cellMenu,
+    _ref2$showResizeHandl = _ref2.showResizeHandles,
+    showResizeHandles = _ref2$showResizeHandl === void 0 ? true : _ref2$showResizeHandl,
+    onMenuOpenChange = _ref2.onMenuOpenChange;
+  var editor = providedEditor;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isVisible = _useState2[0],
+    setIsVisible = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectionRect = _useState4[0],
+    setSelectionRect = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    activeHandle = _useState6[0],
+    setActiveHandle = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    tableDom = _useState8[0],
+    setTableDom = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    isMenuOpen = _useState10[0],
+    setIsMenuOpen = _useState10[1];
+  var anchorCellRef = useRef(null);
+  var activeHandleRef = useRef(null);
+  var containerRef = useRef(null);
+  var _useFloating = useFloating({
+      placement: 'top-start',
+      strategy: 'absolute'
+    }),
+    refs = _useFloating.refs,
+    floatingStyles = _useFloating.floatingStyles,
+    update = _useFloating.update;
+  useEffect(function () {
+    if (selectionRect) {
+      var virtualReference = createVirtualReference(selectionRect);
+      refs.setPositionReference(virtualReference);
+    }
+  }, [selectionRect, refs]);
+  var updateSelectionRect = useCallback(function () {
+    if (!editor) return;
+    var selection = editor.state.selection;
+    if (selection instanceof CellSelection) {
+      var rect = getSelectionBoundingRect(editor.view, selection);
+      if (!rect) {
+        setIsVisible(false);
+        setSelectionRect(function (prev) {
+          return prev ? null : prev;
+        });
+        return;
+      }
+      setSelectionRect(function (prev) {
+        return rectEq(prev, rect) ? prev : rect;
+      });
+      setIsVisible(true);
+      return;
+    }
+
+    // single cell handling
+    var $anchor = selection.$anchor;
+    var cell = cellAround($anchor);
+    if (cell) {
+      var _rect = getSingleCellBoundingRect(editor.view, cell.pos);
+      if (_rect) {
+        setSelectionRect(function (prev) {
+          return rectEq(prev, _rect) ? prev : _rect;
+        });
+        setIsVisible(true);
+        return;
+      }
+    }
+    setIsVisible(false);
+    setSelectionRect(function (prev) {
+      return prev ? null : prev;
+    });
+  }, [editor]);
+  useResizeOverlay(editor !== null && editor !== void 0 ? editor : null, updateSelectionRect);
+  useEffect(function () {
+    if (update && selectionRect) {
+      update();
+    }
+  }, [update, selectionRect]);
+  var createResizeHandler = useCallback(function (handle) {
+    return function (event) {
+      if (!editor || !handle || !selectionRect || isMenuOpen || !showResizeHandles) return;
+      event.preventDefault();
+      event.stopPropagation();
+      var selection = editor.state.selection;
+      var cellSelection = null;
+      if (selection instanceof CellSelection) {
+        cellSelection = selection;
+      } else {
+        var $anchor = selection.$anchor;
+        var cell = cellAround($anchor);
+        if (cell) {
+          try {
+            cellSelection = CellSelection.create(editor.state.doc, cell.pos, cell.pos);
+          } catch (error) {
+            console.warn('Could not create single cell selection for resize:', error);
+            return;
+          }
+        }
+      }
+      if (!cellSelection) return;
+      var anchorCell = getAnchorCellForHandle(editor.view, cellSelection, selectionRect, handle);
+      if (!anchorCell) return;
+      setActiveHandle(handle);
+      activeHandleRef.current = handle;
+      anchorCellRef.current = anchorCell.pos;
+      var handleMouseMove = function handleMouseMove(mouseEvent) {
+        if (!editor || anchorCellRef.current == null) return;
+        var target = domCellAround(mouseEvent.target);
+        if (!target || target.type !== 'cell') return;
+        var targetCell = getCellAtCoordinates(editor.state, editor.view, mouseEvent.clientX, mouseEvent.clientY);
+        if (!targetCell) return;
+        try {
+          var newSelection = CellSelection.create(editor.state.doc, anchorCellRef.current, targetCell.pos);
+          var transaction = editor.state.tr.setSelection(newSelection);
+          editor.view.dispatch(transaction);
+        } catch (error) {
+          console.debug('Invalid cell selection during resize:', error);
+        }
+      };
+      var handleMouseUp = function handleMouseUp() {
+        setActiveHandle(null);
+        activeHandleRef.current = null;
+        anchorCellRef.current = null;
+        window.removeEventListener('mousemove', handleMouseMove);
+        window.removeEventListener('mouseup', handleMouseUp);
+      };
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+    };
+  }, [editor, selectionRect, isMenuOpen, showResizeHandles]);
+  var updateTableDom = useCallback(function () {
+    if (!editor) {
+      setTableDom(null);
+      return;
+    }
+    var table = getTable(editor);
+    if (!table) {
+      setTableDom(null);
+      return;
+    }
+    setTableDom(function (prev) {
+      var currentDom = prev;
+      var newDom = editor.view.nodeDOM(table.pos);
+      return currentDom === newDom ? currentDom : newDom;
+    });
+  }, [editor]);
+  var handleMenuOpenChange = useCallback(function (isOpen) {
+    setIsMenuOpen(isOpen);
+    onMenuOpenChange === null || onMenuOpenChange === void 0 || onMenuOpenChange(isOpen);
+  }, [onMenuOpenChange]);
+  useEffect(function () {
+    if (!editor) return;
+    var handleSelectionUpdate = function handleSelectionUpdate() {
+      updateSelectionRect();
+      updateTableDom();
+    };
+    editor.on('selectionUpdate', handleSelectionUpdate);
+    updateSelectionRect();
+    updateTableDom();
+    return function () {
+      editor.off('selectionUpdate', handleSelectionUpdate);
+    };
+  }, [editor, updateSelectionRect, updateTableDom]);
+  useEffect(function () {
+    var c = tableDom === null || tableDom === void 0 ? void 0 : tableDom.querySelector('.table-selection-overlay-container');
+    if (!c) {
+      // Try to find .table-controls as fallback
+      var wrapper = tableDom === null || tableDom === void 0 ? void 0 : tableDom.closest('.tableWrapper');
+      var controls = wrapper === null || wrapper === void 0 ? void 0 : wrapper.querySelector('.table-controls');
+      containerRef.current = controls !== null && controls !== void 0 ? controls : null;
+    } else {
+      containerRef.current = c;
+    }
+  }, [tableDom]);
+  if (!isVisible || !selectionRect) {
+    return null;
+  }
+  if (!editor) return null;
+  var renderCellMenu = function renderCellMenu() {
+    if (!CellMenu) return null;
+    return /*#__PURE__*/React.createElement("span", {
+      onMouseDown: function onMouseDown(e) {
+        return e.stopPropagation();
+      },
+      style: {
+        pointerEvents: 'auto'
+      }
+    }, /*#__PURE__*/React.createElement(CellMenu, {
+      onOpenChange: handleMenuOpenChange,
+      editor: editor,
+      onResizeStart: createResizeHandler
+    }));
+  };
+  var rootElement = containerRef.current || document.body;
+  return /*#__PURE__*/React.createElement(FloatingPortal, {
+    root: rootElement
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: refs.setFloating,
+    style: _objectSpread(_objectSpread({}, floatingStyles), {}, {
+      pointerEvents: 'none',
+      zIndex: 10
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "tiptap-table-selection-overlay"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      width: selectionRect.width,
+      height: selectionRect.height,
+      zIndex: 2,
+      borderRadius: 2,
+      top: 0,
+      left: 0
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      width: selectionRect.width,
+      height: selectionRect.height,
+      border: "2px solid var(--mui-palette-primary-main)",
+      borderRadius: 2,
+      zIndex: 3,
+      top: 0,
+      left: 0
+    }
+  }, renderCellMenu(), showResizeHandles && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    style: createCornerHandleStyles('tl', !activeHandle || activeHandle === 'tl', isMenuOpen),
+    onMouseDown: createResizeHandler('tl')
+  }), /*#__PURE__*/React.createElement("div", {
+    style: createCornerHandleStyles('tr', !activeHandle || activeHandle === 'tr', isMenuOpen),
+    onMouseDown: createResizeHandler('tr')
+  }), /*#__PURE__*/React.createElement("div", {
+    style: createCornerHandleStyles('bl', !activeHandle || activeHandle === 'bl', isMenuOpen),
+    onMouseDown: createResizeHandler('bl')
+  }), /*#__PURE__*/React.createElement("div", {
+    style: createCornerHandleStyles('br', !activeHandle || activeHandle === 'br', isMenuOpen),
+    onMouseDown: createResizeHandler('br')
+  }))))));
+};

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

@@ -1,4 +1,4 @@
 import { UploadFunction } from "../../type";
 export declare const FileHandlerExtension: (props: {
     onUpload?: UploadFunction;
-}) => import("@tiptap/core").Extension<Omit<import("@tiptap/extension-file-handler").FileHandlePluginOptions, "editor" | "key">, any>;
+}) => import("@tiptap/core").Extension<Omit<import("@tiptap/extension-file-handler").FileHandlePluginOptions, "key" | "editor">, any>;

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

@@ -372,15 +372,15 @@ export var InlineLinkExtension = Node.create({
   parseMarkdown: function parseMarkdown(token, helpers) {
     return helpers.createNode('inlineLink', {
       href: token.href || '',
-      title: token.title || null,
+      title: token.text || '',
       type: 'icon',
       target: '_blank'
     }, [helpers.createTextNode(token.text || '')]);
   },
-  renderMarkdown: function renderMarkdown(node, h) {
-    var _node$attrs;
+  renderMarkdown: function renderMarkdown(node) {
+    var _node$attrs, _node$attrs2, _node$attrs3;
     var href = ((_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.href) || '';
-    var text = h.renderChildren(node);
+    var text = ((_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.title) || ((_node$attrs3 = node.attrs) === null || _node$attrs3 === void 0 ? void 0 : _node$attrs3.href) || '';
     return "[".concat(text, "](").concat(href, ")");
   },
   addNodeView: function addNodeView() {