@ctzhian/tiptap 1.5.2 → 1.5.3

package/dist/extension/component/Mathematics/block/Readonly.js

@@ -0,0 +1,35 @@
+import { Box } from "@mui/material";
+import { NodeViewWrapper } from "@tiptap/react";
+import React from "react";
+var ReadonlyBlockMath = function ReadonlyBlockMath(_ref) {
+  var attrs = _ref.attrs,
+    selected = _ref.selected,
+    mathRef = _ref.mathRef;
+  return /*#__PURE__*/React.createElement(NodeViewWrapper, {
+    className: "mathematics-block-wrapper ".concat(selected ? 'ProseMirror-selectednode' : ''),
+    "data-drag-handle": true
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      display: 'block',
+      textAlign: 'center',
+      py: 2,
+      px: 1,
+      borderRadius: 1,
+      '&:hover': {
+        bgcolor: 'action.hover'
+      },
+      '.katex-display': {
+        m: 0
+      },
+      transition: 'background-color 0.2s ease'
+    }
+  }, attrs.latex ? /*#__PURE__*/React.createElement("div", {
+    ref: mathRef
+  }) : /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      color: 'error.main',
+      fontStyle: 'italic'
+    }
+  }, "Empty formula")));
+};
+export default ReadonlyBlockMath;

package/dist/extension/component/Mathematics/block/index.d.ts

@@ -0,0 +1,8 @@
+import { EditorFnProps } from "../../../../type";
+import { NodeViewProps } from "@tiptap/react";
+import React from "react";
+export type BlockMathAttributes = {
+    latex: string;
+};
+export declare const MathematicsBlockViewWrapper: React.FC<NodeViewProps & EditorFnProps>;
+export default MathematicsBlockViewWrapper;

package/dist/extension/component/Mathematics/block/index.js

@@ -0,0 +1,149 @@
+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 { FloatingPopover } from "../../../../component/FloatingPopover";
+import { FunctionsIcon } from "../../../../component/Icons";
+import { Box, Button, Stack, TextField } from "@mui/material";
+import { NodeViewWrapper } from "@tiptap/react";
+import katex from "katex";
+import React, { useEffect, useRef, useState } from "react";
+import ReadonlyBlockMath from "./Readonly";
+export var MathematicsBlockViewWrapper = function MathematicsBlockViewWrapper(_ref) {
+  var editor = _ref.editor,
+    node = _ref.node,
+    updateAttributes = _ref.updateAttributes,
+    selected = _ref.selected,
+    onError = _ref.onError;
+  var attrs = node.attrs;
+  var mathRef = useRef(null);
+  var _useState = useState(attrs.latex || ''),
+    _useState2 = _slicedToArray(_useState, 2),
+    editLatex = _useState2[0],
+    setEditLatex = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    anchorEl = _useState4[0],
+    setAnchorEl = _useState4[1];
+  var handleShowPopover = function handleShowPopover(event) {
+    setEditLatex(attrs.latex || '');
+    setAnchorEl(event.currentTarget);
+  };
+  var handleClosePopover = function handleClosePopover() {
+    return setAnchorEl(null);
+  };
+  var handleInsertFormula = function handleInsertFormula() {
+    if (!editLatex.trim()) return;
+    updateAttributes({
+      latex: editLatex.trim()
+    });
+    handleClosePopover();
+  };
+  useEffect(function () {
+    if (mathRef.current && attrs.latex) {
+      try {
+        katex.render(attrs.latex, mathRef.current, {
+          throwOnError: false,
+          displayMode: true,
+          errorColor: 'error.main',
+          output: 'html'
+        });
+      } catch (error) {
+        onError === null || onError === void 0 || onError(error);
+      }
+    }
+  }, [attrs.latex]);
+  if (!editor.isEditable) {
+    return /*#__PURE__*/React.createElement(ReadonlyBlockMath, {
+      mathRef: mathRef,
+      attrs: attrs,
+      selected: selected
+    });
+  }
+  return /*#__PURE__*/React.createElement(NodeViewWrapper, {
+    className: "mathematics-block-wrapper ".concat(selected ? 'ProseMirror-selectednode' : ''),
+    "data-drag-handle": true
+  }, !attrs.latex ? /*#__PURE__*/React.createElement(Box, {
+    onClick: handleShowPopover,
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 2,
+      border: '1px dashed',
+      borderColor: 'divider',
+      borderRadius: 'var(--mui-shape-borderRadius)',
+      px: 2,
+      py: 1.5,
+      fontSize: '0.875rem',
+      color: 'text.secondary',
+      bgcolor: 'action.default',
+      cursor: 'pointer',
+      '&:hover': {
+        bgcolor: 'action.hover'
+      },
+      '&:active': {
+        bgcolor: 'action.selected'
+      },
+      transition: 'all 0.2s ease'
+    }
+  }, /*#__PURE__*/React.createElement(FunctionsIcon, {
+    sx: {
+      fontSize: '1rem',
+      color: 'text.secondary'
+    }
+  }), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      fontSize: '0.875rem',
+      color: 'text.secondary'
+    }
+  }, "\u6DFB\u52A0\u6570\u5B66\u516C\u5F0F")) : /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      display: 'block',
+      textAlign: 'center',
+      py: 1.5,
+      px: 2,
+      borderRadius: 'var(--mui-shape-borderRadius)',
+      bgcolor: 'transparent',
+      cursor: 'pointer',
+      '.katex-display': {
+        m: 0
+      },
+      '&:hover': {
+        bgcolor: 'action.hover'
+      },
+      transition: 'background-color 0.2s ease, border-color 0.2s ease'
+    },
+    onClick: handleShowPopover
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: mathRef
+  })), /*#__PURE__*/React.createElement(FloatingPopover, {
+    open: Boolean(anchorEl),
+    anchorEl: anchorEl,
+    onClose: handleClosePopover,
+    placement: "bottom"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    gap: 2,
+    sx: {
+      p: 2,
+      width: 350
+    }
+  }, /*#__PURE__*/React.createElement(TextField, {
+    fullWidth: true,
+    multiline: true,
+    rows: 4,
+    size: "small",
+    value: editLatex,
+    onChange: function onChange(e) {
+      return setEditLatex(e.target.value);
+    },
+    placeholder: "\u8F93\u5165 LaTeX \u516C\u5F0F\uFF0C\u4F8B\u5982\uFF1A\\int_{-\\infty}^{\\infty} e^{-x^2} dx = \\sqrt{\\pi}"
+  }), /*#__PURE__*/React.createElement(Button, {
+    variant: "contained",
+    fullWidth: true,
+    onClick: handleInsertFormula,
+    disabled: !editLatex.trim()
+  }, "\u63D2\u5165\u516C\u5F0F"))));
+};
+export default MathematicsBlockViewWrapper;

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

@@ -0,0 +1,3 @@
+export { MathematicsBlockViewWrapper } from './block';
+export { MathematicsInlineViewWrapper } from './inline';
+import "katex/dist/katex.min.css";

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

@@ -0,0 +1,3 @@
+export { MathematicsBlockViewWrapper } from "./block";
+export { MathematicsInlineViewWrapper } from "./inline";
+import "katex/dist/katex.min.css";

package/dist/extension/component/Mathematics/inline/Readonly.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { InlineMathAttributes } from ".";
+interface ReadonlyInlineMathProps {
+    selected: boolean;
+    attrs: InlineMathAttributes;
+    mathRef: React.RefObject<HTMLSpanElement>;
+}
+declare const ReadonlyInlineMath: ({ attrs, selected, mathRef }: ReadonlyInlineMathProps) => React.JSX.Element;
+export default ReadonlyInlineMath;

package/dist/extension/component/Mathematics/inline/Readonly.js

@@ -0,0 +1,33 @@
+import { Box } from "@mui/material";
+import { NodeViewWrapper } from "@tiptap/react";
+import React from "react";
+var ReadonlyInlineMath = function ReadonlyInlineMath(_ref) {
+  var attrs = _ref.attrs,
+    selected = _ref.selected,
+    mathRef = _ref.mathRef;
+  return /*#__PURE__*/React.createElement(NodeViewWrapper, {
+    className: "mathematics-inline-wrapper ".concat(selected ? 'ProseMirror-selectednode' : ''),
+    "data-drag-handle": true
+  }, /*#__PURE__*/React.createElement(Box, {
+    component: "span",
+    sx: {
+      display: 'inline-block',
+      px: 0.5,
+      py: 0.25,
+      borderRadius: 0.5,
+      '&:hover': {
+        bgcolor: 'action.hover'
+      },
+      transition: 'background-color 0.2s ease'
+    }
+  }, attrs.latex ? /*#__PURE__*/React.createElement("span", {
+    ref: mathRef
+  }) : /*#__PURE__*/React.createElement(Box, {
+    component: "span",
+    sx: {
+      color: 'error.main',
+      fontStyle: 'italic'
+    }
+  }, "Empty formula")));
+};
+export default ReadonlyInlineMath;

package/dist/extension/component/Mathematics/inline/index.d.ts

@@ -0,0 +1,8 @@
+import { EditorFnProps } from "../../../../type";
+import { NodeViewProps } from "@tiptap/react";
+import React from "react";
+export type InlineMathAttributes = {
+    latex: string;
+};
+export declare const MathematicsInlineViewWrapper: React.FC<NodeViewProps & EditorFnProps>;
+export default MathematicsInlineViewWrapper;

package/dist/extension/component/Mathematics/inline/index.js

@@ -0,0 +1,148 @@
+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 { FloatingPopover } from "../../../../component/FloatingPopover";
+import { SquareRootIcon } from "../../../../component/Icons";
+import { Box, Button, Stack, TextField } from "@mui/material";
+import { NodeViewWrapper } from "@tiptap/react";
+import katex from 'katex';
+import React, { useEffect, useRef, useState } from "react";
+import ReadonlyInlineMath from "./Readonly";
+export var MathematicsInlineViewWrapper = function MathematicsInlineViewWrapper(_ref) {
+  var editor = _ref.editor,
+    node = _ref.node,
+    updateAttributes = _ref.updateAttributes,
+    selected = _ref.selected,
+    onError = _ref.onError;
+  var attrs = node.attrs;
+  var mathRef = useRef(null);
+  var _useState = useState(attrs.latex || ''),
+    _useState2 = _slicedToArray(_useState, 2),
+    editLatex = _useState2[0],
+    setEditLatex = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    anchorEl = _useState4[0],
+    setAnchorEl = _useState4[1];
+  var handleShowPopover = function handleShowPopover(event) {
+    setEditLatex(attrs.latex || '');
+    setAnchorEl(event.currentTarget);
+  };
+  var handleClosePopover = function handleClosePopover() {
+    return setAnchorEl(null);
+  };
+  var handleInsertFormula = function handleInsertFormula() {
+    if (!editLatex.trim()) return;
+    updateAttributes({
+      latex: editLatex.trim()
+    });
+    handleClosePopover();
+  };
+  useEffect(function () {
+    if (mathRef.current && attrs.latex) {
+      try {
+        katex.render(attrs.latex, mathRef.current, {
+          throwOnError: false,
+          displayMode: false,
+          errorColor: 'error.main',
+          output: 'html'
+        });
+      } catch (error) {
+        onError === null || onError === void 0 || onError(error);
+      }
+    }
+  }, [attrs.latex]);
+  if (!editor.isEditable) {
+    return /*#__PURE__*/React.createElement(ReadonlyInlineMath, {
+      mathRef: mathRef,
+      attrs: attrs,
+      selected: selected
+    });
+  }
+  return /*#__PURE__*/React.createElement(NodeViewWrapper, {
+    className: "mathematics-inline-wrapper ".concat(selected ? 'ProseMirror-selectednode' : ''),
+    "data-drag-handle": true,
+    as: "span"
+  }, !attrs.latex ? /*#__PURE__*/React.createElement(Box, {
+    component: "span",
+    onClick: handleShowPopover,
+    sx: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: 2,
+      border: '1px dashed',
+      borderColor: 'divider',
+      borderRadius: 'var(--mui-shape-borderRadius)',
+      px: 2,
+      py: 1.5,
+      fontSize: 14,
+      color: 'text.secondary',
+      bgcolor: 'action.default',
+      cursor: 'pointer',
+      '&:hover': {
+        bgcolor: 'action.hover'
+      },
+      '&:active': {
+        bgcolor: 'action.selected'
+      },
+      transition: 'background-color 0.2s ease'
+    }
+  }, /*#__PURE__*/React.createElement(SquareRootIcon, {
+    sx: {
+      fontSize: '1rem',
+      flexShrink: 0
+    }
+  }), /*#__PURE__*/React.createElement(Box, {
+    component: "span"
+  }, "\u6DFB\u52A0\u6570\u5B66\u516C\u5F0F")) : /*#__PURE__*/React.createElement(Box, {
+    component: "span",
+    sx: {
+      display: 'inline-block',
+      cursor: 'pointer',
+      position: 'relative',
+      px: 0.5,
+      py: 0.25,
+      borderRadius: 'var(--mui-shape-borderRadius)',
+      bgcolor: 'transparent',
+      '&:hover': {
+        bgcolor: 'action.hover'
+      },
+      transition: 'background-color 0.2s ease'
+    },
+    onClick: handleShowPopover
+  }, /*#__PURE__*/React.createElement(Box, {
+    component: "span",
+    ref: mathRef
+  })), /*#__PURE__*/React.createElement(FloatingPopover, {
+    open: Boolean(anchorEl),
+    anchorEl: anchorEl,
+    onClose: handleClosePopover,
+    placement: "bottom"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    gap: 2,
+    sx: {
+      p: 2,
+      width: 350
+    }
+  }, /*#__PURE__*/React.createElement(TextField, {
+    fullWidth: true,
+    multiline: true,
+    rows: 3,
+    size: "small",
+    value: editLatex,
+    onChange: function onChange(e) {
+      return setEditLatex(e.target.value);
+    },
+    placeholder: "\u8F93\u5165 LaTeX \u516C\u5F0F\uFF0C\u4F8B\u5982\uFF1Ax^2 + y^2 = z^2"
+  }), /*#__PURE__*/React.createElement(Button, {
+    variant: "contained",
+    size: "small",
+    fullWidth: true,
+    onClick: handleInsertFormula,
+    disabled: !editLatex.trim()
+  }, "\u63D2\u5165\u516C\u5F0F"))));
+};
+export default MathematicsInlineViewWrapper;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface MentionListProps {
+    items: string[];
+    command: (props: {
+        id: string;
+    }) => void;
+}
+export interface MentionListRef {
+    onKeyDown: (props: {
+        event: KeyboardEvent;
+    }) => boolean;
+}
+export declare const MentionList: React.ForwardRefExoticComponent<MentionListProps & React.RefAttributes<MentionListRef>>;

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

@@ -0,0 +1,92 @@
+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); }
+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 { Box, Paper, Stack } from '@mui/material';
+import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+export var MentionList = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedIndex = _useState2[0],
+    setSelectedIndex = _useState2[1];
+  var selectItem = function selectItem(index) {
+    var item = props.items[index];
+    if (item) {
+      props.command({
+        id: item
+      });
+    }
+  };
+  var upHandler = function upHandler() {
+    setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
+  };
+  var downHandler = function downHandler() {
+    setSelectedIndex((selectedIndex + 1) % props.items.length);
+  };
+  var enterHandler = function enterHandler() {
+    selectItem(selectedIndex);
+  };
+  useEffect(function () {
+    return setSelectedIndex(0);
+  }, [props.items]);
+  useImperativeHandle(ref, function () {
+    return {
+      onKeyDown: function onKeyDown(_ref) {
+        var event = _ref.event;
+        if (event.key === 'ArrowUp') {
+          upHandler();
+          return true;
+        }
+        if (event.key === 'ArrowDown') {
+          downHandler();
+          return true;
+        }
+        if (event.key === 'Enter') {
+          enterHandler();
+          return true;
+        }
+        return false;
+      }
+    };
+  });
+  return /*#__PURE__*/React.createElement(Paper, {
+    sx: {
+      position: 'relative',
+      overflowY: 'auto',
+      p: 0.5
+    }
+  }, /*#__PURE__*/React.createElement(Stack, null, props.items.length ? props.items.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(Box, {
+      key: index,
+      onClick: function onClick() {
+        return selectItem(index);
+      },
+      sx: _objectSpread({
+        px: 2,
+        py: 1,
+        fontSize: 14,
+        cursor: 'pointer',
+        borderRadius: 'var(--mui-shape-borderRadius)',
+        '&:hover': {
+          backgroundColor: 'action.selected'
+        }
+      }, index === selectedIndex && {
+        backgroundColor: 'action.selected'
+      })
+    }, "@", item);
+  }) : /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      px: 2,
+      py: 1,
+      color: 'var(--mui-palette-text-tertiary)'
+    }
+  }, "No result")));
+});

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.d.ts

@@ -0,0 +1,4 @@
+import { SlashCommandsListProps, SlashCommandsListRef } from "../../../type";
+import React from 'react';
+declare const SlashCommandsList: React.ForwardRefExoticComponent<SlashCommandsListProps & React.RefAttributes<SlashCommandsListRef>>;
+export default SlashCommandsList;