@lobehub/editor 1.20.3 → 1.21.1

package/es/plugins/link-highlight/command/index.js

@@ -1,8 +1,7 @@
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 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 { $getSelection, $insertNodes, $isRangeSelection, COMMAND_PRIORITY_EDITOR, createCommand } from 'lexical';
-import { $createCursorNode } from "../../common/node/cursor";
+import { $createTextNode, $getSelection, $insertNodes, $isRangeSelection, COMMAND_PRIORITY_EDITOR, createCommand } from 'lexical';
 import { $createLinkHighlightNode, $isLinkHighlightNode, getLinkHighlightNode } from "../node/link-highlight";
 export var INSERT_LINK_HIGHLIGHT_COMMAND = createCommand('INSERT_LINK_HIGHLIGHT_COMMAND');
 export function registerLinkHighlightCommand(editor) {
@@ -37,8 +36,11 @@ export function registerLinkHighlightCommand(editor) {
       }
 
       // Create link highlight with selected text
-      var linkHighlightNode = $createLinkHighlightNode(selection.getTextContent());
-      $insertNodes([linkHighlightNode, $createCursorNode()]);
+      var selectedText = selection.getTextContent();
+      var linkHighlightNode = $createLinkHighlightNode();
+      var textNode = $createTextNode(selectedText);
+      linkHighlightNode.append(textNode);
+      $insertNodes([linkHighlightNode]);
       linkHighlightNode.select();
     });
     return true;

package/es/plugins/link-highlight/node/link-highlight.d.ts

@@ -1,29 +1,25 @@
-import { EditorConfig, LexicalEditor, LexicalNode, SerializedElementNode } from 'lexical';
-import { CardLikeElementNode } from "../../common/node/cursor";
+import { EditorConfig, ElementNode, LexicalEditor, LexicalNode, SerializedElementNode } from 'lexical';
 export type SerializedLinkHighlightNode = SerializedElementNode;
-export declare class LinkHighlightNode extends CardLikeElementNode {
+export declare class LinkHighlightNode extends ElementNode {
     static getType(): string;
     static clone(node: LinkHighlightNode): LinkHighlightNode;
     static importJSON(serializedNode: SerializedLinkHighlightNode): LinkHighlightNode;
-    createDOM(config: EditorConfig, editor: LexicalEditor): HTMLElement;
+    createDOM(config: EditorConfig): HTMLElement;
     /**
      * Format URL to ensure it has proper protocol
      */
     private formatUrl;
-    getDOMSlot(element: HTMLElement): import("lexical").ElementDOMSlot<HTMLElement>;
-    canBeEmpty(): boolean;
-    isCardLike(): boolean;
-    isInline(): boolean;
-    canIndent(): boolean;
-    canInsertTextBefore(): boolean;
-    canInsertTextAfter(): boolean;
+    canBeEmpty(): false;
+    isInline(): true;
+    canInsertTextBefore(): false;
+    canInsertTextAfter(): false;
     updateDOM(prevNode: LinkHighlightNode, dom: HTMLElement, config: EditorConfig): boolean;
     /**
      * Get the URL from the text content
      */
     getURL(): string;
 }
-export declare function $createLinkHighlightNode(textContent?: string): LinkHighlightNode;
+export declare function $createLinkHighlightNode(): LinkHighlightNode;
 export declare function $isLinkHighlightNode(node: unknown): node is LinkHighlightNode;
-export declare function getLinkHighlightNode(node: LexicalNode): LexicalNode | null;
+export declare function getLinkHighlightNode(node: LexicalNode): LinkHighlightNode | null;
 export declare function $isSelectionInLinkHighlight(editor: LexicalEditor): boolean;

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

@@ -4,8 +4,6 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 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); }
-function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get.bind(); } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
-function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -15,10 +13,9 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import { addClassNamesToElement } from '@lexical/utils';
-import { $applyNodeReplacement, $createTextNode, $getSelection, $isNodeSelection, $isRangeSelection } from 'lexical';
-import { $createCursorNode, $isCursorNode, CardLikeElementNode } from "../../common/node/cursor";
-export var LinkHighlightNode = /*#__PURE__*/function (_CardLikeElementNode) {
-  _inherits(LinkHighlightNode, _CardLikeElementNode);
+import { $applyNodeReplacement, $getSelection, $isNodeSelection, $isRangeSelection, ElementNode } from 'lexical';
+export var LinkHighlightNode = /*#__PURE__*/function (_ElementNode) {
+  _inherits(LinkHighlightNode, _ElementNode);
   var _super = _createSuper(LinkHighlightNode);
   function LinkHighlightNode() {
     _classCallCheck(this, LinkHighlightNode);
@@ -26,33 +23,17 @@ export var LinkHighlightNode = /*#__PURE__*/function (_CardLikeElementNode) {
   }
   _createClass(LinkHighlightNode, [{
     key: "createDOM",
-    value: function createDOM(config, editor) {
-      var _this = this;
-      var element = document.createElement('span');
-      // eslint-disable-next-line unicorn/prefer-dom-node-dataset
-      element.setAttribute('data-lexical-key', this.getKey());
-      var childContainer = document.createElement('ne-content');
-      element.append(childContainer);
-      addClassNamesToElement(element, config.theme.linkHighlight);
-
-      // Add click handler to open link in new window
-      element.addEventListener('click', function (event) {
-        // Only handle left click without modifier keys
-        if (event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey) {
-          event.preventDefault();
-          event.stopPropagation();
+    value: function createDOM(config) {
+      var element = document.createElement('a');
 
-          // Read URL in editor context
-          editor.read(function () {
-            var url = _this.getURL();
-            if (url) {
-              // Format URL to ensure it has proper protocol
-              var formattedUrl = _this.formatUrl(url);
-              window.open(formattedUrl, '_blank', 'noopener,noreferrer');
-            }
-          });
-        }
-      });
+      // Set link attributes
+      var url = this.getURL();
+      if (url) {
+        element.href = this.formatUrl(url);
+      }
+      element.setAttribute('target', '_blank');
+      element.setAttribute('rel', 'noopener noreferrer');
+      addClassNamesToElement(element, config.theme.linkHighlight);
       return element;
     }
 
@@ -88,44 +69,25 @@ export var LinkHighlightNode = /*#__PURE__*/function (_CardLikeElementNode) {
       }
       return url;
     }
-  }, {
-    key: "getDOMSlot",
-    value: function getDOMSlot(element) {
-      var neContent = element.querySelector('ne-content');
-      if (!neContent) {
-        throw new Error('LinkHighlightNode: ne-content not found');
-      }
-      return _get(_getPrototypeOf(LinkHighlightNode.prototype), "getDOMSlot", this).call(this, element).withElement(neContent);
-    }
   }, {
     key: "canBeEmpty",
     value: function canBeEmpty() {
       return false;
     }
-  }, {
-    key: "isCardLike",
-    value: function isCardLike() {
-      return true;
-    }
   }, {
     key: "isInline",
     value: function isInline() {
       return true;
     }
-  }, {
-    key: "canIndent",
-    value: function canIndent() {
-      return false;
-    }
   }, {
     key: "canInsertTextBefore",
     value: function canInsertTextBefore() {
-      return true;
+      return false;
     }
   }, {
     key: "canInsertTextAfter",
     value: function canInsertTextAfter() {
-      return true;
+      return false;
     }
   }, {
     key: "updateDOM",
@@ -135,6 +97,16 @@ export var LinkHighlightNode = /*#__PURE__*/function (_CardLikeElementNode) {
       if (prevTheme !== this) {
         addClassNamesToElement(dom, config.theme.linkHighlight);
       }
+
+      // Update href attribute if it's an anchor element
+      if (dom instanceof HTMLAnchorElement) {
+        var url = this.getURL();
+        if (url) {
+          dom.href = this.formatUrl(url);
+        } else {
+          dom.removeAttribute('href');
+        }
+      }
       return false;
     }
 
@@ -163,35 +135,20 @@ export var LinkHighlightNode = /*#__PURE__*/function (_CardLikeElementNode) {
     }
   }]);
   return LinkHighlightNode;
-}(CardLikeElementNode);
-export function $createLinkHighlightNode(textContent) {
-  var linkHighlightNode = $applyNodeReplacement(new LinkHighlightNode());
-  var cursorNode = $createCursorNode();
-  linkHighlightNode.append(cursorNode);
-  if (textContent) {
-    linkHighlightNode.append($createTextNode(textContent));
-  }
-  return linkHighlightNode;
+}(ElementNode);
+export function $createLinkHighlightNode() {
+  return $applyNodeReplacement(new LinkHighlightNode());
 }
 export function $isLinkHighlightNode(node) {
   return node instanceof LinkHighlightNode;
 }
 export function getLinkHighlightNode(node) {
-  if ($isCursorNode(node)) {
-    var parent = node.getParent();
-    if ($isLinkHighlightNode(parent)) {
-      return parent;
-    }
-    if ($isLinkHighlightNode(node.getNextSibling())) {
-      return node.getNextSibling();
-    }
-    if ($isLinkHighlightNode(node.getPreviousSibling())) {
-      return node.getPreviousSibling();
-    }
-    return null;
+  if ($isLinkHighlightNode(node)) {
+    return node;
   }
-  if ($isLinkHighlightNode(node.getParent())) {
-    return node.getParent();
+  var parent = node.getParent();
+  if ($isLinkHighlightNode(parent)) {
+    return parent;
   }
   return null;
 }
@@ -204,19 +161,15 @@ export function $isSelectionInLinkHighlight(editor) {
     if ($isRangeSelection(selection)) {
       var focusNode = selection.focus.getNode();
       var anchorNode = selection.anchor.getNode();
-      var linkHighlight = getLinkHighlightNode(focusNode);
-      if (linkHighlight !== getLinkHighlightNode(anchorNode)) {
-        return false;
-      }
-      if ($isLinkHighlightNode(linkHighlight)) {
-        return true;
-      }
-      return false;
-    } else if ($isNodeSelection(selection)) {
+      var focusLinkHighlight = getLinkHighlightNode(focusNode);
+      var anchorLinkHighlight = getLinkHighlightNode(anchorNode);
+
+      // Both nodes should be in the same link-highlight node
+      return focusLinkHighlight !== null && anchorLinkHighlight !== null && focusLinkHighlight === anchorLinkHighlight;
+    }
+    if ($isNodeSelection(selection)) {
       var nodes = selection.getNodes();
-      if (nodes.length === 1 && $isLinkHighlightNode(nodes[0])) {
-        return true;
-      }
+      return nodes.length === 1 && $isLinkHighlightNode(nodes[0]);
     }
     return false;
   });

package/es/plugins/link-highlight/plugin/index.js

@@ -19,10 +19,9 @@ 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 { $getSelection, $isRangeSelection, COMMAND_PRIORITY_NORMAL, PASTE_COMMAND } from 'lexical';
+import { $createTextNode, $getSelection, $isRangeSelection, COMMAND_PRIORITY_NORMAL, PASTE_COMMAND } from 'lexical';
 import { INodeHelper } from "../../../editor-kernel/inode/helper";
 import { KernelPlugin } from "../../../editor-kernel/plugin";
-import { $createCursorNode, cursorNodeSerialized } from "../../common/node/cursor";
 import { IMarkdownShortCutService, MARKDOWN_READER_LEVEL_HIGH } from "../../markdown/service/shortcut";
 import { createDebugLogger } from "../../../utils/debug";
 import { registerLinkHighlightCommand } from "../command";
@@ -77,9 +76,10 @@ export var LinkHighlightPlugin = (_class = /*#__PURE__*/function (_KernelPlugin)
               editor.update(function () {
                 var selection = $getSelection();
                 if ($isRangeSelection(selection)) {
-                  var linkHighlightNode = $createLinkHighlightNode(data);
-                  var cursorNode = $createCursorNode();
-                  selection.insertNodes([linkHighlightNode, cursorNode]);
+                  var linkHighlightNode = $createLinkHighlightNode();
+                  var textNode = $createTextNode(data);
+                  linkHighlightNode.append(textNode);
+                  selection.insertNodes([linkHighlightNode]);
                 }
               });
               return true;
@@ -95,7 +95,7 @@ export var LinkHighlightPlugin = (_class = /*#__PURE__*/function (_KernelPlugin)
 
       // Register markdown writer for <link> format
       markdownService.registerMarkdownWriter(LinkHighlightNode.getType(), function (ctx, node) {
-        ctx.appendLine("<".concat(node.getTextContent(), ">"));
+        ctx.appendLine(node.getTextContent());
         return true;
       });
 
@@ -110,10 +110,10 @@ export var LinkHighlightPlugin = (_class = /*#__PURE__*/function (_KernelPlugin)
             return;
           }
           _this2.logger.debug('Converting markdown auto-link to LinkHighlightNode:', url);
-          var linkHighlightNode = $createLinkHighlightNode(url);
-          var cursorNode = $createCursorNode();
+          var linkHighlightNode = $createLinkHighlightNode();
+          var textNodeContent = $createTextNode(url);
+          linkHighlightNode.append(textNodeContent);
           textNode.replace(linkHighlightNode);
-          linkHighlightNode.insertAfter(cursorNode);
           return undefined;
         },
         trigger: '>',
@@ -129,14 +129,14 @@ export var LinkHighlightPlugin = (_class = /*#__PURE__*/function (_KernelPlugin)
         if (match) {
           var url = match[1].replaceAll(/[\u200B-\u200D\u2060\uFEFF]/g, '');
           _this2.logger.debug('Converting HTML auto-link to LinkHighlightNode:', url);
-          return [INodeHelper.createElementNode('linkHighlight', {
-            children: [cursorNodeSerialized, INodeHelper.createTextNode(url, {})],
+          return INodeHelper.createElementNode('linkHighlight', {
+            children: [INodeHelper.createTextNode(url, {})],
             direction: 'ltr',
             format: '',
             indent: 0,
             type: 'linkHighlight',
             version: 1
-          }), cursorNodeSerialized];
+          });
         }
 
         // Not an auto-link, let other handlers process it
@@ -164,16 +164,14 @@ export var LinkHighlightPlugin = (_class = /*#__PURE__*/function (_KernelPlugin)
         // If text matches URL exactly (auto-link syntax), convert to LinkHighlightNode
         if (textContent === url) {
           _this2.logger.debug('Converting markdown auto-link to LinkHighlightNode:', url);
-          // Return array with LinkHighlightNode and trailing cursor
-          // Structure matches CodeNode: [node with internal cursor + text, external cursor]
-          return [INodeHelper.createElementNode('linkHighlight', {
-            children: [cursorNodeSerialized, INodeHelper.createTextNode(url, {})],
+          return INodeHelper.createElementNode('linkHighlight', {
+            children: [INodeHelper.createTextNode(url, {})],
             direction: 'ltr',
             format: '',
             indent: 0,
             type: 'linkHighlight',
             version: 1
-          }), cursorNodeSerialized];
+          });
         }
 
         // Otherwise, let standard Link plugin handle it

package/es/plugins/link-highlight/react/style.js

@@ -2,9 +2,8 @@ var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref) {
-  var css = _ref.css,
-    token = _ref.token;
+  var css = _ref.css;
   return {
-    linkHighlight: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      cursor: pointer;\n\n      display: inline;\n\n      padding: 2px;\n\n      color: ", ";\n      text-decoration: none;\n\n      transition: all 0.2s ease;\n\n      &:hover {\n        color: ", ";\n        text-decoration: underline;\n      }\n\n      ne-content {\n        display: inline;\n      }\n    "])), token.colorLink, token.colorLinkHover)
+    linkHighlight: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      cursor: unset;\n\n      margin-block: 1em;\n      margin-inline: 0;\n      padding: 2px;\n      border: none;\n    "])))
   };
 });

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

@@ -164,6 +164,13 @@ function convertMdastToLexical(node, index, ctx) {
             ret.push(convertMdastToLexical(child, index, ctx, markdownReaders));
             return ret;
           }, []).filter(Boolean).flat();
+          while (htmlStack.length > 0) {
+            var _children3;
+            var tag = htmlStack.shift();
+            ctx.pop();
+            // @ts-expect-error not error
+            (_children3 = _children).push.apply(_children3, [INodeHelper.createTextNode(tag === null || tag === void 0 ? void 0 : tag.node.value)].concat(_toConsumableArray(tag.children)));
+          }
         }
         if (markdownReaders[node.type]) {
           var reader = markdownReaders[node.type];

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

@@ -10,6 +10,7 @@ import { $createQuoteNode, $isHeadingNode, $isQuoteNode } from '@lexical/rich-te
 import { $setBlocksType } from '@lexical/selection';
 import { $getNearestNodeOfType, mergeRegister } from '@lexical/utils';
 import { $createNodeSelection, $getSelection, $isParagraphNode, $isRangeSelection, $setSelection, CAN_REDO_COMMAND, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, FORMAT_TEXT_COMMAND, REDO_COMMAND, SELECTION_CHANGE_COMMAND, UNDO_COMMAND } from 'lexical';
+import { debounce } from 'lodash-es';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { INSERT_CODEINLINE_COMMAND } from "../../../plugins/code";
 import { $isSelectionInCodeInline } from "../../../plugins/code/node/code";
@@ -369,14 +370,22 @@ export function useEditorState(editor) {
     if (!editor) return;
     var lexicalEditor = editor.getLexicalEditor();
     var cleanup = function cleanup() {};
+    var debounceUpdate = debounce(function () {
+      lexicalEditor === null || lexicalEditor === void 0 || lexicalEditor.read(function () {
+        $updateToolbar();
+      });
+    }, 500);
     var handleLexicalEditor = function handleLexicalEditor(lexicalEditor) {
-      cleanup = mergeRegister(lexicalEditor.registerUpdateListener(function (_ref) {
+      cleanup = mergeRegister(lexicalEditor.registerUpdateListener(debounce(function (_ref) {
         var editorState = _ref.editorState;
         editorState.read(function () {
           $updateToolbar();
         });
-      }), lexicalEditor.registerCommand(SELECTION_CHANGE_COMMAND, function () {
-        $updateToolbar();
+      }, 500)), lexicalEditor.registerCommand(SELECTION_CHANGE_COMMAND, function () {
+        if (lexicalEditor.isComposing()) {
+          return false;
+        }
+        debounceUpdate();
         return false;
       }, COMMAND_PRIORITY_LOW), lexicalEditor.registerCommand(CAN_UNDO_COMMAND, function (payload) {
         setCanUndo(payload);

package/package.json

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