@lobehub/editor 1.8.5 → 1.9.0

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

@@ -23,3 +23,10 @@ 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;
+/**
+ *
+ * @param nodeA
+ * @param nodeB
+ * @returns
+ */
+export declare function compareNodeOrder(nodeA: LexicalNode, nodeB: LexicalNode): number;

package/es/editor-kernel/utils.js

@@ -68,4 +68,44 @@ export function getKernelFromEditor(editor) {
   var _editor$_createEditor;
   // @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;
+}
+
+/**
+ *
+ * @param nodeA
+ * @param nodeB
+ * @returns
+ */
+export function compareNodeOrder(nodeA, nodeB) {
+  if (nodeA === nodeB) {
+    return 0;
+  }
+  var pathA = [];
+  var pathB = [];
+  var currentA = nodeA;
+  var currentB = nodeB;
+  while (currentA) {
+    pathA.unshift(currentA);
+    currentA = currentA.getParent();
+  }
+  while (currentB) {
+    pathB.unshift(currentB);
+    currentB = currentB.getParent();
+  }
+  var minLength = Math.min(pathA.length, pathB.length);
+  for (var i = 0; i < minLength; i++) {
+    if (pathA[i] !== pathB[i]) {
+      var _pathA$i$getParent;
+      var siblings = ((_pathA$i$getParent = pathA[i].getParent()) === null || _pathA$i$getParent === void 0 ? void 0 : _pathA$i$getParent.getChildren()) || [];
+      return siblings.indexOf(pathA[i]) - siblings.indexOf(pathB[i]);
+    }
+  }
+
+  // If all nodes in the shorter path are the same, the shorter path's node comes first
+  if (pathA.length !== pathB.length) {
+    return pathA.length - pathB.length;
+  }
+
+  // This case should not happen as we checked for equality at the start
+  return 0;
 }

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

@@ -202,7 +202,7 @@ export function registerRichKeydown(editor, kernel, options) {
         });
         event.preventDefault();
         return true;
-      } else if (possibleNode) {
+      } else if (possibleNode && possibleNode.getType() !== 'linebreak') {
         possibleNode === null || possibleNode === void 0 || possibleNode.selectEnd();
         event.preventDefault();
         return true;
@@ -254,7 +254,7 @@ export function registerRichKeydown(editor, kernel, options) {
         });
         event.preventDefault();
         return true;
-      } else if (possibleNode) {
+      } else if (possibleNode && possibleNode.getType() !== 'linebreak') {
         possibleNode === null || possibleNode === void 0 || possibleNode.selectStart();
         event.preventDefault();
         return true;

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

@@ -170,6 +170,8 @@ var ReactPlainText = /*#__PURE__*/memo(function (_ref) {
       onFocus: handleFocus,
       ref: editorContainerRef,
       style: {
+        flex: 1,
+        minHeight: 0,
         outline: 'none'
       }
     }), /*#__PURE__*/_jsx(Placeholder, {

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

@@ -26,7 +26,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(_templateObject6 || (_templateObject6 = _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      width: 100%;\n      max-width: 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(_templateObject6 || (_templateObject6 = _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 header = css(_templateObject7 || (_templateObject7 = _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(_templateObject8 || (_templateObject8 = _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(_templateObject9 || (_templateObject9 = _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/math/react/components/MathEditor.js

@@ -5,10 +5,11 @@ 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 { $getSelection, $isElementNode, $isNodeSelection, $isRangeSelection, $isTextNode } from 'lexical';
+import { $getNodeByKey, $getSelection, $isNodeSelection, $isRangeSelection } from 'lexical';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useLexicalComposerContext, useLexicalEditor } from "../../../../editor-kernel/react";
 import PortalAnchor from "../../../../editor-kernel/react/PortalAnchor";
+import { compareNodeOrder } from "../../../../editor-kernel/utils";
 import { SELECT_MATH_SIDE_COMMAND, UPDATE_MATH_COMMAND } from "../../command";
 import { $isMathNode, MathBlockNode } from "../../node";
 import MathEditorContainer from "./MathEditorContainer";
@@ -64,8 +65,10 @@ var MathEdit = /*#__PURE__*/memo(function (_ref) {
             return lexicalEditor.getElementByKey(mathNode.getKey());
           });
           if (currentNode) {
-            var writableNode = mathNode.getWritable();
-            writableNode.__code = value;
+            lexicalEditor.update(function () {
+              var writableNode = mathNode.getWritable();
+              writableNode.__code = value;
+            });
           }
           return;
         }
@@ -81,8 +84,8 @@ var MathEdit = /*#__PURE__*/memo(function (_ref) {
             return lexicalEditor.getElementByKey(mathNode.getKey());
           });
           if (currentNode) {
-            var _writableNode = mathNode.getWritable();
-            _writableNode.__code = value;
+            var writableNode = mathNode.getWritable();
+            writableNode.__code = value;
           }
         });
         // 延迟重置更新标志，确保更新监听器不会立即触发
@@ -204,25 +207,23 @@ var MathEdit = /*#__PURE__*/memo(function (_ref) {
         return node;
       });
       if (canEdit) {
-        var node = prevEditorState.read(function () {
+        var anchorNodeKey = prevEditorState.read(function () {
           var sel = prevEditorState._selection;
-          if (!$isRangeSelection(sel) || !sel.isCollapsed()) {
+          if (!$isRangeSelection(sel)) {
             return false;
           }
-          var node = sel.anchor.getNode();
-          if ($isTextNode(node)) {
-            return node.getNextSibling();
-          }
-          if (!$isElementNode(node)) {
-            return false;
+          var node = sel.anchor.key;
+          return node;
+        });
+        editor.read(function () {
+          var anchorNode = anchorNodeKey ? $getNodeByKey(anchorNodeKey) : null;
+          var isPrev = anchorNode && compareNodeOrder(anchorNode, canEdit) < 0;
+          if (isPrev) {
+            setPrev(true);
+          } else {
+            setPrev(false);
           }
-          return node.getChildAtIndex(sel.anchor.offset);
         });
-        if (canEdit === node) {
-          setPrev(true);
-        } else {
-          setPrev(false);
-        }
         setIsOpen(true);
       }
       if (!canEdit) {
@@ -252,8 +253,9 @@ var MathEdit = /*#__PURE__*/memo(function (_ref) {
         lastValidRef.current = value;
       }
     },
-    onValueChange: setValue,
-    prev: prev,
+    onValueChange: setValue
+    // prev={prev}
+    ,
     value: value
   });
 

package/es/plugins/math/react/components/MathEditorContainer.js

@@ -16,6 +16,8 @@ var MathEditorContainer = /*#__PURE__*/memo(function (_ref) {
     return updatePosition({
       callback: function callback() {
         if (!divRef.current || !mathDOM) return;
+        // 展示的时候聚焦
+        onFocus === null || onFocus === void 0 || onFocus();
         if (!isBlockMode) {
           divRef.current.style.width = '';
           return;

package/es/plugins/math/react/components/MathEditorContent.d.ts

@@ -21,7 +21,6 @@ export interface MathEditorContentProps {
     /** 值变化回调 */
     onValueChange: (value: string) => void;
     /** 是否从前一个位置进入 */
-    prev: boolean;
     /** 当前输入值 */
     value: string;
 }

package/es/plugins/math/react/components/MathEditorContent.js

@@ -25,7 +25,6 @@ var MathEditorContent = /*#__PURE__*/memo(function (_ref) {
     onSubmit = _ref.onSubmit,
     onValidationChange = _ref.onValidationChange,
     onValueChange = _ref.onValueChange,
-    prev = _ref.prev,
     value = _ref.value;
   var t = useTranslation();
   var textareaRef = useRef(null);
@@ -41,16 +40,15 @@ var MathEditorContent = /*#__PURE__*/memo(function (_ref) {
     focusRef === null || focusRef === void 0 || focusRef(textareaRef.current);
   }, [focusRef]);
 
-  // 聚焦和光标位置处理
-  useEffect(function () {
-    if (textareaRef.current) {
-      textareaRef.current.focus();
-      if (prev) {
-        var _textareaRef$current$;
-        (_textareaRef$current$ = textareaRef.current.resizableTextArea) === null || _textareaRef$current$ === void 0 || (_textareaRef$current$ = _textareaRef$current$.textArea) === null || _textareaRef$current$ === void 0 || _textareaRef$current$.setSelectionRange(0, 0);
-      }
-    }
-  }, [prev]);
+  // // 聚焦和光标位置处理
+  // useEffect(() => {
+  //   if (textareaRef.current) {
+  //     textareaRef.current.focus();
+  //     if (prev) {
+  //       textareaRef.current.resizableTextArea?.textArea?.setSelectionRange(0, 0);
+  //     }
+  //   }
+  // }, [prev]);
 
   // 实时验证 LaTeX 语法
   useEffect(function () {

package/es/react/ChatInput/ChatInput.js

@@ -1,7 +1,7 @@
 'use client';
 
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["defaultHeight", "height", "maxHeight", "minHeight", "resizeMaxHeightOffset", "resize", "onSizeChange", "onSizeDragging", "className", "children", "footer", "header", "style", "slashMenuRef", "classNames", "fullscreen", "showResizeHandle", "styles"];
+var _excluded = ["defaultHeight", "height", "maxHeight", "minHeight", "resizeMaxHeightOffset", "resize", "onSizeChange", "onSizeDragging", "className", "children", "footer", "header", "style", "slashMenuRef", "classNames", "fullscreen", "showResizeHandle", "onBodyClick", "styles"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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; }
@@ -46,6 +46,7 @@ var ChatInput = /*#__PURE__*/memo(function (props) {
     classNames = props.classNames,
     fullscreen = props.fullscreen,
     showResizeHandle = props.showResizeHandle,
+    onBodyClick = props.onBodyClick,
     customStyles = props.styles,
     rest = _objectWithoutProperties(props, _excluded);
   var _useStyles = useStyles(),
@@ -79,6 +80,8 @@ var ChatInput = /*#__PURE__*/memo(function (props) {
   }, [onSizeDragging, defaultHeight]);
   var bodyNode = /*#__PURE__*/_jsx("div", {
     className: cx(styles.editor, classNames === null || classNames === void 0 ? void 0 : classNames.body),
+    draggable: false,
+    onClick: onBodyClick,
     style: _objectSpread(_objectSpread({}, customStyles === null || customStyles === void 0 ? void 0 : customStyles.body), {}, {
       flex: 1,
       maxHeight: fullscreen ? '100%' : maxHeight,

package/es/react/ChatInput/style.js

@@ -6,8 +6,8 @@ export var useStyles = createStyles(function (_ref) {
     token = _ref.token;
   return {
     container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n\n    height: 100%;\n    border: 1px solid ", ";\n    border-radius: ", "px;\n\n    background-color: ", ";\n    box-shadow:\n      ", ",\n      0 32px 0 ", ";\n  "])), token.colorBorderSecondary, token.borderRadiusLG, token.colorBgContainer, token.boxShadowTertiary, token.colorBgContainerSecondary),
-    editor: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    overflow: hidden auto;\n    flex: 1;\n\n    width: 100%;\n    padding-block: 8px 0;\n    padding-inline: 12px;\n  "]))),
-    resizableContainer: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n    align-self: flex-end;\n\n    width: 100%;\n\n    &:hover .resize-handle {\n      opacity: 1;\n    }\n  "]))),
+    editor: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    cursor: text;\n\n    overflow: hidden auto;\n    flex: 1;\n\n    width: 100%;\n    padding-block: 8px 0;\n    padding-inline: 12px;\n  "]))),
+    resizableContainer: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: relative;\n\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    align-self: flex-end;\n\n    width: 100%;\n\n    &:hover .resize-handle {\n      opacity: 1;\n    }\n  "]))),
     resizeHandle: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    position: absolute;\n    inset-block-start: -4px;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n\n    width: 100%;\n    height: 8px;\n\n    opacity: 0;\n\n    transition: opacity 0.2s ease-in-out;\n\n    &::before {\n      content: '';\n\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 50%;\n      transform: translateX(-50%);\n\n      width: 32px;\n      height: 4px;\n      border-radius: 4px;\n\n      background-color: ", ";\n      box-shadow: 0 1px 2px ", "20;\n    }\n\n    &:hover {\n      opacity: 1 !important;\n\n      &::before {\n        background-color: ", ";\n        box-shadow: 0 2px 4px ", "40;\n      }\n    }\n\n    &:active {\n      &::before {\n        background-color: ", ";\n      }\n    }\n  "])), token.colorPrimary, token.colorTextSecondary, token.colorPrimaryHover, token.colorTextSecondary, token.colorPrimaryActive)
   };
 });

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

@@ -13,6 +13,7 @@ export interface ChatInputProps extends Omit<FlexboxProps, 'height'> {
     height?: number;
     maxHeight?: number;
     minHeight?: number;
+    onBodyClick?: FlexboxProps['onClick'];
     onSizeChange?: (height: number) => void;
     onSizeDragging?: (height: number) => void;
     resize?: boolean;

package/package.json

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