@ctzhian/tiptap 2.5.1 → 2.6.0

package/dist/contants/slash-commands.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AttachmentLineIcon, BilibiliLineIcon, CodeBoxLineIcon, CodeLineIcon, DoubleQuotesLIcon, EmotionLineIcon, FlowChartIcon, FunctionsIcon, H1Icon, H2Icon, H3Icon, ImageLineIcon, Information2LineIcon, LinkIcon, ListCheck2Icon, ListOrdered2Icon, ListUnorderedIcon, MenuFold2FillIcon, MovieLineIcon, Music2LineIcon, SeparatorIcon, SquareRootIcon, Table2Icon, WindowFillIcon } from "../component/Icons";
+import { AttachmentLineIcon, BilibiliLineIcon, CodeBoxLineIcon, CodeLineIcon, DoubleQuotesLIcon, EmotionLineIcon, FlipGridIcon, FlowChartIcon, FunctionsIcon, H1Icon, H2Icon, H3Icon, ImageLineIcon, Information2LineIcon, LinkIcon, ListCheck2Icon, ListOrdered2Icon, ListUnorderedIcon, MenuFold2FillIcon, MovieLineIcon, Music2LineIcon, SeparatorIcon, SquareRootIcon, Table2Icon, WindowFillIcon } from "../component/Icons";
 export var slashCommands = [{
   title: '标题1',
   shortcutKey: ['ctrl', 'alt', '1'],
@@ -110,9 +110,8 @@ export var slashCommands = [{
     editor.chain().focus().deleteRange(range).toggleTaskList().run();
   }
 }, {
-  title: '链接',
-  shortcutKey: ['ctrl', '1'],
-  icon: /*#__PURE__*/React.createElement(LinkIcon, {
+  title: '分割线',
+  icon: /*#__PURE__*/React.createElement(SeparatorIcon, {
     sx: {
       fontSize: '1rem'
     }
@@ -120,14 +119,12 @@ export var slashCommands = [{
   command: function command(_ref7) {
     var editor = _ref7.editor,
       range = _ref7.range;
-    editor.chain().focus().deleteRange(range).setInlineLink({
-      href: ''
-    }).run();
+    editor.chain().focus().deleteRange(range).setHorizontalRule().run();
   }
 }, {
-  title: '行内代码',
-  shortcutKey: ['ctrl', 'E'],
-  icon: /*#__PURE__*/React.createElement(CodeLineIcon, {
+  title: '链接',
+  shortcutKey: ['ctrl', '1'],
+  icon: /*#__PURE__*/React.createElement(LinkIcon, {
     sx: {
       fontSize: '1rem'
     }
@@ -135,12 +132,13 @@ export var slashCommands = [{
   command: function command(_ref8) {
     var editor = _ref8.editor,
       range = _ref8.range;
-    editor.chain().focus().deleteRange(range).setMark('code').run();
+    editor.chain().focus().deleteRange(range).setInlineLink({
+      href: ''
+    }).run();
   }
 }, {
-  title: '代码块',
-  shortcutKey: ['ctrl', 'alt', 'C'],
-  icon: /*#__PURE__*/React.createElement(CodeBoxLineIcon, {
+  title: '表情',
+  icon: /*#__PURE__*/React.createElement(EmotionLineIcon, {
     sx: {
       fontSize: '1rem'
     }
@@ -148,12 +146,12 @@ export var slashCommands = [{
   command: function command(_ref9) {
     var editor = _ref9.editor,
       range = _ref9.range;
-    editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
+    editor.chain().deleteRange(range).insertContentAt(range.from, ' : ').focus(range.from + 2).run();
   }
 }, {
-  title: '折叠面板',
-  shortcutKey: ['ctrl', '8'],
-  icon: /*#__PURE__*/React.createElement(MenuFold2FillIcon, {
+  title: '行内代码',
+  shortcutKey: ['ctrl', 'E'],
+  icon: /*#__PURE__*/React.createElement(CodeLineIcon, {
     sx: {
       fontSize: '1rem'
     }
@@ -161,12 +159,12 @@ export var slashCommands = [{
   command: function command(_ref10) {
     var editor = _ref10.editor,
       range = _ref10.range;
-    editor.chain().focus().deleteRange(range).setDetails().run();
+    editor.chain().focus().deleteRange(range).setMark('code').run();
   }
 }, {
-  title: '引用',
-  shortcutKey: ['ctrl', 'shift', 'B'],
-  icon: /*#__PURE__*/React.createElement(DoubleQuotesLIcon, {
+  title: '代码块',
+  shortcutKey: ['ctrl', 'alt', 'C'],
+  icon: /*#__PURE__*/React.createElement(CodeBoxLineIcon, {
     sx: {
       fontSize: '1rem'
     }
@@ -174,11 +172,12 @@ export var slashCommands = [{
   command: function command(_ref11) {
     var editor = _ref11.editor,
       range = _ref11.range;
-    editor.chain().focus().deleteRange(range).toggleBlockquote().run();
+    editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
   }
 }, {
-  title: '流程图',
-  icon: /*#__PURE__*/React.createElement(FlowChartIcon, {
+  title: '引用',
+  shortcutKey: ['ctrl', 'shift', 'B'],
+  icon: /*#__PURE__*/React.createElement(DoubleQuotesLIcon, {
     sx: {
       fontSize: '1rem'
     }
@@ -186,14 +185,11 @@ export var slashCommands = [{
   command: function command(_ref12) {
     var editor = _ref12.editor,
       range = _ref12.range;
-    editor.chain().focus().deleteRange(range).setFlow({
-      code: '',
-      width: '100%'
-    }).run();
+    editor.chain().focus().deleteRange(range).toggleBlockquote().run();
   }
 }, {
-  title: '表情',
-  icon: /*#__PURE__*/React.createElement(EmotionLineIcon, {
+  title: '分栏',
+  icon: /*#__PURE__*/React.createElement(FlipGridIcon, {
     sx: {
       fontSize: '1rem'
     }
@@ -201,11 +197,12 @@ export var slashCommands = [{
   command: function command(_ref13) {
     var editor = _ref13.editor,
       range = _ref13.range;
-    editor.chain().deleteRange(range).insertContentAt(range.from, ' : ').focus(range.from + 2).run();
+    editor.chain().focus().deleteRange(range).setFlipGrid().run();
   }
 }, {
-  title: '分割线',
-  icon: /*#__PURE__*/React.createElement(SeparatorIcon, {
+  title: '折叠面板',
+  shortcutKey: ['ctrl', '8'],
+  icon: /*#__PURE__*/React.createElement(MenuFold2FillIcon, {
     sx: {
       fontSize: '1rem'
     }
@@ -213,11 +210,11 @@ export var slashCommands = [{
   command: function command(_ref14) {
     var editor = _ref14.editor,
       range = _ref14.range;
-    editor.chain().focus().deleteRange(range).setHorizontalRule().run();
+    editor.chain().focus().deleteRange(range).setDetails().run();
   }
 }, {
-  title: 'Bilibili 视频',
-  icon: /*#__PURE__*/React.createElement(BilibiliLineIcon, {
+  title: '流程图',
+  icon: /*#__PURE__*/React.createElement(FlowChartIcon, {
     sx: {
       fontSize: '1rem'
     }
@@ -225,6 +222,21 @@ export var slashCommands = [{
   command: function command(_ref15) {
     var editor = _ref15.editor,
       range = _ref15.range;
+    editor.chain().focus().deleteRange(range).setFlow({
+      code: '',
+      width: '100%'
+    }).run();
+  }
+}, {
+  title: 'Bilibili 视频',
+  icon: /*#__PURE__*/React.createElement(BilibiliLineIcon, {
+    sx: {
+      fontSize: '1rem'
+    }
+  }),
+  command: function command(_ref16) {
+    var editor = _ref16.editor,
+      range = _ref16.range;
     editor.chain().focus().deleteRange(range).setIframe({
       src: '',
       width: '100%',
@@ -239,9 +251,9 @@ export var slashCommands = [{
       fontSize: '1rem'
     }
   }),
-  command: function command(_ref16) {
-    var editor = _ref16.editor,
-      range = _ref16.range;
+  command: function command(_ref17) {
+    var editor = _ref17.editor,
+      range = _ref17.range;
     editor.chain().focus().deleteRange(range).setIframe({
       src: '',
       width: '100%',
@@ -257,10 +269,10 @@ export var slashCommands = [{
       fontSize: '1rem'
     }
   }),
-  command: function command(_ref17) {
-    var editor = _ref17.editor,
-      range = _ref17.range,
-      attrs = _ref17.attrs;
+  command: function command(_ref18) {
+    var editor = _ref18.editor,
+      range = _ref18.range,
+      attrs = _ref18.attrs;
     editor.chain().focus().deleteRange(range).insertTable({
       rows: attrs.rows || 3,
       cols: attrs.cols || 4,
@@ -274,10 +286,10 @@ export var slashCommands = [{
       fontSize: '1rem'
     }
   }),
-  command: function command(_ref18) {
-    var editor = _ref18.editor,
-      range = _ref18.range,
-      attrs = _ref18.attrs;
+  command: function command(_ref19) {
+    var editor = _ref19.editor,
+      range = _ref19.range,
+      attrs = _ref19.attrs;
     editor.chain().focus().deleteRange(range).toggleAlert({
       type: (attrs === null || attrs === void 0 ? void 0 : attrs.type) || 'icon',
       variant: (attrs === null || attrs === void 0 ? void 0 : attrs.variant) || 'info'
@@ -290,9 +302,9 @@ export var slashCommands = [{
       fontSize: '1rem'
     }
   }),
-  command: function command(_ref19) {
-    var editor = _ref19.editor,
-      range = _ref19.range;
+  command: function command(_ref20) {
+    var editor = _ref20.editor,
+      range = _ref20.range;
     editor.chain().focus().deleteRange(range).setDetails().run();
   }
 }, {
@@ -302,9 +314,9 @@ export var slashCommands = [{
       fontSize: '1rem'
     }
   }),
-  command: function command(_ref20) {
-    var editor = _ref20.editor,
-      range = _ref20.range;
+  command: function command(_ref21) {
+    var editor = _ref21.editor,
+      range = _ref21.range;
     editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
   }
 }, {
@@ -314,9 +326,9 @@ export var slashCommands = [{
       fontSize: '1rem'
     }
   }),
-  command: function command(_ref21) {
-    var editor = _ref21.editor,
-      range = _ref21.range;
+  command: function command(_ref22) {
+    var editor = _ref22.editor,
+      range = _ref22.range;
     editor.chain().focus().deleteRange(range).setInlineMath({
       latex: ''
     }).run();
@@ -328,9 +340,9 @@ export var slashCommands = [{
       fontSize: '1rem'
     }
   }),
-  command: function command(_ref22) {
-    var editor = _ref22.editor,
-      range = _ref22.range;
+  command: function command(_ref23) {
+    var editor = _ref23.editor,
+      range = _ref23.range;
     editor.chain().focus().deleteRange(range).setBlockMath({
       latex: ''
     }).run();
@@ -342,9 +354,9 @@ export var slashCommands = [{
       fontSize: '1rem'
     }
   }),
-  command: function command(_ref23) {
-    var editor = _ref23.editor,
-      range = _ref23.range;
+  command: function command(_ref24) {
+    var editor = _ref24.editor,
+      range = _ref24.range;
     editor.chain().focus().deleteRange(range).setImage({
       src: '',
       width: 760
@@ -357,9 +369,9 @@ export var slashCommands = [{
       fontSize: '1rem'
     }
   }),
-  command: function command(_ref24) {
-    var editor = _ref24.editor,
-      range = _ref24.range;
+  command: function command(_ref25) {
+    var editor = _ref25.editor,
+      range = _ref25.range;
     editor.chain().focus().deleteRange(range).setVideo({
       src: '',
       width: 760
@@ -372,9 +384,9 @@ export var slashCommands = [{
       fontSize: '1rem'
     }
   }),
-  command: function command(_ref25) {
-    var editor = _ref25.editor,
-      range = _ref25.range;
+  command: function command(_ref26) {
+    var editor = _ref26.editor,
+      range = _ref26.range;
     editor.chain().focus().deleteRange(range).setAudio({
       src: ''
     }).run();
@@ -386,9 +398,9 @@ export var slashCommands = [{
       fontSize: '1rem'
     }
   }),
-  command: function command(_ref26) {
-    var editor = _ref26.editor,
-      range = _ref26.range;
+  command: function command(_ref27) {
+    var editor = _ref27.editor,
+      range = _ref27.range;
     editor.chain().focus().deleteRange(range).setInlineAttachment({
       url: '',
       title: '',

package/dist/extension/component/FlipGrid/ColumnView.d.ts

@@ -0,0 +1,4 @@
+import { type NodeViewProps } from '@tiptap/react';
+import React from 'react';
+declare const ColumnView: React.FC<NodeViewProps>;
+export default ColumnView;

package/dist/extension/component/FlipGrid/ColumnView.js

@@ -0,0 +1,191 @@
+import { HoverPopover } from "../../../component/HoverPopover";
+import { DeleteLineIcon, FlipLeftLineIcon, FlipRightLineIcon } from "../../../component/Icons";
+import { ToolbarItem } from "../../../component/Toolbar";
+import { Divider, Stack } from '@mui/material';
+import { NodeViewContent, NodeViewWrapper } from '@tiptap/react';
+import React, { useEffect, useMemo, useRef } from 'react';
+import { MAX_COLUMNS, MIN_WIDTH } from "../../node/FlipGrid";
+import { applyFlipGridWidths, collectWidths, findChildIndex, findFlipGridAncestor, normalizeWithMin } from "./utils";
+var ColumnView = function ColumnView(_ref) {
+  var node = _ref.node,
+    editor = _ref.editor,
+    getPos = _ref.getPos;
+  var widths = useMemo(function () {
+    var pos = typeof getPos === 'function' ? getPos() : getPos;
+    if (typeof pos !== 'number') return [];
+    var $pos = editor.state.doc.resolve(pos);
+    var found = findFlipGridAncestor($pos);
+    if (!found) return [];
+    var parent = found.node;
+    var list = collectWidths(parent);
+    var total = list.reduce(function (acc, cur) {
+      return acc + cur;
+    }, 0);
+    if (!Number.isFinite(total) || total <= 0 || total > 100000) {
+      var fallback = parent.childCount > 0 ? 100 / parent.childCount : 0;
+      return normalizeWithMin(new Array(parent.childCount).fill(fallback), MIN_WIDTH);
+    }
+    return normalizeWithMin(list, MIN_WIDTH);
+  }, [node, getPos]);
+  var applyWidths = function applyWidths(nextWidths, insertAt, removeIndex, focusIndex) {
+    var state = editor.state,
+      view = editor.view;
+    var pos = typeof getPos === 'function' ? getPos() : getPos;
+    if (typeof pos !== 'number') return false;
+    var $pos = state.doc.resolve(pos);
+    var found = findFlipGridAncestor($pos);
+    if (!found) {
+      console.warn('[FlipGrid] parent not found for applyWidths', {
+        pos: pos,
+        depth: $pos.depth
+      });
+      return false;
+    }
+    var parent = found.node,
+      parentDepth = found.depth;
+    var parentPos = $pos.start(parentDepth) - 1;
+    if (!Number.isFinite(parentPos) || parentPos < 0) return false;
+    var tr = state.tr;
+    var _applyFlipGridWidths = applyFlipGridWidths({
+        tr: tr,
+        parentNode: parent,
+        parentPos: parentPos,
+        nextWidths: nextWidths,
+        minWidth: MIN_WIDTH,
+        insertAt: insertAt,
+        removeIndex: removeIndex,
+        selection: state.selection,
+        focusIndex: focusIndex
+      }),
+      changed = _applyFlipGridWidths.changed;
+    if (changed) {
+      view.dispatch(tr);
+      if (typeof focusIndex === 'number') {
+        view.focus();
+      }
+    }
+    return changed;
+  };
+  var handleInsert = function handleInsert(direction) {
+    if (!editor.isEditable) return;
+    var pos = typeof getPos === 'function' ? getPos() : getPos;
+    if (typeof pos !== 'number') return;
+    var $pos = editor.state.doc.resolve(pos);
+    var found = findFlipGridAncestor($pos);
+    if (!found) {
+      console.warn('[FlipGrid] parent not found for insert', {
+        pos: pos,
+        depth: $pos.depth
+      });
+      return;
+    }
+    var parent = found.node,
+      parentDepth = found.depth;
+    var colIndex = findChildIndex(parent, node);
+    if (colIndex < 0) return;
+    if (parent.childCount >= MAX_COLUMNS) return;
+    var insertIndex = direction === 'left' ? colIndex : colIndex + 1;
+    var currentWidths = collectWidths(parent);
+    var newWidth = Math.max(MIN_WIDTH, Number((100 / (parent.childCount + 1)).toFixed(2)));
+    var shrinkFactor = (100 - newWidth) / 100;
+    var nextWidths = currentWidths.map(function (w) {
+      return w * shrinkFactor;
+    });
+    nextWidths.splice(insertIndex, 0, newWidth);
+    applyWidths(nextWidths, insertIndex, undefined, insertIndex);
+  };
+  var handleDelete = function handleDelete() {
+    if (!editor.isEditable) return;
+    var pos = typeof getPos === 'function' ? getPos() : getPos;
+    if (typeof pos !== 'number') return;
+    var $pos = editor.state.doc.resolve(pos);
+    var found = findFlipGridAncestor($pos);
+    if (!found) {
+      console.warn('[FlipGrid] parent not found for delete', {
+        pos: pos,
+        depth: $pos.depth
+      });
+      return;
+    }
+    var parent = found.node,
+      parentDepth = found.depth;
+    if (parent.childCount <= 2) return;
+    var colIndex = findChildIndex(parent, node);
+    if (colIndex < 0) return;
+    var currentWidths = collectWidths(parent);
+    var nextWidths = currentWidths.filter(function (_, idx) {
+      return idx !== colIndex;
+    });
+    var targetFocus = Math.max(0, Math.min(colIndex - 1, nextWidths.length - 1));
+    applyWidths(nextWidths, undefined, colIndex, targetFocus);
+  };
+  var wrapperRef = useRef(null);
+  useEffect(function () {
+    var _ref2, _node$attrs$width;
+    var parent = (_ref2 = wrapperRef.current || null) === null || _ref2 === void 0 ? void 0 : _ref2.parentElement;
+    if (!parent) return;
+    parent.style.width = "".concat((_node$attrs$width = node.attrs.width) !== null && _node$attrs$width !== void 0 ? _node$attrs$width : 0, "%");
+  }, [node.attrs.width]);
+  return /*#__PURE__*/React.createElement(NodeViewWrapper, {
+    as: "div",
+    ref: wrapperRef,
+    "data-type": "flip-grid-column",
+    style: {
+      width: '100%',
+      height: '100%',
+      position: 'relative'
+    }
+  }, editor.isEditable ? /*#__PURE__*/React.createElement(HoverPopover, {
+    placement: "top",
+    offset: 4,
+    actions: /*#__PURE__*/React.createElement(Stack, {
+      direction: 'row',
+      alignItems: 'center',
+      sx: {
+        p: 0.5
+      }
+    }, /*#__PURE__*/React.createElement(ToolbarItem, {
+      icon: /*#__PURE__*/React.createElement(FlipLeftLineIcon, {
+        sx: {
+          fontSize: '1rem'
+        }
+      }),
+      text: "\u5DE6\u4FA7\u63D2\u5165",
+      onClick: function onClick() {
+        return handleInsert('left');
+      }
+    }), /*#__PURE__*/React.createElement(ToolbarItem, {
+      icon: /*#__PURE__*/React.createElement(FlipRightLineIcon, {
+        sx: {
+          fontSize: '1rem'
+        }
+      }),
+      text: "\u53F3\u4FA7\u63D2\u5165",
+      onClick: function onClick() {
+        return handleInsert('right');
+      }
+    }), widths.length > 2 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__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(DeleteLineIcon, {
+        sx: {
+          fontSize: '1rem'
+        }
+      }),
+      tip: "\u5220\u9664\u5F53\u524D\u680F",
+      onClick: handleDelete
+    })))
+  }, /*#__PURE__*/React.createElement(NodeViewContent, {
+    className: "flip-grid-column-inner"
+  })) : /*#__PURE__*/React.createElement(NodeViewContent, {
+    className: "flip-grid-column-inner"
+  }));
+};
+export default ColumnView;

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

@@ -0,0 +1,4 @@
+import { type NodeViewProps } from '@tiptap/react';
+import React from 'react';
+declare const FlipGridView: React.FC<NodeViewProps>;
+export default FlipGridView;