@ctzhian/tiptap 0.4.0

package/dist/component/ListHover/index.js

@@ -0,0 +1,367 @@
+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); }
+var _excluded = ["className"];
+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); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+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, MenuItem, Paper, Select, Stack } from '@mui/material';
+import { ArrowDownSLineIcon, ArrowGoForwardLineIcon, ArrowLeftWideLineIcon, DeleteLineIcon, FontSizeIcon, ListOrdered2Icon, ListUnorderedIcon } from "../Icons";
+import React, { useEffect, useRef, useState } from 'react';
+import { ToolbarItem } from "../Toolbar";
+var ListHover = function ListHover(_ref) {
+  var editor = _ref.editor;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    hoveredList = _useState2[0],
+    setHoveredList = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    menuPosition = _useState4[0],
+    setMenuPosition = _useState4[1];
+  var timeoutRef = useRef(null);
+  var fontSizeOptions = [10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60].map(function (it) {
+    return it.toString();
+  });
+
+  // 清理列表样式的工具函数
+  var clearListStyle = function clearListStyle(element) {
+    element.style.outline = '';
+    element.style.outlineOffset = '';
+    element.style.borderRadius = '';
+    element.style.transition = '';
+  };
+
+  // 处理字体大小变化
+  var handleFontSizeChange = function handleFontSizeChange(newSize) {
+    if (!hoveredList) return;
+    if (hoveredList.type === 'orderedList') {
+      editor.chain().focus().updateAttributes('orderedList', {
+        fontSize: "".concat(newSize, "px")
+      }).run();
+    } else if (hoveredList.type === 'bulletList') {
+      editor.chain().focus().updateAttributes('bulletList', {
+        fontSize: "".concat(newSize, "px")
+      }).run();
+    }
+    setHoveredList(function (prev) {
+      return prev ? _objectSpread(_objectSpread({}, prev), {}, {
+        fontSize: newSize
+      }) : null;
+    });
+  };
+
+  // 列表类型转换
+  var convertToOrderedList = function convertToOrderedList() {
+    editor.chain().focus().toggleOrderedList().run();
+    // 更新悬停状态
+    if (hoveredList && hoveredList.type === 'bulletList') {
+      setHoveredList(function (prev) {
+        return prev ? _objectSpread(_objectSpread({}, prev), {}, {
+          type: 'orderedList'
+        }) : null;
+      });
+    }
+  };
+  var convertToBulletList = function convertToBulletList() {
+    editor.chain().focus().toggleBulletList().run();
+    // 更新悬停状态
+    if (hoveredList && hoveredList.type === 'orderedList') {
+      setHoveredList(function (prev) {
+        return prev ? _objectSpread(_objectSpread({}, prev), {}, {
+          type: 'bulletList'
+        }) : null;
+      });
+    }
+  };
+
+  // 删除列表
+  var removeList = function removeList() {
+    if (!hoveredList) return;
+    if (hoveredList.type === 'orderedList') {
+      editor.chain().focus().toggleOrderedList().run();
+    } else if (hoveredList.type === 'bulletList') {
+      editor.chain().focus().toggleBulletList().run();
+    }
+    setHoveredList(null);
+  };
+
+  // 缩进控制
+  var indentList = function indentList() {
+    editor.chain().focus().sinkListItem('listItem').run();
+  };
+  var outdentList = function outdentList() {
+    editor.chain().focus().liftListItem('listItem').run();
+  };
+
+  // 监听鼠标悬停事件
+  useEffect(function () {
+    // 基本检查编辑器是否存在
+    if (!editor || !editor.isEditable) return;
+    var cleanupFn = null;
+    var isSetup = false;
+    var setupListeners = function setupListeners() {
+      if (isSetup) return;
+
+      // 在设置函数内部安全地检查 view.dom
+      try {
+        if (!editor || !editor.view || !editor.view.dom) {
+          return;
+        }
+      } catch (error) {
+        return;
+      }
+      isSetup = true;
+      var editorElement = editor.view.dom;
+      var handleMouseEnter = function handleMouseEnter(event) {
+        var _listElement$getAttri;
+        var target = event.target;
+
+        // 查找最近的列表元素
+        var listElement = target.closest('ol[data-type="orderedList"], ul[data-type="bulletList"]');
+        if (!listElement) return;
+
+        // 检查是否已经悬停在同一个列表上
+        if ((hoveredList === null || hoveredList === void 0 ? void 0 : hoveredList.element) === listElement) return;
+
+        // 清除之前的定时器
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+
+        // 清除之前列表的样式
+        if (hoveredList !== null && hoveredList !== void 0 && hoveredList.element && hoveredList.element !== listElement) {
+          clearListStyle(hoveredList.element);
+        }
+        var listType = listElement.tagName === 'OL' ? 'orderedList' : 'bulletList';
+        var fontSize = ((_listElement$getAttri = listElement.getAttribute('data-font-size')) === null || _listElement$getAttri === void 0 ? void 0 : _listElement$getAttri.replace('px', '')) || getComputedStyle(listElement).fontSize.replace('px', '') || '16';
+
+        // 计算菜单位置
+        var rect = listElement.getBoundingClientRect();
+        var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+        setMenuPosition({
+          top: rect.top + scrollTop - 50,
+          // 在列表上方50px
+          left: Math.max(10, rect.left + scrollLeft + rect.width / 2 - 210) // 菜单宽度420px的一半，但不能超出屏幕左边
+        });
+        setHoveredList({
+          element: listElement,
+          type: listType,
+          fontSize: fontSize
+        });
+
+        // 添加悬停样式
+        listElement.style.outline = '2px solid var(--mui-palette-primary-main)';
+        listElement.style.outlineOffset = '2px';
+        listElement.style.borderRadius = 'var(--mui-shape-borderRadius)';
+        listElement.style.transition = 'outline 0.2s ease';
+      };
+      var handleMouseLeave = function handleMouseLeave(event) {
+        var target = event.target;
+        var listElement = target.closest('ol, ul');
+        if (!listElement) return;
+
+        // 设置延迟隐藏，给用户时间移动到菜单上
+        timeoutRef.current = setTimeout(function () {
+          if ((hoveredList === null || hoveredList === void 0 ? void 0 : hoveredList.element) === listElement) {
+            // 移除悬停样式
+            clearListStyle(listElement);
+            setHoveredList(null);
+            setMenuPosition(null);
+          }
+        }, 100);
+      };
+
+      // 使用事件委托的方式监听鼠标事件
+      editorElement.addEventListener('mouseover', handleMouseEnter);
+      editorElement.addEventListener('mouseout', handleMouseLeave);
+
+      // 设置清理函数
+      cleanupFn = function cleanupFn() {
+        editorElement.removeEventListener('mouseover', handleMouseEnter);
+        editorElement.removeEventListener('mouseout', handleMouseLeave);
+      };
+    };
+
+    // 尝试立即设置
+    setupListeners();
+
+    // 如果立即设置失败，则使用延迟设置
+    var setupTimeout = setTimeout(setupListeners, 500);
+
+    // 监听编辑器的 update 事件，当编辑器准备好时设置监听器
+    editor.on('update', setupListeners);
+    editor.on('focus', setupListeners);
+    return function () {
+      clearTimeout(setupTimeout);
+      editor.off('update', setupListeners);
+      editor.off('focus', setupListeners);
+      if (cleanupFn) {
+        cleanupFn();
+      }
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+
+      // 清理样式
+      if (hoveredList !== null && hoveredList !== void 0 && hoveredList.element) {
+        clearListStyle(hoveredList.element);
+      }
+    };
+  }, [editor]);
+
+  // 菜单悬停处理
+  var handleMenuMouseEnter = function handleMenuMouseEnter() {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+  };
+  var handleMenuMouseLeave = function handleMenuMouseLeave() {
+    timeoutRef.current = setTimeout(function () {
+      if (hoveredList) {
+        // 移除悬停样式
+        clearListStyle(hoveredList.element);
+        setHoveredList(null);
+        setMenuPosition(null);
+      }
+    }, 100);
+  };
+  if (!hoveredList || !menuPosition || !editor.isEditable) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      position: 'fixed',
+      top: menuPosition.top,
+      left: menuPosition.left,
+      zIndex: 1000,
+      pointerEvents: 'auto'
+    },
+    onMouseEnter: handleMenuMouseEnter,
+    onMouseLeave: handleMenuMouseLeave
+  }, /*#__PURE__*/React.createElement(Paper, {
+    sx: {
+      p: 0.5,
+      borderRadius: 'var(--mui-shape-borderRadius)',
+      minWidth: 420,
+      boxShadow: '0 4px 20px rgba(0,0,0,0.15)',
+      border: '1px solid var(--mui-palette-divider)'
+    }
+  }, /*#__PURE__*/React.createElement(Stack, {
+    direction: 'row',
+    alignItems: 'center',
+    spacing: 1
+  }, /*#__PURE__*/React.createElement(ToolbarItem, {
+    tip: "\u8F6C\u6362\u4E3A\u6709\u5E8F\u5217\u8868",
+    icon: /*#__PURE__*/React.createElement(ListOrdered2Icon, {
+      sx: {
+        fontSize: '1rem'
+      }
+    }),
+    onClick: convertToOrderedList,
+    className: hoveredList.type === 'orderedList' ? "tool-active" : ""
+  }), /*#__PURE__*/React.createElement(ToolbarItem, {
+    tip: "\u8F6C\u6362\u4E3A\u65E0\u5E8F\u5217\u8868",
+    icon: /*#__PURE__*/React.createElement(ListUnorderedIcon, {
+      sx: {
+        fontSize: '1rem'
+      }
+    }),
+    onClick: convertToBulletList,
+    className: hoveredList.type === 'bulletList' ? "tool-active" : ""
+  }), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      width: '1px',
+      height: '20px',
+      backgroundColor: 'divider'
+    }
+  }), /*#__PURE__*/React.createElement(ToolbarItem, {
+    tip: "\u51CF\u5C11\u7F29\u8FDB",
+    icon: /*#__PURE__*/React.createElement(ArrowLeftWideLineIcon, {
+      sx: {
+        fontSize: '1rem'
+      }
+    }),
+    onClick: outdentList
+  }), /*#__PURE__*/React.createElement(ToolbarItem, {
+    tip: "\u589E\u52A0\u7F29\u8FDB",
+    icon: /*#__PURE__*/React.createElement(ArrowGoForwardLineIcon, {
+      sx: {
+        fontSize: '1rem'
+      }
+    }),
+    onClick: indentList
+  }), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      width: '1px',
+      height: '20px',
+      backgroundColor: 'divider'
+    }
+  }), /*#__PURE__*/React.createElement(Stack, {
+    direction: 'row',
+    alignItems: 'center',
+    spacing: 1
+  }, /*#__PURE__*/React.createElement(FontSizeIcon, {
+    sx: {
+      fontSize: '1rem',
+      color: 'text.secondary'
+    }
+  }), /*#__PURE__*/React.createElement(Select, {
+    value: hoveredList.fontSize,
+    onChange: function onChange(e) {
+      return handleFontSizeChange(e.target.value);
+    },
+    size: "small",
+    sx: {
+      minWidth: 60,
+      '& .MuiSelect-select': {
+        padding: '4px 8px',
+        fontSize: '0.875rem'
+      }
+    },
+    IconComponent: function IconComponent(_ref2) {
+      var className = _ref2.className,
+        rest = _objectWithoutProperties(_ref2, _excluded);
+      return /*#__PURE__*/React.createElement(ArrowDownSLineIcon, _extends({
+        sx: {
+          fontSize: '0.875rem',
+          transform: className !== null && className !== void 0 && className.includes('MuiSelect-iconOpen') ? 'rotate(-180deg)' : 'none',
+          transition: 'transform 0.3s'
+        }
+      }, rest));
+    }
+  }, fontSizeOptions.map(function (size) {
+    return /*#__PURE__*/React.createElement(MenuItem, {
+      key: size,
+      value: size,
+      sx: {
+        fontSize: '0.875rem'
+      }
+    }, size, "px");
+  }))), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      width: '1px',
+      height: '20px',
+      backgroundColor: 'divider'
+    }
+  }), /*#__PURE__*/React.createElement(ToolbarItem, {
+    tip: "\u79FB\u9664\u5217\u8868\u683C\u5F0F",
+    icon: /*#__PURE__*/React.createElement(DeleteLineIcon, {
+      sx: {
+        fontSize: '1rem'
+      }
+    }),
+    onClick: removeList
+  }))));
+};
+export default ListHover;

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

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

package/dist/component/Menu/index.js

@@ -0,0 +1,189 @@
+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 _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); }
+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, Popover, Stack, Typography } from '@mui/material';
+import React from 'react';
+var Menu = function Menu(_ref) {
+  var _ref$id = _ref.id,
+    id = _ref$id === void 0 ? 'menu-select' : _ref$id,
+    arrowIcon = _ref.arrowIcon,
+    list = _ref.list,
+    context = _ref.context,
+    _ref$anchorOrigin = _ref.anchorOrigin,
+    anchorOrigin = _ref$anchorOrigin === void 0 ? {
+      vertical: 'bottom',
+      horizontal: 'right'
+    } : _ref$anchorOrigin,
+    _ref$transformOrigin = _ref.transformOrigin,
+    transformOrigin = _ref$transformOrigin === void 0 ? {
+      vertical: 'top',
+      horizontal: 'right'
+    } : _ref$transformOrigin,
+    _ref$childrenProps = _ref.childrenProps,
+    childrenProps = _ref$childrenProps === void 0 ? {
+      anchorOrigin: {
+        vertical: 'top',
+        horizontal: 'right'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'left'
+      }
+    } : _ref$childrenProps;
+  var _React$useState = React.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    anchorEl = _React$useState2[0],
+    setAnchorEl = _React$useState2[1];
+  var _React$useState3 = React.useState(null),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    hoveredItem = _React$useState4[0],
+    setHoveredItem = _React$useState4[1];
+  var _React$useState5 = React.useState(null),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    subMenuAnchor = _React$useState6[0],
+    setSubMenuAnchor = _React$useState6[1];
+  var handleClick = function handleClick(event) {
+    var _context$props;
+    if (context !== null && context !== void 0 && (_context$props = context.props) !== null && _context$props !== void 0 && _context$props.onClick) {
+      context.props.onClick(event);
+    }
+    setAnchorEl(event.currentTarget);
+  };
+  var handleClose = function handleClose() {
+    setAnchorEl(null);
+    setHoveredItem(null);
+    setSubMenuAnchor(null);
+  };
+  var handleItemHover = function handleItemHover(event, item) {
+    var _item$children;
+    if ((_item$children = item.children) !== null && _item$children !== void 0 && _item$children.length) {
+      setHoveredItem(item);
+      setSubMenuAnchor(event.currentTarget);
+    }
+  };
+  var handleItemLeave = function handleItemLeave() {
+    setHoveredItem(null);
+    setSubMenuAnchor(null);
+  };
+  var handleItemClick = function handleItemClick(item) {
+    if (item.onClick) {
+      item.onClick();
+    }
+    handleClose();
+  };
+  var open = Boolean(anchorEl);
+  var curId = open ? id : undefined;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, context && /*#__PURE__*/React.cloneElement(context, {
+    onClick: handleClick,
+    'aria-describedby': curId
+  }), /*#__PURE__*/React.createElement(Popover, {
+    id: curId,
+    open: open,
+    anchorEl: anchorEl,
+    onClose: handleClose,
+    anchorOrigin: anchorOrigin,
+    transformOrigin: transformOrigin
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: "menu-select-list",
+    sx: {
+      p: 0.5,
+      minWidth: 160,
+      lineHeight: '1.5rem'
+    }
+  }, list.map(function (item) {
+    var _item$children2;
+    return item.customLabel ? /*#__PURE__*/React.createElement(Box, {
+      key: item.key
+    }, item.customLabel) : /*#__PURE__*/React.createElement(Box, {
+      key: item.key,
+      className: "menu-select-item",
+      onMouseEnter: function onMouseEnter(e) {
+        return handleItemHover(e, item);
+      },
+      onMouseLeave: handleItemLeave,
+      onClick: function onClick() {
+        return handleItemClick(item);
+      },
+      sx: _objectSpread({
+        position: 'relative',
+        cursor: 'pointer',
+        borderRadius: 1,
+        p: 1,
+        ':hover': {
+          bgcolor: 'action.hover'
+        }
+      }, item.selected ? {
+        color: 'primary.main',
+        bgcolor: 'action.selected'
+      } : {})
+    }, /*#__PURE__*/React.createElement(Stack, {
+      alignItems: "center",
+      gap: 1.5,
+      direction: "row"
+    }, item.icon, /*#__PURE__*/React.createElement(Typography, {
+      sx: _objectSpread({
+        flexGrow: 1
+      }, item.textSx)
+    }, item.label), item.extra, (_item$children2 = item.children) !== null && _item$children2 !== void 0 && _item$children2.length ? arrowIcon : null), hoveredItem === item && item.children && /*#__PURE__*/React.createElement(Popover, _extends({
+      open: Boolean(subMenuAnchor),
+      anchorEl: subMenuAnchor,
+      onClose: handleItemLeave,
+      sx: {
+        pointerEvents: 'none'
+      }
+    }, childrenProps), /*#__PURE__*/React.createElement(Box, {
+      className: "menu-select-sub-list",
+      sx: _objectSpread(_objectSpread({
+        pointerEvents: 'auto',
+        p: 0.5,
+        minWidth: 160,
+        maxHeight: 360,
+        overflow: 'auto'
+      }, item.minWidth ? {
+        minWidth: item.minWidth
+      } : {}), item.maxHeight ? {
+        maxHeight: item.maxHeight
+      } : {})
+    }, item.children.map(function (child) {
+      return child.customLabel ? /*#__PURE__*/React.createElement(Box, {
+        key: child.key
+      }, child.customLabel) : /*#__PURE__*/React.createElement(Box, {
+        key: child.key,
+        className: "menu-select-sub-item",
+        onClick: function onClick() {
+          return handleItemClick(child);
+        },
+        sx: _objectSpread({
+          cursor: 'pointer',
+          borderRadius: 1,
+          p: 1,
+          ':hover': {
+            bgcolor: 'action.hover'
+          }
+        }, child.selected ? {
+          color: 'primary.main',
+          bgcolor: 'action.selected'
+        } : {})
+      }, /*#__PURE__*/React.createElement(Stack, {
+        alignItems: "center",
+        gap: 1.5,
+        direction: "row"
+      }, child.icon, /*#__PURE__*/React.createElement(Typography, {
+        sx: _objectSpread({
+          flexGrow: 1
+        }, child.textSx)
+      }, child.label), child.extra));
+    }))));
+  }))));
+};
+export default Menu;

package/dist/component/Toolbar/EditorAlignSelect.d.ts

@@ -0,0 +1,7 @@
+import { Editor } from "@tiptap/react";
+import React from "react";
+interface EditorAlignSelectProps {
+    editor: Editor;
+}
+declare const EditorAlignSelect: ({ editor }: EditorAlignSelectProps) => React.JSX.Element;
+export default EditorAlignSelect;