@lobehub/editor 1.32.0 → 1.33.0

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

@@ -1,8 +1,8 @@
 import { HistoryState } from '@lexical/history';
 import EventEmitter from 'eventemitter3';
-import { CommandListener, CommandListenerPriority, CommandPayloadType, DecoratorNode, LexicalCommand, LexicalEditor, LexicalNodeConfig } from 'lexical';
+import { CommandListener, CommandListenerPriority, CommandPayloadType, LexicalCommand, LexicalEditor, LexicalNodeConfig } from 'lexical';
 import { HotkeyId } from "../types/hotkey";
-import { IEditor, IEditorKernel, IEditorPluginConstructor, IPlugin, IServiceID } from "../types/kernel";
+import { IDecorator, IEditor, IEditorKernel, IEditorPluginConstructor, IPlugin, IServiceID } from "../types/kernel";
 import { ILocaleKeys } from "../types/locale";
 import { HotkeyOptions, HotkeysEvent } from "../utils/hotkey/registerHotkey";
 import DataSource from './data-source';
@@ -45,8 +45,8 @@ export declare class Kernel extends EventEmitter implements IEditorKernel {
     blur(): void;
     getDocument(type: string): DataSource | undefined;
     getSelectionDocument(type: string): unknown | null;
-    registerDecorator(name: string, decorator: (_node: DecoratorNode<any>, _editor: LexicalEditor) => any): this;
-    getDecorator(name: string): ((_node: DecoratorNode<any>, _editor: LexicalEditor) => any) | undefined;
+    registerDecorator(name: string, decorator: IDecorator): this;
+    getDecorator(name: string): IDecorator | undefined;
     /**
      * Unregister a decorator
      * @param name Decorator name

package/es/editor-kernel/kernel.js

@@ -29,7 +29,7 @@ import { createDebugLogger } from "../utils/debug";
 import { getHotkeyById, registerHotkey as _registerHotkey } from "../utils/hotkey/registerHotkey";
 import { registerEvent } from "./event";
 import { KernelPlugin } from "./plugin";
-import { createEmptyEditorState, noop } from "./utils";
+import { EDITOR_THEME_KEY, createEmptyEditorState, generateEditorId, noop, registerEditorKernel, unregisterEditorKernel } from "./utils";
 templateSettings.interpolate = /{{([\S\s]+?)}}/g;
 export var Kernel = /*#__PURE__*/function (_EventEmitter) {
   _inherits(Kernel, _EventEmitter);
@@ -43,7 +43,7 @@ export var Kernel = /*#__PURE__*/function (_EventEmitter) {
     _defineProperty(_assertThisInitialized(_this), "pluginsConfig", new Map());
     _defineProperty(_assertThisInitialized(_this), "pluginsInstances", []);
     _defineProperty(_assertThisInitialized(_this), "nodes", []);
-    _defineProperty(_assertThisInitialized(_this), "themes", {});
+    _defineProperty(_assertThisInitialized(_this), "themes", _defineProperty({}, EDITOR_THEME_KEY, generateEditorId()));
     // Used to store theme configuration
     _defineProperty(_assertThisInitialized(_this), "decorators", {});
     _defineProperty(_assertThisInitialized(_this), "serviceMap", new Map());
@@ -127,6 +127,7 @@ export var Kernel = /*#__PURE__*/function (_EventEmitter) {
     key: "destroy",
     value: function destroy() {
       var _this$editor2;
+      unregisterEditorKernel(this.themes[EDITOR_THEME_KEY]);
       this.logger.info("\uD83D\uDDD1\uFE0F Destroying editor with ".concat(this.pluginsInstances.length, " plugins"));
       (_this$editor2 = this.editor) === null || _this$editor2 === void 0 || _this$editor2.setEditorState(createEmptyEditorState());
       this.dataTypeMap.clear();
@@ -140,6 +141,8 @@ export var Kernel = /*#__PURE__*/function (_EventEmitter) {
       this.serviceMap.clear();
       // Clear decorators to prevent memory leaks
       this.decorators = {};
+      // Clear themes
+      this.themes = {};
       this.logger.info('✅ Editor destroyed');
     }
   }, {
@@ -178,6 +181,7 @@ export var Kernel = /*#__PURE__*/function (_EventEmitter) {
         }
       }
       this.logger.info("\uD83D\uDCDD Creating editor with ".concat(this.nodes.length, " nodes"));
+      registerEditorKernel(this.themes[EDITOR_THEME_KEY], this);
       var editor = this.editor = createEditor({
         // @ts-expect-error Inject into lexical editor instance
         __kernel: this,

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

@@ -0,0 +1,11 @@
+import { LexicalEditor, LexicalNode } from 'lexical';
+import React from 'react';
+export interface PortalContainerProps {
+    children: React.ReactNode;
+    className?: string;
+    editor: LexicalEditor;
+    node: LexicalNode;
+    style?: React.CSSProperties;
+}
+export declare const LexicalPortalContainer: React.ForwardRefExoticComponent<PortalContainerProps & React.RefAttributes<HTMLDivElement | null>>;
+export default LexicalPortalContainer;

package/es/editor-kernel/react/PortalContainer.js

@@ -0,0 +1,32 @@
+import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var LexicalPortalContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var editor = _ref.editor,
+    node = _ref.node,
+    children = _ref.children;
+  var divRef = useRef(null);
+  useImperativeHandle(ref, function () {
+    return divRef.current;
+  }, []);
+  useEffect(function () {
+    return function () {
+      if (divRef.current) {
+        // @ts-expect-error not error
+        delete divRef.current["__lexicalKey_".concat(editor._key)];
+      }
+    };
+  }, [editor, node]);
+  return /*#__PURE__*/_jsx("div", {
+    ref: function ref(dom) {
+      divRef.current = dom;
+      if (dom) {
+        var prop = "__lexicalKey_".concat(editor._key);
+        // @ts-expect-error not error
+        dom[prop] = node.getKey();
+      }
+    },
+    children: children
+  });
+});
+LexicalPortalContainer.displayName = 'LexicalPortalContainer';
+export default LexicalPortalContainer;

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

@@ -1,4 +1,5 @@
 export { LexicalErrorBoundary } from './LexicalErrorBoundary';
+export { LexicalPortalContainer } from './PortalContainer';
 export { useLexicalComposerContext } from './react-context';
 export { ReactEditor } from './react-editor';
 export { useLexicalEditor } from './useLexicalEditor';

package/es/editor-kernel/react/index.js

@@ -1,4 +1,5 @@
 export { LexicalErrorBoundary } from "./LexicalErrorBoundary";
+export { LexicalPortalContainer } from "./PortalContainer";
 export { useLexicalComposerContext } from "./react-context";
 export { ReactEditor } from "./react-editor";
 export { useLexicalEditor } from "./useLexicalEditor";

package/es/editor-kernel/react/useDecorators.js

@@ -59,6 +59,7 @@ export function useDecorators(editor, ErrorBoundary) {
     for (var _i = 0, _decoratorKeys = decoratorKeys; _i < _decoratorKeys.length; _i++) {
       var _editor$getLexicalEdi3;
       var nodeKey = _decoratorKeys[_i];
+      var decorator = decorators[nodeKey];
       var reactDecorator = /*#__PURE__*/_jsx(ErrorBoundary, {
         onError: function onError(e) {
           var _editor$getLexicalEdi2;
@@ -66,12 +67,12 @@ export function useDecorators(editor, ErrorBoundary) {
         },
         children: /*#__PURE__*/_jsx(Suspense, {
           fallback: null,
-          children: decorators[nodeKey]
+          children: 'render' in decorator ? decorator.render : decorator
         })
       });
       var element = (_editor$getLexicalEdi3 = editor.getLexicalEditor()) === null || _editor$getLexicalEdi3 === void 0 ? void 0 : _editor$getLexicalEdi3.getElementByKey(nodeKey);
       if (element !== null && element !== undefined) {
-        decoratedPortals.push( /*#__PURE__*/createPortal(reactDecorator, element, nodeKey));
+        decoratedPortals.push( /*#__PURE__*/createPortal(reactDecorator, 'queryDOM' in decorator ? decorator.queryDOM(element) : element, nodeKey));
       }
     }
     return decoratedPortals;

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

@@ -1,4 +1,4 @@
-import { ElementNode, LexicalEditor, LexicalNode, NodeKey } from 'lexical';
+import { EditorConfig, ElementNode, LexicalEditor, LexicalNode, NodeKey } from 'lexical';
 import type { IEditorKernel, IServiceID } from "../types";
 export declare const DOM_ELEMENT_TYPE = 1;
 export declare const DOM_TEXT_TYPE = 3;
@@ -23,6 +23,11 @@ export declare function isDocumentFragment(x: unknown): x is DocumentFragment;
 export declare function getParentElement(node: Node): HTMLElement | null;
 export declare function $getNearestNodeFromDOMNode(startingDOM: Node, editor: LexicalEditor, editorState?: ReturnType<LexicalEditor['getEditorState']>): LexicalNode | null;
 export declare function getKernelFromEditor(editor: LexicalEditor): IEditorKernel;
+export declare const EDITOR_THEME_KEY = "__editorId";
+export declare function generateEditorId(): string;
+export declare function registerEditorKernel(id: string, kernel: IEditorKernel): void;
+export declare function unregisterEditorKernel(id: string): void;
+export declare function getKernelFromEditorConfig(config: EditorConfig): IEditorKernel | null;
 /**
  *
  * @param nodeA
@@ -33,3 +38,4 @@ export declare function compareNodeOrder(nodeA: LexicalNode, nodeB: LexicalNode)
 export declare function $closest(node: LexicalNode | ElementNode | null, test: (node: LexicalNode) => boolean): LexicalNode | null;
 export declare function $closestNodeType(node: LexicalNode | ElementNode | null, type: string | string[]): LexicalNode | null;
 export declare function moment(): Promise<unknown>;
+export declare function reconcileDecorator(activeEditor: LexicalEditor, key: NodeKey, decorator: unknown): void;

package/es/editor-kernel/utils.js

@@ -69,6 +69,23 @@ export function getKernelFromEditor(editor) {
   // @ts-expect-error __kernel is injected into the lexical editor instance
   return ((_editor$_createEditor = editor._createEditorArgs) === null || _editor$_createEditor === void 0 ? void 0 : _editor$_createEditor.__kernel) || editor._kernel;
 }
+var EditorId = 0;
+export var EDITOR_THEME_KEY = '__editorId';
+export function generateEditorId() {
+  EditorId += 1;
+  return "editor-".concat(EditorId);
+}
+var EditorMap = new Map();
+export function registerEditorKernel(id, kernel) {
+  EditorMap.set(id, kernel);
+}
+export function unregisterEditorKernel(id) {
+  EditorMap.delete(id);
+}
+export function getKernelFromEditorConfig(config) {
+  var id = config.theme[EDITOR_THEME_KEY];
+  return EditorMap.get(id) || null;
+}
 
 /**
  *
@@ -130,4 +147,21 @@ export function moment() {
       return resolve(true);
     });
   });
+}
+function cloneDecorators(editor) {
+  var currentDecorators = editor._decorators;
+  var pendingDecorators = Object.assign({}, currentDecorators);
+  editor._pendingDecorators = pendingDecorators;
+  return pendingDecorators;
+}
+export function reconcileDecorator(activeEditor, key, decorator) {
+  var pendingDecorators = activeEditor._pendingDecorators;
+  var currentDecorators = activeEditor._decorators;
+  if (pendingDecorators === null) {
+    if (currentDecorators[key] === decorator) {
+      return;
+    }
+    pendingDecorators = cloneDecorators(activeEditor);
+  }
+  pendingDecorators[key] = decorator;
 }

package/es/plugins/file/node/FileNode.js

@@ -123,8 +123,18 @@ export var FileNode = /*#__PURE__*/function (_DecoratorNode) {
   }, {
     key: "decorate",
     value: function decorate(editor) {
-      var _getKernelFromEditor, _getKernelFromEditor$;
-      return ((_getKernelFromEditor = getKernelFromEditor(editor)) === null || _getKernelFromEditor === void 0 || (_getKernelFromEditor$ = _getKernelFromEditor.getDecorator('file')) === null || _getKernelFromEditor$ === void 0 ? void 0 : _getKernelFromEditor$(this, editor)) || null;
+      var _getKernelFromEditor;
+      var decorator = (_getKernelFromEditor = getKernelFromEditor(editor)) === null || _getKernelFromEditor === void 0 ? void 0 : _getKernelFromEditor.getDecorator('file');
+      if (!decorator) {
+        return null;
+      }
+      if (typeof decorator === 'function') {
+        return decorator(this, editor);
+      }
+      return {
+        queryDOM: decorator.queryDOM,
+        render: decorator.render(this, editor)
+      };
     }
   }], [{
     key: "getType",

package/es/plugins/hr/node/HorizontalRuleNode.js

@@ -54,8 +54,18 @@ export var HorizontalRuleNode = /*#__PURE__*/function (_DecoratorNode) {
   }, {
     key: "decorate",
     value: function decorate(editor) {
-      var _getKernelFromEditor, _getKernelFromEditor$;
-      return ((_getKernelFromEditor = getKernelFromEditor(editor)) === null || _getKernelFromEditor === void 0 || (_getKernelFromEditor$ = _getKernelFromEditor.getDecorator('horizontalrule')) === null || _getKernelFromEditor$ === void 0 ? void 0 : _getKernelFromEditor$(this, editor)) || null;
+      var _getKernelFromEditor;
+      var decorator = (_getKernelFromEditor = getKernelFromEditor(editor)) === null || _getKernelFromEditor === void 0 ? void 0 : _getKernelFromEditor.getDecorator('horizontalrule');
+      if (!decorator) {
+        return null;
+      }
+      if (typeof decorator === 'function') {
+        return decorator(this, editor);
+      }
+      return {
+        queryDOM: decorator.queryDOM,
+        render: decorator.render(this, editor)
+      };
     }
   }], [{
     key: "getType",

package/es/plugins/link/node/LinkNode.js

@@ -62,6 +62,7 @@ export var LinkNode = /*#__PURE__*/function (_ElementNode) {
     key: "createDOM",
     value: function createDOM(config, editor) {
       var _this2 = this;
+      console.info('config', config);
       var element = document.createElement('a');
       this.updateLinkDOM(null, element, config);
       addClassNamesToElement(element, config.theme.link);
@@ -356,6 +357,7 @@ export var AutoLinkNode = /*#__PURE__*/function (_LinkNode) {
   }, {
     key: "createDOM",
     value: function createDOM(config, editor) {
+      console.info('config', config);
       if (this.__isUnlinked) {
         return document.createElement('span');
       } else {

package/es/plugins/link-highlight/node/link-highlight.js

@@ -24,6 +24,7 @@ export var LinkHighlightNode = /*#__PURE__*/function (_ElementNode) {
   _createClass(LinkHighlightNode, [{
     key: "createDOM",
     value: function createDOM(config) {
+      console.info('config', config);
       var element = document.createElement('a');
 
       // Set link attributes

package/es/plugins/litexml/command/diffCommand.d.ts

@@ -0,0 +1,10 @@
+import { LexicalEditor } from 'lexical';
+export declare enum DiffAction {
+    Reject = 0,
+    Accept = 1
+}
+export declare const LITEXML_DIFFNODE_COMMAND: import("lexical").LexicalCommand<{
+    action: DiffAction;
+    nodeKey: string;
+}>;
+export declare function registerLiteXMLDiffCommand(editor: LexicalEditor): () => void;

package/es/plugins/litexml/command/diffCommand.js

@@ -0,0 +1,47 @@
+import { mergeRegister } from '@lexical/utils';
+import { $getNodeByKey, COMMAND_PRIORITY_EDITOR, createCommand } from 'lexical';
+export var DiffAction = /*#__PURE__*/function (DiffAction) {
+  DiffAction[DiffAction["Reject"] = 0] = "Reject";
+  DiffAction[DiffAction["Accept"] = 1] = "Accept";
+  return DiffAction;
+}({});
+export var LITEXML_DIFFNODE_COMMAND = createCommand('LITEXML_DIFFNODE_COMMAND');
+export function registerLiteXMLDiffCommand(editor) {
+  return mergeRegister(editor.registerCommand(LITEXML_DIFFNODE_COMMAND, function (payload) {
+    var action = payload.action,
+      nodeKey = payload.nodeKey;
+    var node = editor.read(function () {
+      return $getNodeByKey(nodeKey);
+    });
+    if (!node) {
+      return false;
+    }
+    editor.update(function () {
+      if (node.diffType === 'modify') {
+        var children = node.getChildren();
+        if (action === DiffAction.Accept) {
+          node.replace(children[1], false).selectEnd();
+        } else if (action === DiffAction.Reject) {
+          node.replace(children[0], false).selectEnd();
+        }
+      }
+      if (node.diffType === 'remove') {
+        if (action === DiffAction.Accept) {
+          node.remove();
+        } else if (action === DiffAction.Reject) {
+          var _children = node.getChildren();
+          node.replace(_children[0], false).selectEnd();
+        }
+      }
+      if (node.diffType === 'add') {
+        if (action === DiffAction.Accept) {
+          var _children2 = node.getChildren();
+          node.replace(_children2[0], false).selectEnd();
+        } else if (action === DiffAction.Reject) {
+          node.remove();
+        }
+      }
+    });
+    return false;
+  }, COMMAND_PRIORITY_EDITOR));
+}

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

@@ -1,16 +1,35 @@
 import { LexicalEditor } from 'lexical';
 import type LitexmlDataSource from '../data-source/litexml-data-source';
+export declare const LITEXML_MODIFY_COMMAND: import("lexical").LexicalCommand<({
+    action: 'insert';
+    beforeId: string;
+    litexml: string;
+} | {
+    action: 'insert';
+    afterId: string;
+    litexml: string;
+} | {
+    action: 'remove';
+    id: string;
+} | {
+    action: 'modify';
+    litexml: string | string[];
+})[]>;
 export declare const LITEXML_APPLY_COMMAND: import("lexical").LexicalCommand<{
+    delay?: boolean | undefined;
     litexml: string | string[];
 }>;
 export declare const LITEXML_REMOVE_COMMAND: import("lexical").LexicalCommand<{
+    delay?: boolean | undefined;
     id: string;
 }>;
 export declare const LITEXML_INSERT_COMMAND: import("lexical").LexicalCommand<{
     beforeId: string;
+    delay?: boolean | undefined;
     litexml: string;
 } | {
     afterId: string;
+    delay?: boolean | undefined;
     litexml: string;
 }>;
 export declare function registerLiteXMLCommand(editor: LexicalEditor, dataSource: LitexmlDataSource): () => void;