@lobehub/editor 3.2.0 → 3.2.2

package/es/plugins/math/react/components/MathInline.js

@@ -7,7 +7,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { addClassNamesToElement, removeClassNamesFromElement } from '@lexical/utils';
 import Katex from 'katex';
 import { $getSelection, $isNodeSelection, CLICK_COMMAND, COMMAND_PRIORITY_NORMAL } from 'lexical';
-import { memo, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useLexicalEditor } from "../../../../editor-kernel/react";
 import { useLexicalNodeSelection } from "../../../../editor-kernel/react/useLexicalNodeSelection";
 import { createDebugLogger } from "../../../../utils/debug";
@@ -15,7 +15,7 @@ import { $isMathNode, MathBlockNode } from "../../node";
 import Placeholder from "./Placeholder";
 import { jsx as _jsx } from "react/jsx-runtime";
 var logger = createDebugLogger('plugin', 'math');
-var MathInline = /*#__PURE__*/memo(function (_ref) {
+var MathInline = function MathInline(_ref) {
   var editor = _ref.editor,
     node = _ref.node,
     className = _ref.className;
@@ -108,5 +108,5 @@ var MathInline = /*#__PURE__*/memo(function (_ref) {
       mathBlock: isMathBlock
     })
   });
-});
+};
 export default MathInline;

package/es/plugins/math/react/components/Placeholder.js

@@ -1,17 +1,15 @@
-import { Text, Center } from '@lobehub/ui';
+import { Center, Text } from '@lobehub/ui';
+import { cx } from 'antd-style';
 import { useTranslation } from "../../../../editor-kernel/react/useTranslation";
+import { styles } from "../style";
 import { jsx as _jsx } from "react/jsx-runtime";
 var Placeholder = function Placeholder(_ref) {
   var mathBlock = _ref.mathBlock;
   var t = useTranslation();
   var node = /*#__PURE__*/_jsx(Text, {
     as: 'span',
-    className: 'katex',
+    className: cx('katex', styles.mathPlaceholder),
     fontSize: mathBlock ? '1.2em' : '1em',
-    style: {
-      fontStyle: 'italic',
-      paddingInline: '0.2em'
-    },
     type: 'secondary',
     children: t('math.placeholder')
   });

package/es/plugins/math/react/index.js

@@ -12,7 +12,7 @@ import { MarkdownPlugin } from "../../markdown/plugin";
 import { MathPlugin } from "../plugin";
 import MathEdit from "./components/MathEditor";
 import MathInline from "./components/MathInline";
-import { useStyles } from "./style";
+import { styles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var ReactMathPlugin = function ReactMathPlugin(_ref) {
   var className = _ref.className,
@@ -21,8 +21,6 @@ export var ReactMathPlugin = function ReactMathPlugin(_ref) {
   var _useLexicalComposerCo = useLexicalComposerContext(),
     _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
-  var _useStyles = useStyles(),
-    styles = _useStyles.styles;
   useLayoutEffect(function () {
     editor.registerPlugin(MarkdownPlugin);
     editor.registerPlugin(MathPlugin, {

package/es/plugins/math/react/style.d.ts

@@ -1,6 +1,8 @@
-export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+export declare const styles: {
     mathInline: string;
     mathBlock: string;
-    mathEditor: import("antd-style").SerializedStyles;
-    mathEditorFooter: import("antd-style").SerializedStyles;
-}>;
+    mathEditor: string;
+    mathEditorFooter: string;
+    mathEditorTextArea: string;
+    mathPlaceholder: string;
+};

package/es/plugins/math/react/style.js

@@ -1,16 +1,17 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 /* eslint-disable sort-keys-fix/sort-keys-fix */
-import { createStyles } from 'antd-style';
-export var useStyles = createStyles(function (_ref) {
-  var cx = _ref.cx,
-    css = _ref.css,
-    token = _ref.token;
-  var latex = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    cursor: pointer;\n    user-select: none;\n    font-size: 1em;\n\n    .katex-error {\n      color: ", " !important;\n    }\n\n    .katex-html {\n      overflow: auto hidden;\n      padding: 3px;\n\n      .base {\n        margin-block: 0;\n        margin-inline: auto;\n      }\n\n      .tag {\n        position: relative !important;\n        display: inline-block;\n        padding-inline-start: 0.5rem;\n      }\n    }\n\n    &.selected {\n      color: #000;\n      background: ", ";\n    }\n\n    &:hover {\n      background: ", ";\n    }\n\n    &.editing {\n      background: ", ";\n    }\n\n    &:has(.katex-error) {\n      background: ", ";\n    }\n  "])), token.colorError, token.yellow, token.colorFillTertiary, token.colorFillTertiary, token.colorErrorBg);
+import { createStaticStyles, cx } from 'antd-style';
+export var styles = createStaticStyles(function (_ref) {
+  var css = _ref.css,
+    cssVar = _ref.cssVar;
+  var latex = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    cursor: pointer;\n    user-select: none;\n    font-size: 1em;\n\n    .katex-error {\n      color: ", " !important;\n    }\n\n    .katex-html {\n      overflow: auto hidden;\n      padding: 3px;\n\n      .base {\n        margin-block: 0;\n        margin-inline: auto;\n      }\n\n      .tag {\n        position: relative !important;\n        display: inline-block;\n        padding-inline-start: 0.5rem;\n      }\n    }\n\n    &.selected {\n      color: #000;\n      background: ", ";\n    }\n\n    &:hover {\n      background: ", ";\n    }\n\n    &.editing {\n      background: ", ";\n    }\n\n    &:has(.katex-error) {\n      background: ", ";\n    }\n  "])), cssVar.colorError, cssVar.yellow, cssVar.colorFillTertiary, cssVar.colorFillTertiary, cssVar.colorErrorBg);
   return {
     mathInline: cx(latex, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        display: inline-block;\n        border-radius: calc(var(--lobe-markdown-border-radius) * 0.5px);\n      "])))),
     mathBlock: cx(latex, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        overflow: auto hidden;\n        display: block;\n        border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n        white-space: nowrap;\n      "])))),
-    mathEditor: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      position: absolute;\n      z-index: 999;\n      width: 320px;\n      background: ", ";\n\n      textarea {\n        width: 100%;\n\n        font-family: ", ";\n        font-size: 13px;\n\n        background: transparent !important;\n\n        transition: none !important;\n      }\n    "])), token.colorBgElevated, token.fontFamilyCode),
-    mathEditorFooter: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      border-block-start: 1px solid ", ";\n      background: ", ";\n    "])), token.colorBorderSecondary, token.colorFillQuaternary)
+    mathEditor: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      position: absolute;\n      z-index: 999;\n      width: 320px;\n      background: ", ";\n\n      textarea {\n        width: 100%;\n\n        font-family: ", ";\n        font-size: 13px;\n\n        background: transparent !important;\n\n        transition: none !important;\n      }\n    "])), cssVar.colorBgElevated, cssVar.fontFamilyCode),
+    mathEditorFooter: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      border-block-start: 1px solid ", ";\n      background: ", ";\n    "])), cssVar.colorBorderSecondary, cssVar.colorFillQuaternary),
+    mathEditorTextArea: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      margin-block: 4px;\n    "]))),
+    mathPlaceholder: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      padding-inline: 0.2em;\n      font-style: italic;\n    "])))
   };
 });

package/es/plugins/mention/react/ReactMentionPlugin.js

@@ -11,7 +11,7 @@ import { useLexicalComposerContext } from "../../../editor-kernel/react/react-co
 import { MarkdownPlugin } from "../../markdown/plugin";
 import { MentionPlugin } from "../plugin";
 import Mention from "./components/Mention";
-import { useStyles } from "./style";
+import { styles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 var ReactMentionPlugin = function ReactMentionPlugin(_ref) {
   var className = _ref.className,
@@ -20,8 +20,6 @@ var ReactMentionPlugin = function ReactMentionPlugin(_ref) {
   var _useLexicalComposerCo = useLexicalComposerContext(),
     _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
-  var _useStyles = useStyles(),
-    styles = _useStyles.styles;
   useLayoutEffect(function () {
     editor.registerPlugin(MarkdownPlugin);
     editor.registerPlugin(MentionPlugin, {

package/es/plugins/mention/react/style.d.ts

@@ -1,3 +1,3 @@
-export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
-    mention: import("antd-style").SerializedStyles;
-}>;
+export declare const styles: {
+    mention: string;
+};

package/es/plugins/mention/react/style.js

@@ -1,11 +1,11 @@
 var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 /* eslint-disable sort-keys-fix/sort-keys-fix */
-import { createStyles } from 'antd-style';
-export var useStyles = createStyles(function (_ref) {
+import { createStaticStyles } from 'antd-style';
+export var styles = createStaticStyles(function (_ref) {
   var css = _ref.css,
-    token = _ref.token;
+    cssVar = _ref.cssVar;
   return {
-    mention: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    user-select: none;\n\n    position: relative;\n\n    display: inline;\n\n    margin-inline: 0.25em;\n    padding-block: 0.2em;\n    padding-inline: 0.4em;\n    border: 1px solid ", ";\n    border-radius: 0.25em;\n\n    font-size: 0.875em;\n    line-height: 1;\n    color: ", ";\n    word-break: break-word;\n    white-space: break-spaces;\n\n    background: ", ";\n\n    &.selected {\n      color: #000;\n      background: ", ";\n    }\n  "])), token.colorInfoFillTertiary, token.colorInfo, token.colorInfoFillTertiary, token.yellow)
+    mention: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    user-select: none;\n\n    position: relative;\n\n    display: inline;\n\n    margin-inline: 0.25em;\n    padding-block: 0.2em;\n    padding-inline: 0.4em;\n    border: 1px solid ", ";\n    border-radius: 0.25em;\n\n    font-size: 0.875em;\n    line-height: 1;\n    color: ", ";\n    word-break: break-word;\n    white-space: break-spaces;\n\n    background: ", ";\n\n    &.selected {\n      color: #000;\n      background: ", ";\n    }\n  "])), cssVar.colorFillTertiary, cssVar.colorInfo, cssVar.colorFillTertiary, cssVar.yellow)
   };
 });

package/es/plugins/slash/react/components/DefaultSlashMenu.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import { type FC } from 'react';
 import type { SlashMenuProps } from '../type';
 type DefaultSlashMenuProps = Omit<SlashMenuProps, 'customRender' | 'onActiveKeyChange' | 'editor'>;
-declare const DefaultSlashMenu: import("react").NamedExoticComponent<DefaultSlashMenuProps>;
+declare const DefaultSlashMenu: FC<DefaultSlashMenuProps>;
 export default DefaultSlashMenu;

package/es/plugins/slash/react/components/DefaultSlashMenu.js

@@ -1,31 +1,38 @@
 'use client';
 
+var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { Dropdown } from '@lobehub/ui';
-import { memo, useCallback } from 'react';
+import { createStaticStyles } from 'antd-style';
+import { useCallback } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
-// Keep memo: Menu list rendering with item selection handling
-var DefaultSlashMenu = /*#__PURE__*/memo(function (_ref) {
-  var activeKey = _ref.activeKey,
-    anchorClassName = _ref.anchorClassName,
-    loading = _ref.loading,
-    onSelect = _ref.onSelect,
-    open = _ref.open,
-    options = _ref.options,
-    position = _ref.position,
-    _onClose = _ref.onClose;
-  var handleMenuClick = useCallback(function (_ref2) {
-    var key = _ref2.key;
+var styles = createStaticStyles(function (_ref) {
+  var css = _ref.css;
+  return {
+    menu: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: fixed;\n    z-index: 9999;\n  "])))
+  };
+});
+var DefaultSlashMenu = function DefaultSlashMenu(_ref2) {
+  var activeKey = _ref2.activeKey,
+    anchorClassName = _ref2.anchorClassName,
+    loading = _ref2.loading,
+    onSelect = _ref2.onSelect,
+    open = _ref2.open,
+    options = _ref2.options,
+    position = _ref2.position,
+    _onClose = _ref2.onClose;
+  var handleMenuClick = useCallback(function (_ref3) {
+    var key = _ref3.key;
     var option = options.find(function (item) {
       return 'key' in item && item.key === key;
     });
     if (option) onSelect(option);
   }, [options, onSelect]);
   return /*#__PURE__*/_jsx("div", {
+    className: styles.menu,
     style: {
       left: position.x,
-      position: 'fixed',
-      top: position.y,
-      zIndex: 9999
+      top: position.y
     },
     children: /*#__PURE__*/_jsx(Dropdown, {
       menu: {
@@ -44,6 +51,6 @@ var DefaultSlashMenu = /*#__PURE__*/memo(function (_ref) {
       })
     })
   });
-});
+};
 DefaultSlashMenu.displayName = 'DefaultSlashMenu';
 export default DefaultSlashMenu;

package/es/plugins/slash/react/components/SlashMenu.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import { type FC } from 'react';
 import type { SlashMenuProps } from '../type';
 /**
  * SlashMenu component - Only responsible for rendering the menu UI
  * All state management and plugin registration is handled by ReactSlashPlugin
  */
-declare const SlashMenu: import("react").NamedExoticComponent<SlashMenuProps>;
+declare const SlashMenu: FC<SlashMenuProps>;
 export default SlashMenu;

package/es/plugins/slash/react/components/SlashMenu.js

@@ -1,15 +1,14 @@
 'use client';
 
-import { memo, useCallback } from 'react';
+import { useCallback } from 'react';
 import DefaultSlashMenu from "./DefaultSlashMenu";
 
 /**
  * SlashMenu component - Only responsible for rendering the menu UI
  * All state management and plugin registration is handled by ReactSlashPlugin
  */
-// Keep memo: Menu rendering with keyboard navigation and selection state
 import { jsx as _jsx } from "react/jsx-runtime";
-var SlashMenu = /*#__PURE__*/memo(function (_ref) {
+var SlashMenu = function SlashMenu(_ref) {
   var activeKey = _ref.activeKey,
     anchorClassName = _ref.anchorClassName,
     CustomRender = _ref.customRender,
@@ -48,6 +47,6 @@ var SlashMenu = /*#__PURE__*/memo(function (_ref) {
     options: options,
     position: position
   });
-});
+};
 SlashMenu.displayName = 'SlashMenu';
 export default SlashMenu;

package/es/plugins/slash/react/style.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<import("antd-style").SerializedStyles>;
+export declare const styles: string;

package/es/plugins/slash/react/style.js

@@ -1,9 +1,9 @@
 var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 /* eslint-disable sort-keys-fix/sort-keys-fix */
-import { createStyles } from 'antd-style';
-export var useStyles = createStyles(function (_ref) {
+import { createStaticStyles } from 'antd-style';
+export var styles = createStaticStyles(function (_ref) {
   var css = _ref.css,
-    token = _ref.token;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background: ", ";\n  "])), token.colorBgElevated);
+    cssVar = _ref.cssVar;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background: ", ";\n  "])), cssVar.colorBgElevated);
 });

package/es/plugins/table/react/TableActionMenu/index.js

@@ -20,7 +20,7 @@ import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useAnchor } from "../../../../editor-kernel/react/useAnchor";
 import { cleanPosition, updatePosition } from "../../../../utils/updatePosition";
 import ActionMenu from "./ActionMenu";
-import { useStyles } from "./style";
+import { styles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 var TableActionMenu = /*#__PURE__*/memo(function (_ref) {
   var cellMerge = _ref.cellMerge,
@@ -157,22 +157,18 @@ var TableActionMenu = /*#__PURE__*/memo(function (_ref) {
   useEffect(function () {
     prevTableCellDOM.current = tableCellNode;
   }, [prevTableCellDOM, tableCellNode]);
-  var _useStyles = useStyles(),
-    styles = _useStyles.styles;
   return /*#__PURE__*/_jsx("div", {
-    className: styles,
+    className: styles.root,
     ref: menuButtonRef,
     children: tableCellNode && /*#__PURE__*/_jsx(ActionMenu, {
       cellMerge: cellMerge,
       editor: editor,
       tableCellNode: tableCellNode,
       children: /*#__PURE__*/_jsx(ActionIcon, {
+        className: styles.actionIcon,
         glass: true,
         icon: ChevronDown,
         size: 12,
-        style: {
-          transform: 'postionX(2px)'
-        },
         variant: 'filled'
       })
     })

package/es/plugins/table/react/TableActionMenu/style.d.ts

@@ -1 +1,4 @@
-export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<import("antd-style").SerializedStyles>;
+export declare const styles: {
+    actionIcon: string;
+    root: string;
+};

package/es/plugins/table/react/TableActionMenu/style.js

@@ -1,7 +1,10 @@
-var _templateObject;
+var _templateObject, _templateObject2;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { createStyles } from 'antd-style';
-export var useStyles = createStyles(function (_ref) {
+import { createStaticStyles } from 'antd-style';
+export var styles = createStaticStyles(function (_ref) {
   var css = _ref.css;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    will-change: transform;\n\n    position: absolute;\n    z-index: 3;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    transform: translateY(100%);\n\n    padding: 2px;\n  "])));
+  return {
+    actionIcon: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    transform: translateX(2px);\n  "]))),
+    root: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    will-change: transform;\n\n    position: absolute;\n    z-index: 3;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    transform: translateY(100%);\n\n    padding: 2px;\n  "])))
+  };
 });

package/es/plugins/table/react/TableHoverActions/index.js

@@ -14,12 +14,13 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { $getTableAndElementByKey, $getTableColumnIndexFromTableCellNode, $getTableRowIndexFromTableCellNode, $insertTableColumnAtSelection, $insertTableRowAtSelection, $isTableCellNode, $isTableNode, TableNode, getTableElement } from '@lexical/table';
 import { $findMatchingParent, mergeRegister } from '@lexical/utils';
 import { ActionIcon } from '@lobehub/ui';
+import { cx } from 'antd-style';
 import { $getNearestNodeFromDOMNode } from 'lexical';
 import { PlusIcon } from 'lucide-react';
 import { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { useLexicalComposerContext } from "../../../../editor-kernel/react";
 import { useAnchor } from "../../../../editor-kernel/react/useAnchor";
-import { useStyles } from "./style";
+import { styles } from "./style";
 import { getMouseInfo, useDebounce } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -47,9 +48,6 @@ var TableHoverActions = /*#__PURE__*/memo(function (_ref) {
     setPosition = _useState8[1];
   var tableSetRef = useRef(new Set());
   var tableCellDOMNodeRef = useRef(null);
-  var _useStyles = useStyles(),
-    cx = _useStyles.cx,
-    styles = _useStyles.styles;
   var debouncedOnMouseMove = useDebounce(function (event) {
     var _getMouseInfo = getMouseInfo(event, iEditor),
       isOutside = _getMouseInfo.isOutside,

package/es/plugins/table/react/TableHoverActions/style.d.ts

@@ -1,5 +1,5 @@
 export declare const BUTTON_WIDTH_PX = 20;
-export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
-    tableAddColumns: import("antd-style").SerializedStyles;
-    tableAddRows: import("antd-style").SerializedStyles;
-}>;
+export declare const styles: {
+    tableAddColumns: string;
+    tableAddRows: string;
+};

package/es/plugins/table/react/TableHoverActions/style.js

@@ -1,8 +1,8 @@
 var _templateObject, _templateObject2;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 export var BUTTON_WIDTH_PX = 20;
-export var useStyles = createStyles(function (_ref) {
+export var styles = createStaticStyles(function (_ref) {
   var css = _ref.css;
   return {
     tableAddColumns: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: absolute;\n    "]))),

package/es/plugins/table/react/TableResize/index.js

@@ -11,10 +11,11 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { $computeTableMapSkipCellCheck, $getTableNodeFromLexicalNodeOrThrow, $getTableRowIndexFromTableCellNode, $isTableCellNode, $isTableRowNode, TableNode, getDOMCellFromTarget, getTableElement } from '@lexical/table';
 import { calculateZoomLevel, mergeRegister } from '@lexical/utils';
+import { cssVar, cx } from 'antd-style';
 import { $getNearestNodeFromDOMNode, SKIP_SCROLL_INTO_VIEW_TAG, isHTMLElement } from 'lexical';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { MIN_COLUMN_WIDTH, MIN_ROW_HEIGHT, useStyles } from "./style";
+import { MIN_COLUMN_WIDTH, MIN_ROW_HEIGHT, styles } from "./style";
 import { getCellColumnIndex, getCellNodeHeight } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -22,10 +23,6 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 export var TableCellResize = /*#__PURE__*/memo(function (_ref) {
   var editor = _ref.editor,
     eventEmitter = _ref.eventEmitter;
-  var _useStyles = useStyles(),
-    cx = _useStyles.cx,
-    styles = _useStyles.styles,
-    theme = _useStyles.theme;
   var targetRef = useRef(null);
   var resizerRef = useRef(null);
   // eslint-disable-next-line no-undef
@@ -336,7 +333,7 @@ export var TableCellResize = /*#__PURE__*/memo(function (_ref) {
           _styles[draggingDirection].width = '3px';
           _styles[draggingDirection].height = "".concat(tableRect.height, "px");
         }
-        _styles[draggingDirection].backgroundColor = theme.colorPrimary;
+        _styles[draggingDirection].backgroundColor = cssVar.colorPrimary;
         _styles[draggingDirection].mixBlendMode = 'unset';
       }
       return _styles;
@@ -347,7 +344,7 @@ export var TableCellResize = /*#__PURE__*/memo(function (_ref) {
       right: null,
       top: null
     };
-  }, [activeCell, draggingDirection, pointerCurrentPos, theme.colorPrimary]);
+  }, [activeCell, draggingDirection, pointerCurrentPos]);
   var resizerStyles = getResizers();
   return /*#__PURE__*/_jsx("div", {
     ref: resizerRef,
@@ -371,8 +368,11 @@ export default /*#__PURE__*/memo(function (_ref2) {
   if (typeof document === 'undefined') {
     return null;
   }
+
+  // Mount to .ant-app if exists, otherwise document.body
+  var container = document.querySelector('.ant-app') || document.body;
   return /*#__PURE__*/createPortal( /*#__PURE__*/_jsx(TableCellResize, {
     editor: editor,
     eventEmitter: eventEmitter
-  }), document.body);
+  }), container);
 });

package/es/plugins/table/react/TableResize/style.d.ts

@@ -1,3 +1,3 @@
 export declare const MIN_ROW_HEIGHT = 33;
 export declare const MIN_COLUMN_WIDTH = 92;
-export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<import("antd-style").SerializedStyles>;
+export declare const styles: string;

package/es/plugins/table/react/TableResize/style.js

@@ -1,10 +1,10 @@
 var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 export var MIN_ROW_HEIGHT = 33;
 export var MIN_COLUMN_WIDTH = 92;
-export var useStyles = createStyles(function (_ref) {
+export var styles = createStaticStyles(function (_ref) {
   var css = _ref.css,
-    token = _ref.token;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    touch-action: none;\n    position: absolute;\n    z-index: 1;\n\n    @media (pointer: coarse) {\n      background-color: ", ";\n      mix-blend-mode: color;\n    }\n  "])), token.colorPrimary);
+    cssVar = _ref.cssVar;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    touch-action: none;\n    position: absolute;\n    z-index: 1;\n\n    @media (pointer: coarse) {\n      background-color: ", ";\n      mix-blend-mode: color;\n    }\n  "])), cssVar.colorPrimary);
 });

package/es/plugins/table/react/index.js

@@ -7,6 +7,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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 { $findTableNode, $getElementForTableNode, $isTableSelection } from '@lexical/table';
+import { cx } from 'antd-style';
 import EventEmitter from 'eventemitter3';
 import { $getSelection, $isRangeSelection } from 'lexical';
 import { useLayoutEffect, useMemo, useState } from 'react';
@@ -18,16 +19,13 @@ import { $updateDOMForSelection } from "../utils";
 import TableActionMenuPlugin from "./TableActionMenu";
 import TableHoverActionsPlugin from "./TableHoverActions";
 import TableCellResizePlugin from "./TableResize";
-import { useStyles } from "./style";
+import { styles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 export var ReactTablePlugin = function ReactTablePlugin(_ref) {
   var className = _ref.className,
     locale = _ref.locale;
-  var _useStyles = useStyles(),
-    cx = _useStyles.cx,
-    styles = _useStyles.styles;
   var _useLexicalComposerCo = useLexicalComposerContext(),
     _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];

package/es/plugins/table/react/style.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<import("antd-style").SerializedStyles>;
+export declare const styles: string;

package/es/plugins/table/react/style.js

@@ -1,8 +1,8 @@
 var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { createStyles } from 'antd-style';
-export var useStyles = createStyles(function (_ref) {
+import { createStaticStyles } from 'antd-style';
+export var styles = createStaticStyles(function (_ref) {
   var css = _ref.css,
-    token = _ref.token;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    overflow-x: auto;\n    margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em)\n      calc(var(--lobe-markdown-margin-multiple) * 0.5em + 16px);\n\n    .editor_table {\n      table-layout: fixed;\n      border-spacing: 0;\n      border-collapse: collapse;\n\n      width: fit-content;\n\n      text-align: start;\n      text-indent: initial;\n      text-wrap: pretty;\n      word-break: auto-phrase;\n      overflow-wrap: break-word;\n\n      background: ", ";\n\n      > tr:first-of-type {\n        background: ", ";\n\n        .editor_table_cell_header {\n          font-weight: bold;\n        }\n      }\n    }\n\n    code {\n      word-break: break-word;\n    }\n\n    .editor_table_cell_header {\n      font-weight: normal;\n    }\n\n    .editor_table_cell {\n      position: relative;\n\n      overflow: auto;\n\n      width: 75px;\n      padding-block: 6px;\n      padding-inline: 8px;\n      border: 1px solid ", ";\n\n      text-align: start;\n      vertical-align: top;\n\n      outline: none;\n    }\n\n    .editor_table_cell_selected {\n      color: #000;\n      background-color: ", ";\n      caret-color: transparent;\n    }\n  "])), token.colorFillQuaternary, token.colorFillQuaternary, token.colorFillSecondary, token.yellow);
+    cssVar = _ref.cssVar;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    overflow-x: auto;\n    margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em)\n      calc(var(--lobe-markdown-margin-multiple) * 0.5em + 16px);\n\n    .editor_table {\n      table-layout: fixed;\n      border-spacing: 0;\n      border-collapse: collapse;\n\n      width: fit-content;\n\n      text-align: start;\n      text-indent: initial;\n      text-wrap: pretty;\n      word-break: auto-phrase;\n      overflow-wrap: break-word;\n\n      background: ", ";\n\n      > tr:first-of-type {\n        background: ", ";\n\n        .editor_table_cell_header {\n          font-weight: bold;\n        }\n      }\n    }\n\n    code {\n      word-break: break-word;\n    }\n\n    .editor_table_cell_header {\n      font-weight: normal;\n    }\n\n    .editor_table_cell {\n      position: relative;\n\n      overflow: auto;\n\n      width: 75px;\n      padding-block: 6px;\n      padding-inline: 8px;\n      border: 1px solid ", ";\n\n      text-align: start;\n      vertical-align: top;\n\n      outline: none;\n    }\n\n    .editor_table_cell_selected {\n      color: #000;\n      background-color: ", ";\n      caret-color: transparent;\n    }\n  "])), cssVar.colorFillQuaternary, cssVar.colorFillQuaternary, cssVar.colorFillSecondary, cssVar.yellow);
 });

package/es/plugins/toolbar/react/index.js

@@ -6,6 +6,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { mergeRegister } from '@lexical/utils';
 import { Block } from '@lobehub/ui';
+import { cx, useThemeMode } from 'antd-style';
 import { $getSelection, COMMAND_PRIORITY_LOW, SELECTION_CHANGE_COMMAND, getDOMSelection } from 'lexical';
 import { useCallback, useRef } from 'react';
 import { useLexicalComposerContext, useLexicalEditor } from "../../../editor-kernel/react";
@@ -14,7 +15,7 @@ import { createDebugLogger } from "../../../utils/debug";
 import { HIDE_TOOLBAR_COMMAND, registerToolbarCommand } from "../command";
 import { getDOMRangeRect } from "../utils/getDOMRangeRect";
 import { setFloatingElemPosition } from "../utils/setFloatingElemPosition";
-import { useStyles } from "./style";
+import { styles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var ReactToolbarPlugin = function ReactToolbarPlugin(_ref) {
   var className = _ref.className,
@@ -24,9 +25,8 @@ export var ReactToolbarPlugin = function ReactToolbarPlugin(_ref) {
   var _useLexicalComposerCo = useLexicalComposerContext(),
     _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
     kernelEditor = _useLexicalComposerCo2[0];
-  var _useStyles = useStyles(),
-    cx = _useStyles.cx,
-    styles = _useStyles.styles;
+  var _useThemeMode = useThemeMode(),
+    isDarkMode = _useThemeMode.isDarkMode;
   var isMouseDownRef = useRef(false);
   var logger = createDebugLogger('plugin', 'toolbar');
   var $updateTextFormatFloatingToolbar = useCallback(function (editor) {
@@ -127,12 +127,10 @@ export var ReactToolbarPlugin = function ReactToolbarPlugin(_ref) {
     });
   });
   return /*#__PURE__*/_jsx("div", {
+    className: styles.anchor,
     ref: anchorElemRef,
-    style: {
-      position: 'relative'
-    },
     children: /*#__PURE__*/_jsx(Block, {
-      className: cx(styles, className),
+      className: cx(isDarkMode ? styles.toolbarDark : styles.toolbarLight, className),
       padding: 4,
       ref: popupCharStylesEditorRef,
       variant: 'outlined',

package/es/plugins/toolbar/react/style.d.ts

@@ -1 +1,5 @@
-export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<import("antd-style").SerializedStyles>;
+export declare const styles: {
+    anchor: string;
+    toolbarDark: string;
+    toolbarLight: string;
+};

package/es/plugins/toolbar/react/style.js

@@ -1,9 +1,12 @@
-var _templateObject;
+var _templateObject, _templateObject2, _templateObject3;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { createStyles } from 'antd-style';
-export var useStyles = createStyles(function (_ref) {
+import { createStaticStyles } from 'antd-style';
+export var styles = createStaticStyles(function (_ref) {
   var css = _ref.css,
-    token = _ref.token,
-    isDarkMode = _ref.isDarkMode;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    will-change: transform;\n\n    position: absolute;\n    z-index: 10;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    transform: translate(-10000px, -10000px);\n\n    display: flex;\n\n    border-color: ", ";\n\n    vertical-align: middle;\n\n    opacity: 0;\n    background: ", ";\n    box-shadow: ", ";\n\n    transition: opacity 0.12s ", ";\n  "])), token.colorFillSecondary, token.colorBgElevated, isDarkMode ? '0px 14px 28px -6px #0003,0px 2px 4px -1px #0000001f' : '0 14px 28px -6px #0000001a, 0 2px 4px -1px #0000000f', token.motionEaseOut);
+    cssVar = _ref.cssVar;
+  return {
+    anchor: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n  "]))),
+    toolbarDark: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    will-change: transform;\n\n    position: absolute;\n    z-index: 10;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    transform: translate(-10000px, -10000px);\n\n    display: flex;\n\n    border-color: ", ";\n\n    vertical-align: middle;\n\n    opacity: 0;\n    background: ", ";\n    box-shadow:\n      0 14px 28px -6px color-mix(in srgb, #000 18.75%, transparent),\n      0 2px 4px -1px color-mix(in srgb, #000 12.19%, transparent);\n\n    transition: opacity 0.12s ", ";\n  "])), cssVar.colorFillSecondary, cssVar.colorBgElevated, cssVar.motionEaseOut),
+    toolbarLight: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    will-change: transform;\n\n    position: absolute;\n    z-index: 10;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    transform: translate(-10000px, -10000px);\n\n    display: flex;\n\n    border-color: ", ";\n\n    vertical-align: middle;\n\n    opacity: 0;\n    background: ", ";\n    box-shadow:\n      0 14px 28px -6px color-mix(in srgb, #000 10.2%, transparent),\n      0 2px 4px -1px color-mix(in srgb, #000 5.88%, transparent);\n\n    transition: opacity 0.12s ", ";\n  "])), cssVar.colorFillSecondary, cssVar.colorBgElevated, cssVar.motionEaseOut)
+  };
 });

package/es/react/ChatInput/ChatInput.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { type FC } from 'react';
 import type { ChatInputProps } from './type';
-declare const ChatInput: import("react").NamedExoticComponent<ChatInputProps>;
+declare const ChatInput: FC<ChatInputProps>;
 export default ChatInput;