@ctzhian/tiptap 1.5.0 → 1.5.1

package/dist/component/CustomDragHandle/index.js

@@ -17,7 +17,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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 { AlignBottomIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AlignTopIcon, ArrowDownSLineIcon, AttachmentLineIcon, BrushLineIcon, DeleteLineIcon, DownloadLineIcon, DraggableIcon, FontSizeIcon, FormatClearIcon, H1Icon, H2Icon, H3Icon, ImageLineIcon, IndentDecreaseIcon, IndentIncreaseIcon, Information2LineIcon, ListCheck3Icon, ListOrdered2Icon, ListUnorderedIcon, MovieLineIcon, Music2LineIcon, QuoteTextIcon, Repeat2LineIcon, ScissorsCutLineIcon, SeparatorIcon, TextIcon, TextWrapIcon } from "../Icons";
+import { AddLineIcon, AlignBottomIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AlignTopIcon, ArrowDownSLineIcon, AttachmentLineIcon, BrushLineIcon, DeleteLineIcon, DownloadLineIcon, DraggableIcon, FontSizeIcon, FormatClearIcon, H1Icon, H2Icon, H3Icon, ImageLineIcon, IndentDecreaseIcon, IndentIncreaseIcon, Information2LineIcon, ListCheck3Icon, ListOrdered2Icon, ListUnorderedIcon, MovieLineIcon, Music2LineIcon, QuoteTextIcon, Repeat2LineIcon, ScissorsCutLineIcon, SeparatorIcon, TextIcon, TextWrapIcon } from "../Icons";
 import { NODE_TYPE_LABEL, NodeTypeEnum } from "../../contants/enums";
 import { Box, Divider, Stack, Typography, useTheme } from '@mui/material';
 import DragHandle from '@tiptap/extension-drag-handle-react';
@@ -40,7 +40,6 @@ var DragIcon = function DragIcon(_ref) {
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
-      mr: 1,
       color: 'text.tertiary',
       cursor: 'grab',
       borderColor: 'divider',
@@ -61,11 +60,43 @@ var DragIcon = function DragIcon(_ref) {
     }
   }));
 };
-var CustomDragHandle = function CustomDragHandle(_ref2) {
+var AddIcon = function AddIcon(_ref2) {
+  var onClick = _ref2.onClick;
+  return /*#__PURE__*/React.createElement(Box, {
+    onClick: onClick,
+    sx: {
+      width: '1.25rem',
+      height: '1.25rem',
+      borderRadius: '0.25rem',
+      border: '1px solid',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      color: 'text.tertiary',
+      cursor: 'grab',
+      borderColor: 'divider',
+      bgcolor: 'background.paper',
+      transition: 'all 0.2s ease-in-out',
+      '&:hover': {
+        color: 'text.secondary',
+        bgcolor: 'divider'
+      },
+      '&:active': {
+        color: 'text.primary',
+        cursor: 'grabbing'
+      }
+    }
+  }, /*#__PURE__*/React.createElement(AddLineIcon, {
+    sx: {
+      fontSize: '1.25rem'
+    }
+  }));
+};
+var CustomDragHandle = function CustomDragHandle(_ref3) {
   var _current$node3, _current$node4, _current$node5, _current$node6, _current$node7, _current$node8, _current$node9, _current$node10, _current$node11, _current$node12, _current$node13, _current$node14, _current$node15, _current$node16;
-  var editor = _ref2.editor,
-    more = _ref2.more,
-    onTip = _ref2.onTip;
+  var editor = _ref3.editor,
+    more = _ref3.more,
+    onTip = _ref3.onTip;
   var theme = useTheme();
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
@@ -210,9 +241,9 @@ var CustomDragHandle = function CustomDragHandle(_ref2) {
     var attrs = current.editor.getAttributes(node.type.name);
     return Number(attrs.indent) || 0;
   };
-  var shouldShowButton = function shouldShowButton(_ref3) {
-    var editor = _ref3.editor,
-      data = _ref3.data;
+  var shouldShowButton = function shouldShowButton(_ref4) {
+    var editor = _ref4.editor,
+      data = _ref4.data;
     if (!editor || !editor.isEditable) return false;
     var currentNode = data.node;
     var empty = (currentNode === null || currentNode === void 0 ? void 0 : currentNode.textContent) === '';
@@ -251,7 +282,38 @@ var CustomDragHandle = function CustomDragHandle(_ref2) {
   return /*#__PURE__*/React.createElement(DragHandle, {
     editor: editor,
     onNodeChange: updateNodeChange
-  }, currentNode ? /*#__PURE__*/React.createElement(Menu, {
+  }, /*#__PURE__*/React.createElement(Stack, {
+    direction: 'row',
+    alignItems: 'center',
+    gap: 1,
+    sx: {
+      mr: 1,
+      height: '1.625rem'
+    }
+  }, /*#__PURE__*/React.createElement(AddIcon, {
+    onClick: function onClick(event) {
+      event.stopPropagation();
+      if (current.node && current.pos !== undefined) {
+        if (current.pos === 0) {
+          current.editor.chain().focus().insertContentAt(current.pos, {
+            type: 'paragraph',
+            content: [{
+              type: 'text',
+              text: '/'
+            }]
+          }).run();
+        } else {
+          current.editor.chain().focus().insertContentAt(current.pos + current.node.nodeSize, {
+            type: 'paragraph',
+            content: [{
+              type: 'text',
+              text: '/'
+            }]
+          }).run();
+        }
+      }
+    }
+  }), currentNode ? /*#__PURE__*/React.createElement(Menu, {
     context: /*#__PURE__*/React.createElement(DragIcon, null),
     anchorOrigin: {
       vertical: 'bottom',
@@ -1340,6 +1402,6 @@ var CustomDragHandle = function CustomDragHandle(_ref2) {
         return onClick;
       }()
     }] : []))
-  }) : /*#__PURE__*/React.createElement(DragIcon, null));
+  }) : /*#__PURE__*/React.createElement(DragIcon, null)));
 };
 export default CustomDragHandle;

package/dist/component/FloatingPopover/index.d.ts

@@ -1,8 +1,8 @@
-import { Strategy } from '@floating-ui/dom';
+import { Strategy, VirtualElement } from '@floating-ui/dom';
 import React from 'react';
 export interface FloatingPopoverProps {
     open: boolean;
-    anchorEl: HTMLElement | null;
+    anchorEl: HTMLElement | VirtualElement | null;
     onClose: () => void;
     children: React.ReactNode;
     strategy?: Strategy;

package/dist/component/FloatingPopover/index.js

@@ -70,8 +70,12 @@ export var FloatingPopover = function FloatingPopover(_ref) {
       }
     };
     var handleClickOutside = function handleClickOutside(event) {
-      if (popoverRef.current && !popoverRef.current.contains(event.target) && anchorEl && !anchorEl.contains(event.target)) {
-        onClose();
+      if (popoverRef.current && !popoverRef.current.contains(event.target)) {
+        // 仅当锚点为真实元素时，才检测是否点击在锚点上
+        var isHitAnchor = anchorEl instanceof HTMLElement && anchorEl.contains(event.target);
+        if (!isHitAnchor) {
+          onClose();
+        }
       }
     };
     document.addEventListener('keydown', handleEscape);
@@ -100,6 +104,7 @@ export var FloatingPopover = function FloatingPopover(_ref) {
       left: position.x,
       top: position.y,
       zIndex: 1300,
+      boxShadow: 'var(--mui-shadows-1)',
       borderRadius: 'var(--mui-shape-borderRadius)'
     }, style),
     elevation: 8

package/dist/component/Icons/add-line-icon.d.ts

@@ -0,0 +1,6 @@
+import { SvgIconProps } from "@mui/material";
+import * as React from "react";
+export declare const AddLineIcon: {
+    (props: SvgIconProps): React.JSX.Element;
+    displayName: string;
+};

package/dist/component/Icons/add-line-icon.js

@@ -0,0 +1,13 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import { SvgIcon } from "@mui/material";
+import * as React from "react";
+export var AddLineIcon = function AddLineIcon(props) {
+  return /*#__PURE__*/React.createElement(SvgIcon, _extends({
+    viewBox: "0 0 24 24",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"
+  }));
+};
+AddLineIcon.displayName = 'icon-add-line';

package/dist/component/Icons/index.d.ts

@@ -1,3 +1,4 @@
+export { AddLineIcon } from './add-line-icon';
 export { AiGenerate2Icon } from './ai-generate-2-icon';
 export { AiGenerateTextIcon } from './ai-generate-text-icon';
 export { AlignBottomIcon } from './align-bottom-icon';

package/dist/component/Icons/index.js

@@ -1,6 +1,7 @@
 // 此文件由脚本自动生成
 // 导出所有图标组件
 
+export { AddLineIcon } from "./add-line-icon";
 export { AiGenerate2Icon } from "./ai-generate-2-icon";
 export { AiGenerateTextIcon } from "./ai-generate-text-icon";
 export { AlignBottomIcon } from "./align-bottom-icon";

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

@@ -94,7 +94,7 @@ var LinkViewWrapper = function LinkViewWrapper(_ref) {
   };
   var handleDeleteLink = function handleDeleteLink() {
     editor.commands.deleteNode(node.type);
-    editor.commands.insertContent(attrs.title || getLinkTitle(attrs.href));
+    editor.commands.insertContent(attrs.title || attrs.href);
   };
   var handleCopyLink = useCallback( /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {

package/dist/extension/component/SlashCommandsList/Overlay.d.ts

@@ -0,0 +1,10 @@
+import { SlashCommandsListRef } from "../../../type";
+import { SuggestionProps } from '@tiptap/suggestion';
+import React from 'react';
+export type SlashCommandsOverlayProps = SuggestionProps<any> & {
+    open: boolean;
+};
+declare const SlashCommandsOverlay: React.ForwardRefExoticComponent<SuggestionProps<any, any> & {
+    open: boolean;
+} & React.RefAttributes<SlashCommandsListRef>>;
+export default SlashCommandsOverlay;

package/dist/extension/component/SlashCommandsList/Overlay.js

@@ -0,0 +1,26 @@
+import { FloatingPopover } from "../../../component";
+import React, { forwardRef, useMemo } from 'react';
+import SlashCommandsList from "./index";
+var SlashCommandsOverlay = /*#__PURE__*/forwardRef(function (props, ref) {
+  var anchorEl = useMemo(function () {
+    if (!props.clientRect) return null;
+    return {
+      getBoundingClientRect: function getBoundingClientRect() {
+        return props.clientRect();
+      }
+    };
+  }, [props.clientRect]);
+  return /*#__PURE__*/React.createElement(FloatingPopover, {
+    open: Boolean(props.open && anchorEl),
+    anchorEl: anchorEl,
+    onClose: function onClose() {/* 由外部生命周期控制关闭 */},
+    placement: "bottom"
+  }, /*#__PURE__*/React.createElement(SlashCommandsList, {
+    ref: ref,
+    items: props.items,
+    command: props.command,
+    editor: props.editor
+  }));
+});
+SlashCommandsOverlay.displayName = 'SlashCommandsOverlay';
+export default SlashCommandsOverlay;

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

@@ -8,7 +8,7 @@ import { NestedList } from "../../../component";
 import { ArrowDownSLineIcon, AttachmentLineIcon, CheckboxCircleFillIcon, CloseCircleFillIcon, ErrorWarningFillIcon, FormulaIcon, FunctionsIcon, ImageLineIcon, Information2FillIcon, Information2LineIcon, MovieLineIcon, Music2LineIcon, SquareRootIcon, Table2Icon, UploadIcon } from "../../../component/Icons";
 import { ToolbarItem } from "../../../component/Toolbar";
 import TableSizePicker from "../../../component/Toolbar/TableSizePicker";
-import { Divider, Paper, Stack } from '@mui/material';
+import { Box, Divider, Stack } from '@mui/material';
 import React, { forwardRef } from 'react';
 var SlashCommandsList = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var items = _ref.items,
@@ -16,10 +16,8 @@ var SlashCommandsList = /*#__PURE__*/forwardRef(function (_ref, ref) {
   if (items.length === 0) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Paper, {
-    elevation: 8,
+  return /*#__PURE__*/React.createElement(Box, {
     sx: {
-      borderRadius: 'var(--mui-shape-borderRadius)',
       width: '224px',
       p: 0.5
     }

package/dist/extension/suggestion/slash.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { Editor } from "../../type";
 import { SuggestionProps } from '@tiptap/suggestion';
 export declare const slashSuggestion: () => {
     items: ({ query }: {
@@ -7,7 +8,7 @@ export declare const slashSuggestion: () => {
         title: string;
         icon: import("react").JSX.Element;
         command: ({ editor, range, attrs }: {
-            editor: import("@tiptap/core").Editor;
+            editor: Editor;
             range: {
                 from: number;
                 to: number;
@@ -15,8 +16,11 @@ export declare const slashSuggestion: () => {
             attrs: any;
         }) => void;
     }[];
+    decorationTag: string;
+    decorationClass: string;
+    decorationContent: string;
     command: ({ editor, range, props }: {
-        editor: any;
+        editor: Editor;
         range: {
             from: number;
             to: number;
@@ -25,11 +29,11 @@ export declare const slashSuggestion: () => {
     }) => void;
     render: () => {
         onStart: (props: SuggestionProps<any>) => void;
-        onUpdate(props: SuggestionProps<any>): void;
+        onUpdate(props: SuggestionProps<any>): false | undefined;
         onKeyDown(props: {
             event: KeyboardEvent;
         }): boolean;
-        onExit(): void;
+        onExit(): false | undefined;
     };
 };
 export default slashSuggestion;

package/dist/extension/suggestion/slash.js

@@ -1,17 +1,24 @@
+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 { slashCommands } from "../../contants/slash-commands";
-import { updatePosition } from "../../util";
 import { ReactRenderer } from '@tiptap/react';
-import SlashCommandsList from "../component/SlashCommandsList/index";
+import SlashCommandsOverlay from "../component/SlashCommandsList/Overlay";
 export var slashSuggestion = function slashSuggestion() {
   return {
     items: function items(_ref) {
       var query = _ref.query;
-      var commands = slashCommands;
-      if (!query) return commands;
-      return commands.filter(function (item) {
-        return item.title.toLowerCase().includes(query.toLowerCase());
-      });
+      return slashCommands;
+      // const commands = slashCommands
+      // if (!query) return commands
+      // return commands.filter(item => item.title.toLowerCase().includes(query.toLowerCase()))
     },
+    decorationTag: 'span',
+    decorationClass: 'slash-decoration',
+    decorationContent: '插入',
     command: function command(_ref2) {
       var editor = _ref2.editor,
         range = _ref2.range,
@@ -24,23 +31,38 @@ export var slashSuggestion = function slashSuggestion() {
     },
     render: function render() {
       var component = null;
+      var lastProps = null;
+      var isCaretAfterSlash = function isCaretAfterSlash(editor) {
+        try {
+          var pos = editor.state.selection.from;
+          if (pos <= 1) return false;
+          var char = editor.state.doc.textBetween(pos - 1, pos, '\n', '\n');
+          return char === '/';
+        } catch (_unused) {
+          return false;
+        }
+      };
       return {
         onStart: function onStart(props) {
-          component = new ReactRenderer(SlashCommandsList, {
-            props: props,
+          lastProps = props;
+          var shouldOpen = !props.query || props.query.length === 0;
+          component = new ReactRenderer(SlashCommandsOverlay, {
+            props: _objectSpread(_objectSpread({}, props), {}, {
+              open: shouldOpen
+            }),
             editor: props.editor
           });
           if (!props.clientRect) return;
           var element = component.element;
-          element.style.position = 'absolute';
           document.body.appendChild(element);
-          updatePosition(props.editor, element);
         },
         onUpdate: function onUpdate(props) {
-          if (!component) return;
-          component.updateProps(props);
-          if (!props.clientRect) return;
-          updatePosition(props.editor, component.element);
+          if (!component) return false;
+          lastProps = props;
+          var shouldOpen = !props.query || props.query.length === 0;
+          component.updateProps(_objectSpread(_objectSpread({}, props), {}, {
+            open: shouldOpen
+          }));
         },
         onKeyDown: function onKeyDown(props) {
           var _component$ref;
@@ -53,7 +75,15 @@ export var slashSuggestion = function slashSuggestion() {
           return ((_component$ref = component.ref) === null || _component$ref === void 0 ? void 0 : _component$ref.onKeyDown(props)) || false;
         },
         onExit: function onExit() {
-          if (!component) return;
+          var _lastProps;
+          if (!component) return false;
+          var editor = (_lastProps = lastProps) === null || _lastProps === void 0 ? void 0 : _lastProps.editor;
+          if (editor && isCaretAfterSlash(editor)) {
+            return false;
+          }
+          component.updateProps({
+            open: false
+          });
           component.destroy();
           component.element.remove();
         }

package/dist/index.css

@@ -538,4 +538,18 @@
 
 .PhotoView-Slider__BannerWrap {
   background-color: rgba(33, 34, 45, 0.2) !important;
+}
+
+.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 {
+  content: attr(data-decoration-content);
+  color: var(--mui-palette-text-disabled);
+  padding-left: 0.25rem;
+  font-size: 14px;
+  line-height: 24px;
 }

package/package.json

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