@ctzhian/tiptap 1.13.9 → 2.1.0

package/dist/extension/component/TableExtendButton/TableExtendButton.css

@@ -0,0 +1,30 @@
+.tiptap-table-extend-row-column-button {
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--mui-palette-background-paper3);
+  border-radius: var(--mui-shape-borderRadius);
+  cursor: pointer;
+}
+
+.tiptap-table-extend-row-column-button .tiptap-button-icon {
+  color: var(--mui-palette-text-disabled);
+}
+
+.tiptap-table-extend-row-column-button:hover {
+  background-color: var(--mui-palette-primary-main);
+}
+
+.tiptap-table-extend-row-column-button:hover .tiptap-button-icon {
+  color: var(--mui-palette-common-white);
+}
+
+.tiptap-table-extend-row-column-button.tiptap-table-row-end-add-remove {
+  width: 100%;
+  height: 0.75rem;
+}
+
+.tiptap-table-extend-row-column-button.tiptap-table-column-end-add-remove {
+  width: 0.75rem;
+}

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

@@ -0,0 +1,23 @@
+import type { Node } from '@tiptap/pm/model';
+import type { Editor } from '@tiptap/react';
+import React from 'react';
+import type { Orientation } from '../../../util/table-utils';
+import './TableExtendButton.css';
+interface TableExtendRowColumnButtonProps {
+    editor?: Editor | null;
+    block: Node;
+    onMouseDown: () => void;
+    onMouseUp: () => void;
+    orientation: Orientation;
+}
+/**
+ * Simplified button component for extending/reducing table dimensions
+ */
+export declare const TableExtendRowColumnButton: React.FC<TableExtendRowColumnButtonProps>;
+export interface TableExtendRowColumnButtonsProps {
+    editor?: Editor | null;
+    onMouseDown?: () => void;
+    onMouseUp?: () => void;
+}
+export declare const TableExtendRowColumnButtons: React.FC<TableExtendRowColumnButtonsProps>;
+export {};

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

@@ -0,0 +1,201 @@
+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; }
+import { FloatingPortal } from '@floating-ui/react';
+import { Box } from '@mui/material';
+import { TableMap } from '@tiptap/pm/tables';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { AddLineIcon } from "../../../component/Icons/add-line-icon";
+import { EMPTY_CELL_HEIGHT, EMPTY_CELL_WIDTH, countEmptyColumnsFromEnd, countEmptyRowsFromEnd, marginRound, runPreservingCursor, selectLastCell } from "../../../util/table-utils";
+import { useTableHandleState } from "../TableHandle/use-table-handle-state";
+import "./TableExtendButton.css";
+import { useTableExtendRowColumnButtonsPositioning } from "./use-table-extend-row-column";
+/**
+ * Simplified button component for extending/reducing table dimensions
+ */
+export var TableExtendRowColumnButton = function TableExtendRowColumnButton(_ref) {
+  var providedEditor = _ref.editor,
+    onMouseDown = _ref.onMouseDown,
+    onMouseUp = _ref.onMouseUp,
+    orientation = _ref.orientation;
+  var editor = providedEditor;
+  var state = useTableHandleState({
+    editor: editor
+  });
+  var isRowOrientation = orientation === 'row';
+  var movedRef = useRef(false);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    dragState = _useState2[0],
+    setDragState = _useState2[1];
+  var startDrag = useCallback(function (ev) {
+    if (!state) return;
+    var dims = TableMap.get(state.block);
+    movedRef.current = false;
+    setDragState({
+      startPos: isRowOrientation ? ev.clientY : ev.clientX,
+      originalHeight: dims.height,
+      originalWidth: dims.width
+    });
+    onMouseDown();
+    ev.preventDefault();
+  }, [state, isRowOrientation, onMouseDown]);
+  var handleClick = useCallback(function () {
+    if (movedRef.current || !editor || !state) return;
+    runPreservingCursor(editor, function () {
+      selectLastCell(editor, state.block, state.blockPos, orientation);
+      if (isRowOrientation) {
+        editor.commands.addRowAfter();
+      } else {
+        editor.commands.addColumnAfter();
+      }
+    });
+  }, [editor, isRowOrientation, orientation, state]);
+  useEffect(function () {
+    if (!dragState || !editor || !state) return;
+    var handleMove = function handleMove(ev) {
+      movedRef.current = true;
+      var currentPos = isRowOrientation ? ev.clientY : ev.clientX;
+      var diff = currentPos - dragState.startPos;
+      var cellSize = isRowOrientation ? EMPTY_CELL_HEIGHT : EMPTY_CELL_WIDTH;
+      var currentDims = TableMap.get(state.block);
+      var currentCount = isRowOrientation ? currentDims.height : currentDims.width;
+      var originalCount = isRowOrientation ? dragState.originalHeight : dragState.originalWidth;
+      var newCount = Math.max(1, originalCount + marginRound(diff / cellSize, 0.3));
+      var delta = newCount - currentCount;
+      if (delta === 0) return;
+
+      // Add rows/columns
+      if (delta > 0) {
+        runPreservingCursor(editor, function () {
+          selectLastCell(editor, state.block, state.blockPos, orientation);
+          for (var i = 0; i < delta; i++) {
+            if (isRowOrientation) {
+              editor.commands.addRowAfter();
+            } else {
+              editor.commands.addColumnAfter();
+            }
+          }
+        });
+      }
+      // Remove rows/columns - but only if they're empty
+      else {
+        runPreservingCursor(editor, function () {
+          var absDelta = Math.abs(delta);
+          var emptyCount = isRowOrientation ? countEmptyRowsFromEnd(editor, state.blockPos) : countEmptyColumnsFromEnd(editor, state.blockPos);
+
+          // Only remove up to the number of empty cells, and keep at least 1
+          var safeToRemove = Math.min(absDelta, emptyCount, currentCount - 1);
+          selectLastCell(editor, state.block, state.blockPos, orientation);
+          for (var i = 0; i < safeToRemove; i++) {
+            if (isRowOrientation) {
+              editor.commands.deleteRow();
+            } else {
+              editor.commands.deleteColumn();
+            }
+          }
+        });
+      }
+    };
+    var handleUp = function handleUp() {
+      setDragState(null);
+      onMouseUp();
+    };
+    window.addEventListener('mousemove', handleMove);
+    window.addEventListener('mouseup', handleUp);
+    return function () {
+      window.removeEventListener('mousemove', handleMove);
+      window.removeEventListener('mouseup', handleUp);
+    };
+  }, [dragState, editor, isRowOrientation, orientation, onMouseUp, state]);
+  if (!(editor !== null && editor !== void 0 && editor.isEditable)) return null;
+  return /*#__PURE__*/React.createElement(Box, {
+    component: "button",
+    className: "tiptap-table-extend-row-column-button ".concat(isRowOrientation ? 'tiptap-table-row-end-add-remove' : 'tiptap-table-column-end-add-remove', " ").concat(dragState ? 'editing' : ''),
+    onClick: handleClick,
+    onMouseDown: startDrag,
+    type: "button",
+    "aria-label": isRowOrientation ? 'Add or remove rows' : 'Add or remove columns',
+    sx: {
+      border: 'none',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: 'var(--mui-palette-background-paper3)',
+      borderRadius: 'var(--mui-shape-borderRadius)',
+      padding: 0,
+      cursor: 'pointer',
+      '&.tiptap-table-row-end-add-remove': {
+        width: '100%',
+        height: '0.75rem'
+      },
+      '&.tiptap-table-column-end-add-remove': {
+        width: '0.75rem'
+      },
+      '&:hover': {
+        backgroundColor: 'var(--mui-palette-primary-main)',
+        '& .MuiSvgIcon-root': {
+          color: 'var(--mui-palette-common-white)'
+        }
+      }
+    }
+  }, /*#__PURE__*/React.createElement(AddLineIcon, {
+    sx: {
+      width: '1rem',
+      height: '1rem',
+      flexShrink: 0,
+      color: 'var(--mui-palette-text-disabled)'
+    }
+  }));
+};
+export var TableExtendRowColumnButtons = function TableExtendRowColumnButtons(_ref2) {
+  var _state$showAddOrRemov, _state$showAddOrRemov2, _state$referencePosTa, _state$referencePosLa, _state$referencePosLa2;
+  var providedEditor = _ref2.editor,
+    onMouseDown = _ref2.onMouseDown,
+    onMouseUp = _ref2.onMouseUp;
+  var editor = providedEditor;
+  var state = useTableHandleState({
+    editor: editor
+  });
+  var _useTableExtendRowCol = useTableExtendRowColumnButtonsPositioning((_state$showAddOrRemov = state === null || state === void 0 ? void 0 : state.showAddOrRemoveColumnsButton) !== null && _state$showAddOrRemov !== void 0 ? _state$showAddOrRemov : false, (_state$showAddOrRemov2 = state === null || state === void 0 ? void 0 : state.showAddOrRemoveRowsButton) !== null && _state$showAddOrRemov2 !== void 0 ? _state$showAddOrRemov2 : false, (_state$referencePosTa = state === null || state === void 0 ? void 0 : state.referencePosTable) !== null && _state$referencePosTa !== void 0 ? _state$referencePosTa : null, (_state$referencePosLa = state === null || state === void 0 ? void 0 : state.referencePosLastRow) !== null && _state$referencePosLa !== void 0 ? _state$referencePosLa : null, (_state$referencePosLa2 = state === null || state === void 0 ? void 0 : state.referencePosLastCol) !== null && _state$referencePosLa2 !== void 0 ? _state$referencePosLa2 : null),
+    columnButton = _useTableExtendRowCol.columnButton,
+    rowButton = _useTableExtendRowCol.rowButton;
+  var handleDown = useCallback(function () {
+    if (!editor) return;
+    editor.commands.freezeHandles();
+    onMouseDown === null || onMouseDown === void 0 || onMouseDown();
+  }, [editor, onMouseDown]);
+  var handleUp = useCallback(function () {
+    if (!editor) return;
+    editor.commands.unfreezeHandles();
+    onMouseUp === null || onMouseUp === void 0 || onMouseUp();
+  }, [editor, onMouseUp]);
+  if (!state) return null;
+
+  // Insert into .table-controls container (widgetContainer)
+  var rootElement = state.widgetContainer || document.body;
+  return /*#__PURE__*/React.createElement(FloatingPortal, {
+    root: rootElement
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: rowButton.ref,
+    style: rowButton.style
+  }, /*#__PURE__*/React.createElement(TableExtendRowColumnButton, {
+    editor: editor,
+    orientation: "row",
+    block: state.block,
+    onMouseDown: handleDown,
+    onMouseUp: handleUp
+  })), /*#__PURE__*/React.createElement("div", {
+    ref: columnButton.ref,
+    style: columnButton.style
+  }, /*#__PURE__*/React.createElement(TableExtendRowColumnButton, {
+    editor: editor,
+    orientation: "column",
+    block: state.block,
+    onMouseDown: handleDown,
+    onMouseUp: handleUp
+  })));
+};

package/dist/extension/component/TableExtendButton/use-table-extend-row-column.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+interface TableExtendRowColumnButtonPositionResult {
+    isMounted: boolean;
+    ref: (node: HTMLElement | null) => void;
+    style: React.CSSProperties;
+}
+interface TableExtendRowColumnButtonsPositioningResult {
+    rowButton: TableExtendRowColumnButtonPositionResult;
+    columnButton: TableExtendRowColumnButtonPositionResult;
+}
+/**
+ * Hook for managing positioning of both row and column extend buttons
+ */
+export declare function useTableExtendRowColumnButtonsPositioning(showAddOrRemoveColumnsButton: boolean, showAddOrRemoveRowsButton: boolean, referencePosTable: DOMRect | null, referencePosLastRow: DOMRect | null, referencePosLastCol: DOMRect | null): TableExtendRowColumnButtonsPositioningResult;
+export {};

package/dist/extension/component/TableExtendButton/use-table-extend-row-column.js

@@ -0,0 +1,87 @@
+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 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 { offset, size, useFloating, useTransitionStyles } from '@floating-ui/react';
+import { useEffect, useMemo } from 'react';
+var ORIENTATION_CONFIG = {
+  row: {
+    placement: 'bottom',
+    sizeProperty: 'width'
+  },
+  column: {
+    placement: 'right',
+    sizeProperty: 'height'
+  }
+};
+
+/**
+ * Custom hook for positioning extend buttons using Floating UI React
+ */
+function useTableExtendRowColumnButtonPosition(orientation, show, referencePosTable) {
+  var config = ORIENTATION_CONFIG[orientation];
+  var _useFloating = useFloating({
+      open: show,
+      placement: config.placement,
+      middleware: [offset(4), size({
+        apply: function apply(_ref) {
+          var rects = _ref.rects,
+            elements = _ref.elements;
+          var floating = elements.floating;
+          if (!floating) return;
+
+          // Apply size based on orientation
+          var sizeValue = "".concat(rects.reference[config.sizeProperty], "px");
+          floating.style[config.sizeProperty] = sizeValue;
+        }
+      })]
+    }),
+    refs = _useFloating.refs,
+    update = _useFloating.update,
+    context = _useFloating.context,
+    floatingStyles = _useFloating.floatingStyles;
+  var _useTransitionStyles = useTransitionStyles(context),
+    isMounted = _useTransitionStyles.isMounted,
+    styles = _useTransitionStyles.styles;
+  useEffect(function () {
+    if (!referencePosTable) {
+      refs.setReference(null);
+      return;
+    }
+
+    // Create a virtual element that always returns the latest rect values
+    // This ensures autoUpdate can detect changes when scrolling
+    refs.setReference({
+      getBoundingClientRect: function getBoundingClientRect() {
+        // Always use the latest value from closure
+        return referencePosTable || new DOMRect();
+      }
+    });
+    update();
+  }, [referencePosTable, refs, update]);
+  return useMemo(function () {
+    return {
+      isMounted: isMounted,
+      ref: refs.setFloating,
+      style: _objectSpread(_objectSpread({
+        display: 'flex'
+      }, styles), floatingStyles)
+    };
+  }, [floatingStyles, isMounted, refs.setFloating, styles]);
+}
+
+/**
+ * Hook for managing positioning of both row and column extend buttons
+ */
+export function useTableExtendRowColumnButtonsPositioning(showAddOrRemoveColumnsButton, showAddOrRemoveRowsButton, referencePosTable, referencePosLastRow, referencePosLastCol) {
+  var rowButton = useTableExtendRowColumnButtonPosition('row', showAddOrRemoveRowsButton, referencePosLastRow || referencePosTable);
+  var columnButton = useTableExtendRowColumnButtonPosition('column', showAddOrRemoveColumnsButton, referencePosLastCol || referencePosTable);
+  return useMemo(function () {
+    return {
+      rowButton: rowButton,
+      columnButton: columnButton
+    };
+  }, [rowButton, columnButton]);
+}

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

@@ -0,0 +1,36 @@
+.tiptap-table-handle-menu {
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--mui-palette-background-paper3);
+  border-radius: var(--mui-shape-borderRadius);
+  cursor: pointer;
+}
+
+.tiptap-table-handle-menu:hover {
+  background-color: var(--mui-palette-primary-main);
+}
+
+.tiptap-table-handle-menu:hover .tiptap-button-icon {
+  color: var(--mui-palette-common-white);
+}
+
+.tiptap-table-handle-menu.menu-opened {
+  background-color: var(--mui-palette-primary-main);
+}
+
+.tiptap-table-handle-menu.is-dragging {
+  cursor: grabbing;
+  background-color: var(--mui-palette-primary-main);
+}
+
+.tiptap-table-handle-menu.row {
+  width: 0.75rem;
+  height: var(--table-handle-ref-height);
+}
+
+.tiptap-table-handle-menu.column {
+  height: 0.75rem;
+  width: var(--table-handle-ref-width);
+}

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

@@ -0,0 +1,17 @@
+import type { Node } from '@tiptap/pm/model';
+import type { Editor } from '@tiptap/react';
+import React from 'react';
+import type { Orientation } from '../../../util/table-utils';
+import './TableHandleMenu.css';
+interface TableHandleMenuProps {
+    editor?: Editor | null;
+    orientation: Orientation;
+    index?: number;
+    tableNode?: Node;
+    tablePos?: number;
+    onToggleOtherHandle?: (visible: boolean) => void;
+    onOpenChange?: (open: boolean) => void;
+    dragStart?: (e: React.DragEvent) => void;
+}
+export declare const TableHandleMenu: ({ editor, orientation, index, tableNode, tablePos, onToggleOtherHandle, onOpenChange, dragStart, }: TableHandleMenuProps) => React.JSX.Element | null;
+export {};