@ctzhian/tiptap 1.4.2 → 1.5.1

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/indent-decrease-icon.d.ts

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

package/dist/component/Icons/indent-decrease-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 IndentDecreaseIcon = function IndentDecreaseIcon(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: "M3 4H21V6H3V4ZM3 19H21V21H3V19ZM11 14H21V16H11V14ZM11 9H21V11H11V9ZM3 12.5L7 9V16L3 12.5Z"
+  }));
+};
+IndentDecreaseIcon.displayName = 'icon-indent-decrease';

package/dist/component/Icons/indent-increase-icon.d.ts

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

package/dist/component/Icons/indent-increase-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 IndentIncreaseIcon = function IndentIncreaseIcon(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: "M3 4H21V6H3V4ZM3 19H21V21H3V19ZM11 14H21V16H11V14ZM11 9H21V11H11V9ZM7 12.5L3 16V9L7 12.5Z"
+  }));
+};
+IndentIncreaseIcon.displayName = 'icon-indent-increase';

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';
@@ -59,6 +60,8 @@ export { HeadingIcon } from './heading-icon';
 export { ImageAddLineIcon } from './image-add-line-icon';
 export { ImageLineIcon } from './image-line-icon';
 export { ImportLineIcon } from './import-line-icon';
+export { IndentDecreaseIcon } from './indent-decrease-icon';
+export { IndentIncreaseIcon } from './indent-increase-icon';
 export { Information2FillIcon } from './information-2-fill-icon';
 export { Information2LineIcon } from './information-2-line-icon';
 export { InsertColumnLeftIcon } from './insert-column-left-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";
@@ -62,6 +63,8 @@ export { HeadingIcon } from "./heading-icon";
 export { ImageAddLineIcon } from "./image-add-line-icon";
 export { ImageLineIcon } from "./image-line-icon";
 export { ImportLineIcon } from "./import-line-icon";
+export { IndentDecreaseIcon } from "./indent-decrease-icon";
+export { IndentIncreaseIcon } from "./indent-increase-icon";
 export { Information2FillIcon } from "./information-2-fill-icon";
 export { Information2LineIcon } from "./information-2-line-icon";
 export { InsertColumnLeftIcon } from "./insert-column-left-icon";

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

@@ -45,6 +45,7 @@ var VARIANT_DATA = {
   }
 };
 var AlertView = function AlertView(_ref) {
+  var _node$attrs;
   var editor = _ref.editor,
     node = _ref.node,
     updateAttributes = _ref.updateAttributes,
@@ -71,6 +72,7 @@ var AlertView = function AlertView(_ref) {
     "data-drag-handle": true,
     as: 'div',
     style: {
+      marginLeft: (_node$attrs = node.attrs) !== null && _node$attrs !== void 0 && _node$attrs.indent ? node.attrs.indent * 32 : undefined,
       border: '1px solid',
       borderColor: variantData.color,
       color: variantData.color,

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/index.js

@@ -15,7 +15,7 @@ import StarterKit from '@tiptap/starter-kit';
 import { PLACEHOLDER } from "../contants/placeholder";
 import { SlashCommands, StructuredDiffExtension } from "./extension";
 import { CodeExtension } from "./mark/Code";
-import { AlertExtension, AudioExtension, BlockAttachmentExtension, BlockLinkExtension, CodeBlockLowlightExtension, CustomBlockMathExtension, CustomInlineMathExtension, DetailsContentExtension, DetailsExtension, DetailsSummaryExtension, EmojiExtension, FileHandlerExtension, IframeExtension, ImageExtension, InlineAttachmentExtension, InlineLinkExtension, ListExtension, MentionExtension, TableExtension, TableOfContents, UploadProgressExtension, VerticalAlign, VideoExtension, YoutubeExtension } from "./node";
+import { AlertExtension, AudioExtension, BlockAttachmentExtension, BlockLinkExtension, CodeBlockLowlightExtension, CustomBlockMathExtension, CustomInlineMathExtension, DetailsContentExtension, DetailsExtension, DetailsSummaryExtension, EmojiExtension, FileHandlerExtension, IframeExtension, ImageExtension, Indent, InlineAttachmentExtension, InlineLinkExtension, ListExtension, MentionExtension, TableExtension, TableOfContents, UploadProgressExtension, VerticalAlign, VideoExtension, YoutubeExtension } from "./node";
 export var getExtensions = function getExtensions(_ref) {
   var limit = _ref.limit,
     exclude = _ref.exclude,
@@ -47,7 +47,17 @@ export var getExtensions = function getExtensions(_ref) {
     defaultAlignment: null
   }), CodeBlockLowlightExtension, CharacterCount.configure({
     limit: limit !== null && limit !== void 0 ? limit : null
-  }), Subscript, Superscript, TextStyleKit, CodeExtension, AlertExtension, Highlight.configure({
+  }), Subscript, Superscript, TextStyleKit, Indent.configure({
+    types: [
+    // 常见块级与项目中定义的节点
+    'paragraph', 'heading', 'blockquote', 'alert', 'codeBlock', 'horizontalRule', 'orderedList', 'bulletList', 'taskList', 'taskItem', 'listItem', 'details', 'detailsContent', 'detailsSummary', 'table', 'image', 'video', 'audio', 'iframe', 'blockAttachment', 'inlineAttachment', 'blockLink',
+    // 公式
+    'blockMath', 'inlineMath'
+    // 扩展里还有：youtube 等，如需也可开启
+    ],
+    maxLevel: 8,
+    indentPx: 32
+  }), CodeExtension, AlertExtension, Highlight.configure({
     multicolor: true
   }), Placeholder.configure({
     emptyNodeClass: 'custom-placeholder-node',

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

@@ -0,0 +1,17 @@
+import { Extension } from '@tiptap/core';
+export interface IndentOptions {
+    types: string[];
+    maxLevel: number;
+    indentPx: number;
+}
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        indent: {
+            setIndent: (level: number) => ReturnType;
+            increaseIndent: () => ReturnType;
+            decreaseIndent: () => ReturnType;
+        };
+    }
+}
+export declare const Indent: Extension<IndentOptions, any>;
+export default Indent;

package/dist/extension/node/Indent.js

@@ -0,0 +1,103 @@
+import { Extension } from '@tiptap/core';
+export var Indent = Extension.create({
+  name: 'indent',
+  addOptions: function addOptions() {
+    return {
+      // 若为 [], 则对所有节点类型生效
+      types: [],
+      maxLevel: 8,
+      indentPx: 24
+    };
+  },
+  addGlobalAttributes: function addGlobalAttributes() {
+    var _this = this,
+      _editorInstance$schem;
+    var descriptor = {
+      attributes: {
+        indent: {
+          default: 0,
+          parseHTML: function parseHTML(element) {
+            var data = element.getAttribute('data-indent');
+            if (data) return parseInt(data, 10) || 0;
+            var style = element.style.marginLeft;
+            if (!style) return 0;
+            var match = style.match(/(\d+)(px|em|rem)/);
+            if (!match) return 0;
+            var val = parseInt(match[1], 10);
+            return isNaN(val) ? 0 : Math.round(val / _this.options.indentPx);
+          },
+          renderHTML: function renderHTML(attributes) {
+            var level = Number(attributes.indent) || 0;
+            if (!level) return {};
+            var px = level * _this.options.indentPx;
+            return {
+              'data-indent': String(level),
+              style: "margin-left: ".concat(px, "px;")
+            };
+          }
+        }
+      }
+    };
+    var editorInstance = this.editor;
+    var typesList = this.options.types && this.options.types.length > 0 ? this.options.types : Object.keys((editorInstance === null || editorInstance === void 0 || (_editorInstance$schem = editorInstance.schema) === null || _editorInstance$schem === void 0 ? void 0 : _editorInstance$schem.nodes) || {});
+    descriptor.types = typesList;
+    return [descriptor];
+  },
+  addCommands: function addCommands() {
+    var _this2 = this;
+    return {
+      setIndent: function setIndent(level) {
+        return function (_ref) {
+          var _selection$node, _selection$$from;
+          var commands = _ref.commands,
+            editor = _ref.editor;
+          var _ref2 = editor.state,
+            selection = _ref2.selection;
+          var nodeTypeName = (selection === null || selection === void 0 || (_selection$node = selection.node) === null || _selection$node === void 0 || (_selection$node = _selection$node.type) === null || _selection$node === void 0 ? void 0 : _selection$node.name) || (selection === null || selection === void 0 || (_selection$$from = selection.$from) === null || _selection$$from === void 0 || (_selection$$from = _selection$$from.parent) === null || _selection$$from === void 0 || (_selection$$from = _selection$$from.type) === null || _selection$$from === void 0 ? void 0 : _selection$$from.name);
+          if (!nodeTypeName) return false;
+          var next = Math.max(0, Math.min(level, _this2.options.maxLevel));
+          return commands.updateAttributes(nodeTypeName, {
+            indent: next
+          });
+        };
+      },
+      increaseIndent: function increaseIndent() {
+        return function (_ref3) {
+          var _selection$node2, _selection$$from2;
+          var commands = _ref3.commands,
+            editor = _ref3.editor;
+          var _ref4 = editor.state,
+            selection = _ref4.selection;
+          var nodeTypeName = (selection === null || selection === void 0 || (_selection$node2 = selection.node) === null || _selection$node2 === void 0 || (_selection$node2 = _selection$node2.type) === null || _selection$node2 === void 0 ? void 0 : _selection$node2.name) || (selection === null || selection === void 0 || (_selection$$from2 = selection.$from) === null || _selection$$from2 === void 0 || (_selection$$from2 = _selection$$from2.parent) === null || _selection$$from2 === void 0 || (_selection$$from2 = _selection$$from2.type) === null || _selection$$from2 === void 0 ? void 0 : _selection$$from2.name);
+          if (!nodeTypeName) return false;
+          var attrs = editor.getAttributes(nodeTypeName);
+          var current = Number(attrs.indent) || 0;
+          var next = Math.max(0, Math.min(current + 1, _this2.options.maxLevel));
+          if (next === current) return false;
+          return commands.updateAttributes(nodeTypeName, {
+            indent: next
+          });
+        };
+      },
+      decreaseIndent: function decreaseIndent() {
+        return function (_ref5) {
+          var _selection$node3, _selection$$from3;
+          var commands = _ref5.commands,
+            editor = _ref5.editor;
+          var _ref6 = editor.state,
+            selection = _ref6.selection;
+          var nodeTypeName = (selection === null || selection === void 0 || (_selection$node3 = selection.node) === null || _selection$node3 === void 0 || (_selection$node3 = _selection$node3.type) === null || _selection$node3 === void 0 ? void 0 : _selection$node3.name) || (selection === null || selection === void 0 || (_selection$$from3 = selection.$from) === null || _selection$$from3 === void 0 || (_selection$$from3 = _selection$$from3.parent) === null || _selection$$from3 === void 0 || (_selection$$from3 = _selection$$from3.type) === null || _selection$$from3 === void 0 ? void 0 : _selection$$from3.name);
+          if (!nodeTypeName) return false;
+          var attrs = editor.getAttributes(nodeTypeName);
+          var current = Number(attrs.indent) || 0;
+          var next = Math.max(0, Math.min(current - 1, _this2.options.maxLevel));
+          if (next === current) return false;
+          return commands.updateAttributes(nodeTypeName, {
+            indent: next
+          });
+        };
+      }
+    };
+  }
+});
+export default Indent;

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

@@ -1,5 +1,5 @@
 import { Extension } from '@tiptap/core';
 export declare const TableExtension: ({ editable }: {
     editable: boolean;
-}) => (import("@tiptap/core").Node<import("@tiptap/extension-table").TableOptions, any> | import("@tiptap/core").Node<import("@tiptap/extension-table").TableHeaderOptions, any> | Extension<any, any>)[];
+}) => (Extension<any, any> | import("@tiptap/core").Node<import("@tiptap/extension-table").TableOptions, any> | import("@tiptap/core").Node<import("@tiptap/extension-table").TableHeaderOptions, any>)[];
 export default TableExtension;

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

@@ -7,6 +7,7 @@ export * from './Emoji';
 export * from './FileHandler';
 export * from './Iframe';
 export * from './Image';
+export * from './Indent';
 export * from './Link';
 export * from './ListKit';
 export * from './Mathematics';

package/dist/extension/node/index.js

@@ -7,6 +7,7 @@ export * from "./Emoji";
 export * from "./FileHandler";
 export * from "./Iframe";
 export * from "./Image";
+export * from "./Indent";
 export * from "./Link";
 export * from "./ListKit";
 export * from "./Mathematics";

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

@@ -6,6 +6,39 @@
   color: var(--mui-palette-text-secondary);
 }
 
+/* 节点缩进（依赖 data-indent 属性） */
+.tiptap.ProseMirror [data-indent="1"] {
+  margin-left: 32px;
+}
+
+.tiptap.ProseMirror [data-indent="2"] {
+  margin-left: 64px;
+}
+
+.tiptap.ProseMirror [data-indent="3"] {
+  margin-left: 96px;
+}
+
+.tiptap.ProseMirror [data-indent="4"] {
+  margin-left: 128px;
+}
+
+.tiptap.ProseMirror [data-indent="5"] {
+  margin-left: 160px;
+}
+
+.tiptap.ProseMirror [data-indent="6"] {
+  margin-left: 192px;
+}
+
+.tiptap.ProseMirror [data-indent="7"] {
+  margin-left: 224px;
+}
+
+.tiptap.ProseMirror [data-indent="8"] {
+  margin-left: 256px;
+}
+
 .tiptap.ProseMirror[contenteditable="false"] {
   padding: 0;
 }
@@ -505,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.4.2",
+  "version": "1.5.1",
   "description": "基于 Tiptap 二次开发的编辑器组件",
   "main": "dist/index.js",
   "module": "dist/index.js",