@lobehub/editor 3.3.1 → 3.4.0

package/es/plugins/litexml/data-source/litexml-data-source.js

@@ -33,7 +33,7 @@ import { INodeHelper } from "../../../editor-kernel/inode/helper";
 import { INodeService } from "../../inode";
 import { createDebugLogger } from "../../../utils/debug";
 import { LitexmlService } from "../service/litexml-service";
-import { charToId, idToChar } from "../utils";
+import { $parseSerializedNodeImpl, charToId, idToChar } from "../utils";
 var logger = createDebugLogger('plugin', 'litexml');
 var IXmlWriterContext = /*#__PURE__*/function () {
   function IXmlWriterContext() {
@@ -97,7 +97,17 @@ var LitexmlDataSource = /*#__PURE__*/function (_DataSource) {
     value: function read(editor, data) {
       try {
         var inode = this.readLiteXMLToInode(data);
-        editor.setEditorState(editor.parseEditorState(inode));
+        var newState = editor.parseEditorState({
+          root: INodeHelper.createRootNode()
+        }, function (state) {
+          try {
+            var root = $parseSerializedNodeImpl(inode.root, editor, true, state);
+            state._nodeMap.set(root.getKey(), root);
+          } catch (error) {
+            console.error(error);
+          }
+        });
+        editor.setEditorState(newState);
       } catch (error) {
         logger.error('Failed to parse XML:', error);
         throw error;

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

@@ -14,6 +14,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 { KernelPlugin } from "../../../editor-kernel/plugin";
+import { IMarkdownShortCutService } from "../../markdown";
 import { registerLiteXMLCommand } from "../command";
 import { registerLiteXMLDiffCommand } from "../command/diffCommand";
 import LitexmlDataSource from "../data-source/litexml-data-source";
@@ -74,11 +75,12 @@ export var LitexmlPlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
       // Plugin initialization logic can be added here if needed
       this.register(registerLiteXMLCommand(editor, this.datasource));
       this.register(registerLiteXMLDiffCommand(editor));
-      this.regiserLiteXml();
+      this.registerLiteXml();
+      this.registerMarkdown();
     }
   }, {
-    key: "regiserLiteXml",
-    value: function regiserLiteXml() {
+    key: "registerLiteXml",
+    value: function registerLiteXml() {
       this.service.registerXMLWriter(DiffNode.getType(), function (node, ctx, indent, nodeToXML) {
         var diffNode = node;
         var lines = [];
@@ -114,6 +116,42 @@ export var LitexmlPlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
         };
       });
     }
+  }, {
+    key: "registerMarkdown",
+    value: function registerMarkdown() {
+      var markdownService = this.kernel.requireService(IMarkdownShortCutService);
+      markdownService === null || markdownService === void 0 || markdownService.registerMarkdownWriter(DiffNode.getType(), function (ctx, node) {
+        var diffNode = node;
+        switch (diffNode.diffType) {
+          case 'modify':
+            {
+              ctx.processChild(ctx, diffNode.getChildAtIndex(1));
+              break;
+            }
+          case 'add':
+            {
+              ctx.processChild(ctx, diffNode.getChildAtIndex(0));
+              break;
+            }
+          case 'remove':
+            {
+              break;
+            }
+          case 'listItemModify':
+            {
+              diffNode.getChildAtIndex(1).getChildren().forEach(function (child) {
+                ctx.processChild(ctx, child);
+              });
+              break;
+            }
+          default:
+            {
+              break;
+            }
+        }
+        return true;
+      });
+    }
   }]);
   return LitexmlPlugin;
 }(KernelPlugin), _defineProperty(_class, "pluginName", 'LitexmlPlugin'), _class);

package/es/plugins/litexml/utils/index.d.ts

@@ -1,5 +1,6 @@
+import type { EditorState } from 'lexical';
 import { LexicalEditor, LexicalNode } from 'lexical';
-export declare function $parseSerializedNodeImpl(serializedNode: any, editor: LexicalEditor): LexicalNode;
+export declare function $parseSerializedNodeImpl(serializedNode: any, editor: LexicalEditor, keepId?: boolean, state?: EditorState | null): LexicalNode;
 export declare function $cloneNode(node: LexicalNode, editor: LexicalEditor): LexicalNode;
 export declare function idToChar(id: string | number): string;
 export declare function charToId(char: string): string;

package/es/plugins/litexml/utils/index.js

@@ -3,6 +3,8 @@ 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; }
 import { $isElementNode } from 'lexical';
 export function $parseSerializedNodeImpl(serializedNode, editor) {
+  var keepId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var state = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
   var type = serializedNode.type;
   var registeredNode = editor._nodes.get(type);
   if (registeredNode === undefined) {
@@ -13,6 +15,10 @@ export function $parseSerializedNodeImpl(serializedNode, editor) {
     throw new Error("LexicalNode: Node ".concat(nodeClass.name, " does not implement .importJSON()."));
   }
   var node = nodeClass.importJSON(serializedNode);
+  if (keepId && serializedNode.id) {
+    node.__key = serializedNode.id;
+    state === null || state === void 0 || state._nodeMap.set(node.__key, node);
+  }
   var children = serializedNode.children;
   if ($isElementNode(node) && Array.isArray(children)) {
     var _iterator = _createForOfIteratorHelper(children),
@@ -20,7 +26,7 @@ export function $parseSerializedNodeImpl(serializedNode, editor) {
     try {
       for (_iterator.s(); !(_step = _iterator.n()).done;) {
         var serializedJSONChildNode = _step.value;
-        var childNode = $parseSerializedNodeImpl(serializedJSONChildNode, editor);
+        var childNode = $parseSerializedNodeImpl(serializedJSONChildNode, editor, keepId, state);
         node.append(childNode);
       }
     } catch (err) {

package/es/plugins/markdown/data-source/markdown-data-source.js

@@ -60,25 +60,6 @@ var MarkdownDataSource = /*#__PURE__*/function (_DataSource) {
     key: "write",
     value: function write(editor, options) {
       var _this2 = this;
-      var processChild = function processChild(parentCtx, child) {
-        var writer = _this2.markdownService.markdownWriters[child.getType()];
-        var currentCtx = parentCtx;
-        if ($isElementNode(child)) {
-          currentCtx = currentCtx.newChild();
-        }
-        var skipChildren = false;
-        if (writer) {
-          skipChildren = writer(currentCtx, child);
-        }
-        if (skipChildren) {
-          return;
-        }
-        if ($isElementNode(child)) {
-          child.getChildren().forEach(function (child) {
-            return processChild(currentCtx, child);
-          });
-        }
-      };
       if (options !== null && options !== void 0 && options.selection) {
         return editor.getEditorState().read(function () {
           var selection = $getSelection();
@@ -193,10 +174,10 @@ var MarkdownDataSource = /*#__PURE__*/function (_DataSource) {
               root: _rootNode
             });
             var _lexicalRootNode = _editorState._nodeMap.get('root');
-            var _rootCtx = new MarkdownWriterContext();
+            var _rootCtx = new MarkdownWriterContext(_this2.markdownService);
             return _editorState.read(function () {
               _lexicalRootNode.getChildren().forEach(function (child) {
-                return processChild(_rootCtx, child);
+                return _rootCtx.processChild(_rootCtx, child);
               });
               return _rootCtx.toString();
             });
@@ -221,10 +202,10 @@ var MarkdownDataSource = /*#__PURE__*/function (_DataSource) {
             root: rootNode
           });
           var lexicalRootNode = editorState._nodeMap.get('root');
-          var rootCtx = new MarkdownWriterContext();
+          var rootCtx = new MarkdownWriterContext(_this2.markdownService);
           return editorState.read(function () {
             lexicalRootNode.getChildren().forEach(function (child) {
-              return processChild(rootCtx, child);
+              return rootCtx.processChild(rootCtx, child);
             });
             return rootCtx.toString();
           });
@@ -232,9 +213,9 @@ var MarkdownDataSource = /*#__PURE__*/function (_DataSource) {
       }
       return editor.getEditorState().read(function () {
         var rootNode = $getRoot();
-        var rootCtx = new MarkdownWriterContext();
+        var rootCtx = new MarkdownWriterContext(_this2.markdownService);
         rootNode.getChildren().forEach(function (child) {
-          return processChild(rootCtx, child);
+          return rootCtx.processChild(rootCtx, child);
         });
         return rootCtx.toString();
       });

package/es/plugins/markdown/data-source/markdown-writer-context.d.ts

@@ -1,12 +1,16 @@
-import { IMarkdownWriterContext } from '../service/shortcut';
+import { LexicalNode } from 'lexical';
+import { IMarkdownWriterContext, MarkdownShortCutService } from '../service/shortcut';
 export declare class MarkdownWriterContext implements IMarkdownWriterContext {
     private before;
     private after;
     private children;
+    private markdownService;
     private processor?;
+    constructor(markdownService?: MarkdownShortCutService);
     appendLine(line: string): void;
     newChild(): MarkdownWriterContext;
     wrap(before: string, after: string): void;
     addProcessor(processor: (before: string, content: string, after: string) => string): void;
     toString(): string;
+    processChild(parentCtx: IMarkdownWriterContext, child: LexicalNode): void;
 }

package/es/plugins/markdown/data-source/markdown-writer-context.js

@@ -5,13 +5,16 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 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 { $isElementNode } from 'lexical';
 export var MarkdownWriterContext = /*#__PURE__*/function () {
-  function MarkdownWriterContext() {
+  function MarkdownWriterContext(markdownService) {
     _classCallCheck(this, MarkdownWriterContext);
     _defineProperty(this, "before", '');
     _defineProperty(this, "after", '');
     _defineProperty(this, "children", []);
+    _defineProperty(this, "markdownService", void 0);
     _defineProperty(this, "processor", void 0);
+    this.markdownService = markdownService;
   }
   _createClass(MarkdownWriterContext, [{
     key: "appendLine",
@@ -21,7 +24,7 @@ export var MarkdownWriterContext = /*#__PURE__*/function () {
   }, {
     key: "newChild",
     value: function newChild() {
-      var child = new MarkdownWriterContext();
+      var child = new MarkdownWriterContext(this.markdownService);
       this.children.push(child);
       return child;
     }
@@ -46,6 +49,28 @@ export var MarkdownWriterContext = /*#__PURE__*/function () {
         return child.toString();
       }).join(''), this.after) : content;
     }
+  }, {
+    key: "processChild",
+    value: function processChild(parentCtx, child) {
+      var _this = this;
+      var writer = this.markdownService.markdownWriters[child.getType()];
+      var currentCtx = parentCtx;
+      if ($isElementNode(child)) {
+        currentCtx = currentCtx.newChild();
+      }
+      var skipChildren = false;
+      if (writer) {
+        skipChildren = writer(currentCtx, child);
+      }
+      if (skipChildren) {
+        return;
+      }
+      if ($isElementNode(child)) {
+        child.getChildren().forEach(function (child) {
+          return _this.processChild(currentCtx, child);
+        });
+      }
+    }
   }]);
   return MarkdownWriterContext;
 }();

package/es/plugins/markdown/service/shortcut.d.ts

@@ -15,6 +15,13 @@ export interface IMarkdownWriterContext {
      * @returns
      */
     appendLine: (line: string) => void;
+    /**
+     * Control child node to markdown
+     * @param parentCtx
+     * @param child
+     * @returns
+     */
+    processChild: (parentCtx: IMarkdownWriterContext, child: LexicalNode) => void;
     /**
      * Wrap child elements
      * @param before

package/es/react/hooks/useEditorState/index.js

@@ -16,6 +16,7 @@ import { noop } from "../../../editor-kernel";
 import { INSERT_CODEINLINE_COMMAND } from "../../../plugins/code";
 import { $isSelectionInCodeInline } from "../../../plugins/code/node/code";
 import { UPDATE_CODEBLOCK_LANG } from "../../../plugins/codeblock";
+import { $createCodeMirrorNode, $isCodeMirrorNode } from "../../../plugins/codemirror-block/node/CodeMirrorNode";
 import { $isRootTextContentEmpty } from "../../../plugins/common/utils";
 import { INSERT_LINK_HIGHLIGHT_COMMAND } from "../../../plugins/link-highlight/command";
 import { $isLinkHighlightNode } from "../../../plugins/link-highlight/node/link-highlight";
@@ -137,9 +138,18 @@ export function useEditorState(editor) {
       var parent = node.getParent();
       // Check for both Link and LinkHighlight nodes
       setIsLink($isLinkNode(parent) || $isLinkNode(node) || $isLinkHighlightNode(parent) || $isLinkHighlightNode(node));
-      var isCodeBlock = $isCodeNode(element) && $isCodeNode(focusElement) && elementKey === focusElement.getKey();
+      // Support both CodeNode (from codeblock plugin) and CodeMirrorNode (from codemirror-block plugin)
+      var isLexicalCodeBlock = $isCodeNode(element) && $isCodeNode(focusElement) && elementKey === focusElement.getKey();
+      var isCodeMirrorBlock = $isCodeMirrorNode(element) && $isCodeMirrorNode(focusElement) && elementKey === focusElement.getKey();
+      var isCodeBlock = isLexicalCodeBlock || isCodeMirrorBlock;
       setIsInCodeblok(isCodeBlock);
-      setCodeblockLang(isCodeBlock ? element.getLanguage() : '');
+      if (isLexicalCodeBlock) {
+        setCodeblockLang(element.getLanguage());
+      } else if (isCodeMirrorBlock) {
+        setCodeblockLang(element.lang);
+      } else {
+        setCodeblockLang('');
+      }
       var _isBlockquote = $isQuoteNode(element) && $isQuoteNode(focusElement) && elementKey === focusElement.getKey();
       setIsInBlockquote(_isBlockquote);
       if (elementDOM !== null) {
@@ -222,21 +232,46 @@ export function useEditorState(editor) {
     if (blockType !== 'code') {
       var _editor$getLexicalEdi2;
       editor === null || editor === void 0 || (_editor$getLexicalEdi2 = editor.getLexicalEditor()) === null || _editor$getLexicalEdi2 === void 0 || _editor$getLexicalEdi2.update(function () {
+        var _lexicalEditor$_nodes;
         var selection = $getSelection();
         if (!selection) {
           return;
         }
-        if (!$isRangeSelection(selection) || selection.isCollapsed()) {
-          $setBlocksType(selection, function () {
-            return $createCodeNode();
-          });
+
+        // Try to use CodeMirrorNode if available, otherwise fall back to CodeNode
+        var lexicalEditor = editor === null || editor === void 0 ? void 0 : editor.getLexicalEditor();
+        var hasCodeMirrorNode = lexicalEditor ? lexicalEditor._nodes.has('code') && ((_lexicalEditor$_nodes = lexicalEditor._nodes.get('code')) === null || _lexicalEditor$_nodes === void 0 ? void 0 : _lexicalEditor$_nodes.klass.name) === 'CodeMirrorNode' : false;
+        if (hasCodeMirrorNode) {
+          // Use CodeMirrorNode
+          if (!$isRangeSelection(selection) || selection.isCollapsed()) {
+            var textContent = selection.getTextContent();
+            var codeMirrorNode = $createCodeMirrorNode('plain', textContent);
+            var nodeSelection = $createNodeSelection();
+            nodeSelection.add(codeMirrorNode.getKey());
+            selection.insertNodes([codeMirrorNode]);
+            $setSelection(nodeSelection);
+          } else {
+            var _textContent = selection.getTextContent();
+            var _codeMirrorNode = $createCodeMirrorNode('plain', _textContent);
+            selection.insertNodes([_codeMirrorNode]);
+            var _nodeSelection = $createNodeSelection();
+            _nodeSelection.add(_codeMirrorNode.getKey());
+            $setSelection(_nodeSelection);
+          }
         } else {
-          var textContent = selection.getTextContent();
-          var codeNode = $createCodeNode();
-          selection.insertNodes([codeNode]);
-          selection = $getSelection();
-          if ($isRangeSelection(selection)) {
-            selection.insertRawText(textContent);
+          // Use original CodeNode
+          if (!$isRangeSelection(selection) || selection.isCollapsed()) {
+            $setBlocksType(selection, function () {
+              return $createCodeNode();
+            });
+          } else {
+            var _textContent2 = selection.getTextContent();
+            var codeNode = $createCodeNode();
+            selection.insertNodes([codeNode]);
+            selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+              selection.insertRawText(_textContent2);
+            }
           }
         }
       });

package/es/types/kernel.d.ts

@@ -19,6 +19,10 @@ export type IServiceID<Service> = {
     __serviceType?: Service;
 };
 export interface IKernelEventMap {
+    /**
+     * Document change event
+     */
+    documentChange: (type: string, content: any) => void;
     /**
      * Editor editable state change event
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/editor",
-  "version": "3.3.1",
+  "version": "3.4.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",
@@ -25,6 +25,7 @@
   "types": "es/index.d.ts",
   "files": [
     "es",
+    "scripts/patch-lexical.js",
     "react.d.ts",
     "react.js"
   ],
@@ -70,5 +71,10 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
-  "packageManager": "pnpm@10.20.0"
+  "packageManager": "pnpm@10.20.0",
+  "pnpm": {
+    "overrides": {
+      "chalk": "^4.1.2"
+    }
+  }
 }

package/scripts/patch-lexical.js

@@ -0,0 +1,39 @@
+/* eslint-disable unicorn/no-process-exit */
+const fs = require('node:fs');
+const path = require('node:path');
+
+const sourceDir = path.resolve(__dirname, '../src/editor-kernel/lexical');
+const esSourceDir = path.resolve(__dirname, '../es/editor-kernel/lexical');
+const targetDir = path.resolve(__dirname, '../node_modules/lexical');
+
+if (!fs.existsSync(targetDir)) {
+  console.warn('node_modules/lexical not found, skipping patch.');
+  process.exit(0);
+}
+
+const realSourceDir = fs.existsSync(esSourceDir) ? esSourceDir : sourceDir;
+
+if (!fs.existsSync(realSourceDir)) {
+  console.warn('No source directory found for lexical patch.');
+  process.exit(0);
+}
+
+function copyToLexical(dir, target) {
+  const files = fs.readdirSync(dir);
+
+  files.forEach((file) => {
+    const sourceFile = path.join(dir, file);
+    const targetFile = path.join(target, file);
+    if (fs.statSync(sourceFile).isDirectory()) {
+      copyToLexical(sourceFile, targetFile);
+      return;
+    }
+
+    if (fs.existsSync(sourceFile)) {
+      fs.copyFileSync(sourceFile, targetFile);
+      console.log(`Overwrote ${file} in node_modules/lexical/`);
+    }
+  });
+}
+
+copyToLexical(realSourceDir, targetDir);