@lobehub/editor 1.21.3 → 1.22.1

package/es/editor-kernel/kernel.d.ts

@@ -1,3 +1,4 @@
+import { HistoryState } from '@lexical/history';
 import EventEmitter from 'eventemitter3';
 import { CommandListener, CommandListenerPriority, CommandPayloadType, DecoratorNode, LexicalCommand, LexicalEditor, LexicalNodeConfig } from 'lexical';
 import { HotkeyId } from "../types/hotkey";
@@ -17,8 +18,10 @@ export declare class Kernel extends EventEmitter implements IEditorKernel {
     private localeMap;
     private hotReloadMode;
     private logger;
+    private historyState;
     private editor?;
     constructor();
+    getHistoryState(): HistoryState;
     private detectDevelopmentMode;
     /**
      * Globally enable or disable hot reload mode for all kernel instances

package/es/editor-kernel/kernel.js

@@ -19,6 +19,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 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 { createEmptyHistoryState } from '@lexical/history';
 import EventEmitter from 'eventemitter3';
 import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_CRITICAL, KEY_DOWN_COMMAND, createEditor } from 'lexical';
 import { get, merge, template, templateSettings } from 'lodash-es';
@@ -48,6 +49,7 @@ export var Kernel = /*#__PURE__*/function (_EventEmitter) {
     _defineProperty(_assertThisInitialized(_this), "localeMap", defaultLocale);
     _defineProperty(_assertThisInitialized(_this), "hotReloadMode", false);
     _defineProperty(_assertThisInitialized(_this), "logger", createDebugLogger('kernel'));
+    _defineProperty(_assertThisInitialized(_this), "historyState", createEmptyHistoryState());
     _defineProperty(_assertThisInitialized(_this), "editor", void 0);
     _defineProperty(_assertThisInitialized(_this), "_commands", new Map());
     _defineProperty(_assertThisInitialized(_this), "_commandsClean", new Map());
@@ -58,6 +60,11 @@ export var Kernel = /*#__PURE__*/function (_EventEmitter) {
     return _this;
   }
   _createClass(Kernel, [{
+    key: "getHistoryState",
+    value: function getHistoryState() {
+      return this.historyState;
+    }
+  }, {
     key: "detectDevelopmentMode",
     value: function detectDevelopmentMode() {
       var _process$env;

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

@@ -22,7 +22,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 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 { registerDragonSupport } from '@lexical/dragon';
-import { createEmptyHistoryState, registerHistory } from '@lexical/history';
+import { registerHistory } from '@lexical/history';
 import { $createHeadingNode, $createQuoteNode, $isHeadingNode, $isQuoteNode, HeadingNode, QuoteNode, registerRichText } from '@lexical/rich-text';
 import { $createLineBreakNode, $createParagraphNode, $getSelection, $isRangeSelection, $isTextNode, COMMAND_PRIORITY_HIGH, INSERT_LINE_BREAK_COMMAND, INSERT_PARAGRAPH_COMMAND } from 'lexical';
 import { KernelPlugin } from "../../../editor-kernel/plugin";
@@ -322,7 +322,7 @@ export var CommonPlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
     key: "onInit",
     value: function onInit(editor) {
       var _this$config2;
-      this.registerClears(registerRichText(editor), registerDragonSupport(editor), registerHistory(editor, createEmptyHistoryState(), 300), registerHeaderBackspace(editor), registerRichKeydown(editor, this.kernel, {
+      this.registerClears(registerRichText(editor), registerDragonSupport(editor), registerHistory(editor, this.kernel.getHistoryState(), 300), registerHeaderBackspace(editor), registerRichKeydown(editor, this.kernel, {
         enableHotkey: (_this$config2 = this.config) === null || _this$config2 === void 0 ? void 0 : _this$config2.enableHotkey
       }), registerCommands(editor), registerBreakLineClick(editor), registerCursorNode(editor), registerLastElement(editor),
       // Convert soft line breaks (Shift+Enter) to hard line breaks (paragraph breaks)

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

@@ -47,7 +47,8 @@ var ReactPlainText = /*#__PURE__*/memo(function (_ref) {
     onPressEnter = _ref.onPressEnter,
     onCompositionStart = _ref.onCompositionStart,
     onCompositionEnd = _ref.onCompositionEnd,
-    onContextMenu = _ref.onContextMenu;
+    onContextMenu = _ref.onContextMenu,
+    onTextChange = _ref.onTextChange;
   var isChat = variant === 'chat';
   var _theme$fontSize = theme.fontSize,
     fontSize = _theme$fontSize === void 0 ? isChat ? 14 : 16 : _theme$fontSize,
@@ -103,10 +104,29 @@ var ReactPlainText = /*#__PURE__*/memo(function (_ref) {
       editor.setDocument(type, content);
       setIsInitialized(true);
     }
-    return (_editor$getLexicalEdi = editor.getLexicalEditor()) === null || _editor$getLexicalEdi === void 0 ? void 0 : _editor$getLexicalEdi.registerUpdateListener(function () {
+
+    // Track previous content for onTextChange comparison
+    var previousContent;
+    return (_editor$getLexicalEdi = editor.getLexicalEditor()) === null || _editor$getLexicalEdi === void 0 ? void 0 : _editor$getLexicalEdi.registerUpdateListener(function (_ref2) {
+      var dirtyElements = _ref2.dirtyElements,
+        dirtyLeaves = _ref2.dirtyLeaves;
+      // Always trigger onChange for any update
       onChange === null || onChange === void 0 || onChange(editor);
+
+      // Only trigger onTextChange when content actually changes
+      if (onTextChange && (dirtyElements.size > 0 || dirtyLeaves.size > 0)) {
+        var currentContent = JSON.stringify(editor.getDocument(type));
+        if (previousContent === undefined) {
+          // First update after initialization
+          previousContent = currentContent;
+        } else if (currentContent !== previousContent) {
+          // Content has actually changed
+          previousContent = currentContent;
+          onTextChange(editor);
+        }
+      }
     });
-  }, [editor, type, content, onChange, isInitialized]);
+  }, [editor, type, content, onChange, onTextChange, isInitialized]);
   useEffect(function () {
     if (editor && onPressEnter) {
       return editor.registerHighCommand(KEY_DOWN_COMMAND, function (event) {

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

@@ -50,6 +50,11 @@ export interface ReactPlainTextProps {
         editor: IEditor;
         event: KeyboardEvent;
     }) => boolean | void;
+    /**
+     * Callback triggered only when text content changes
+     * Unlike onChange, this won't trigger on cursor movement or selection changes
+     */
+    onTextChange?: (editor: IEditor) => void;
     style?: CSSProperties;
     theme?: CommonPluginOptions['theme'] & {
         fontSize?: number;

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

@@ -1,6 +1,8 @@
+import { HistoryState, HistoryStateEntry } from '@lexical/history';
 import { LexicalEditor } from 'lexical';
 import { MarkdownShortCutService } from '../service/shortcut';
 export declare const INSERT_MARKDOWN_COMMAND: import("lexical").LexicalCommand<{
+    historyState: HistoryStateEntry | null;
     markdown: string;
 }>;
-export declare function registerMarkdownCommand(editor: LexicalEditor, service: MarkdownShortCutService): () => void;
+export declare function registerMarkdownCommand(editor: LexicalEditor, service: MarkdownShortCutService, history: HistoryState): () => void;

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

@@ -1,25 +1,43 @@
-import { $getSelection, COMMAND_PRIORITY_HIGH, createCommand } from 'lexical';
+import { $getSelection, CAN_UNDO_COMMAND, COMMAND_PRIORITY_HIGH, HISTORIC_TAG, createCommand } from 'lexical';
 import { createDebugLogger } from "../../../utils/debug";
 import { parseMarkdownToLexical } from "../data-source/markdown/parse";
 import { $generateNodesFromSerializedNodes, $insertGeneratedNodes } from "../utils";
 var logger = createDebugLogger('plugin', 'markdown');
 export var INSERT_MARKDOWN_COMMAND = createCommand('INSERT_MARKDOWN_COMMAND');
-export function registerMarkdownCommand(editor, service) {
+function undoToEntry(editor, historyState, entry) {
+  var undoStack = historyState.undoStack;
+  var current = historyState.current;
+  if (current) {
+    undoStack.push(current);
+    editor.dispatchCommand(CAN_UNDO_COMMAND, false);
+  }
+  historyState.current = entry || null;
+  if (entry) {
+    editor.setEditorState(entry.editorState, {
+      tag: HISTORIC_TAG
+    });
+  }
+  return editor.getEditorState();
+}
+export function registerMarkdownCommand(editor, service, history) {
   return editor.registerCommand(INSERT_MARKDOWN_COMMAND, function (payload) {
     var markdown = payload.markdown;
     logger.debug('INSERT_MARKDOWN_COMMAND payload:', payload);
-    editor.update(function () {
-      try {
-        // Use the markdown data source to parse the content
-        var root = parseMarkdownToLexical(markdown, service.markdownReaders);
-        var selection = $getSelection();
-        var nodes = $generateNodesFromSerializedNodes(root.children);
-        logger.debug('INSERT_MARKDOWN_COMMAND nodes:', nodes);
-        $insertGeneratedNodes(editor, nodes, selection);
-        return true;
-      } catch (error) {
-        logger.error('Failed to handle markdown paste:', error);
-      }
+    undoToEntry(editor, history, payload.historyState);
+    queueMicrotask(function () {
+      editor.update(function () {
+        try {
+          // Use the markdown data source to parse the content
+          var root = parseMarkdownToLexical(markdown, service.markdownReaders);
+          var selection = $getSelection();
+          var nodes = $generateNodesFromSerializedNodes(root.children);
+          logger.debug('INSERT_MARKDOWN_COMMAND nodes:', nodes);
+          $insertGeneratedNodes(editor, nodes, selection);
+          return true;
+        } catch (error) {
+          logger.error('Failed to handle markdown paste:', error);
+        }
+      });
     });
     return false;
   }, COMMAND_PRIORITY_HIGH // Priority

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

@@ -144,9 +144,11 @@ export var MarkdownPlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
         if (hasMarkdownContent) {
           // Markdown detected - show confirmation dialog
           _this2.logger.debug('markdown patterns detected:', _this2.getMarkdownPatterns(text));
+          var historyState = _this2.kernel.getHistoryState().current;
           setTimeout(function () {
             _this2.kernel.emit('markdownParse', {
               cacheState: editor.getEditorState(),
+              historyState: historyState,
               markdown: text
             });
           }, 10);
@@ -156,7 +158,7 @@ export var MarkdownPlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
         }
         return false;
       }, COMMAND_PRIORITY_CRITICAL));
-      this.register(registerMarkdownCommand(editor, this.service));
+      this.register(registerMarkdownCommand(editor, this.service, this.kernel.getHistoryState()));
     }
 
     /**

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

@@ -8,7 +8,6 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { Button } from '@lobehub/ui';
 import { Space, notification } from 'antd';
-import { UNDO_COMMAND } from 'lexical';
 import { useLayoutEffect } from 'react';
 import { useLexicalComposerContext } from "../../../editor-kernel/react";
 import { useTranslation } from "../../../editor-kernel/react/useTranslation";
@@ -28,7 +27,8 @@ var ReactMarkdownPlugin = function ReactMarkdownPlugin() {
   useLayoutEffect(function () {
     editor.registerPlugin(MarkdownPlugin);
     var handleEvent = function handleEvent(_ref) {
-      var markdown = _ref.markdown;
+      var markdown = _ref.markdown,
+        historyState = _ref.historyState;
       var key = "open".concat(Date.now());
       var actions = /*#__PURE__*/_jsxs(Space, {
         children: [/*#__PURE__*/_jsx(Button, {
@@ -39,8 +39,8 @@ var ReactMarkdownPlugin = function ReactMarkdownPlugin() {
           children: t('markdown.cancel')
         }), /*#__PURE__*/_jsx(Button, {
           onClick: function onClick() {
-            editor.dispatchCommand(UNDO_COMMAND, undefined);
             editor.dispatchCommand(INSERT_MARKDOWN_COMMAND, {
+              historyState: historyState,
               markdown: markdown
             });
             api.destroy();

package/es/react/Editor/Editor.js

@@ -53,7 +53,8 @@ var Editor = /*#__PURE__*/memo(function (_ref) {
     markdownOption = _ref$markdownOption === void 0 ? true : _ref$markdownOption,
     onCompositionStart = _ref.onCompositionStart,
     onCompositionEnd = _ref.onCompositionEnd,
-    onContextMenu = _ref.onContextMenu;
+    onContextMenu = _ref.onContextMenu,
+    onTextChange = _ref.onTextChange;
   var _useEditorContent = useEditorContent(),
     config = _useEditorContent.config;
   var enableSlash = Boolean((slashOption === null || slashOption === void 0 ? void 0 : slashOption.items) && slashOption.items.length > 0);
@@ -107,6 +108,7 @@ var Editor = /*#__PURE__*/memo(function (_ref) {
       onFocus: onFocus,
       onKeyDown: onKeyDown,
       onPressEnter: onPressEnter,
+      onTextChange: onTextChange,
       style: style,
       variant: variant,
       children: /*#__PURE__*/_jsx(ReactEditorContent, {

package/es/react/Editor/type.d.ts

@@ -29,6 +29,11 @@ export interface EditorProps extends Partial<ReactEditorContentProps>, Omit<Reac
     };
     mentionOption?: MentionOption;
     onInit?: (editor: IEditor) => void;
+    /**
+     * Callback triggered only when text content changes
+     * Unlike onChange, this won't trigger on cursor movement or selection changes
+     */
+    onTextChange?: (editor: IEditor) => void;
     plugins?: EditorPlugin[];
     slashOption?: Partial<ReactSlashOptionProps>;
     style?: CSSProperties;

package/es/types/kernel.d.ts

@@ -1,8 +1,9 @@
+import type { HistoryState, HistoryStateEntry } from '@lexical/history';
 import type { CommandListener, CommandListenerPriority, CommandPayloadType, DecoratorNode, EditorState, LexicalCommand, LexicalEditor, LexicalNodeConfig } from 'lexical';
 import type DataSource from "../editor-kernel/data-source";
-import { HotkeyId } from "./hotkey";
-import { HotkeyOptions, HotkeysEvent } from "../utils/hotkey/registerHotkey";
-import { ILocaleKeys } from './locale';
+import type { HotkeyId } from "./hotkey";
+import type { HotkeyOptions, HotkeysEvent } from "../utils/hotkey/registerHotkey";
+import type { ILocaleKeys } from './locale';
 export type Commands = Map<LexicalCommand<unknown>, Array<Set<CommandListener<unknown>>>>;
 export type CommandsClean = Map<LexicalCommand<unknown>, () => void>;
 /**
@@ -28,6 +29,7 @@ export interface IKernelEventMap {
      */
     markdownParse: (params: {
         cacheState: EditorState;
+        historyState: HistoryStateEntry | null;
         markdown: string;
     }) => void;
 }
@@ -188,6 +190,10 @@ export interface IEditorKernel extends IEditor {
      * @param name
      */
     getDecorator(name: string): ((_node: DecoratorNode<any>, _editor: LexicalEditor) => any) | undefined;
+    /**
+     * Get editor history state
+     */
+    getHistoryState(): HistoryState;
     /**
      * Get all registered decorator names
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/editor",
-  "version": "1.21.3",
+  "version": "1.22.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",
@@ -27,38 +27,38 @@
     "react.js"
   ],
   "dependencies": {
-    "@floating-ui/dom": "^1.7.3",
-    "@floating-ui/react": "^0.27.15",
-    "@lexical/code": "^0.34.0",
-    "@lexical/code-shiki": "^0.34.0",
-    "@lexical/dragon": "^0.34.0",
-    "@lexical/history": "^0.34.0",
-    "@lexical/link": "^0.34.0",
-    "@lexical/list": "^0.34.0",
-    "@lexical/rich-text": "^0.34.0",
-    "@lexical/selection": "^0.34.0",
-    "@lexical/table": "^0.34.0",
-    "@lexical/utils": "^0.34.0",
-    "@shikijs/core": "^3.9.2",
-    "@shikijs/engine-javascript": "^3.9.2",
-    "ahooks": "^3.9.3",
+    "@floating-ui/dom": "^1.7.4",
+    "@floating-ui/react": "^0.27.16",
+    "@lexical/code": "^0.38.2",
+    "@lexical/code-shiki": "^0.38.2",
+    "@lexical/dragon": "^0.38.2",
+    "@lexical/history": "^0.38.2",
+    "@lexical/link": "^0.38.2",
+    "@lexical/list": "^0.38.2",
+    "@lexical/rich-text": "^0.38.2",
+    "@lexical/selection": "^0.38.2",
+    "@lexical/table": "^0.38.2",
+    "@lexical/utils": "^0.38.2",
+    "@shikijs/core": "^3.15.0",
+    "@shikijs/engine-javascript": "^3.15.0",
+    "ahooks": "^3.9.6",
     "antd-style": "^3.7.1",
-    "debug": "^4.4.1",
+    "debug": "^4.4.3",
     "eventemitter3": "^5.0.1",
-    "framer-motion": "^12.23.12",
+    "framer-motion": "^12.23.24",
     "fuse.js": "^7.1.0",
-    "katex": "^0.16.22",
-    "lexical": "^0.34.0",
+    "katex": "^0.16.25",
+    "lexical": "^0.38.2",
     "lodash-es": "^4.17.21",
-    "lucide-react": "^0.536.0",
+    "lucide-react": "^0.553.0",
     "polished": "^4.3.1",
     "re-resizable": "^6.11.2",
     "react-error-boundary": "^6.0.0",
     "react-layout-kit": "^2.0.0",
     "react-merge-refs": "^3.0.2",
-    "remark-cjk-friendly": "^1.2.1",
+    "remark-cjk-friendly": "^1.2.3",
     "remark-supersub": "^1.0.0",
-    "shiki": "^3.9.2",
+    "shiki": "^3.15.0",
     "ts-key-enum": "^3.0.13",
     "use-merge-value": "^1.2.0"
   },