@lobehub/editor 1.26.0 → 1.27.0

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/toolbar/react/index.js

@@ -25,6 +25,7 @@ export var ReactToolbarPlugin = function ReactToolbarPlugin(_ref) {
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
+  var isMouseDownRef = useRef(false);
   var $updateTextFormatFloatingToolbar = useCallback(function (editor) {
     if (!anchorElemRef.current) {
       return;
@@ -44,6 +45,37 @@ export var ReactToolbarPlugin = function ReactToolbarPlugin(_ref) {
       popupCharStylesEditorElem.style.transform = 'translate(-10000px, -10000px)';
     }
   }, [anchorElemRef]);
+  var $hideFloatingToolbar = useCallback(function () {
+    if (!anchorElemRef.current) {
+      return;
+    }
+    var popupCharStylesEditorElem = popupCharStylesEditorRef.current;
+    if (popupCharStylesEditorElem === null) {
+      return;
+    }
+    popupCharStylesEditorElem.style.opacity = '0';
+    popupCharStylesEditorElem.style.transform = 'translate(-10000px, -10000px)';
+  }, [anchorElemRef]);
+  var handleMouseDownFactory = useCallback(function (updateToolbar) {
+    return function (e) {
+      if (e.button === 0) {
+        // 0 is left mouse button
+        isMouseDownRef.current = true;
+        // Update toolbar when mouse is released
+        updateToolbar();
+      }
+    };
+  }, []);
+  var handleMouseUpFactory = useCallback(function (updateToolbar) {
+    return function (e) {
+      if (e.button === 0) {
+        // 0 is left mouse button
+        isMouseDownRef.current = false;
+        // Update toolbar when mouse is released
+        updateToolbar();
+      }
+    };
+  }, []);
   useLexicalEditor(function () {
     var service = kernelEditor.requireService(ILinkService);
     if (service) {
@@ -54,15 +86,39 @@ export var ReactToolbarPlugin = function ReactToolbarPlugin(_ref) {
     }
   }, []);
   useLexicalEditor(function (editor) {
-    return mergeRegister(editor.registerUpdateListener(function (_ref2) {
-      var editorState = _ref2.editorState;
-      editorState.read(function () {
+    var handleMouseDown = handleMouseDownFactory(function () {
+      $hideFloatingToolbar();
+    });
+    var handleMouseUp = handleMouseUpFactory(function () {
+      editor.update(function () {
         $updateTextFormatFloatingToolbar(editor);
       });
+    });
+    var rootElement = editor.getRootElement();
+    if (rootElement) {
+      rootElement.addEventListener('mousedown', handleMouseDown);
+      rootElement.addEventListener('mouseup', handleMouseUp);
+    }
+    return mergeRegister(editor.registerUpdateListener(function (_ref2) {
+      var editorState = _ref2.editorState;
+      // Only update when mouse is not pressed
+      if (!isMouseDownRef.current) {
+        editorState.read(function () {
+          $updateTextFormatFloatingToolbar(editor);
+        });
+      }
     }), editor.registerCommand(SELECTION_CHANGE_COMMAND, function () {
-      $updateTextFormatFloatingToolbar(editor);
+      // Only update when mouse is not pressed
+      if (!isMouseDownRef.current) {
+        $updateTextFormatFloatingToolbar(editor);
+      }
       return false;
-    }, COMMAND_PRIORITY_LOW));
+    }, COMMAND_PRIORITY_LOW), function () {
+      if (rootElement) {
+        rootElement.removeEventListener('mousedown', handleMouseDown);
+        rootElement.removeEventListener('mouseup', handleMouseUp);
+      }
+    });
   });
   return /*#__PURE__*/_jsx("div", {
     ref: anchorElemRef,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/editor",
-  "version": "1.26.0",
+  "version": "1.27.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",