@lobehub/editor 1.34.2 → 1.34.4

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

@@ -4,5 +4,5 @@ import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
     token = _ref.token;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n\n    .toolbar {\n      position: absolute;\n      z-index: 10;\n      inset-block-start: -4px;\n      inset-inline-end: 0;\n      transform: translateY(-100%);\n\n      opacity: 0;\n    }\n\n    &:hover {\n      .toolbar {\n        opacity: 1;\n      }\n    }\n\n    &[data-diff-type='add'] .content {\n      position: relative;\n      padding-inline-start: 8px;\n      border-inline-start: 3px solid ", ";\n      background-color: ", ";\n    }\n\n    &[data-diff-type='remove'] .content {\n      position: relative;\n      padding-inline-start: 8px;\n      border-inline-start: 3px solid ", ";\n      background-color: ", ";\n    }\n\n    &[data-diff-type='modify'] .content {\n      position: relative;\n\n      /* first child: original (deleted) */\n      > *:first-child {\n        opacity: 0.6;\n      }\n\n      /* visually indicate deletion with strike-through for text nodes */\n      > *:first-child * {\n        color: ", " !important;\n        text-decoration: line-through !important;\n      }\n\n      /* second child: modified/new - normal appearance */\n      > *:nth-child(2) {\n        color: inherit;\n        opacity: 1;\n      }\n    }\n  "])), token.colorSuccess, token.colorSuccessBg, token.colorError, token.colorErrorBg, token.colorTextQuaternary);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n\n    .toolbar {\n      position: absolute;\n      z-index: 10;\n      inset-block-end: -4px;\n      inset-inline-end: 0;\n      transform: translateY(100%);\n\n      opacity: 0;\n    }\n\n    &:hover {\n      .toolbar {\n        opacity: 1;\n      }\n    }\n\n    &[data-diff-type='add'] .content {\n      position: relative;\n      margin-block: 4px;\n      padding-inline-end: 4px;\n      border-inline-end: 3px solid ", ";\n    }\n\n    &[data-diff-type='remove'] .content {\n      position: relative;\n      margin-block: 4px;\n      padding-inline-end: 4px;\n      border-inline-end: 3px solid ", ";\n\n      > *:first-child * {\n        color: ", " !important;\n        text-decoration: line-through !important;\n      }\n    }\n\n    &[data-diff-type='modify'] .content {\n      position: relative;\n      margin-block: 4px;\n      padding-inline-end: 4px;\n      border-inline-end: 3px solid ", ";\n\n      /* first child: original (deleted) */\n\n      /*  > *:first-child {}  */\n\n      /* visually indicate deletion with strike-through for text nodes */\n      > *:first-child * {\n        color: ", " !important;\n        text-decoration: line-through !important;\n      }\n\n      /* second child: modified/new - normal appearance */\n      > *:nth-child(2) {\n        color: inherit;\n        opacity: 1;\n      }\n    }\n  "])), token.colorSuccess, token.colorError, token.colorTextQuaternary, token.colorWarning, token.colorTextQuaternary);
 });

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

@@ -0,0 +1,8 @@
+import { LexicalCommand, LexicalEditor } from 'lexical';
+export declare const HIDE_TOOLBAR_COMMAND: LexicalCommand<void>;
+export declare const SHOW_TOOLBAR_COMMAND: LexicalCommand<void>;
+export interface ToolbarCommandOptions {
+    onHide?: () => void;
+    onShow?: () => void;
+}
+export declare function registerToolbarCommand(editor: LexicalEditor, options?: ToolbarCommandOptions): () => void;

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

@@ -0,0 +1,16 @@
+import { mergeRegister } from '@lexical/utils';
+import { COMMAND_PRIORITY_LOW, createCommand } from 'lexical';
+export var HIDE_TOOLBAR_COMMAND = createCommand();
+export var SHOW_TOOLBAR_COMMAND = createCommand();
+export function registerToolbarCommand(editor, options) {
+  var _ref = options || {},
+    onHide = _ref.onHide,
+    onShow = _ref.onShow;
+  return mergeRegister(editor.registerCommand(HIDE_TOOLBAR_COMMAND, function () {
+    onHide === null || onHide === void 0 || onHide();
+    return true;
+  }, COMMAND_PRIORITY_LOW), editor.registerCommand(SHOW_TOOLBAR_COMMAND, function () {
+    onShow === null || onShow === void 0 || onShow();
+    return true;
+  }, COMMAND_PRIORITY_LOW));
+}

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

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

package/es/plugins/toolbar/index.js

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

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

@@ -6,10 +6,11 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { mergeRegister } from '@lexical/utils';
 import { Block } from '@lobehub/ui';
-import { $getSelection, BLUR_COMMAND, COMMAND_PRIORITY_LOW, SELECTION_CHANGE_COMMAND, getDOMSelection } from 'lexical';
+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 { HIDE_TOOLBAR_COMMAND, registerToolbarCommand } from "../command";
 import { getDOMRangeRect } from "../utils/getDOMRangeRect";
 import { setFloatingElemPosition } from "../utils/setFloatingElemPosition";
 import { useStyles } from "./style";
@@ -87,7 +88,7 @@ export var ReactToolbarPlugin = function ReactToolbarPlugin(_ref) {
   }, []);
   useLexicalEditor(function (editor) {
     var handleMouseDown = handleMouseDownFactory(function () {
-      $hideFloatingToolbar();
+      editor.dispatchCommand(HIDE_TOOLBAR_COMMAND, undefined);
     });
     var handleMouseUp = handleMouseUpFactory(function () {
       editor.update(function () {
@@ -99,7 +100,9 @@ export var ReactToolbarPlugin = function ReactToolbarPlugin(_ref) {
       rootElement.addEventListener('mousedown', handleMouseDown);
       rootElement.addEventListener('mouseup', handleMouseUp);
     }
-    return mergeRegister(editor.registerUpdateListener(function (_ref2) {
+    return mergeRegister(registerToolbarCommand(editor, {
+      onHide: $hideFloatingToolbar
+    }), editor.registerUpdateListener(function (_ref2) {
       var editorState = _ref2.editorState;
       // Only update when mouse is not pressed
       if (!isMouseDownRef.current) {
@@ -113,9 +116,6 @@ export var ReactToolbarPlugin = function ReactToolbarPlugin(_ref) {
         $updateTextFormatFloatingToolbar(editor);
       }
       return false;
-    }, COMMAND_PRIORITY_LOW), editor.registerCommand(BLUR_COMMAND, function () {
-      $hideFloatingToolbar();
-      return false;
     }, COMMAND_PRIORITY_LOW), function () {
       if (rootElement) {
         rootElement.removeEventListener('mousedown', handleMouseDown);

package/package.json

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