@lobehub/editor 3.2.0 → 3.2.2

package/es/plugins/image/react/components/LazyImage.js

@@ -10,16 +10,16 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { memo, useEffect, useState } from 'react';
+import { cx } from 'antd-style';
+import { useEffect, useState } from 'react';
 import BrokenImage from "./BrokenImage";
+import { styles } from "./style";
 import { useSuspenseImage } from "./useSupenseImage";
 import { jsx as _jsx } from "react/jsx-runtime";
 function isSVG(src) {
   return src.toLowerCase().endsWith('.svg');
 }
-
-// Keep memo: Lazy loading with dimension calculation and SVG handling
-var LazyImage = /*#__PURE__*/memo(function (_ref) {
+var LazyImage = function LazyImage(_ref) {
   var className = _ref.className,
     node = _ref.node,
     newWidth = _ref.newWidth,
@@ -81,7 +81,7 @@ var LazyImage = /*#__PURE__*/memo(function (_ref) {
   var imageStyle = calculateDimensions();
   return /*#__PURE__*/_jsx("img", {
     alt: altText,
-    className: className || undefined,
+    className: cx(styles.lazyImage, className || undefined),
     draggable: "false",
     onError: onError,
     onLoad: function onLoad(e) {
@@ -100,11 +100,10 @@ var LazyImage = /*#__PURE__*/memo(function (_ref) {
     },
     src: src,
     style: _objectSpread(_objectSpread({}, imageStyle), {}, {
-      cursor: 'default',
       maxWidth: "calc(min(".concat(newWidth || imageStyle.maxWidth, "px, 100%))"),
       width: newWidth || imageStyle.width
     })
   });
-});
+};
 LazyImage.displayName = 'LazyImage';
 export default LazyImage;

package/es/plugins/image/react/components/ResizeHandle.d.ts

@@ -1,4 +1,4 @@
-import { type RefObject } from 'react';
+import { type FC, type RefObject } from 'react';
 export interface ResizeHandleProps {
     imageRef: RefObject<HTMLDivElement | null>;
     isBlock: boolean;
@@ -7,4 +7,4 @@ export interface ResizeHandleProps {
     onResizeStart: (initialWidth: number) => void;
     position: 'left' | 'right';
 }
-export declare const ResizeHandle: import("react").NamedExoticComponent<ResizeHandleProps>;
+export declare const ResizeHandle: FC<ResizeHandleProps>;

package/es/plugins/image/react/components/ResizeHandle.js

@@ -1,16 +1,14 @@
-import { memo, useCallback, useRef } from 'react';
-import { useStyles } from "./style";
+import { cx } from 'antd-style';
+import { useCallback, useRef } from 'react';
+import { styles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
-export var ResizeHandle = /*#__PURE__*/memo(function (_ref) {
+export var ResizeHandle = function ResizeHandle(_ref) {
   var imageRef = _ref.imageRef,
     isBlock = _ref.isBlock,
     onResize = _ref.onResize,
     onResizeEnd = _ref.onResizeEnd,
     onResizeStart = _ref.onResizeStart,
     position = _ref.position;
-  var _useStyles = useStyles(),
-    styles = _useStyles.styles,
-    cx = _useStyles.cx;
   var startWidthRef = useRef(0);
   var handleMouseDown = useCallback(function (e) {
     var _imageRef$current;
@@ -71,5 +69,5 @@ export var ResizeHandle = /*#__PURE__*/memo(function (_ref) {
     className: cx(styles.resizeHandle, position === 'left' ? styles.resizeHandleLeft : styles.resizeHandleRight),
     onMouseDown: handleMouseDown
   });
-});
+};
 ResizeHandle.displayName = 'ResizeHandle';

package/es/plugins/image/react/components/style.d.ts

@@ -1,7 +1,9 @@
-export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
-    imageContainer: import("antd-style").SerializedStyles;
-    resizeHandle: import("antd-style").SerializedStyles;
-    resizeHandleLeft: import("antd-style").SerializedStyles;
-    resizeHandleRight: import("antd-style").SerializedStyles;
-    scaleInfo: import("antd-style").SerializedStyles;
-}>;
+export declare const styles: {
+    brokenImage: string;
+    imageContainer: string;
+    lazyImage: string;
+    resizeHandle: string;
+    resizeHandleLeft: string;
+    resizeHandleRight: string;
+    scaleInfo: string;
+};

package/es/plugins/image/react/components/style.js

@@ -1,15 +1,16 @@
-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) } })); }
-import { createStyles } from 'antd-style';
-import { rgba } from 'polished';
-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 {
-    imageContainer: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    cursor: default;\n    user-select: none;\n\n    position: relative;\n\n    overflow: hidden;\n    display: inline-block;\n\n    width: auto;\n    max-width: 100%;\n    height: auto;\n    border-radius: ", "px;\n\n    transition: border-color 0.2s ease;\n\n    &.selected {\n      cursor: pointer;\n      outline: none;\n\n      &::after {\n        pointer-events: none;\n        content: '';\n\n        position: absolute;\n        z-index: 10;\n        inset: 0;\n\n        background-color: ", ";\n      }\n    }\n  "])), token.borderRadiusSM, rgba(token.yellow, 0.1)),
-    resizeHandle: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    pointer-events: auto;\n    cursor: col-resize;\n\n    position: absolute;\n    z-index: 9999;\n    inset-block-start: 0;\n\n    width: 6px;\n    height: 100%;\n\n    &::after {\n      pointer-events: none;\n      content: '';\n\n      position: absolute;\n      inset-block-start: 50%;\n      inset-inline-start: 0;\n      transform: translateY(-50%);\n\n      width: 6px;\n      height: min(80px, 80%);\n      border: 1px solid rgba(255, 255, 255, 75%);\n      border-radius: 3px;\n\n      background-color: rgba(0, 0, 0, 50%);\n    }\n  "]))),
-    resizeHandleLeft: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    inset-inline-start: 8px;\n  "]))),
-    resizeHandleRight: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    inset-inline-end: 8px;\n  "]))),
-    scaleInfo: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 11;\n    inset-block-start: 2px;\n    inset-inline-start: 2px;\n\n    padding-block: 2px;\n    padding-inline: 6px;\n    border-radius: ", "px;\n\n    font-size: 12px;\n    color: white;\n\n    background-color: rgba(0, 0, 0, 50%);\n  "])), token.borderRadiusSM)
+    brokenImage: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: 200px;\n    height: auto;\n  "]))),
+    imageContainer: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    cursor: default;\n    user-select: none;\n\n    position: relative;\n\n    overflow: hidden;\n    display: inline-block;\n\n    width: auto;\n    max-width: 100%;\n    height: auto;\n    border-radius: ", ";\n\n    transition: border-color 0.2s ease;\n\n    &.selected {\n      cursor: pointer;\n      outline: none;\n\n      &::after {\n        pointer-events: none;\n        content: '';\n\n        position: absolute;\n        z-index: 10;\n        inset: 0;\n\n        background-color: color-mix(in srgb, ", " 10%, transparent);\n      }\n    }\n  "])), cssVar.borderRadiusSM, cssVar.yellow),
+    lazyImage: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    cursor: default;\n  "]))),
+    resizeHandle: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    pointer-events: auto;\n    cursor: col-resize;\n\n    position: absolute;\n    z-index: 9999;\n    inset-block-start: 0;\n\n    width: 6px;\n    height: 100%;\n\n    &::after {\n      pointer-events: none;\n      content: '';\n\n      position: absolute;\n      inset-block-start: 50%;\n      inset-inline-start: 0;\n      transform: translateY(-50%);\n\n      width: 6px;\n      height: min(80px, 80%);\n      border: 1px solid color-mix(in srgb, rgb(255, 255, 255) 75%, transparent);\n      border-radius: 3px;\n\n      background-color: color-mix(in srgb, rgb(0, 0, 0) 50%, transparent);\n    }\n  "]))),
+    resizeHandleLeft: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    inset-inline-start: 8px;\n  "]))),
+    resizeHandleRight: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    inset-inline-end: 8px;\n  "]))),
+    scaleInfo: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 11;\n    inset-block-start: 2px;\n    inset-inline-start: 2px;\n\n    padding-block: 2px;\n    padding-inline: 6px;\n    border-radius: ", ";\n\n    font-size: 12px;\n    color: white;\n\n    background-color: color-mix(in srgb, rgb(0, 0, 0) 50%, transparent);\n  "])), cssVar.borderRadiusSM)
   };
 });

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

@@ -1,5 +1,5 @@
-export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
-    image: import("antd-style").SerializedStyles;
-    blockImage: import("antd-style").SerializedStyles;
-}>;
+export declare const styles: {
+    image: string;
+    blockImage: string;
+};
 export declare const imageBroken = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCA2NDAgNDAwIj48cGF0aCBmaWxsPSIjM0IzQjNCIiBkPSJNMCAwaDY0MHY0MDBIMHoiLz48cGF0aCBzdHJva2U9IiM2MjYyNjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxNSIgZD0iTTM3Mi41IDEzMi41aC0xMDVjLTguMjg0IDAtMTUgNi43MTYtMTUgMTV2MTA1YzAgOC4yODQgNi43MTYgMTUgMTUgMTVoMTA1YzguMjg0IDAgMTUtNi43MTYgMTUtMTV2LTEwNWMwLTguMjg0LTYuNzE2LTE1LTE1LTE1eiIvPjxwYXRoIHN0cm9rZT0iIzYyNjI2MiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjE1IiBkPSJNMjk3LjUgMTkyLjVjOC4yODQgMCAxNS02LjcxNiAxNS0xNSAwLTguMjg0LTYuNzE2LTE1LTE1LTE1LTguMjg0IDAtMTUgNi43MTYtMTUgMTUgMCA4LjI4NCA2LjcxNiAxNSAxNSAxNXpNMzg3LjUgMjIyLjUwMmwtMjMuMTQ1LTIzLjE0NWExNS4wMDEgMTUuMDAxIDAgMDAtMjEuMjEgMEwyNzUgMjY3LjUwMiIvPjwvc3ZnPg==";

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

@@ -1,13 +1,13 @@
 var _templateObject, _templateObject2;
 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 {
-    image: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    cursor: default;\n    user-select: none;\n    position: relative;\n    display: inline-block;\n\n    &.selected {\n      background-color: ", ";\n    }\n  "])), token.colorPrimaryBg),
-    blockImage: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    cursor: default;\n    user-select: none;\n\n    position: relative;\n\n    display: block;\n\n    text-align: center;\n\n    &.selected {\n      background-color: ", ";\n    }\n  "])), token.colorPrimaryBg)
+    image: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    cursor: default;\n    user-select: none;\n    position: relative;\n    display: inline-block;\n\n    &.selected {\n      background-color: ", ";\n    }\n  "])), cssVar.colorPrimaryBg),
+    blockImage: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    cursor: default;\n    user-select: none;\n\n    position: relative;\n\n    display: block;\n\n    text-align: center;\n\n    &.selected {\n      background-color: ", ";\n    }\n  "])), cssVar.colorPrimaryBg)
   };
 });
 export var imageBroken = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCA2NDAgNDAwIj48cGF0aCBmaWxsPSIjM0IzQjNCIiBkPSJNMCAwaDY0MHY0MDBIMHoiLz48cGF0aCBzdHJva2U9IiM2MjYyNjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxNSIgZD0iTTM3Mi41IDEzMi41aC0xMDVjLTguMjg0IDAtMTUgNi43MTYtMTUgMTV2MTA1YzAgOC4yODQgNi43MTYgMTUgMTUgMTVoMTA1YzguMjg0IDAgMTUtNi43MTYgMTUtMTV2LTEwNWMwLTguMjg0LTYuNzE2LTE1LTE1LTE1eiIvPjxwYXRoIHN0cm9rZT0iIzYyNjI2MiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjE1IiBkPSJNMjk3LjUgMTkyLjVjOC4yODQgMCAxNS02LjcxNiAxNS0xNSAwLTguMjg0LTYuNzE2LTE1LTE1LTE1LTguMjg0IDAtMTUgNi43MTYtMTUgMTUgMCA4LjI4NCA2LjcxNiAxNSAxNSAxNXpNMzg3LjUgMjIyLjUwMmwtMjMuMTQ1LTIzLjE0NWExNS4wMDEgMTUuMDAxIDAgMDAtMjEuMjEgMEwyNzUgMjY3LjUwMiIvPjwvc3ZnPg==';

package/es/plugins/link/react/ReactLinkPlugin.js

@@ -15,7 +15,7 @@ import { LinkPlugin } from "../plugin";
 import { ILinkService } from "../service/i-link-service";
 import LinkEdit from "./components/LinkEdit";
 import LinkToolbar from "./components/LinkToolbar";
-import { useStyles } from "./style";
+import { styles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var ReactLinkPlugin = function ReactLinkPlugin(_ref) {
@@ -31,8 +31,6 @@ export var ReactLinkPlugin = function ReactLinkPlugin(_ref) {
   var _useLexicalComposerCo = useLexicalComposerContext(),
     _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
-  var _useStyles = useStyles(),
-    styles = _useStyles.styles;
   useLayoutEffect(function () {
     editor.registerPlugin(MarkdownPlugin);
     editor.registerPlugin(LinkPlugin, {

package/es/plugins/link/react/components/LinkEdit.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { LexicalEditor } from 'lexical';
+import { type FC } from 'react';
 import { LinkNode } from '../../node/LinkNode';
 export declare const EDIT_LINK_COMMAND: import("lexical").LexicalCommand<{
     linkNode: LinkNode | null;
@@ -8,5 +8,5 @@ export declare const EDIT_LINK_COMMAND: import("lexical").LexicalCommand<{
 interface LinkEditProps {
     editor: LexicalEditor;
 }
-declare const LinkEdit: import("react").NamedExoticComponent<LinkEditProps>;
+declare const LinkEdit: FC<LinkEditProps>;
 export default LinkEdit;

package/es/plugins/link/react/components/LinkEdit.js

@@ -6,19 +6,20 @@ 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, Button, Flexbox, Hotkey, Icon, Input, Text } from '@lobehub/ui';
+import { cssVar } from 'antd-style';
 import { COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_NORMAL, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND, createCommand } from 'lexical';
 import { BaselineIcon, LinkIcon } from 'lucide-react';
-import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useLexicalEditor } from "../../../../editor-kernel/react";
 import { useEditable } from "../../../../editor-kernel/react/useEditable";
 import { useTranslation } from "../../../../editor-kernel/react/useTranslation";
 import { cleanPosition, updatePosition } from "../../../../utils/updatePosition";
 import { UPDATE_LINK_TEXT_COMMAND } from "../../command";
-import { useStyles } from "../style";
+import { styles } from "../style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var EDIT_LINK_COMMAND = createCommand();
-var LinkEdit = /*#__PURE__*/memo(function (_ref) {
+var LinkEdit = function LinkEdit(_ref) {
   var editor = _ref.editor;
   var divRef = useRef(null);
   var linkNodeRef = useRef(null);
@@ -39,9 +40,6 @@ var LinkEdit = /*#__PURE__*/memo(function (_ref) {
   var _useEditable = useEditable(),
     editable = _useEditable.editable;
   var t = useTranslation();
-  var _useStyles = useStyles(),
-    styles = _useStyles.styles,
-    theme = _useStyles.theme;
 
   // 取消编辑，不保存更改
   var handleCancel = useCallback(function () {
@@ -215,7 +213,7 @@ var LinkEdit = /*#__PURE__*/memo(function (_ref) {
         },
         onKeyDown: handleKeyDown,
         prefix: /*#__PURE__*/_jsx(Icon, {
-          color: theme.colorTextDescription,
+          color: cssVar.colorTextDescription,
           icon: BaselineIcon
         }),
         ref: linkTextInputRef,
@@ -231,7 +229,7 @@ var LinkEdit = /*#__PURE__*/memo(function (_ref) {
         onKeyDown: handleKeyDown,
         placeholder: "https://enter-link-url",
         prefix: /*#__PURE__*/_jsx(Icon, {
-          color: theme.colorTextDescription,
+          color: cssVar.colorTextDescription,
           icon: LinkIcon
         }),
         ref: linkInputRef,
@@ -259,6 +257,6 @@ var LinkEdit = /*#__PURE__*/memo(function (_ref) {
       })
     })]
   });
-});
+};
 LinkEdit.displayName = 'LinkEdit';
 export default LinkEdit;

package/es/plugins/link/react/components/LinkToolbar.js

@@ -16,7 +16,7 @@ import { useTranslation } from "../../../../editor-kernel/react/useTranslation";
 import { getSelectedNode } from "../../utils";
 import { cleanPosition, updatePosition } from "../../../../utils/updatePosition";
 import { $isLinkNode, HOVER_LINK_COMMAND, HOVER_OUT_LINK_COMMAND, TOGGLE_LINK_COMMAND } from "../../node/LinkNode";
-import { useStyles } from "../style";
+import { styles } from "../style";
 import { EDIT_LINK_COMMAND } from "./LinkEdit";
 import { jsx as _jsx } from "react/jsx-runtime";
 var LinkToolbar = /*#__PURE__*/memo(function (_ref) {
@@ -24,8 +24,6 @@ var LinkToolbar = /*#__PURE__*/memo(function (_ref) {
     enable = _ref.enable;
   var divRef = useRef(null);
   var LinkRef = useRef(null);
-  var _useStyles = useStyles(),
-    styles = _useStyles.styles;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     linkNode = _useState2[0],

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

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

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

@@ -1,15 +1,14 @@
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 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) {
-  var cx = _ref.cx,
-    css = _ref.css,
-    token = _ref.token;
+import { createStaticStyles, cx } from 'antd-style';
+export var styles = createStaticStyles(function (_ref) {
+  var css = _ref.css,
+    cssVar = _ref.cssVar;
   var position = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: absolute;\n    z-index: 999;\n    inset-block-start: -9999px;\n    inset-inline-start: -9999px;\n  "])));
   return {
     link: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      cursor: pointer;\n\n      margin-block: 1em;\n      margin-inline: 0;\n      padding: 2px;\n      border: none;\n    "]))),
-    linkEdit: cx(position, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        min-width: 320px;\n        max-width: 100%;\n        background: ", ";\n      "])), token.colorBgElevated)),
-    linkEditFooter: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      border-block-start: 1px solid ", ";\n      background: ", ";\n    "])), token.colorBorderSecondary, token.colorFillQuaternary),
-    linkToolbar: cx(position, css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        background: ", ";\n      "])), token.colorBgElevated))
+    linkEdit: cx(position, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        min-width: 320px;\n        max-width: 100%;\n        background: ", ";\n      "])), cssVar.colorBgElevated)),
+    linkEditFooter: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      border-block-start: 1px solid ", ";\n      background: ", ";\n    "])), cssVar.colorBorderSecondary, cssVar.colorFillQuaternary),
+    linkToolbar: cx(position, css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        background: ", ";\n      "])), cssVar.colorBgElevated))
   };
 });

package/es/plugins/link-highlight/react/ReactLinkHighlightPlugin.js

@@ -4,11 +4,12 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { cx } from 'antd-style';
 import { useLayoutEffect } from 'react';
 import { useLexicalComposerContext } from "../../../editor-kernel/react/react-context";
 import { MarkdownPlugin } from "../../markdown/plugin";
 import { LinkHighlightPlugin } from "../plugin";
-import { useStyles } from "./style";
+import { styles } from "./style";
 var ReactLinkHighlightPlugin = function ReactLinkHighlightPlugin(_ref) {
   var className = _ref.className,
     _ref$enableHotkey = _ref.enableHotkey,
@@ -18,9 +19,6 @@ var ReactLinkHighlightPlugin = function ReactLinkHighlightPlugin(_ref) {
   var _useLexicalComposerCo = useLexicalComposerContext(),
     _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
-  var _useStyles = useStyles(),
-    cx = _useStyles.cx,
-    styles = _useStyles.styles;
   useLayoutEffect(function () {
     editor.registerPlugin(MarkdownPlugin);
     editor.registerPlugin(LinkHighlightPlugin, {

package/es/plugins/link-highlight/react/style.d.ts

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

package/es/plugins/link-highlight/react/style.js

@@ -1,7 +1,7 @@
 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;
   return {
     linkHighlight: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      cursor: unset;\n\n      margin-block: 1em;\n      margin-inline: 0;\n      padding: 2px;\n      border: none;\n    "])))

package/es/plugins/list/react/ReactListPlugin.js

@@ -10,15 +10,13 @@ import { useLayoutEffect } from 'react';
 import { useLexicalComposerContext } from "../../../editor-kernel/react/react-context";
 import { MarkdownPlugin } from "../../markdown/plugin";
 import { ListPlugin } from "../plugin";
-import { useStyles } from "./style";
+import { styles } from "./style";
 var ReactListPlugin = function ReactListPlugin(_ref) {
   var _ref$enableHotkey = _ref.enableHotkey,
     enableHotkey = _ref$enableHotkey === void 0 ? true : _ref$enableHotkey;
   var _useLexicalComposerCo = useLexicalComposerContext(),
     _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
-  var _useStyles = useStyles(),
-    styles = _useStyles.styles;
   useLayoutEffect(function () {
     editor.registerPlugin(MarkdownPlugin);
     editor.registerPlugin(ListPlugin, {

package/es/plugins/list/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/list/react/style.js

@@ -1,9 +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';
-import { readableColor } from 'polished';
-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    .editor_listUnordered&,\n    .editor_listOrdered& {\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n      margin-inline-start: 1em;\n      padding-inline-start: 0;\n      list-style-position: outside;\n\n      > .editor_listUnordered,\n      > ol {\n        margin-block: 0;\n      }\n\n      > .editor_listItem {\n        margin-inline-start: 1em;\n      }\n    }\n\n    .editor_listOrdered& {\n      list-style: auto;\n    }\n\n    .editor_listUnordered& {\n      list-style-type: none;\n\n      > .editor_listItem:not(:has(ul)):not([role='checkbox']) {\n        &::before {\n          content: '-';\n          display: inline-block;\n          margin-inline: -1em 0.5em;\n          opacity: 0.5;\n        }\n      }\n    }\n\n    .editor_listItem {\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.33em);\n      font-family: var(--listitem-marker-font-family);\n      font-size: var(--listitem-marker-font-size);\n      background-color: var(--listitem-marker-background-color);\n\n      &::marker {\n        font-family: var(--listitem-marker-font-family);\n        font-size: var(--listitem-marker-font-size);\n        color: var(--listitem-marker-color);\n        background-color: var(--listitem-marker-background-color);\n      }\n\n      p {\n        display: inline;\n      }\n\n      .editor_listUnordered,\n      .editor_listOrdered {\n        margin: 0;\n      }\n    }\n\n    [role='checkbox'] {\n      position: relative;\n    }\n\n    .editor_listItemChecked::before,\n    .editor_listItemUnchecked::before {\n      border: 1px solid ", ";\n      border-radius: 4px;\n    }\n\n    .editor_listItemChecked::before {\n      background: ", ";\n    }\n\n    .editor_listItemChecked:not(:has(ul))::after {\n      cursor: pointer;\n      content: '';\n\n      position: absolute;\n      inset-block-start: 50%;\n      inset-inline-start: 0.2em;\n      transform: rotate(45deg) scale(1) translate(-50%, -50%);\n\n      display: block;\n\n      width: 0.3em;\n      height: 0.6em;\n      margin-inline: -1.35em 0.5em;\n      border: 2px solid ", ";\n      border-block-start: 0;\n      border-inline-start: 0;\n\n      background-size: cover;\n\n      transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;\n    }\n\n    .editor_listItemUnchecked:not(:has(ul))::before,\n    .editor_listItemChecked:not(:has(ul))::before {\n      cursor: pointer;\n      content: '';\n\n      position: absolute;\n      inset-block-start: 50%;\n      inset-inline-start: 0;\n      transform: translateY(-50%);\n\n      display: inline-block;\n      display: block;\n\n      width: 1em;\n      height: 1em;\n      margin-inline: -1.4em 0.5em;\n\n      background-size: cover;\n    }\n\n    .editor_listItemNested {\n      list-style-type: none;\n    }\n  "])), token.colorBorder, token.colorPrimary, readableColor(token.colorPrimary));
+    cssVar = _ref.cssVar;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    .editor_listUnordered&,\n    .editor_listOrdered& {\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n      margin-inline-start: 1em;\n      padding-inline-start: 0;\n      list-style-position: outside;\n\n      > .editor_listUnordered,\n      > ol {\n        margin-block: 0;\n      }\n\n      > .editor_listItem {\n        margin-inline-start: 1em;\n      }\n    }\n\n    .editor_listOrdered& {\n      list-style: auto;\n    }\n\n    .editor_listUnordered& {\n      list-style-type: none;\n\n      > .editor_listItem:not(:has(ul)):not([role='checkbox']) {\n        &::before {\n          content: '-';\n          display: inline-block;\n          margin-inline: -1em 0.5em;\n          opacity: 0.5;\n        }\n      }\n    }\n\n    .editor_listItem {\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.33em);\n      font-family: var(--listitem-marker-font-family);\n      font-size: var(--listitem-marker-font-size);\n      background-color: var(--listitem-marker-background-color);\n\n      &::marker {\n        font-family: var(--listitem-marker-font-family);\n        font-size: var(--listitem-marker-font-size);\n        color: var(--listitem-marker-color);\n        background-color: var(--listitem-marker-background-color);\n      }\n\n      p {\n        display: inline;\n      }\n\n      .editor_listUnordered,\n      .editor_listOrdered {\n        margin: 0;\n      }\n    }\n\n    [role='checkbox'] {\n      position: relative;\n    }\n\n    .editor_listItemChecked::before,\n    .editor_listItemUnchecked::before {\n      border: 1px solid ", ";\n      border-radius: 4px;\n    }\n\n    .editor_listItemChecked::before {\n      background: ", ";\n    }\n\n    .editor_listItemChecked:not(:has(ul))::after {\n      cursor: pointer;\n      content: '';\n\n      position: absolute;\n      inset-block-start: 50%;\n      inset-inline-start: 0.2em;\n      transform: rotate(45deg) scale(1) translate(-50%, -50%);\n\n      display: block;\n\n      width: 0.3em;\n      height: 0.6em;\n      margin-inline: -1.35em 0.5em;\n      border: 2px solid ", ";\n      border-block-start: 0;\n      border-inline-start: 0;\n\n      background-size: cover;\n\n      transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;\n    }\n\n    .editor_listItemUnchecked:not(:has(ul))::before,\n    .editor_listItemChecked:not(:has(ul))::before {\n      cursor: pointer;\n      content: '';\n\n      position: absolute;\n      inset-block-start: 50%;\n      inset-inline-start: 0;\n      transform: translateY(-50%);\n\n      display: inline-block;\n      display: block;\n\n      width: 1em;\n      height: 1em;\n      margin-inline: -1.4em 0.5em;\n\n      background-size: cover;\n    }\n\n    .editor_listItemNested {\n      list-style-type: none;\n    }\n  "])), cssVar.colorBorder, cssVar.colorPrimary, cssVar.colorTextLightSolid);
 });

package/es/plugins/litexml/react/DiffNodeToolbar/index.js

@@ -1,22 +1,23 @@
 import { ActionIcon, Block } from '@lobehub/ui';
+import { useThemeMode } from 'antd-style';
 import { Check, X } from 'lucide-react';
 import { LexicalPortalContainer } from "../../../../editor-kernel/react";
 import { useTranslation } from "../../../../editor-kernel/react/useTranslation";
 import { DiffAction, LITEXML_DIFFNODE_COMMAND } from "../../command/diffCommand";
-import { useStyles } from "./style";
+import { styles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var ReactDiffNodeToolbar = function ReactDiffNodeToolbar(_ref) {
   var editor = _ref.editor,
     node = _ref.node;
   var t = useTranslation();
-  var _useStyles = useStyles(),
-    styles = _useStyles.styles;
+  var _useThemeMode = useThemeMode(),
+    isDarkMode = _useThemeMode.isDarkMode;
   return /*#__PURE__*/_jsx(LexicalPortalContainer, {
     editor: editor,
     node: node,
     children: /*#__PURE__*/_jsxs(Block, {
-      className: styles.toolbar,
+      className: isDarkMode ? styles.toolbarDark : styles.toolbarLight,
       gap: 2,
       horizontal: true,
       padding: 2,

package/es/plugins/litexml/react/DiffNodeToolbar/style.d.ts

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

package/es/plugins/litexml/react/DiffNodeToolbar/style.js

@@ -1,13 +1,13 @@
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 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;
+    cssVar = _ref.cssVar;
   return {
-    accept: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), token.colorSuccess),
+    accept: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), cssVar.colorSuccess),
     reject: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""]))),
-    toolbar: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    border-color: ", ";\n    background: ", ";\n    box-shadow: ", ";\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')
+    toolbarDark: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    border-color: ", ";\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  "])), cssVar.colorFillSecondary, cssVar.colorBgElevated),
+    toolbarLight: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    border-color: ", ";\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  "])), cssVar.colorFillSecondary, cssVar.colorBgElevated)
   };
 });

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

@@ -11,14 +11,12 @@ import { useLexicalComposerContext } from "../../../editor-kernel/react";
 import { INodePlugin } from "../../inode";
 import { LitexmlPlugin } from "../plugin";
 import ReactDiffNodeToolbar from "./DiffNodeToolbar";
-import { useStyles } from "./style";
+import { styles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var ReactLiteXmlPlugin = function ReactLiteXmlPlugin() {
   var _useLexicalComposerCo = useLexicalComposerContext(),
     _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
-  var _useStyles = useStyles(),
-    styles = _useStyles.styles;
   useLayoutEffect(function () {
     editor.registerPlugin(INodePlugin);
     editor.registerPlugin(LitexmlPlugin, {

package/es/plugins/litexml/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/litexml/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    position: relative;\n\n    .toolbar {\n      position: absolute;\n      z-index: 10;\n      inset-block-end: 0;\n      inset-inline-end: 8px;\n\n      opacity: 0;\n    }\n\n    &:hover {\n      .toolbar {\n        opacity: 1;\n      }\n    }\n\n    &[data-diff-type='add'] .content {\n      position: relative;\n      margin-block-start: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n      padding-inline-end: 4px;\n      border-inline-end: 3px solid ", ";\n    }\n\n    &[data-diff-type='remove'] .content {\n      position: relative;\n      margin-block-start: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n      padding-inline-end: 4px;\n      border-inline-end: 3px solid ", ";\n\n      > *:first-child * {\n        color: ", " !important;\n        text-decoration: line-through !important;\n      }\n    }\n\n    &[data-diff-type='listItemModify'] {\n      display: inline-block;\n\n      p {\n        display: block !important;\n      }\n    }\n\n    &[data-diff-type='listItemModify'] .content {\n      position: relative;\n      margin-block-start: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n      padding-inline-end: 4px;\n      border-inline-end: 3px solid ", ";\n\n      /* first child: original (deleted) */\n\n      /*  > *:first-child {}  */\n\n      /* visually indicate deletion with strike-through for text nodes */\n      > *:first-child * {\n        color: ", " !important;\n        text-decoration: line-through !important;\n      }\n\n      /* second child: modified/new - normal appearance */\n      > *:nth-child(2) {\n        color: inherit;\n        opacity: 1;\n      }\n    }\n\n    &[data-diff-type='modify'] .content {\n      position: relative;\n      margin-block-start: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n      padding-inline-end: 4px;\n      border-inline-end: 3px solid ", ";\n\n      /* first child: original (deleted) */\n\n      /*  > *:first-child {}  */\n\n      /* visually indicate deletion with strike-through for text nodes */\n      > *:first-child * {\n        color: ", " !important;\n        text-decoration: line-through !important;\n      }\n\n      /* second child: modified/new - normal appearance */\n      > *:nth-child(2) {\n        color: inherit;\n        opacity: 1;\n      }\n    }\n  "])), token.colorSuccess, token.colorError, token.colorTextQuaternary, token.colorWarning, token.colorTextQuaternary, token.colorWarning, token.colorTextQuaternary);
+    cssVar = _ref.cssVar;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n\n    .toolbar {\n      position: absolute;\n      z-index: 10;\n      inset-block-end: 0;\n      inset-inline-end: 8px;\n\n      opacity: 0;\n    }\n\n    &:hover {\n      .toolbar {\n        opacity: 1;\n      }\n    }\n\n    &[data-diff-type='add'] .content {\n      position: relative;\n      margin-block-start: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n      padding-inline-end: 4px;\n      border-inline-end: 3px solid ", ";\n    }\n\n    &[data-diff-type='remove'] .content {\n      position: relative;\n      margin-block-start: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n      padding-inline-end: 4px;\n      border-inline-end: 3px solid ", ";\n\n      > *:first-child * {\n        color: ", " !important;\n        text-decoration: line-through !important;\n      }\n    }\n\n    &[data-diff-type='listItemModify'] {\n      display: inline-block;\n\n      p {\n        display: block !important;\n      }\n    }\n\n    &[data-diff-type='listItemModify'] .content {\n      position: relative;\n      margin-block-start: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n      padding-inline-end: 4px;\n      border-inline-end: 3px solid ", ";\n\n      /* first child: original (deleted) */\n\n      /*  > *:first-child {}  */\n\n      /* visually indicate deletion with strike-through for text nodes */\n      > *:first-child * {\n        color: ", " !important;\n        text-decoration: line-through !important;\n      }\n\n      /* second child: modified/new - normal appearance */\n      > *:nth-child(2) {\n        color: inherit;\n        opacity: 1;\n      }\n    }\n\n    &[data-diff-type='modify'] .content {\n      position: relative;\n      margin-block-start: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n      padding-inline-end: 4px;\n      border-inline-end: 3px solid ", ";\n\n      /* first child: original (deleted) */\n\n      /*  > *:first-child {}  */\n\n      /* visually indicate deletion with strike-through for text nodes */\n      > *:first-child * {\n        color: ", " !important;\n        text-decoration: line-through !important;\n      }\n\n      /* second child: modified/new - normal appearance */\n      > *:nth-child(2) {\n        color: inherit;\n        opacity: 1;\n      }\n    }\n  "])), cssVar.colorSuccess, cssVar.colorError, cssVar.colorTextQuaternary, cssVar.colorWarning, cssVar.colorTextQuaternary, cssVar.colorWarning, cssVar.colorTextQuaternary);
 });

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

@@ -1,7 +1,7 @@
 import { Block } from '@lobehub/ui';
 import { memo, useEffect, useRef } from 'react';
 import { cleanPosition, updatePosition } from "../../../../utils/updatePosition";
-import { useStyles } from "../style";
+import { styles } from "../style";
 import { jsx as _jsx } from "react/jsx-runtime";
 var MathEditorContainer = /*#__PURE__*/memo(function (_ref) {
   var children = _ref.children,
@@ -10,8 +10,6 @@ var MathEditorContainer = /*#__PURE__*/memo(function (_ref) {
     onFocus = _ref.onFocus,
     prev = _ref.prev;
   var divRef = useRef(null);
-  var _useStyles = useStyles(),
-    styles = _useStyles.styles;
   var updateMathPosition = function updateMathPosition() {
     return updatePosition({
       callback: function callback() {

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

@@ -4,13 +4,13 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { Button, Hotkey, Text, TextArea, Flexbox } from '@lobehub/ui';
+import { Button, Flexbox, Hotkey, Text, TextArea } from '@lobehub/ui';
 import { renderToString } from 'katex';
 import { isModifierMatch } from 'lexical';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { CONTROL_OR_META } from "../../../../common/sys";
 import { useTranslation } from "../../../../editor-kernel/react/useTranslation";
-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";
@@ -31,8 +31,6 @@ var MathEditorContent = /*#__PURE__*/memo(function (_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     latexError = _useState2[0],
     setLatexError = _useState2[1];
-  var _useStyles = useStyles(),
-    styles = _useStyles.styles;
 
   // 将 ref 暴露给父组件
   useEffect(function () {
@@ -115,6 +113,7 @@ var MathEditorContent = /*#__PURE__*/memo(function (_ref) {
         maxRows: 6,
         minRows: 1
       },
+      className: styles.mathEditorTextArea,
       onChange: function onChange(e) {
         onValueChange(e.target.value);
       },
@@ -122,9 +121,6 @@ var MathEditorContent = /*#__PURE__*/memo(function (_ref) {
       placeholder: "".concat(t('math.placeholder'), "..."),
       ref: textareaRef,
       resize: false,
-      style: {
-        marginBlock: 4
-      },
       value: value,
       variant: 'borderless'
     }), latexError && /*#__PURE__*/_jsx(Flexbox, {

package/es/plugins/math/react/components/MathInline.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
 import { LexicalEditor } from 'lexical';
+import { type FC } from 'react';
 import { MathBlockNode, MathInlineNode } from '../../node';
 export interface MathInlineProps {
     className?: string;
     editor: LexicalEditor;
     node: MathInlineNode | MathBlockNode;
 }
-declare const MathInline: import("react").NamedExoticComponent<MathInlineProps>;
+declare const MathInline: FC<MathInlineProps>;
 export default MathInline;