@lobehub/editor 1.25.0 → 1.26.1

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/image/react/components/Image.d.ts

@@ -1,8 +1,11 @@
 import React from 'react';
 import { BlockImageNode } from '../../node/block-image-node';
 import { ImageNode } from '../../node/image-node';
-declare const Image: React.NamedExoticComponent<{
-    className?: string | undefined;
+export interface ImageProps {
+    className?: string;
     node: ImageNode | BlockImageNode;
-}>;
+    /** Whether to show scale info when resizing. Defaults to false */
+    showScaleInfo?: boolean;
+}
+declare const Image: React.NamedExoticComponent<ImageProps>;
 export default Image;

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

@@ -1,15 +1,9 @@
-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); }
 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; }
-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); }
 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";
@@ -17,110 +11,16 @@ import { useLexicalNodeSelection } from "../../../../editor-kernel/react/useLexi
 import { $isBlockImageNode } from "../../node/block-image-node";
 import BrokenImage from "./BrokenImage";
 import LazyImage from "./LazyImage";
+import { ResizeHandle } from "./ResizeHandle";
 import { useStyles } 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";
-var ResizeHandle = /*#__PURE__*/memo(function (_ref) {
-  var onResize = _ref.onResize,
-    onResizeEnd = _ref.onResizeEnd,
-    onResizeStart = _ref.onResizeStart,
-    position = _ref.position,
-    isBlock = _ref.isBlock,
-    imageRef = _ref.imageRef;
-  var startWidthRef = useRef(0);
-  var handleMouseDown = useCallback(function (e) {
-    var _imageRef$current;
-    e.preventDefault();
-    e.stopPropagation();
-
-    // Get the actual current width at mousedown time
-    var initialWidth = ((_imageRef$current = imageRef.current) === null || _imageRef$current === void 0 ? void 0 : _imageRef$current.offsetWidth) || 0;
-    startWidthRef.current = initialWidth;
-
-    // Notify parent component of the initial width
-    onResizeStart(initialWidth);
-    var startX = e.clientX;
-    var startY = e.clientY;
-    var rect = isBlock ? e.target.getBoundingClientRect() : {
-      height: 0,
-      left: 0,
-      top: 0,
-      width: 0
-    };
-    var centerX = rect.left + rect.width / 2;
-    var lastDeltaX = 0;
-    var lastDeltaY = 0;
-    var handleMouseMove = function handleMouseMove(e) {
-      var deltaX = e.clientX - startX;
-      var deltaY = e.clientY - startY;
-
-      // Only adjust deltaX based on the resize handle position
-      switch (position) {
-        case 'left':
-          {
-            deltaX = isBlock ? centerX - e.clientX : -deltaX;
-            break;
-          }
-        case 'right':
-          {
-            if (isBlock) {
-              deltaX = e.clientX - centerX;
-            }
-            break;
-          }
-      }
-      lastDeltaX = deltaX;
-      lastDeltaY = deltaY;
-      onResize(deltaX, deltaY, position);
-    };
-    var handleMouseUp = function handleMouseUp() {
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('mouseup', handleMouseUp);
-      if (typeof onResizeEnd === 'function') {
-        onResizeEnd(lastDeltaX, lastDeltaY);
-      }
-    };
-    document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener('mouseup', handleMouseUp);
-  }, [onResize, onResizeEnd, onResizeStart, position, imageRef]);
-  var getPositionStyle = function getPositionStyle() {
-    var baseStyle = {
-      backgroundColor: '#999999',
-      borderRadius: 2,
-      cursor: 'col-resize',
-      height: '60%',
-      opacity: 0.6,
-      pointerEvents: 'auto',
-      position: 'absolute',
-      top: '20%',
-      width: 4,
-      zIndex: 9999
-    };
-    switch (position) {
-      case 'left':
-        {
-          return _objectSpread(_objectSpread({}, baseStyle), {}, {
-            left: 20
-          });
-        }
-      case 'right':
-        {
-          return _objectSpread(_objectSpread({}, baseStyle), {}, {
-            right: 20
-          });
-        }
-    }
-  };
-  return /*#__PURE__*/_jsx("div", {
-    onMouseDown: handleMouseDown,
-    style: getPositionStyle()
-  });
-});
-ResizeHandle.displayName = 'ResizeHandle';
-var Image = /*#__PURE__*/memo(function (_ref2) {
-  var node = _ref2.node,
-    className = _ref2.className;
+var Image = /*#__PURE__*/memo(function (_ref) {
+  var node = _ref.node,
+    className = _ref.className,
+    _ref$showScaleInfo = _ref.showScaleInfo,
+    showScaleInfo = _ref$showScaleInfo === void 0 ? false : _ref$showScaleInfo;
   var _useStyles = useStyles(),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
@@ -128,21 +28,25 @@ var Image = /*#__PURE__*/memo(function (_ref2) {
     _useLexicalNodeSelect2 = _slicedToArray(_useLexicalNodeSelect, 2),
     isSelected = _useLexicalNodeSelect2[0],
     setSelected = _useLexicalNodeSelect2[1];
-  var _useState = useState(1),
+  var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    scale = _useState2[0],
-    setScale = _useState2[1];
-  var _useState3 = useState({
+    isHovered = _useState2[0],
+    setIsHovered = _useState2[1];
+  var _useState3 = useState(1),
+    _useState4 = _slicedToArray(_useState3, 2),
+    scale = _useState4[0],
+    setScale = _useState4[1];
+  var _useState5 = useState({
       height: 0,
       width: 0
     }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    size = _useState4[0],
-    setSize = _useState4[1];
-  var _useState5 = useState(null),
     _useState6 = _slicedToArray(_useState5, 2),
-    newWidth = _useState6[0],
-    setNewWidth = _useState6[1];
+    size = _useState6[0],
+    setSize = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    newWidth = _useState8[0],
+    setNewWidth = _useState8[1];
   var imageRef = useRef(null);
   var originalSizeRef = useRef({
     height: 0,
@@ -227,6 +131,16 @@ var Image = /*#__PURE__*/memo(function (_ref2) {
       }
     });
   }, []);
+
+  // Mouse enter handler
+  var handleMouseEnter = useCallback(function () {
+    setIsHovered(true);
+  }, []);
+
+  // Mouse leave handler
+  var handleMouseLeave = useCallback(function () {
+    setIsHovered(false);
+  }, []);
   var children = useMemo(function () {
     switch (node.status) {
       case 'error':
@@ -289,14 +203,16 @@ var Image = /*#__PURE__*/memo(function (_ref2) {
     draggable: false,
     onClick: handleClick,
     onDoubleClick: handleDoubleClick,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
     ref: imageRef,
     style: {
       width: size.width || 'auto'
     },
-    children: [children, isSelected && scale !== 1 && /*#__PURE__*/_jsxs("div", {
+    children: [children, showScaleInfo && isSelected && scale !== 1 && /*#__PURE__*/_jsxs("div", {
       className: styles.scaleInfo,
       children: [Math.round(scale * 100), "%"]
-    }), isSelected && /*#__PURE__*/_jsxs(_Fragment, {
+    }), isHovered && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(ResizeHandle, {
         imageRef: imageRef,
         isBlock: isBlock,

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

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

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

@@ -0,0 +1,75 @@
+import { memo, useCallback, useRef } from 'react';
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var ResizeHandle = /*#__PURE__*/memo(function (_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;
+    e.preventDefault();
+    e.stopPropagation();
+
+    // Get the actual current width at mousedown time
+    var initialWidth = ((_imageRef$current = imageRef.current) === null || _imageRef$current === void 0 ? void 0 : _imageRef$current.offsetWidth) || 0;
+    startWidthRef.current = initialWidth;
+
+    // Notify parent component of the initial width
+    onResizeStart(initialWidth);
+    var startX = e.clientX;
+    var startY = e.clientY;
+    var rect = isBlock ? e.target.getBoundingClientRect() : {
+      height: 0,
+      left: 0,
+      top: 0,
+      width: 0
+    };
+    var centerX = rect.left + rect.width / 2;
+    var lastDeltaX = 0;
+    var lastDeltaY = 0;
+    var handleMouseMove = function handleMouseMove(e) {
+      var deltaX = e.clientX - startX;
+      var deltaY = e.clientY - startY;
+
+      // Only adjust deltaX based on the resize handle position
+      switch (position) {
+        case 'left':
+          {
+            deltaX = isBlock ? centerX - e.clientX : -deltaX;
+            break;
+          }
+        case 'right':
+          {
+            if (isBlock) {
+              deltaX = e.clientX - centerX;
+            }
+            break;
+          }
+      }
+      lastDeltaX = deltaX;
+      lastDeltaY = deltaY;
+      onResize(deltaX, deltaY, position);
+    };
+    var handleMouseUp = function handleMouseUp() {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+      if (typeof onResizeEnd === 'function') {
+        onResizeEnd(lastDeltaX, lastDeltaY);
+      }
+    };
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  }, [imageRef, isBlock, onResize, onResizeEnd, onResizeStart, position]);
+  return /*#__PURE__*/_jsx("div", {
+    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,40 +1,7 @@
 export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
-    imageContainer: {
-        '&.selected': {
-            cursor: "pointer";
-            outline: string;
-        };
-        '&.selected::after': {
-            backgroundColor: "rgba(0, 102, 255, 0.15)";
-            bottom: number;
-            content: "\"\"";
-            left: number;
-            pointerEvents: "none";
-            position: "absolute";
-            right: number;
-            top: number;
-            zIndex: number;
-        };
-        cursor: "default";
-        display: "inline-block";
-        height: string;
-        maxWidth: string;
-        outline: string;
-        position: "relative";
-        transition: "border-color 0.2s ease";
-        userSelect: "none";
-        width: string;
-    };
-    scaleInfo: {
-        backgroundColor: "rgba(0, 0, 0, 0.7)";
-        borderRadius: number;
-        color: "white";
-        fontSize: number;
-        left: number;
-        padding: string;
-        pointerEvents: "none";
-        position: "absolute";
-        top: number;
-        zIndex: number;
-    };
+    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;
 }>;

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

@@ -1,43 +1,15 @@
+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 () {
+import { rgba } from 'polished';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token;
   return {
-    imageContainer: {
-      '&.selected': {
-        cursor: 'pointer',
-        outline: 'none'
-      },
-      '&.selected::after': {
-        backgroundColor: 'rgba(0, 102, 255, 0.15)',
-        bottom: 0,
-        content: '""',
-        left: 0,
-        pointerEvents: 'none',
-        position: 'absolute',
-        right: 0,
-        top: 0,
-        zIndex: 10
-      },
-      'cursor': 'default',
-      'display': 'inline-block',
-      'height': 'auto',
-      'maxWidth': '100%',
-      'outline': '2px solid transparent',
-      'position': 'relative',
-      'transition': 'border-color 0.2s ease',
-      'userSelect': 'none',
-      'width': 'auto'
-    },
-    scaleInfo: {
-      backgroundColor: 'rgba(0, 0, 0, 0.7)',
-      borderRadius: 3,
-      color: 'white',
-      fontSize: 12,
-      left: 0,
-      padding: '2px 6px',
-      pointerEvents: 'none',
-      position: 'absolute',
-      top: -25,
-      zIndex: 11
-    }
+    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)
   };
 });

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

@@ -1,22 +1,5 @@
 export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
-    image: {
-        userSelect: "none";
-        position: "relative";
-        display: "inline-block";
-        cursor: "default";
-        '&.selected': {
-            backgroundColor: string;
-        };
-    };
-    blockImage: {
-        userSelect: "none";
-        position: "relative";
-        display: "block";
-        textAlign: "center";
-        cursor: "default";
-        '&.selected': {
-            backgroundColor: string;
-        };
-    };
+    image: import("antd-style").SerializedStyles;
+    blockImage: import("antd-style").SerializedStyles;
 }>;
 export declare const imageBroken = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCA2NDAgNDAwIj48cGF0aCBmaWxsPSIjM0IzQjNCIiBkPSJNMCAwaDY0MHY0MDBIMHoiLz48cGF0aCBzdHJva2U9IiM2MjYyNjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxNSIgZD0iTTM3Mi41IDEzMi41aC0xMDVjLTguMjg0IDAtMTUgNi43MTYtMTUgMTV2MTA1YzAgOC4yODQgNi43MTYgMTUgMTUgMTVoMTA1YzguMjg0IDAgMTUtNi43MTYgMTUtMTV2LTEwNWMwLTguMjg0LTYuNzE2LTE1LTE1LTE1eiIvPjxwYXRoIHN0cm9rZT0iIzYyNjI2MiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjE1IiBkPSJNMjk3LjUgMTkyLjVjOC4yODQgMCAxNS02LjcxNiAxNS0xNSAwLTguMjg0LTYuNzE2LTE1LTE1LTE1LTguMjg0IDAtMTUgNi43MTYtMTUgMTUgMCA4LjI4NCA2LjcxNiAxNSAxNSAxNXpNMzg3LjUgMjIyLjUwMmwtMjMuMTQ1LTIzLjE0NWExNS4wMDEgMTUuMDAxIDAgMDAtMjEuMjEgMEwyNzUgMjY3LjUwMiIvPjwvc3ZnPg==";

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

@@ -1,27 +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) {
-  var token = _ref.token;
+  var css = _ref.css,
+    token = _ref.token;
   return {
-    image: {
-      'userSelect': 'none',
-      'position': 'relative',
-      'display': 'inline-block',
-      'cursor': 'default',
-      '&.selected': {
-        backgroundColor: token.colorPrimaryBg
-      }
-    },
-    blockImage: {
-      'userSelect': 'none',
-      'position': 'relative',
-      'display': 'block',
-      'textAlign': 'center',
-      'cursor': 'default',
-      '&.selected': {
-        backgroundColor: 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  "])), 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)
   };
 });
 export var imageBroken = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCA2NDAgNDAwIj48cGF0aCBmaWxsPSIjM0IzQjNCIiBkPSJNMCAwaDY0MHY0MDBIMHoiLz48cGF0aCBzdHJva2U9IiM2MjYyNjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxNSIgZD0iTTM3Mi41IDEzMi41aC0xMDVjLTguMjg0IDAtMTUgNi43MTYtMTUgMTV2MTA1YzAgOC4yODQgNi43MTYgMTUgMTUgMTVoMTA1YzguMjg0IDAgMTUtNi43MTYgMTUtMTV2LTEwNWMwLTguMjg0LTYuNzE2LTE1LTE1LTE1eiIvPjxwYXRoIHN0cm9rZT0iIzYyNjI2MiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjE1IiBkPSJNMjk3LjUgMTkyLjVjOC4yODQgMCAxNS02LjcxNiAxNS0xNSAwLTguMjg0LTYuNzE2LTE1LTE1LTE1LTguMjg0IDAtMTUgNi43MTYtMTUgMTUgMCA4LjI4NCA2LjcxNiAxNSAxNSAxNXpNMzg3LjUgMjIyLjUwMmwtMjMuMTQ1LTIzLjE0NWExNS4wMDEgMTUuMDAxIDAgMDAtMjEuMjEgMEwyNzUgMjY3LjUwMiIvPjwvc3ZnPg==';

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.1",
   "description": "A powerful and extensible rich text editor built on Meta's Lexical framework, providing a modern editing experience with React integration.",
   "keywords": [
     "lobehub",