@lobehub/editor 1.25.0 → 1.26.0

package/es/index.d.ts

@@ -15,6 +15,7 @@ export * from './plugins/math';
 export * from './plugins/mention';
 export * from './plugins/slash';
 export * from './plugins/table';
+export * from './plugins/toolbar';
 export * from './plugins/upload';
 export type { IEditor } from './types';
 export * from './types/hotkey';

package/es/index.js

@@ -15,6 +15,7 @@ export * from "./plugins/math";
 export * from "./plugins/mention";
 export * from "./plugins/slash";
 export * from "./plugins/table";
+export * from "./plugins/toolbar";
 export * from "./plugins/upload";
 // Hotkey utilities
 export * from "./types/hotkey";

package/es/plugins/link/index.d.ts

@@ -1,3 +1,4 @@
 export { INSERT_LINK_COMMAND } from './command';
 export * from './plugin';
 export * from './react';
+export { ILinkService } from './service/i-link-service';

package/es/plugins/link/index.js

@@ -1,3 +1,4 @@
 export { INSERT_LINK_COMMAND } from "./command";
 export * from "./plugin";
-export * from "./react";
+export * from "./react";
+export { ILinkService } from "./service/i-link-service";

package/es/plugins/link/plugin/index.js

@@ -25,6 +25,7 @@ import { KernelPlugin } from "../../../editor-kernel/plugin";
 import { IMarkdownShortCutService } from "../../markdown/service/shortcut";
 import { INSERT_LINK_COMMAND, registerLinkCommand } from "../command";
 import { $createLinkNode, $isLinkNode, AutoLinkNode, LinkNode } from "../node/LinkNode";
+import { ILinkService, LinkService } from "../service/i-link-service";
 import { registerLinkCommands } from "./registry";
 export var LinkPlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
   _inherits(LinkPlugin, _KernelPlugin);
@@ -35,9 +36,11 @@ export var LinkPlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
     _this = _super.call(this);
     // Register the link nodes
     _defineProperty(_assertThisInitialized(_this), "linkRegex", /^https?:\/\/\S+$/);
+    _defineProperty(_assertThisInitialized(_this), "service", new LinkService());
     _this.kernel = kernel;
     _this.config = config;
     kernel.registerNodes([LinkNode, AutoLinkNode]);
+    kernel.registerService(ILinkService, _this.service);
     if (config !== null && config !== void 0 && config.theme) {
       kernel.registerThemes(config.theme);
     }

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

@@ -6,11 +6,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 { useLayoutEffect } from 'react';
+import { useLayoutEffect, useState } from 'react';
+import { useLexicalEditor } from "../../../editor-kernel/react";
 import PortalAnchor from "../../../editor-kernel/react/PortalAnchor";
 import { useLexicalComposerContext } from "../../../editor-kernel/react/react-context";
 import { MarkdownPlugin } from "../../markdown/plugin";
 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";
@@ -22,6 +24,10 @@ export var ReactLinkPlugin = function ReactLinkPlugin(_ref) {
     enableHotkey = _ref$enableHotkey === void 0 ? true : _ref$enableHotkey,
     validateUrl = _ref.validateUrl,
     attributes = _ref.attributes;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    enableToolbar = _useState2[0],
+    setEnableToolbar = _useState2[1];
   var _useLexicalComposerCo = useLexicalComposerContext(),
     _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
@@ -36,9 +42,21 @@ export var ReactLinkPlugin = function ReactLinkPlugin(_ref) {
       validateUrl: validateUrl
     });
   }, [attributes, enableHotkey, styles, theme, validateUrl]);
+  useLexicalEditor(function () {
+    var linkService = editor.requireService(ILinkService);
+    setEnableToolbar(linkService.enableLinkToolbar);
+    var handleChange = function handleChange() {
+      setEnableToolbar(linkService.enableLinkToolbar);
+    };
+    linkService.on('linkToolbarChange', handleChange);
+    return function () {
+      linkService.off('linkToolbarChange', handleChange);
+    };
+  }, []);
   return /*#__PURE__*/_jsxs(PortalAnchor, {
     children: [/*#__PURE__*/_jsx(LinkToolbar, {
-      editor: editor.getLexicalEditor()
+      editor: editor.getLexicalEditor(),
+      enable: enableToolbar
     }), /*#__PURE__*/_jsx(LinkEdit, {
       editor: editor.getLexicalEditor()
     })]

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

@@ -2,6 +2,7 @@
 import { LexicalEditor } from 'lexical';
 interface LinkToolbarProps {
     editor: LexicalEditor;
+    enable: boolean;
 }
 declare const LinkToolbar: import("react").NamedExoticComponent<LinkToolbarProps>;
 export default LinkToolbar;

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

@@ -20,7 +20,8 @@ import { useStyles } from "../style";
 import { EDIT_LINK_COMMAND } from "./LinkEdit";
 import { jsx as _jsx } from "react/jsx-runtime";
 var LinkToolbar = /*#__PURE__*/memo(function (_ref) {
-  var editor = _ref.editor;
+  var editor = _ref.editor,
+    enable = _ref.enable;
   var divRef = useRef(null);
   var LinkRef = useRef(null);
   var _useStyles = useStyles(),
@@ -123,6 +124,7 @@ var LinkToolbar = /*#__PURE__*/memo(function (_ref) {
         state.current.isLink = false;
       }
     }), editor.registerCommand(HOVER_LINK_COMMAND, function (payload) {
+      if (!enable) return false;
       if (!payload.event.target || divRef.current === null) return false;
       // Cancel any pending hide timers when hovering a link again
       clearTimeout(clearTimerRef.current);
@@ -141,7 +143,7 @@ var LinkToolbar = /*#__PURE__*/memo(function (_ref) {
       clearTimerRef.current = setTimeout(handleCancel, 300);
       return true;
     }, COMMAND_PRIORITY_NORMAL));
-  }, [editable]);
+  }, [enable, editable]);
   return /*#__PURE__*/_jsx(ActionIconGroup, {
     className: styles.linkToolbar,
     items: [{

package/es/plugins/link/service/i-link-service.d.ts

@@ -0,0 +1,11 @@
+import EventEmitter from 'eventemitter3';
+import { IServiceID } from "../../../types";
+export interface ILinkService {
+    setLinkToolbar(enable: boolean): void;
+}
+export declare const ILinkService: IServiceID<ILinkService>;
+export declare class LinkService extends EventEmitter<'linkToolbarChange'> implements ILinkService {
+    private _enableLinkToolbar;
+    get enableLinkToolbar(): boolean;
+    setLinkToolbar(enable: boolean): void;
+}

package/es/plugins/link/service/i-link-service.js

@@ -0,0 +1,46 @@
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+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); }
+/* eslint-disable no-redeclare */
+/* eslint-disable @typescript-eslint/no-redeclare */
+import EventEmitter from 'eventemitter3';
+import { genServiceId } from "../../../editor-kernel";
+export var ILinkService = genServiceId('LinkService');
+export var LinkService = /*#__PURE__*/function (_EventEmitter) {
+  _inherits(LinkService, _EventEmitter);
+  var _super = _createSuper(LinkService);
+  function LinkService() {
+    var _this;
+    _classCallCheck(this, LinkService);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "_enableLinkToolbar", true);
+    return _this;
+  }
+  _createClass(LinkService, [{
+    key: "enableLinkToolbar",
+    get: function get() {
+      return this._enableLinkToolbar;
+    }
+  }, {
+    key: "setLinkToolbar",
+    value: function setLinkToolbar(enable) {
+      this._enableLinkToolbar = enable;
+      this.emit('linkToolbarChange', enable);
+    }
+  }]);
+  return LinkService;
+}(EventEmitter);

package/es/plugins/toolbar/index.d.ts

@@ -0,0 +1 @@
+export * from './react';

package/es/plugins/toolbar/index.js

@@ -0,0 +1 @@
+export * from "./react";

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

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { ReactToolbarPluginProps } from './type';
+export declare const ReactToolbarPlugin: FC<ReactToolbarPluginProps>;

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

@@ -0,0 +1,80 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { mergeRegister } from '@lexical/utils';
+import { Block } from '@lobehub/ui';
+import { $getSelection, COMMAND_PRIORITY_LOW, SELECTION_CHANGE_COMMAND, getDOMSelection } from 'lexical';
+import { useCallback, useRef } from 'react';
+import { useLexicalComposerContext, useLexicalEditor } from "../../../editor-kernel/react";
+import { ILinkService } from "../../link";
+import { getDOMRangeRect } from "../utils/getDOMRangeRect";
+import { setFloatingElemPosition } from "../utils/setFloatingElemPosition";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var ReactToolbarPlugin = function ReactToolbarPlugin(_ref) {
+  var className = _ref.className,
+    children = _ref.children;
+  var popupCharStylesEditorRef = useRef(null);
+  var anchorElemRef = useRef(null);
+  var _useLexicalComposerCo = useLexicalComposerContext(),
+    _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
+    kernelEditor = _useLexicalComposerCo2[0];
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles;
+  var $updateTextFormatFloatingToolbar = useCallback(function (editor) {
+    if (!anchorElemRef.current) {
+      return;
+    }
+    var selection = $getSelection();
+    var popupCharStylesEditorElem = popupCharStylesEditorRef.current;
+    var nativeSelection = getDOMSelection(editor._window);
+    if (popupCharStylesEditorElem === null) {
+      return;
+    }
+    var rootElement = editor.getRootElement();
+    if (selection !== null && nativeSelection !== null && !nativeSelection.isCollapsed && rootElement !== null && rootElement.contains(nativeSelection.anchorNode)) {
+      var rangeRect = getDOMRangeRect(nativeSelection, rootElement);
+      setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElemRef.current, false);
+    } else {
+      popupCharStylesEditorElem.style.opacity = '0';
+      popupCharStylesEditorElem.style.transform = 'translate(-10000px, -10000px)';
+    }
+  }, [anchorElemRef]);
+  useLexicalEditor(function () {
+    var service = kernelEditor.requireService(ILinkService);
+    if (service) {
+      service.setLinkToolbar(false);
+      return function () {
+        service.setLinkToolbar(true);
+      };
+    }
+  }, []);
+  useLexicalEditor(function (editor) {
+    return mergeRegister(editor.registerUpdateListener(function (_ref2) {
+      var editorState = _ref2.editorState;
+      editorState.read(function () {
+        $updateTextFormatFloatingToolbar(editor);
+      });
+    }), editor.registerCommand(SELECTION_CHANGE_COMMAND, function () {
+      $updateTextFormatFloatingToolbar(editor);
+      return false;
+    }, COMMAND_PRIORITY_LOW));
+  });
+  return /*#__PURE__*/_jsx("div", {
+    ref: anchorElemRef,
+    style: {
+      position: 'relative'
+    },
+    children: /*#__PURE__*/_jsx(Block, {
+      className: cx(styles, className),
+      padding: 4,
+      ref: popupCharStylesEditorRef,
+      variant: 'outlined',
+      children: children
+    })
+  });
+};

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

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

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

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

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

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export interface ReactToolbarPluginProps {
+    children?: ReactNode;
+    className?: string;
+}

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

@@ -0,0 +1 @@
+export {};

package/es/plugins/toolbar/utils/getDOMRangeRect.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export declare function getDOMRangeRect(nativeSelection: Selection, rootElement: HTMLElement): DOMRect;

package/es/plugins/toolbar/utils/getDOMRangeRect.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export function getDOMRangeRect(nativeSelection, rootElement) {
+  var domRange = nativeSelection.getRangeAt(0);
+  var rect;
+  if (nativeSelection.anchorNode === rootElement) {
+    var inner = rootElement;
+    while (inner.firstElementChild !== null) {
+      inner = inner.firstElementChild;
+    }
+    rect = inner.getBoundingClientRect();
+  } else {
+    rect = domRange.getBoundingClientRect();
+  }
+  return rect;
+}

package/es/plugins/toolbar/utils/setFloatingElemPosition.d.ts

@@ -0,0 +1 @@
+export declare function setFloatingElemPosition(targetRect: DOMRect | null, floatingElem: HTMLElement, anchorElem: HTMLElement, isLink?: boolean, verticalGap?: number, horizontalOffset?: number): void;

package/es/plugins/toolbar/utils/setFloatingElemPosition.js

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+var VERTICAL_GAP = 4;
+var HORIZONTAL_OFFSET = 0;
+export function setFloatingElemPosition(targetRect, floatingElem, anchorElem) {
+  var isLink = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var verticalGap = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : VERTICAL_GAP;
+  var horizontalOffset = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : HORIZONTAL_OFFSET;
+  var scrollerElem = anchorElem.parentElement;
+  if (targetRect === null || !scrollerElem) {
+    floatingElem.style.opacity = '0';
+    floatingElem.style.transform = 'translate(-10000px, -10000px)';
+    return;
+  }
+  var floatingElemRect = floatingElem.getBoundingClientRect();
+  var anchorElementRect = anchorElem.getBoundingClientRect();
+  var editorScrollerRect = scrollerElem.getBoundingClientRect();
+  var top = targetRect.top - floatingElemRect.height - verticalGap;
+  var left = targetRect.left - horizontalOffset;
+
+  // Check if text is end-aligned
+  var selection = window.getSelection();
+  if (selection && selection.rangeCount > 0) {
+    var range = selection.getRangeAt(0);
+    var textNode = range.startContainer;
+    if (textNode.nodeType === Node.ELEMENT_NODE || textNode.parentElement) {
+      var textElement = textNode.nodeType === Node.ELEMENT_NODE ? textNode : textNode.parentElement;
+      var textAlign = window.getComputedStyle(textElement).textAlign;
+      if (textAlign === 'right' || textAlign === 'end') {
+        // For end-aligned text, position the toolbar relative to the text end
+        left = targetRect.right - floatingElemRect.width + horizontalOffset;
+      }
+    }
+  }
+  if (top < editorScrollerRect.top) {
+    // adjusted height for link element if the element is at top
+    top += floatingElemRect.height + targetRect.height + verticalGap * (isLink ? 9 : 2);
+  }
+  if (left + floatingElemRect.width > editorScrollerRect.right) {
+    left = editorScrollerRect.right - floatingElemRect.width - horizontalOffset;
+  }
+  if (left < editorScrollerRect.left) {
+    left = editorScrollerRect.left + horizontalOffset;
+  }
+  top -= anchorElementRect.top + 12;
+  left -= anchorElementRect.left;
+  floatingElem.style.opacity = '1';
+  floatingElem.style.transform = "translate(".concat(left, "px, ").concat(top, "px)");
+}

package/es/react/ChatInput/style.js

@@ -3,9 +3,10 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
-    token = _ref.token;
+    token = _ref.token,
+    isDarkMode = _ref.isDarkMode;
   return {
-    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n\n    height: 100%;\n    border: 1px solid ", ";\n    border-radius: ", "px;\n\n    background-color: ", ";\n    box-shadow:\n      ", ",\n      0 32px 0 ", ";\n  "])), token.colorBorderSecondary, token.borderRadiusLG, token.colorBgContainer, token.boxShadowTertiary, token.colorBgContainerSecondary),
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n\n    height: 100%;\n    border: 1px solid ", ";\n    border-radius: ", "px;\n\n    background-color: ", ";\n    box-shadow: ", ";\n  "])), isDarkMode ? token.colorFillSecondary : token.colorFill, token.borderRadiusLG, token.colorBgElevated, isDarkMode ? '0px 4px 4px rgba(0, 0, 0, 0.4)' : '0px 4px 4px rgba(0, 0, 0, 0.04)'),
     editor: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    cursor: text;\n\n    overflow: hidden auto;\n    flex: 1;\n\n    width: 100%;\n    padding-block: 8px 0;\n    padding-inline: 12px;\n  "]))),
     resizableContainer: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: relative;\n\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    align-self: flex-end;\n\n    width: 100%;\n\n    &:hover .resize-handle {\n      opacity: 1;\n    }\n  "]))),
     resizeHandle: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    position: absolute;\n    inset-block-start: -4px;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n\n    width: 100%;\n    height: 8px;\n\n    opacity: 0;\n\n    transition: opacity 0.2s ease-in-out;\n\n    &::before {\n      content: '';\n\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 50%;\n      transform: translateX(-50%);\n\n      width: 32px;\n      height: 4px;\n      border-radius: 4px;\n\n      background-color: ", ";\n      box-shadow: 0 1px 2px ", "20;\n    }\n\n    &:hover {\n      opacity: 1 !important;\n\n      &::before {\n        background-color: ", ";\n        box-shadow: 0 2px 4px ", "40;\n      }\n    }\n\n    &:active {\n      &::before {\n        background-color: ", ";\n      }\n    }\n  "])), token.colorPrimary, token.colorTextSecondary, token.colorPrimaryHover, token.colorTextSecondary, token.colorPrimaryActive)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/editor",
-  "version": "1.25.0",
+  "version": "1.26.0",
   "description": "A powerful and extensible rich text editor built on Meta's Lexical framework, providing a modern editing experience with React integration.",
   "keywords": [
     "lobehub",