@lobehub/editor 3.2.0 → 3.2.2

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

@@ -1,6 +1,4 @@
-import { AllColorReplacements } from "../plugin/FacadeShiki";
-export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
-    code: import("antd-style").SerializedStyles;
-    noBackground: import("antd-style").SerializedStyles;
-}>;
-export declare const colorReplacements: AllColorReplacements;
+export declare const styles: {
+    code: string;
+    noBackground: string;
+};

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

@@ -1,38 +1,11 @@
 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,
-    token = _ref.token,
-    stylish = _ref.stylish,
-    isDarkMode = _ref.isDarkMode;
+    cssVar = _ref.cssVar;
   return {
-    code: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    --color-yellow: ", ";\n    --color-error: ", ";\n    --color-gray: ", ";\n    --color-purple: ", ";\n    --color-info: ", ";\n    --color-success: ", ";\n    --color-warning: ", ";\n    --color-text: ", ";\n    --color-geekblue: ", ";\n    --color-purple10: ", ";\n    --color-warning-text-active: ", ";\n    --color-yellow11: ", ";\n\n    position: relative;\n\n    overflow: hidden;\n    display: block;\n\n    width: 100%;\n    margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n    padding: 16px;\n    border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n\n    font-family: ", ";\n    font-size: calc(var(--lobe-markdown-font-size) * 0.85);\n\n    background: ", " !important;\n    box-shadow: 0 0 0 1px var(--lobe-markdown-border-color) inset;\n\n    &::after {\n      border-radius: ", "px;\n\n      content: attr(data-language);\n\n      padding-block: 1px;\n      padding-inline: 7px;\n\n      font-size: 12px;\n\n      display: block;\n\n      position: absolute;\n      z-index: 3;\n      inset-block-end: 8px;\n      inset-inline-end: 8px;\n\n      font-family: ", ";\n      color: ", ";\n\n      background: ", ";\n\n      transition: opacity 0.1s;\n\n      opacity: 0;\n\n      ", "\n    }\n\n    span {\n      color: var(", ");\n    }\n\n    &:hover {\n      &::after {\n        opacity: 1;\n      }\n    }\n  "])), token.yellow, token.colorError, token.gray, token.purple10, token.colorInfo, token.colorSuccess, token.colorWarning, token.colorText, token.geekblue, token.purple10, token.colorWarningTextActive, token.yellow11, token.fontFamilyCode, token.colorFillTertiary, token.borderRadius, token.fontFamilyCode, token.colorTextSecondary, token.colorFillQuaternary, stylish.blur, isDarkMode ? '--shiki-dark' : '--shiki-light'),
+    code: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n\n    overflow: hidden;\n    display: block;\n\n    width: 100%;\n    margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n    padding: 16px;\n    border-radius: var(--lobe-markdown-border-radius);\n\n    font-family: ", ";\n    font-size: calc(var(--lobe-markdown-font-size) * 0.85);\n\n    background: ", " !important;\n    box-shadow: 0 0 0 1px var(--lobe-markdown-border-color) inset;\n\n    &::after {\n      content: attr(data-language);\n\n      position: absolute;\n      z-index: 3;\n      inset-block-end: 8px;\n      inset-inline-end: 8px;\n\n      display: block;\n\n      padding-block: 1px;\n      padding-inline: 7px;\n      border-radius: ", ";\n\n      font-family: ", ";\n      font-size: 12px;\n      color: ", ";\n\n      opacity: 0;\n      background: ", ";\n      backdrop-filter: blur(8px);\n      backdrop-filter: blur(8px);\n\n      transition: opacity 0.1s;\n    }\n\n    &:hover {\n      &::after {\n        opacity: 1;\n      }\n    }\n  "])), cssVar.fontFamilyCode, cssVar.colorFillTertiary, cssVar.borderRadius, cssVar.fontFamilyCode, cssVar.colorTextSecondary, cssVar.colorFillQuaternary),
     noBackground: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    background: transparent !important;\n  "])))
   };
-});
-export var colorReplacements = {
-  'slack-dark': {
-    '#4ec9b0': 'var(--color-yellow)',
-    '#569cd6': 'var(--color-error)',
-    '#6a9955': 'var(--color-gray)',
-    '#9cdcfe': 'var(--color-text)',
-    '#b5cea8': 'var(--color-purple10)',
-    '#c586c0': 'var(--color-info)',
-    '#ce9178': 'var(--color-success)',
-    '#dcdcaa': 'var(--color-warning)',
-    '#e6e6e6': 'var(--color-text)'
-  },
-  'slack-ochin': {
-    '#002339': 'var(--color-text)',
-    '#0444ac': 'var(--color-geekblue)',
-    '#0991b6': 'var(--color-error)',
-    '#174781': 'var(--color-purple10)',
-    '#2f86d2': 'var(--color-text)',
-    '#357b42': 'var(--color-gray)',
-    '#7b30d0': 'var(--color-info)',
-    '#7eb233': 'var(--color-warning-text-active)',
-    '#a44185': 'var(--color-success)',
-    '#dc3eb7': 'var(--color-yellow11)'
-  }
-};
+});

package/es/plugins/common/react/Placeholder/index.js

@@ -10,7 +10,7 @@ import { memo, useRef, useState } from 'react';
 import { $closestNodeType } from "../../../../editor-kernel";
 import { useLexicalEditor } from "../../../../editor-kernel/react";
 import { $canShowPlaceholderCurry } from "../../utils";
-import { useStyles } from "./style";
+import { styles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 function canShowPlaceholderFromCurrentEditorState(editor) {
   var currentCanShowPlaceholder = editor.getEditorState().read($canShowPlaceholderCurry(editor.isComposing()));
@@ -35,8 +35,6 @@ var Placeholder = /*#__PURE__*/memo(function (_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     canShowPlaceholder = _useState2[0],
     setCanShowPlaceholder = _useState2[1];
-  var _useStyles = useStyles(),
-    styles = _useStyles.styles;
   useLexicalEditor(function (editor) {
     setCanShowPlaceholder(function () {
       return canShowPlaceholderFromCurrentEditorState(editor);

package/es/plugins/common/react/Placeholder/style.d.ts

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

package/es/plugins/common/react/Placeholder/style.js

@@ -1,12 +1,12 @@
 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 {
-    placeholder: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    pointer-events: none;\n    user-select: none;\n\n    position: absolute;\n    inset-block-start: 0;\n\n    margin-block: 4px;\n\n    line-height: var(--lobe-markdown-line-height);\n    color: ", ";\n    letter-spacing: 0.02em;\n  "])), token.colorTextDescription),
+    placeholder: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    pointer-events: none;\n    user-select: none;\n\n    position: absolute;\n    inset-block-start: 0;\n\n    margin-block: 4px;\n\n    line-height: var(--lobe-markdown-line-height);\n    color: ", ";\n    letter-spacing: 0.02em;\n  "])), cssVar.colorTextDescription),
     placeholderContainer: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    transform: translateY(-2px);\n  "])))
   };
 });

package/es/plugins/common/react/ReactPlainText.js

@@ -1,12 +1,12 @@
 'use client';
 
 var _excluded = ["fontSize", "headerMultiple", "lineHeight", "marginMultiple"];
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _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 _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); }
@@ -15,15 +15,17 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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; }
+import { cx } from 'antd-style';
 import { COMMAND_PRIORITY_EDITOR, KEY_DOWN_COMMAND } from 'lexical';
 import { Children, memo, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useMemo } from 'react';
 import { LexicalErrorBoundary } from "../../../editor-kernel/react/LexicalErrorBoundary";
 import { useLexicalComposerContext } from "../../../editor-kernel/react/react-context";
 import { useDecorators } from "../../../editor-kernel/react/useDecorators";
 import { MarkdownPlugin } from "../../markdown/plugin";
 import { CommonPlugin } from "../plugin";
 import Placeholder from "./Placeholder";
-import { useStyles, useThemeStyles } from "./style";
+import { styles, themeStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 // Keep memo: Core editor rendering layer with complex event handling and decorator management
@@ -66,16 +68,30 @@ var ReactPlainText = /*#__PURE__*/memo(function (_ref) {
     _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
   var decorators = useDecorators(editor, LexicalErrorBoundary);
-  var _useThemeStyles = useThemeStyles(markdownOption),
-    themeStyles = _useThemeStyles.styles;
-  var _useStyles = useStyles({
-      fontSize: fontSize,
-      headerMultiple: headerMultiple,
-      lineHeight: lineHeight,
-      marginMultiple: marginMultiple
-    }),
-    cx = _useStyles.cx,
-    styles = _useStyles.styles;
+  var cssVariables = useMemo(function () {
+    return {
+      '--common-font-size': "".concat(fontSize, "px"),
+      '--common-header-multiple': String(headerMultiple),
+      '--common-line-height': String(lineHeight),
+      '--common-margin-multiple': String(marginMultiple)
+    };
+  }, [fontSize, headerMultiple, marginMultiple, lineHeight]);
+  var computedThemeStyles = useMemo(function () {
+    var bold = markdownOption === true || _typeof(markdownOption) === 'object' && markdownOption.bold === true;
+    var italic = markdownOption === true || _typeof(markdownOption) === 'object' && markdownOption.italic === true;
+    var strikethrough = markdownOption === true || _typeof(markdownOption) === 'object' && markdownOption.strikethrough === true;
+    var underline = markdownOption === true || _typeof(markdownOption) === 'object' && markdownOption.underline === true;
+    var underlineStrikethrough = markdownOption === true || _typeof(markdownOption) === 'object' && markdownOption.underlineStrikethrough === true;
+    return {
+      quote: themeStyles.quote,
+      textBold: bold ? themeStyles.textBold_true : themeStyles.textBold_false,
+      textCode: themeStyles.textCode,
+      textItalic: italic ? themeStyles.textItalic_true : themeStyles.textItalic_false,
+      textStrikethrough: strikethrough ? themeStyles.textStrikethrough_true : themeStyles.textStrikethrough_false,
+      textUnderline: underline ? themeStyles.textUnderline_true : themeStyles.textUnderline_false,
+      textUnderlineStrikethrough: underlineStrikethrough ? themeStyles.textUnderlineStrikethrough_true : themeStyles.textUnderlineStrikethrough_false
+    };
+  }, [markdownOption]);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isInitialized = _useState2[0],
@@ -93,9 +109,9 @@ var ReactPlainText = /*#__PURE__*/memo(function (_ref) {
     editor.registerPlugin(CommonPlugin, {
       enableHotkey: enableHotkey,
       markdownOption: markdownOption,
-      theme: restTheme ? _objectSpread(_objectSpread({}, themeStyles), restTheme) : themeStyles
+      theme: restTheme ? _objectSpread(_objectSpread({}, computedThemeStyles), restTheme) : computedThemeStyles
     });
-  }, [editor, enableHotkey, enablePasteMarkdown, markdownOption, restTheme, themeStyles]);
+  }, [editor, enableHotkey, enablePasteMarkdown, markdownOption, restTheme, computedThemeStyles]);
   useEffect(function () {
     var _editor$getLexicalEdi;
     var container = editorContainerRef.current;
@@ -196,20 +212,16 @@ var ReactPlainText = /*#__PURE__*/memo(function (_ref) {
   };
   return /*#__PURE__*/_jsxs("div", {
     className: cx(styles.root, markdownOption === true && styles.variant, markdownOption === false && styles.noStyle, markdownOption === false && styles.noHeader, _typeof(markdownOption) === 'object' && markdownOption.header === true && styles.header, _typeof(markdownOption) === 'object' && markdownOption.header === false && styles.noHeader, _typeof(markdownOption) === 'object' && markdownOption.code === true && styles.code, _typeof(markdownOption) === 'object' && markdownOption.quote === true && styles.blockquote, className),
-    style: style,
+    style: _objectSpread(_objectSpread({}, cssVariables), style),
     children: [/*#__PURE__*/_jsx("div", {
+      className: styles.editorContent,
       contentEditable: editable !== null && editable !== void 0 ? editable : true,
       onBlur: handleBlur,
       onCompositionEnd: handleCompositionEnd,
       onCompositionStart: handleCompositionStart,
       onContextMenu: handleContextMenu,
       onFocus: handleFocus,
-      ref: editorContainerRef,
-      style: {
-        flex: 1,
-        minHeight: 0,
-        outline: 'none'
-      }
+      ref: editorContainerRef
     }), /*#__PURE__*/_jsx(Placeholder, {
       lineEmptyPlaceholder: lineEmptyPlaceholder,
       style: style,

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

@@ -1,35 +1,25 @@
-export declare const useThemeStyles: (props?: boolean | {
-    bold?: boolean | undefined;
-    code?: boolean | undefined;
-    header?: boolean | undefined;
-    italic?: boolean | undefined;
-    quote?: boolean | undefined;
-    strikethrough?: boolean | undefined;
-    subscript?: boolean | undefined;
-    superscript?: boolean | undefined;
-    underline?: boolean | undefined;
-    underlineStrikethrough?: boolean | undefined;
-} | undefined) => import("antd-style").ReturnStyles<{
+export declare const themeStyles: {
     quote: string;
-    textBold: import("antd-style").SerializedStyles;
+    textBold_false: string;
+    textBold_true: string;
     textCode: string;
-    textItalic: import("antd-style").SerializedStyles;
-    textStrikethrough: import("antd-style").SerializedStyles;
-    textUnderline: import("antd-style").SerializedStyles;
-    textUnderlineStrikethrough: import("antd-style").SerializedStyles;
-}>;
-export declare const useStyles: (props?: {
-    fontSize?: number | undefined;
-    headerMultiple?: number | undefined;
-    lineHeight?: number | undefined;
-    marginMultiple?: number | undefined;
-} | undefined) => import("antd-style").ReturnStyles<{
-    blockquote: import("antd-style").SerializedStyles;
-    code: import("antd-style").SerializedStyles;
-    header: import("antd-style").SerializedStyles;
-    noHeader: import("antd-style").SerializedStyles;
-    noStyle: import("antd-style").SerializedStyles;
-    p: import("antd-style").SerializedStyles;
-    root: import("antd-style").SerializedStyles;
+    textItalic_false: string;
+    textItalic_true: string;
+    textStrikethrough_false: string;
+    textStrikethrough_true: string;
+    textUnderlineStrikethrough_false: string;
+    textUnderlineStrikethrough_true: string;
+    textUnderline_false: string;
+    textUnderline_true: string;
+};
+export declare const styles: {
+    blockquote: string;
+    code: string;
+    editorContent: string;
+    header: string;
+    noHeader: string;
+    noStyle: string;
+    p: string;
+    root: string;
     variant: string;
-}>;
+};

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

@@ -1,44 +1,41 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-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); }
-import { createStyles } from 'antd-style';
-export var useThemeStyles = createStyles(function (_ref) {
+import { createStaticStyles, keyframes, cx } from 'antd-style';
+var cursorBlink = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  to {\n    visibility: hidden;\n  }\n"])));
+export var themeStyles = createStaticStyles(function (_ref) {
   var css = _ref.css,
-    token = _ref.token;
-  var markdownOption = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    cssVar = _ref.cssVar;
   return {
     quote: 'editor_quote',
-    textBold: markdownOption === true || _typeof(markdownOption) === 'object' && markdownOption.bold === true ? css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n              font-weight: bold;\n            "]))) : css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n              font-weight: unset;\n            "]))),
+    textBold_false: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    font-weight: unset;\n  "]))),
+    textBold_true: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    font-weight: bold;\n  "]))),
     textCode: 'editor_code',
-    textItalic: markdownOption === true || _typeof(markdownOption) === 'object' && markdownOption.italic === true ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n              font-style: italic;\n            "]))) : css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n              font-style: unset;\n            "]))),
-    textStrikethrough: markdownOption === true || _typeof(markdownOption) === 'object' && markdownOption.strikethrough === true ? css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n              color: ", ";\n              text-decoration: line-through;\n            "])), token.colorTextDescription) : css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n              text-decoration: unset;\n            "]))),
-    textUnderline: markdownOption === true || _typeof(markdownOption) === 'object' && markdownOption.strikethrough === true ? css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n              text-decoration: underline;\n            "]))) : css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n              text-decoration: unset;\n            "]))),
-    textUnderlineStrikethrough: markdownOption === true || _typeof(markdownOption) === 'object' && markdownOption.underlineStrikethrough === true ? css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n              text-decoration: underline line-through;\n            "]))) : css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n              text-decoration: unset;\n            "])))
+    textItalic_false: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    font-style: unset;\n  "]))),
+    textItalic_true: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    font-style: italic;\n  "]))),
+    textStrikethrough_false: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    text-decoration: unset;\n  "]))),
+    textStrikethrough_true: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    color: ", ";\n    text-decoration: line-through;\n  "])), cssVar.colorTextDescription),
+    textUnderlineStrikethrough_false: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    text-decoration: unset;\n  "]))),
+    textUnderlineStrikethrough_true: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    text-decoration: underline line-through;\n  "]))),
+    textUnderline_false: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    text-decoration: unset;\n  "]))),
+    textUnderline_true: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    text-decoration: underline;\n  "])))
   };
 });
-export var useStyles = createStyles(function (_ref2, _ref3) {
-  var cx = _ref2.cx,
-    token = _ref2.token,
-    css = _ref2.css;
-  var _ref3$fontSize = _ref3.fontSize,
-    fontSize = _ref3$fontSize === void 0 ? 16 : _ref3$fontSize,
-    _ref3$headerMultiple = _ref3.headerMultiple,
-    headerMultiple = _ref3$headerMultiple === void 0 ? 1 : _ref3$headerMultiple,
-    _ref3$marginMultiple = _ref3.marginMultiple,
-    marginMultiple = _ref3$marginMultiple === void 0 ? 2 : _ref3$marginMultiple,
-    _ref3$lineHeight = _ref3.lineHeight,
-    lineHeight = _ref3$lineHeight === void 0 ? 1.8 : _ref3$lineHeight;
-  var __root = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      --lobe-markdown-font-size: ", "px;\n      --lobe-markdown-header-multiple: ", ";\n      --lobe-markdown-margin-multiple: ", ";\n      --lobe-markdown-line-height: ", ";\n      --lobe-markdown-border-radius: ", ";\n      --lobe-markdown-border-color: ", ";\n\n      position: relative;\n\n      display: flex;\n      flex-direction: column;\n\n      width: 100%;\n      max-width: 100%;\n      height: 100%;\n\n      font-size: var(--lobe-markdown-font-size);\n      line-height: var(--lobe-markdown-line-height);\n      word-break: break-word;\n\n      @keyframes cursor-blink {\n        to {\n          visibility: hidden;\n        }\n      }\n\n      [data-placeholder] {\n        position: relative;\n      }\n\n      [data-placeholder]::after {\n        pointer-events: none;\n        content: attr(data-placeholder);\n        user-select: none;\n\n        position: absolute;\n        inset-block-start: 50%;\n        transform: translateY(-50%);\n\n        padding-inline-start: 2px;\n\n        color: ", ";\n        white-space: nowrap;\n      }\n\n      [data-lexical-cursor='true'] {\n        pointer-events: none;\n        position: absolute;\n        display: block;\n\n        &::after {\n          content: '';\n\n          position: absolute;\n          inset-block-start: -2px;\n\n          display: block;\n\n          width: 20px;\n          border-block-start: 1px solid ", ";\n\n          animation: cursor-blink 1.1s steps(2, start) infinite;\n        }\n      }\n    "])), fontSize, headerMultiple, marginMultiple, lineHeight, token.borderRadiusLG, token.colorFillQuaternary, token.colorTextDescription, token.colorText);
-  var header = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        margin-block: max(\n          calc(var(--lobe-markdown-header-multiple) * var(--lobe-markdown-margin-multiple) * 0.4em),\n          var(--lobe-markdown-font-size)\n        );\n        font-weight: bold;\n        line-height: 1.25;\n      }\n\n      h1 {\n        font-size: calc(\n          var(--lobe-markdown-font-size) * (1 + 1.5 * var(--lobe-markdown-header-multiple))\n        );\n      }\n\n      h2 {\n        font-size: calc(\n          var(--lobe-markdown-font-size) * (1 + var(--lobe-markdown-header-multiple))\n        );\n      }\n\n      h3 {\n        font-size: calc(\n          var(--lobe-markdown-font-size) * (1 + 0.5 * var(--lobe-markdown-header-multiple))\n        );\n      }\n\n      h4 {\n        font-size: calc(\n          var(--lobe-markdown-font-size) * (1 + 0.25 * var(--lobe-markdown-header-multiple))\n        );\n      }\n\n      h5,\n      h6 {\n        font-size: calc(var(--lobe-markdown-font-size) * 1);\n      }\n    "])));
-  var p = css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n      p {\n        margin-block: 4px;\n        line-height: var(--lobe-markdown-line-height);\n        letter-spacing: 0.02em;\n\n        &:not(:first-child) {\n          margin-block-start: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n        }\n\n        &:not(:last-child) {\n          margin-block-end: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n        }\n      }\n    "])));
-  var blockquote = css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n      .editor_quote {\n        margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n        margin-inline: 0;\n        padding-block: 0;\n        padding-inline: 1em;\n        border-inline-start: solid 4px ", ";\n\n        color: ", ";\n      }\n    "])), token.colorBorder, token.colorTextSecondary);
-  var code = css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n      .editor_code {\n        display: inline;\n\n        margin-inline: 0.25em;\n        padding-block: 0.2em;\n        padding-inline: 0.4em;\n        border: 1px solid var(--lobe-markdown-border-color);\n        border-radius: 0.25em;\n\n        font-family: ", ";\n        font-size: 0.875em;\n        line-height: 1;\n        word-break: break-word;\n        white-space: break-spaces;\n\n        background: ", ";\n      }\n    "])), token.fontFamilyCode, token.colorFillSecondary);
+export var styles = createStaticStyles(function (_ref2) {
+  var css = _ref2.css,
+    cssVar = _ref2.cssVar;
+  var __root = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    --lobe-markdown-font-size: var(--common-font-size, 16px);\n    --lobe-markdown-header-multiple: var(--common-header-multiple, 1);\n    --lobe-markdown-margin-multiple: var(--common-margin-multiple, 2);\n    --lobe-markdown-line-height: var(--common-line-height, 1.8);\n    --lobe-markdown-border-radius: ", ";\n    --lobe-markdown-border-color: ", ";\n\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n\n    width: 100%;\n    max-width: 100%;\n    height: 100%;\n\n    font-size: var(--lobe-markdown-font-size);\n    line-height: var(--lobe-markdown-line-height);\n    word-break: break-word;\n\n    [data-placeholder] {\n      position: relative;\n    }\n\n    [data-placeholder]::after {\n      pointer-events: none;\n      content: attr(data-placeholder);\n      user-select: none;\n\n      position: absolute;\n      inset-block-start: 50%;\n      transform: translateY(-50%);\n\n      padding-inline-start: 2px;\n\n      color: ", ";\n      white-space: nowrap;\n    }\n\n    [data-lexical-cursor='true'] {\n      pointer-events: none;\n      position: absolute;\n      display: block;\n\n      &::after {\n        content: '';\n\n        position: absolute;\n        inset-block-start: -2px;\n\n        display: block;\n\n        width: 20px;\n        border-block-start: 1px solid ", ";\n\n        animation: ", " 1.1s steps(2, start) infinite;\n      }\n    }\n  "])), cssVar.borderRadiusLG, cssVar.colorFillQuaternary, cssVar.colorTextDescription, cssVar.colorText, cursorBlink);
+  var header = css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n      margin-block: max(\n        calc(var(--lobe-markdown-header-multiple) * var(--lobe-markdown-margin-multiple) * 0.4em),\n        var(--lobe-markdown-font-size)\n      );\n      font-weight: bold;\n      line-height: 1.25;\n    }\n\n    h1 {\n      font-size: calc(\n        var(--lobe-markdown-font-size) * (1 + 1.5 * var(--lobe-markdown-header-multiple))\n      );\n    }\n\n    h2 {\n      font-size: calc(var(--lobe-markdown-font-size) * (1 + var(--lobe-markdown-header-multiple)));\n    }\n\n    h3 {\n      font-size: calc(\n        var(--lobe-markdown-font-size) * (1 + 0.5 * var(--lobe-markdown-header-multiple))\n      );\n    }\n\n    h4 {\n      font-size: calc(\n        var(--lobe-markdown-font-size) * (1 + 0.25 * var(--lobe-markdown-header-multiple))\n      );\n    }\n\n    h5,\n    h6 {\n      font-size: calc(var(--lobe-markdown-font-size) * 1);\n    }\n  "])));
+  var p = css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    p {\n      margin-block: 4px;\n      line-height: var(--lobe-markdown-line-height);\n      letter-spacing: 0.02em;\n\n      &:not(:first-child) {\n        margin-block-start: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n      }\n\n      &:not(:last-child) {\n        margin-block-end: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n      }\n    }\n  "])));
+  var blockquote = css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    .editor_quote {\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n      margin-inline: 0;\n      padding-block: 0;\n      padding-inline: 1em;\n      border-inline-start: solid 4px ", ";\n\n      color: ", ";\n    }\n  "])), cssVar.colorBorder, cssVar.colorTextSecondary);
+  var code = css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    .editor_code {\n      display: inline;\n\n      margin-inline: 0.25em;\n      padding-block: 0.2em;\n      padding-inline: 0.4em;\n      border: 1px solid var(--lobe-markdown-border-color);\n      border-radius: 0.25em;\n\n      font-family: ", ";\n      font-size: 0.875em;\n      line-height: 1;\n      word-break: break-word;\n      white-space: break-spaces;\n\n      background: ", ";\n    }\n  "])), cssVar.fontFamilyCode, cssVar.colorFillSecondary);
+  var editorContent = css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n    flex: 1;\n    min-height: 0;\n    outline: none;\n  "])));
   return {
     blockquote: blockquote,
     code: code,
+    editorContent: editorContent,
     header: header,
-    noHeader: css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          margin-block: 0;\n          font-size: var(--lobe-markdown-font-size);\n          font-weight: normal;\n          line-height: var(--lobe-markdown-line-height);\n        }\n      "]))),
-    noStyle: css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n        --lobe-markdown-header-multiple: 0;\n        --lobe-markdown-margin-multiple: 0;\n        --lobe-markdown-line-height: 1.5;\n\n        p {\n          margin-block: 4px;\n        }\n      "]))),
+    noHeader: css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        margin-block: 0;\n        font-size: var(--lobe-markdown-font-size);\n        font-weight: normal;\n        line-height: var(--lobe-markdown-line-height);\n      }\n    "]))),
+    noStyle: css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n      --lobe-markdown-header-multiple: 0;\n      --lobe-markdown-margin-multiple: 0;\n      --lobe-markdown-line-height: 1.5;\n\n      p {\n        margin-block: 4px;\n      }\n    "]))),
     p: p,
     root: __root,
     variant: cx(header, p, blockquote, code)

package/es/plugins/file/react/ReactFilePlugin.js

@@ -15,7 +15,7 @@ import { useLexicalComposerContext } from "../../../editor-kernel/react/react-co
 import { UploadPlugin } from "../../upload";
 import { FilePlugin } from "../plugin";
 import ReactFile from "./components/ReactFile";
-import { useStyles } from "./style";
+import { styles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 var ReactFilePlugin = function ReactFilePlugin(_ref) {
   var className = _ref.className,
@@ -26,8 +26,6 @@ var ReactFilePlugin = function ReactFilePlugin(_ref) {
   var _useLexicalComposerCo = useLexicalComposerContext(),
     _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
-  var _useStyles = useStyles(),
-    styles = _useStyles.styles;
   useLayoutEffect(function () {
     if (locale) {
       editor.registerLocale(locale);

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

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

package/es/plugins/file/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 {
-    file: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    user-select: none;\n\n    display: inline-block;\n\n    margin-inline: 0.25em;\n    padding-block: 0.2em;\n    padding-inline: 0.4em;\n    border: 1px solid var(--lobe-markdown-border-color);\n    border-radius: 0.25em;\n\n    font-family: ", ";\n    font-size: 0.875em;\n    line-height: 1;\n    word-break: break-word;\n    white-space: break-spaces;\n\n    background: ", ";\n\n    span {\n      user-select: none;\n    }\n\n    &.selected {\n      color: #000;\n      background: ", ";\n    }\n  "])), token.fontFamilyCode, token.colorFillSecondary, token.yellow)
+    file: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    user-select: none;\n\n    display: inline-block;\n\n    margin-inline: 0.25em;\n    padding-block: 0.2em;\n    padding-inline: 0.4em;\n    border: 1px solid var(--lobe-markdown-border-color);\n    border-radius: 0.25em;\n\n    font-family: ", ";\n    font-size: 0.875em;\n    line-height: 1;\n    word-break: break-word;\n    white-space: break-spaces;\n\n    background: ", ";\n\n    span {\n      user-select: none;\n    }\n\n    &.selected {\n      color: #000;\n      background: ", ";\n    }\n  "])), cssVar.fontFamilyCode, cssVar.colorFillSecondary, cssVar.yellow)
   };
 });

package/es/plugins/hr/react/components/HRNode.d.ts

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

package/es/plugins/hr/react/components/HRNode.js

@@ -7,12 +7,13 @@ 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 { mergeRegister } from '@lexical/utils';
+import { cx } from 'antd-style';
 import { CLICK_COMMAND, COMMAND_PRIORITY_LOW } from 'lexical';
-import { memo, useEffect } from 'react';
+import { useEffect } from 'react';
 import { useLexicalNodeSelection } from "../../../../editor-kernel/react/useLexicalNodeSelection";
-import { useStyles } from "../style";
+import { styles } from "../style";
 import { jsx as _jsx } from "react/jsx-runtime";
-var HRNode = /*#__PURE__*/memo(function (_ref) {
+var HRNode = function HRNode(_ref) {
   var node = _ref.node,
     className = _ref.className,
     editor = _ref.editor;
@@ -21,9 +22,6 @@ var HRNode = /*#__PURE__*/memo(function (_ref) {
     isSelected = _useLexicalNodeSelect2[0],
     setSelected = _useLexicalNodeSelect2[1],
     clearSelection = _useLexicalNodeSelect2[2];
-  var _useStyles = useStyles(),
-    cx = _useStyles.cx,
-    styles = _useStyles.styles;
   useEffect(function () {
     return mergeRegister(editor.registerCommand(CLICK_COMMAND, function (event) {
       var hrElem = editor.getElementByKey(node.getKey());
@@ -41,6 +39,6 @@ var HRNode = /*#__PURE__*/memo(function (_ref) {
     className: cx(styles, isSelected && 'selected', className),
     children: /*#__PURE__*/_jsx("hr", {})
   });
-});
+};
 HRNode.displayName = 'HRNode';
 export default HRNode;

package/es/plugins/hr/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/hr/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    cursor: pointer;\n\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    height: calc(var(--lobe-markdown-margin-multiple) * 1em);\n    margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n\n    hr {\n      width: 100%;\n      border-color: ", ";\n      border-style: dashed;\n      border-width: 1px;\n      border-block-start: none;\n      border-inline-start: none;\n      border-inline-end: none;\n    }\n\n    &.selected {\n      background: ", ";\n\n      hr {\n        border-color: #000;\n      }\n    }\n  "])), token.colorBorder, token.yellow);
+    cssVar = _ref.cssVar;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    cursor: pointer;\n\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    height: calc(var(--lobe-markdown-margin-multiple) * 1em);\n    margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n\n    hr {\n      width: 100%;\n      border-color: ", ";\n      border-style: dashed;\n      border-width: 1px;\n      border-block-start: none;\n      border-inline-start: none;\n      border-inline-end: none;\n    }\n\n    &.selected {\n      background: ", ";\n\n      hr {\n        border-color: #000;\n      }\n    }\n  "])), cssVar.colorBorder, cssVar.yellow);
 });

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

@@ -11,7 +11,7 @@ import { useLexicalComposerContext } from "../../../editor-kernel/react/react-co
 import { UploadPlugin } from "../../upload";
 import { ImagePlugin } from "../plugin";
 import Image from "./components/Image";
-import { useStyles } from "./style";
+import { styles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 var defaultUpload = function defaultUpload(file) {
   return new Promise(function (resolve) {
@@ -32,8 +32,6 @@ var ReactImagePlugin = function ReactImagePlugin(_ref) {
   var _useLexicalComposerCo = useLexicalComposerContext(),
     _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
-  var _useStyles = useStyles(),
-    styles = _useStyles.styles;
   useLayoutEffect(function () {
     editor.registerPlugin(UploadPlugin);
     editor.registerPlugin(ImagePlugin, {

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

@@ -1,16 +1,14 @@
 import { useTranslation } from "../../../../editor-kernel/react/useTranslation";
 import { imageBroken } from "../style";
+import { styles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 var BrokenImage = function BrokenImage() {
   var t = useTranslation();
   return /*#__PURE__*/_jsx("img", {
     alt: t('image.broken'),
+    className: styles.brokenImage,
     draggable: "false",
-    src: imageBroken,
-    style: {
-      height: 'auto',
-      width: 200
-    }
+    src: imageBroken
   });
 };
 BrokenImage.displayName = 'BrokenImage';

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

@@ -4,6 +4,7 @@ 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 { COMMAND_PRIORITY_LOW, SELECTION_CHANGE_COMMAND } from 'lexical';
 import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
 import { useLexicalEditor } from "../../../../editor-kernel/react/useLexicalEditor";
@@ -12,7 +13,7 @@ import { $isBlockImageNode } from "../../node/block-image-node";
 import BrokenImage from "./BrokenImage";
 import LazyImage from "./LazyImage";
 import { ResizeHandle } from "./ResizeHandle";
-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";
@@ -22,9 +23,6 @@ var Image = /*#__PURE__*/memo(function (_ref) {
     className = _ref.className,
     _ref$showScaleInfo = _ref.showScaleInfo,
     showScaleInfo = _ref$showScaleInfo === void 0 ? false : _ref$showScaleInfo;
-  var _useStyles = useStyles(),
-    styles = _useStyles.styles,
-    cx = _useStyles.cx;
   var _useLexicalNodeSelect = useLexicalNodeSelection(node.getKey()),
     _useLexicalNodeSelect2 = _slicedToArray(_useLexicalNodeSelect, 2),
     isSelected = _useLexicalNodeSelect2[0],

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

@@ -1,14 +1,15 @@
-/// <reference types="react" />
+import { type FC } from 'react';
 import { BlockImageNode } from '../../node/block-image-node';
 import { ImageNode } from '../../node/image-node';
-declare const LazyImage: import("react").NamedExoticComponent<{
-    className?: string | null | undefined;
-    newWidth?: number | null | undefined;
+interface LazyImageProps {
+    className?: string | null;
+    newWidth?: number | null;
     node: ImageNode | BlockImageNode;
-    onError?: (() => void) | undefined;
-    onLoad?: ((dimensions: {
+    onError?: () => void;
+    onLoad?: (dimensions: {
         height: number;
         width: number;
-    }) => void) | undefined;
-}>;
+    }) => void;
+}
+declare const LazyImage: FC<LazyImageProps>;
 export default LazyImage;