@lobehub/editor 1.22.1 → 1.23.0

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

@@ -36,6 +36,7 @@ export declare class Kernel extends EventEmitter implements IEditorKernel {
     destroy(): void;
     getRootElement(): HTMLElement | null;
     setRootElement(dom: HTMLElement): LexicalEditor;
+    initNodeEditor(): LexicalEditor;
     setDocument(type: string, content: any): void;
     focus(): void;
     blur(): void;

package/es/editor-kernel/kernel.js

@@ -191,6 +191,50 @@ export var Kernel = /*#__PURE__*/function (_EventEmitter) {
       this.emit('initialized', editor);
       return this.editor;
     }
+  }, {
+    key: "initNodeEditor",
+    value: function initNodeEditor() {
+      var _this3 = this;
+      if (this.editor) {
+        return this.editor;
+      }
+      // Initialize plugins if not already done
+      if (this.pluginsInstances.length === 0) {
+        this.logger.info("\uD83D\uDD0C Initializing ".concat(this.plugins.length, " plugins"));
+        var _iterator2 = _createForOfIteratorHelper(this.plugins),
+          _step2;
+        try {
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            var plugin = _step2.value;
+            var instance = new plugin(this, plugin.__config);
+            this.pluginsInstances.push(instance);
+          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
+        }
+      }
+      this.logger.info("\uD83D\uDCDD Creating editor with ".concat(this.nodes.length, " nodes"));
+      var editor = this.editor = createEditor({
+        // @ts-expect-error Inject into lexical editor instance
+        __kernel: this,
+        namespace: 'lobehub',
+        nodes: this.nodes,
+        onError: function onError(error) {
+          _this3.logger.error('❌ Lexical editor error:', error);
+          _this3.emit('error', error);
+        },
+        theme: this.themes
+      });
+      this.pluginsInstances.forEach(function (plugin) {
+        var _plugin$onInit2;
+        (_plugin$onInit2 = plugin.onInit) === null || _plugin$onInit2 === void 0 || _plugin$onInit2.call(plugin, editor);
+      });
+      this.logger.info("\u2705 Editor ready with ".concat(this.pluginsInstances.length, " plugins"));
+      this.emit('initialized', editor);
+      return editor || null;
+    }
   }, {
     key: "setDocument",
     value: function setDocument(type, content) {
@@ -346,18 +390,18 @@ export var Kernel = /*#__PURE__*/function (_EventEmitter) {
                 // Clean up decorators registered by the old plugin instance
                 if (oldInstance instanceof KernelPlugin) {
                   var decoratorNames = oldInstance.getRegisteredDecorators();
-                  var _iterator2 = _createForOfIteratorHelper(decoratorNames),
-                    _step2;
+                  var _iterator3 = _createForOfIteratorHelper(decoratorNames),
+                    _step3;
                   try {
-                    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-                      var decoratorName = _step2.value;
+                    for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+                      var decoratorName = _step3.value;
                       this.unregisterDecorator(decoratorName);
                       this.logger.debug("\uD83E\uDDE8 Cleanup: decorator \"".concat(decoratorName, "\""));
                     }
                   } catch (err) {
-                    _iterator2.e(err);
+                    _iterator3.e(err);
                   } finally {
-                    _iterator2.f();
+                    _iterator3.f();
                   }
                 }
                 if (oldInstance.destroy) {
@@ -388,11 +432,11 @@ export var Kernel = /*#__PURE__*/function (_EventEmitter) {
   }, {
     key: "registerPlugins",
     value: function registerPlugins(plugins) {
-      var _iterator3 = _createForOfIteratorHelper(plugins),
-        _step3;
+      var _iterator4 = _createForOfIteratorHelper(plugins),
+        _step4;
       try {
-        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-          var plugin = _step3.value;
+        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+          var plugin = _step4.value;
           if (Array.isArray(plugin)) {
             this.registerPlugin(plugin[0], plugin[1]);
           } else {
@@ -400,9 +444,9 @@ export var Kernel = /*#__PURE__*/function (_EventEmitter) {
           }
         }
       } catch (err) {
-        _iterator3.e(err);
+        _iterator4.e(err);
       } finally {
-        _iterator3.f();
+        _iterator4.f();
       }
       this.logger.debug("\uD83D\uDD0C Registered ".concat(plugins.length, " plugins"));
       return this;
@@ -539,12 +583,12 @@ export var Kernel = /*#__PURE__*/function (_EventEmitter) {
   }, {
     key: "isEmpty",
     get: function get() {
-      var _this3 = this;
+      var _this4 = this;
       if (!this.editor) {
         return true;
       }
       return this.editor.getEditorState().read(function () {
-        return $isRootTextContentEmpty(_this3.editor.isComposing(), true);
+        return $isRootTextContentEmpty(_this4.editor.isComposing(), true);
       });
     }
   }, {
@@ -587,7 +631,7 @@ export var Kernel = /*#__PURE__*/function (_EventEmitter) {
   }, {
     key: "registerHighCommand",
     value: function registerHighCommand(command, listener, priority) {
-      var _this4 = this;
+      var _this5 = this;
       var lexicalEditor = this.editor;
       if (!lexicalEditor) {
         throw new Error('Editor is not initialized.');
@@ -598,22 +642,22 @@ export var Kernel = /*#__PURE__*/function (_EventEmitter) {
         commandsMap.set(command, [new Set(), new Set(), new Set(), new Set(), new Set()]);
         this._commandsClean.set(command, lexicalEditor.registerCommand(command, function (payload) {
           for (var i = 4; i >= 0; i--) {
-            var listenerInPriorityOrder = _this4._commands.get(command);
+            var listenerInPriorityOrder = _this5._commands.get(command);
             if (listenerInPriorityOrder !== undefined) {
               var listenersSet = listenerInPriorityOrder[i];
-              var _iterator4 = _createForOfIteratorHelper(listenersSet),
-                _step4;
+              var _iterator5 = _createForOfIteratorHelper(listenersSet),
+                _step5;
               try {
-                for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-                  var _listener = _step4.value;
+                for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+                  var _listener = _step5.value;
                   if (_listener(payload, lexicalEditor)) {
                     return true;
                   }
                 }
               } catch (err) {
-                _iterator4.e(err);
+                _iterator5.e(err);
               } finally {
-                _iterator4.f();
+                _iterator5.f();
               }
             }
           }
@@ -635,9 +679,9 @@ export var Kernel = /*#__PURE__*/function (_EventEmitter) {
         if (listenersInPriorityOrder.every(function (listenersSet) {
           return listenersSet.size === 0;
         })) {
-          var _this4$_commandsClean;
+          var _this5$_commandsClean;
           commandsMap.delete(command);
-          (_this4$_commandsClean = _this4._commandsClean.get(command)) === null || _this4$_commandsClean === void 0 || _this4$_commandsClean();
+          (_this5$_commandsClean = _this5._commandsClean.get(command)) === null || _this5$_commandsClean === void 0 || _this5$_commandsClean();
         }
       };
     }

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

@@ -24,6 +24,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import { registerDragonSupport } from '@lexical/dragon';
 import { registerHistory } from '@lexical/history';
 import { $createHeadingNode, $createQuoteNode, $isHeadingNode, $isQuoteNode, HeadingNode, QuoteNode, registerRichText } from '@lexical/rich-text';
+import { CAN_USE_DOM } from '@lexical/utils';
 import { $createLineBreakNode, $createParagraphNode, $getSelection, $isRangeSelection, $isTextNode, COMMAND_PRIORITY_HIGH, INSERT_LINE_BREAK_COMMAND, INSERT_PARAGRAPH_COMMAND } from 'lexical';
 import { KernelPlugin } from "../../../editor-kernel/plugin";
 import { IMarkdownShortCutService } from "../../markdown/service/shortcut";
@@ -322,7 +323,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, this.kernel.getHistoryState(), 300), registerHeaderBackspace(editor), registerRichKeydown(editor, this.kernel, {
+      this.registerClears(registerRichText(editor), CAN_USE_DOM ? registerDragonSupport(editor) : function () {}, 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/Placeholder/index.d.ts

@@ -1,6 +1,7 @@
 import { type CSSProperties, type ReactNode } from 'react';
 export interface PlaceholderProps {
     children: ReactNode;
+    lineEmptyPlaceholder?: string;
     style?: CSSProperties;
 }
 declare const Placeholder: import("react").NamedExoticComponent<PlaceholderProps>;

package/es/plugins/common/react/Placeholder/index.js

@@ -5,7 +5,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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; }
 import { mergeRegister } from '@lexical/utils';
-import { memo, useState } from 'react';
+import { $getNodeByKey, $getSelection, $isBlockElementNode, $isRangeSelection } from 'lexical';
+import { memo, useRef, useState } from 'react';
 import { useLexicalEditor } from "../../../../editor-kernel/react";
 import { $canShowPlaceholderCurry } from "../../utils";
 import { useStyles } from "./style";
@@ -14,9 +15,17 @@ function canShowPlaceholderFromCurrentEditorState(editor) {
   var currentCanShowPlaceholder = editor.getEditorState().read($canShowPlaceholderCurry(editor.isComposing()));
   return currentCanShowPlaceholder;
 }
+
+// 判断 DOM 是否只有一个 br 子元素
+function hasOnlyBrChild(element) {
+  var children = element.childNodes;
+  return children.length === 1 && children[0].nodeType === Node.ELEMENT_NODE && children[0].tagName.toLowerCase() === 'br';
+}
 var Placeholder = /*#__PURE__*/memo(function (_ref) {
   var children = _ref.children,
-    style = _ref.style;
+    style = _ref.style,
+    lineEmptyPlaceholder = _ref.lineEmptyPlaceholder;
+  var currentPlaceHolderRef = useRef(null);
   var _useState = useState(function () {
       return false;
     }),
@@ -32,10 +41,38 @@ var Placeholder = /*#__PURE__*/memo(function (_ref) {
     function resetCanShowPlaceholder() {
       var currentCanShowPlaceholder = canShowPlaceholderFromCurrentEditorState(editor);
       setCanShowPlaceholder(currentCanShowPlaceholder);
+      return currentCanShowPlaceholder;
     }
     resetCanShowPlaceholder();
     return mergeRegister(editor.registerUpdateListener(function () {
-      resetCanShowPlaceholder();
+      var show = resetCanShowPlaceholder();
+      if (!show && lineEmptyPlaceholder) {
+        editor.read(function () {
+          var sel = $getSelection();
+          if ($isRangeSelection(sel) && sel.isCollapsed()) {
+            var anchor = sel.anchor;
+            var node = $getNodeByKey(anchor.key);
+            while (node && !$isBlockElementNode(node)) {
+              node = node.getParent();
+            }
+            if (node) {
+              var dom = editor.getElementByKey(node.getKey());
+              if (dom && hasOnlyBrChild(dom)) {
+                if (currentPlaceHolderRef.current && currentPlaceHolderRef.current !== dom) {
+                  currentPlaceHolderRef.current.dataset.placeholder = '';
+                }
+                currentPlaceHolderRef.current = dom;
+                dom.dataset.placeholder = lineEmptyPlaceholder;
+                return;
+              }
+            }
+            if (currentPlaceHolderRef.current) {
+              currentPlaceHolderRef.current.dataset.placeholder = '';
+              currentPlaceHolderRef.current = null;
+            }
+          }
+        });
+      }
     }), editor.registerEditableListener(function () {
       resetCanShowPlaceholder();
     }));

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

@@ -82,7 +82,8 @@ var ReactPlainText = /*#__PURE__*/memo(function (_ref) {
     _Children$only$props = _Children$only.props,
     type = _Children$only$props.type,
     content = _Children$only$props.content,
-    placeholder = _Children$only$props.placeholder;
+    placeholder = _Children$only$props.placeholder,
+    lineEmptyPlaceholder = _Children$only$props.lineEmptyPlaceholder;
   useLayoutEffect(function () {
     editor.registerPlugin(MarkdownPlugin, {
       enablePasteMarkdown: enablePasteMarkdown
@@ -202,6 +203,7 @@ var ReactPlainText = /*#__PURE__*/memo(function (_ref) {
         outline: 'none'
       }
     }), /*#__PURE__*/_jsx(Placeholder, {
+      lineEmptyPlaceholder: lineEmptyPlaceholder,
       style: style,
       children: placeholder
     }), decorators]

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

@@ -28,7 +28,7 @@ export var useStyles = createStyles(function (_ref2, _ref3) {
     marginMultiple = _ref3$marginMultiple === void 0 ? 2 : _ref3$marginMultiple,
     _ref3$lineHeight = _ref3.lineHeight,
     lineHeight = _ref3$lineHeight === void 0 ? 1.8 : _ref3$lineHeight;
-  var __root = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      --lobe-markdown-font-size: ", "px;\n      --lobe-markdown-header-multiple: ", ";\n      --lobe-markdown-margin-multiple: ", ";\n      --lobe-markdown-line-height: ", ";\n      --lobe-markdown-border-radius: ", ";\n      --lobe-markdown-border-color: ", ";\n\n      position: relative;\n\n      display: flex;\n      flex-direction: column;\n\n      width: 100%;\n      max-width: 100%;\n      height: 100%;\n\n      font-size: var(--lobe-markdown-font-size);\n      line-height: var(--lobe-markdown-line-height);\n      word-break: break-word;\n\n      @keyframes cursor-blink {\n        to {\n          visibility: hidden;\n        }\n      }\n\n      [data-lexical-cursor='true'] {\n        pointer-events: none;\n        position: absolute;\n        display: block;\n\n        &::after {\n          content: '';\n\n          position: absolute;\n          inset-block-start: -2px;\n\n          display: block;\n\n          width: 20px;\n          border-block-start: 1px solid ", ";\n\n          animation: cursor-blink 1.1s steps(2, start) infinite;\n        }\n      }\n    "])), fontSize, headerMultiple, marginMultiple, lineHeight, token.borderRadiusLG, token.colorFillQuaternary, token.colorText);
+  var __root = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      --lobe-markdown-font-size: ", "px;\n      --lobe-markdown-header-multiple: ", ";\n      --lobe-markdown-margin-multiple: ", ";\n      --lobe-markdown-line-height: ", ";\n      --lobe-markdown-border-radius: ", ";\n      --lobe-markdown-border-color: ", ";\n\n      position: relative;\n\n      display: flex;\n      flex-direction: column;\n\n      width: 100%;\n      max-width: 100%;\n      height: 100%;\n\n      font-size: var(--lobe-markdown-font-size);\n      line-height: var(--lobe-markdown-line-height);\n      word-break: break-word;\n\n      @keyframes cursor-blink {\n        to {\n          visibility: hidden;\n        }\n      }\n\n      [data-placeholder] {\n        position: relative;\n      }\n\n      [data-placeholder]::after {\n        pointer-events: none;\n        content: attr(data-placeholder);\n        user-select: none;\n        user-select: none;\n        user-select: none;\n\n        position: absolute;\n        inset-block-start: 50%;\n        transform: translateY(-50%);\n\n        padding-inline-start: 2px;\n\n        color: ", ";\n        white-space: nowrap;\n      }\n\n      [data-lexical-cursor='true'] {\n        pointer-events: none;\n        position: absolute;\n        display: block;\n\n        &::after {\n          content: '';\n\n          position: absolute;\n          inset-block-start: -2px;\n\n          display: block;\n\n          width: 20px;\n          border-block-start: 1px solid ", ";\n\n          animation: cursor-blink 1.1s steps(2, start) infinite;\n        }\n      }\n    "])), fontSize, headerMultiple, marginMultiple, lineHeight, token.borderRadiusLG, token.colorFillQuaternary, token.colorTextDescription, token.colorText);
   var header = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        margin-block: max(\n          calc(var(--lobe-markdown-header-multiple) * var(--lobe-markdown-margin-multiple) * 0.4em),\n          var(--lobe-markdown-font-size)\n        );\n        font-weight: bold;\n        line-height: 1.25;\n      }\n\n      h1 {\n        font-size: calc(\n          var(--lobe-markdown-font-size) * (1 + 1.5 * var(--lobe-markdown-header-multiple))\n        );\n      }\n\n      h2 {\n        font-size: calc(\n          var(--lobe-markdown-font-size) * (1 + var(--lobe-markdown-header-multiple))\n        );\n      }\n\n      h3 {\n        font-size: calc(\n          var(--lobe-markdown-font-size) * (1 + 0.5 * var(--lobe-markdown-header-multiple))\n        );\n      }\n\n      h4 {\n        font-size: calc(\n          var(--lobe-markdown-font-size) * (1 + 0.25 * var(--lobe-markdown-header-multiple))\n        );\n      }\n\n      h5,\n      h6 {\n        font-size: calc(var(--lobe-markdown-font-size) * 1);\n      }\n    "])));
   var p = css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n      p {\n        margin-block: 4px;\n        line-height: var(--lobe-markdown-line-height);\n        letter-spacing: 0.02em;\n\n        &:not(:first-child) {\n          margin-block-start: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n        }\n\n        &:not(:last-child) {\n          margin-block-end: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n        }\n      }\n    "])));
   var blockquote = css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n      .editor_quote {\n        margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n        margin-inline: 0;\n        padding-block: 0;\n        padding-inline: 1em;\n        border-inline-start: solid 4px ", ";\n\n        color: ", ";\n      }\n    "])), token.colorBorder, token.colorTextSecondary);

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

@@ -3,6 +3,7 @@ import type { CommonPluginOptions } from "..";
 import type { IEditor } from "../../../types";
 export interface ReactEditorContentProps {
     content: any;
+    lineEmptyPlaceholder?: string;
     placeholder?: ReactNode;
     type: string;
 }

package/es/react/Editor/Editor.js

@@ -32,6 +32,7 @@ var Editor = /*#__PURE__*/memo(function (_ref) {
     onInit = _ref.onInit,
     onChange = _ref.onChange,
     placeholder = _ref.placeholder,
+    lineEmptyPlaceholder = _ref.lineEmptyPlaceholder,
     _ref$plugins = _ref.plugins,
     plugins = _ref$plugins === void 0 ? [] : _ref$plugins,
     _ref$slashOption = _ref.slashOption,
@@ -113,6 +114,7 @@ var Editor = /*#__PURE__*/memo(function (_ref) {
       variant: variant,
       children: /*#__PURE__*/_jsx(ReactEditorContent, {
         content: content,
+        lineEmptyPlaceholder: lineEmptyPlaceholder,
         placeholder: placeholder,
         type: type
       })

package/es/types/kernel.d.ts

@@ -80,6 +80,10 @@ export interface IEditor {
      * Get editor theme
      */
     getTheme(): Record<string, string | Record<string, string>>;
+    /**
+     * Get node editor instance
+     */
+    initNodeEditor(): LexicalEditor | null;
     /**
      * Check if editor content is empty
      * @returns true if editor content is empty, false otherwise

package/package.json

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