@lobehub/editor 1.24.0 → 1.26.0

package/es/plugins/link/react/components/LinkToolbar.js

@@ -11,6 +11,7 @@ import { $createRangeSelection, $getNodeByKey, $getSelection, $isRangeSelection,
 import { EditIcon, ExternalLinkIcon, UnlinkIcon } from 'lucide-react';
 import { memo, useCallback, useRef, useState } from 'react';
 import { useLexicalEditor } from "../../../../editor-kernel/react";
+import { useEditable } from "../../../../editor-kernel/react/useEditable";
 import { useTranslation } from "../../../../editor-kernel/react/useTranslation";
 import { getSelectedNode } from "../../utils";
 import { cleanPosition, updatePosition } from "../../../../utils/updatePosition";
@@ -19,7 +20,8 @@ import { useStyles } from "../style";
 import { EDIT_LINK_COMMAND } from "./LinkEdit";
 import { jsx as _jsx } from "react/jsx-runtime";
 var LinkToolbar = /*#__PURE__*/memo(function (_ref) {
-  var editor = _ref.editor;
+  var editor = _ref.editor,
+    enable = _ref.enable;
   var divRef = useRef(null);
   var LinkRef = useRef(null);
   var _useStyles = useStyles(),
@@ -33,6 +35,8 @@ var LinkToolbar = /*#__PURE__*/memo(function (_ref) {
   });
   var t = useTranslation();
   var clearTimerRef = useRef(-1);
+  var _useEditable = useEditable(),
+    editable = _useEditable.editable;
   var handleEdit = useCallback(function () {
     if (!linkNode) return;
     editor.dispatchCommand(EDIT_LINK_COMMAND, {
@@ -90,6 +94,7 @@ var LinkToolbar = /*#__PURE__*/memo(function (_ref) {
     window.open(url, '_blank');
   }, [editor, linkNode]);
   useLexicalEditor(function (editor) {
+    if (!editable) return;
     return mergeRegister(editor.registerUpdateListener(function () {
       var selection = editor.read(function () {
         return $getSelection();
@@ -119,6 +124,7 @@ var LinkToolbar = /*#__PURE__*/memo(function (_ref) {
         state.current.isLink = false;
       }
     }), editor.registerCommand(HOVER_LINK_COMMAND, function (payload) {
+      if (!enable) return false;
       if (!payload.event.target || divRef.current === null) return false;
       // Cancel any pending hide timers when hovering a link again
       clearTimeout(clearTimerRef.current);
@@ -137,7 +143,7 @@ var LinkToolbar = /*#__PURE__*/memo(function (_ref) {
       clearTimerRef.current = setTimeout(handleCancel, 300);
       return true;
     }, COMMAND_PRIORITY_NORMAL));
-  }, []);
+  }, [enable, editable]);
   return /*#__PURE__*/_jsx(ActionIconGroup, {
     className: styles.linkToolbar,
     items: [{

package/es/plugins/link/service/i-link-service.d.ts

@@ -0,0 +1,11 @@
+import EventEmitter from 'eventemitter3';
+import { IServiceID } from "../../../types";
+export interface ILinkService {
+    setLinkToolbar(enable: boolean): void;
+}
+export declare const ILinkService: IServiceID<ILinkService>;
+export declare class LinkService extends EventEmitter<'linkToolbarChange'> implements ILinkService {
+    private _enableLinkToolbar;
+    get enableLinkToolbar(): boolean;
+    setLinkToolbar(enable: boolean): void;
+}

package/es/plugins/link/service/i-link-service.js

@@ -0,0 +1,46 @@
+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); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+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 _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); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+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); }
+/* eslint-disable no-redeclare */
+/* eslint-disable @typescript-eslint/no-redeclare */
+import EventEmitter from 'eventemitter3';
+import { genServiceId } from "../../../editor-kernel";
+export var ILinkService = genServiceId('LinkService');
+export var LinkService = /*#__PURE__*/function (_EventEmitter) {
+  _inherits(LinkService, _EventEmitter);
+  var _super = _createSuper(LinkService);
+  function LinkService() {
+    var _this;
+    _classCallCheck(this, LinkService);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "_enableLinkToolbar", true);
+    return _this;
+  }
+  _createClass(LinkService, [{
+    key: "enableLinkToolbar",
+    get: function get() {
+      return this._enableLinkToolbar;
+    }
+  }, {
+    key: "setLinkToolbar",
+    value: function setLinkToolbar(enable) {
+      this._enableLinkToolbar = enable;
+      this.emit('linkToolbarChange', enable);
+    }
+  }]);
+  return LinkService;
+}(EventEmitter);

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

@@ -1,6 +1,7 @@
-import { ElementNode, LexicalNode, TextNode } from 'lexical';
+import { BaseSelection, ElementNode, LexicalEditor, LexicalNode, TextNode } from 'lexical';
+import { IRootNode } from "../../../editor-kernel/inode";
 import type { IEditorKernel, IServiceID } from "../../../types/kernel";
-import type { MarkdownReaderFunc, TransformerRecord, TransfromerRecordArray } from '../data-source/markdown/parse';
+import { type MarkdownReaderFunc, type TransformerRecord, type TransfromerRecordArray } from '../data-source/markdown/parse';
 import type { Transformer } from './transformers';
 export interface IMarkdownWriterContext {
     /**
@@ -27,6 +28,8 @@ export declare const MARKDOWN_READER_LEVEL_HIGH = 1;
 export declare const MARKDOWN_READER_LEVEL_NORMAL = 2;
 export type MARKDOWN_READER_LEVEL = typeof MARKDOWN_READER_LEVEL_HIGH | typeof MARKDOWN_READER_LEVEL_NORMAL | typeof MARKDOWN_WRITER_LEVEL_MAX;
 export interface IMarkdownShortCutService {
+    insertIRootNode(editor: LexicalEditor, root: IRootNode, selection: BaseSelection): void;
+    parseMarkdownToLexical(markdown: string): IRootNode;
     /**
      * Register Markdown reader
      */
@@ -75,4 +78,6 @@ export declare class MarkdownShortCutService implements IMarkdownShortCutService
     runTransformers(parentNode: ElementNode, anchorNode: TextNode, anchorOffset: number, trigger?: 'enter'): boolean;
     registerMarkdownWriter(type: string, writer: (ctx: IMarkdownWriterContext, node: LexicalNode) => boolean | void): void;
     registerMarkdownReader<K extends keyof TransformerRecord>(type: K, reader: MarkdownReaderFunc<K>, level?: MARKDOWN_READER_LEVEL): void;
+    parseMarkdownToLexical(markdown: string): IRootNode;
+    insertIRootNode(editor: LexicalEditor, root: IRootNode, selection: BaseSelection): void;
 }

package/es/plugins/markdown/service/shortcut.js

@@ -17,7 +17,8 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 
 import { genServiceId } from "../../../editor-kernel";
 import { createDebugLogger } from "../../../utils/debug";
-import { indexBy } from "../utils";
+import { parseMarkdownToLexical as _parseMarkdownToLexical } from "../data-source/markdown/parse";
+import { indexBy, insertIRootNode as _insertIRootNode } from "../utils";
 import { $runTextFormatTransformers, runElementTransformers, runTextMatchTransformers, testElementTransformers } from "./transformers";
 export var MARKDOWN_WRITER_LEVEL_MAX = 0;
 export var MARKDOWN_READER_LEVEL_HIGH = 1;
@@ -169,6 +170,16 @@ export var MarkdownShortCutService = /*#__PURE__*/function () {
         (_this$_markdownReader = this._markdownReaders[level][type]) === null || _this$_markdownReader === void 0 || _this$_markdownReader.push(reader);
       }
     }
+  }, {
+    key: "parseMarkdownToLexical",
+    value: function parseMarkdownToLexical(markdown) {
+      return _parseMarkdownToLexical(markdown, this.markdownReaders);
+    }
+  }, {
+    key: "insertIRootNode",
+    value: function insertIRootNode(editor, root, selection) {
+      _insertIRootNode(editor, root, selection);
+    }
   }]);
   return MarkdownShortCutService;
 }();

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

@@ -1,4 +1,5 @@
 import { BaseSelection, LexicalEditor, LexicalNode, TextNode } from 'lexical';
+import { IRootNode } from "../../../editor-kernel/inode";
 /**
  * Returns true if the node can contain transformable markdown.
  * Code nodes cannot contain transformable markdown.
@@ -60,3 +61,4 @@ export declare function $addNodeStyle(node: TextNode): void;
  * @returns an Array of Lexical Node objects.
  */
 export declare function $generateNodesFromSerializedNodes(serializedNodes: Array<BaseSerializedNode>): Array<LexicalNode>;
+export declare function insertIRootNode(editor: LexicalEditor, root: IRootNode, selection: BaseSelection): void;

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

@@ -6,7 +6,6 @@ function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol
 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 { $caretFromPoint, $getCaretRange, $getChildCaret, $getRoot, $isElementNode, $isRangeSelection, $isTextNode, $isTextPointCaret, $parseSerializedNode, SELECTION_INSERT_CLIPBOARD_NODES_COMMAND } from 'lexical';
-
 /**
  * Returns true if the node can contain transformable markdown.
  * Code nodes cannot contain transformable markdown.
@@ -217,4 +216,8 @@ export function $generateNodesFromSerializedNodes(serializedNodes) {
     _iterator4.f();
   }
   return nodes;
+}
+export function insertIRootNode(editor, root, selection) {
+  var nodes = $generateNodesFromSerializedNodes(root.children);
+  $insertGeneratedNodes(editor, nodes, selection);
 }

package/es/plugins/toolbar/index.d.ts

@@ -0,0 +1 @@
+export * from './react';

package/es/plugins/toolbar/index.js

@@ -0,0 +1 @@
+export * from "./react";

package/es/plugins/toolbar/react/index.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { ReactToolbarPluginProps } from './type';
+export declare const ReactToolbarPlugin: FC<ReactToolbarPluginProps>;

package/es/plugins/toolbar/react/index.js

@@ -0,0 +1,80 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+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; }
+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 { Block } from '@lobehub/ui';
+import { $getSelection, COMMAND_PRIORITY_LOW, SELECTION_CHANGE_COMMAND, getDOMSelection } from 'lexical';
+import { useCallback, useRef } from 'react';
+import { useLexicalComposerContext, useLexicalEditor } from "../../../editor-kernel/react";
+import { ILinkService } from "../../link";
+import { getDOMRangeRect } from "../utils/getDOMRangeRect";
+import { setFloatingElemPosition } from "../utils/setFloatingElemPosition";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var ReactToolbarPlugin = function ReactToolbarPlugin(_ref) {
+  var className = _ref.className,
+    children = _ref.children;
+  var popupCharStylesEditorRef = useRef(null);
+  var anchorElemRef = useRef(null);
+  var _useLexicalComposerCo = useLexicalComposerContext(),
+    _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
+    kernelEditor = _useLexicalComposerCo2[0];
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles;
+  var $updateTextFormatFloatingToolbar = useCallback(function (editor) {
+    if (!anchorElemRef.current) {
+      return;
+    }
+    var selection = $getSelection();
+    var popupCharStylesEditorElem = popupCharStylesEditorRef.current;
+    var nativeSelection = getDOMSelection(editor._window);
+    if (popupCharStylesEditorElem === null) {
+      return;
+    }
+    var rootElement = editor.getRootElement();
+    if (selection !== null && nativeSelection !== null && !nativeSelection.isCollapsed && rootElement !== null && rootElement.contains(nativeSelection.anchorNode)) {
+      var rangeRect = getDOMRangeRect(nativeSelection, rootElement);
+      setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElemRef.current, false);
+    } else {
+      popupCharStylesEditorElem.style.opacity = '0';
+      popupCharStylesEditorElem.style.transform = 'translate(-10000px, -10000px)';
+    }
+  }, [anchorElemRef]);
+  useLexicalEditor(function () {
+    var service = kernelEditor.requireService(ILinkService);
+    if (service) {
+      service.setLinkToolbar(false);
+      return function () {
+        service.setLinkToolbar(true);
+      };
+    }
+  }, []);
+  useLexicalEditor(function (editor) {
+    return mergeRegister(editor.registerUpdateListener(function (_ref2) {
+      var editorState = _ref2.editorState;
+      editorState.read(function () {
+        $updateTextFormatFloatingToolbar(editor);
+      });
+    }), editor.registerCommand(SELECTION_CHANGE_COMMAND, function () {
+      $updateTextFormatFloatingToolbar(editor);
+      return false;
+    }, COMMAND_PRIORITY_LOW));
+  });
+  return /*#__PURE__*/_jsx("div", {
+    ref: anchorElemRef,
+    style: {
+      position: 'relative'
+    },
+    children: /*#__PURE__*/_jsx(Block, {
+      className: cx(styles, className),
+      padding: 4,
+      ref: popupCharStylesEditorRef,
+      variant: 'outlined',
+      children: children
+    })
+  });
+};

package/es/plugins/toolbar/react/style.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<import("antd-style").SerializedStyles>;

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

@@ -0,0 +1,9 @@
+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,
+    isDarkMode = _ref.isDarkMode;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    will-change: transform;\n\n    position: absolute;\n    z-index: 10;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    transform: translate(-10000px, -10000px);\n\n    display: flex;\n\n    border-color: ", ";\n\n    vertical-align: middle;\n\n    opacity: 0;\n    background: ", ";\n    box-shadow: ", ";\n\n    transition: opacity 0.12s ", ";\n  "])), token.colorFillSecondary, token.colorBgElevated, isDarkMode ? '0px 14px 28px -6px #0003,0px 2px 4px -1px #0000001f' : '0 14px 28px -6px #0000001a, 0 2px 4px -1px #0000000f', token.motionEaseOut);
+});

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

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export interface ReactToolbarPluginProps {
+    children?: ReactNode;
+    className?: string;
+}

package/es/plugins/toolbar/react/type.js

@@ -0,0 +1 @@
+export {};

package/es/plugins/toolbar/utils/getDOMRangeRect.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export declare function getDOMRangeRect(nativeSelection: Selection, rootElement: HTMLElement): DOMRect;

package/es/plugins/toolbar/utils/getDOMRangeRect.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export function getDOMRangeRect(nativeSelection, rootElement) {
+  var domRange = nativeSelection.getRangeAt(0);
+  var rect;
+  if (nativeSelection.anchorNode === rootElement) {
+    var inner = rootElement;
+    while (inner.firstElementChild !== null) {
+      inner = inner.firstElementChild;
+    }
+    rect = inner.getBoundingClientRect();
+  } else {
+    rect = domRange.getBoundingClientRect();
+  }
+  return rect;
+}

package/es/plugins/toolbar/utils/setFloatingElemPosition.d.ts

@@ -0,0 +1 @@
+export declare function setFloatingElemPosition(targetRect: DOMRect | null, floatingElem: HTMLElement, anchorElem: HTMLElement, isLink?: boolean, verticalGap?: number, horizontalOffset?: number): void;

package/es/plugins/toolbar/utils/setFloatingElemPosition.js

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+var VERTICAL_GAP = 4;
+var HORIZONTAL_OFFSET = 0;
+export function setFloatingElemPosition(targetRect, floatingElem, anchorElem) {
+  var isLink = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var verticalGap = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : VERTICAL_GAP;
+  var horizontalOffset = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : HORIZONTAL_OFFSET;
+  var scrollerElem = anchorElem.parentElement;
+  if (targetRect === null || !scrollerElem) {
+    floatingElem.style.opacity = '0';
+    floatingElem.style.transform = 'translate(-10000px, -10000px)';
+    return;
+  }
+  var floatingElemRect = floatingElem.getBoundingClientRect();
+  var anchorElementRect = anchorElem.getBoundingClientRect();
+  var editorScrollerRect = scrollerElem.getBoundingClientRect();
+  var top = targetRect.top - floatingElemRect.height - verticalGap;
+  var left = targetRect.left - horizontalOffset;
+
+  // Check if text is end-aligned
+  var selection = window.getSelection();
+  if (selection && selection.rangeCount > 0) {
+    var range = selection.getRangeAt(0);
+    var textNode = range.startContainer;
+    if (textNode.nodeType === Node.ELEMENT_NODE || textNode.parentElement) {
+      var textElement = textNode.nodeType === Node.ELEMENT_NODE ? textNode : textNode.parentElement;
+      var textAlign = window.getComputedStyle(textElement).textAlign;
+      if (textAlign === 'right' || textAlign === 'end') {
+        // For end-aligned text, position the toolbar relative to the text end
+        left = targetRect.right - floatingElemRect.width + horizontalOffset;
+      }
+    }
+  }
+  if (top < editorScrollerRect.top) {
+    // adjusted height for link element if the element is at top
+    top += floatingElemRect.height + targetRect.height + verticalGap * (isLink ? 9 : 2);
+  }
+  if (left + floatingElemRect.width > editorScrollerRect.right) {
+    left = editorScrollerRect.right - floatingElemRect.width - horizontalOffset;
+  }
+  if (left < editorScrollerRect.left) {
+    left = editorScrollerRect.left + horizontalOffset;
+  }
+  top -= anchorElementRect.top + 12;
+  left -= anchorElementRect.left;
+  floatingElem.style.opacity = '1';
+  floatingElem.style.transform = "translate(".concat(left, "px, ").concat(top, "px)");
+}

package/es/react/ChatInput/style.js

@@ -3,9 +3,10 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
-    token = _ref.token;
+    token = _ref.token,
+    isDarkMode = _ref.isDarkMode;
   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),
+    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  "])), isDarkMode ? token.colorFillSecondary : token.colorFill, token.borderRadiusLG, token.colorBgElevated, isDarkMode ? '0px 4px 4px rgba(0, 0, 0, 0.4)' : '0px 4px 4px rgba(0, 0, 0, 0.04)'),
     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/Editor/Editor.js

@@ -28,6 +28,7 @@ var Editor = /*#__PURE__*/memo(function (_ref) {
   var content = _ref.content,
     style = _ref.style,
     className = _ref.className,
+    editable = _ref.editable,
     editor = _ref.editor,
     onInit = _ref.onInit,
     onChange = _ref.onChange,
@@ -99,6 +100,7 @@ var Editor = /*#__PURE__*/memo(function (_ref) {
     children: [memoPlugins, memoSlash, memoMention, /*#__PURE__*/_jsx(ReactPlainText, {
       autoFocus: autoFocus,
       className: className,
+      editable: editable,
       enablePasteMarkdown: enablePasteMarkdown,
       markdownOption: markdownOption,
       onBlur: onBlur,

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

@@ -11,6 +11,7 @@ export interface EditorProps extends Partial<ReactEditorContentProps>, Omit<Reac
     autoFocus?: boolean;
     children?: ReactNode;
     className?: string;
+    editable?: boolean;
     editor?: IEditor;
     /**
      * Enable automatic markdown formatting for pasted content

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

@@ -34,6 +34,7 @@ import { $findTopLevelElement, formatParagraph, getSelectedNode } from "./utils"
  * @returns Editor state and methods for toolbar functionality
  */
 export function useEditorState(editor) {
+  var _editor$isEditable;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     canUndo = _useState2[0],
@@ -42,70 +43,76 @@ export function useEditorState(editor) {
     _useState4 = _slicedToArray(_useState3, 2),
     canRedo = _useState4[0],
     setCanRedo = _useState4[1];
-  var _useState5 = useState(false),
+  var _useState5 = useState((_editor$isEditable = editor === null || editor === void 0 ? void 0 : editor.isEditable()) !== null && _editor$isEditable !== void 0 ? _editor$isEditable : true),
     _useState6 = _slicedToArray(_useState5, 2),
-    isBold = _useState6[0],
-    setIsBold = _useState6[1];
+    editable = _useState6[0],
+    setEditable = _useState6[1];
   var _useState7 = useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    isItalic = _useState8[0],
-    setIsItalic = _useState8[1];
+    isBold = _useState8[0],
+    setIsBold = _useState8[1];
   var _useState9 = useState(false),
     _useState10 = _slicedToArray(_useState9, 2),
-    isUnderline = _useState10[0],
-    setIsUnderline = _useState10[1];
+    isItalic = _useState10[0],
+    setIsItalic = _useState10[1];
   var _useState11 = useState(false),
     _useState12 = _slicedToArray(_useState11, 2),
-    isStrikethrough = _useState12[0],
-    setIsStrikethrough = _useState12[1];
+    isUnderline = _useState12[0],
+    setIsUnderline = _useState12[1];
   var _useState13 = useState(false),
     _useState14 = _slicedToArray(_useState13, 2),
-    isSubscript = _useState14[0],
-    setIsSubscript = _useState14[1];
+    isStrikethrough = _useState14[0],
+    setIsStrikethrough = _useState14[1];
   var _useState15 = useState(false),
     _useState16 = _slicedToArray(_useState15, 2),
-    isSuperscript = _useState16[0],
-    setIsSuperscript = _useState16[1];
+    isSubscript = _useState16[0],
+    setIsSubscript = _useState16[1];
   var _useState17 = useState(false),
     _useState18 = _slicedToArray(_useState17, 2),
-    isCode = _useState18[0],
-    setIsCode = _useState18[1];
+    isSuperscript = _useState18[0],
+    setIsSuperscript = _useState18[1];
   var _useState19 = useState(false),
     _useState20 = _slicedToArray(_useState19, 2),
-    isLink = _useState20[0],
-    setIsLink = _useState20[1];
+    isCode = _useState20[0],
+    setIsCode = _useState20[1];
   var _useState21 = useState(false),
     _useState22 = _slicedToArray(_useState21, 2),
-    isCodeblock = _useState22[0],
-    setIsInCodeblok = _useState22[1];
+    isLink = _useState22[0],
+    setIsLink = _useState22[1];
   var _useState23 = useState(false),
     _useState24 = _slicedToArray(_useState23, 2),
-    isBlockquote = _useState24[0],
-    setIsInBlockquote = _useState24[1];
-  var _useState25 = useState(null),
+    isCodeblock = _useState24[0],
+    setIsInCodeblok = _useState24[1];
+  var _useState25 = useState(false),
     _useState26 = _slicedToArray(_useState25, 2),
-    codeblockLang = _useState26[0],
-    setCodeblockLang = _useState26[1];
-  var _useState27 = useState(true),
+    isBlockquote = _useState26[0],
+    setIsInBlockquote = _useState26[1];
+  var _useState27 = useState(null),
     _useState28 = _slicedToArray(_useState27, 2),
-    isEmpty = _useState28[0],
-    setIsEmpty = _useState28[1];
-  var _useState29 = useState(false),
+    codeblockLang = _useState28[0],
+    setCodeblockLang = _useState28[1];
+  var _useState29 = useState(true),
     _useState30 = _slicedToArray(_useState29, 2),
-    isSelected = _useState30[0],
-    setIsSelected = _useState30[1];
-  var _useState31 = useState(null),
+    isEmpty = _useState30[0],
+    setIsEmpty = _useState30[1];
+  var _useState31 = useState(false),
     _useState32 = _slicedToArray(_useState31, 2),
-    blockType = _useState32[0],
-    setBlockType = _useState32[1];
+    isSelected = _useState32[0],
+    setIsSelected = _useState32[1];
+  var _useState33 = useState(null),
+    _useState34 = _slicedToArray(_useState33, 2),
+    blockType = _useState34[0],
+    setBlockType = _useState34[1];
   var $handleHeadingNode = useCallback(function (selectedElement) {
     var type = $isHeadingNode(selectedElement) ? selectedElement.getTag() : selectedElement.getType();
     setBlockType(type);
   }, [setBlockType]);
   var $updateToolbar = useCallback(function () {
+    var _editor$isEditable2;
     var selection = $getSelection();
     var lexicalEditor = editor === null || editor === void 0 ? void 0 : editor.getLexicalEditor();
     setIsSelected(false);
+    setEditable((_editor$isEditable2 = editor === null || editor === void 0 ? void 0 : editor.isEditable()) !== null && _editor$isEditable2 !== void 0 ? _editor$isEditable2 : true);
     if (lexicalEditor) {
       setIsEmpty($isRootTextContentEmpty(lexicalEditor.isComposing(), false));
     }
@@ -417,6 +424,7 @@ export function useEditorState(editor) {
       code: code,
       codeblock: codeblock,
       codeblockLang: codeblockLang,
+      editable: editable,
       insertLink: insertLink,
       insertMath: insertMath,
       isBlockquote: isBlockquote,

package/es/types/kernel.d.ts

@@ -14,6 +14,10 @@ export type IServiceID<Service> = {
     __serviceType?: Service;
 };
 export interface IKernelEventMap {
+    /**
+     * Editor editable state change event
+     */
+    editableChange: (editable: boolean) => void;
     /**
      * Editor error event
      */
@@ -84,6 +88,10 @@ export interface IEditor {
      * Get node editor instance
      */
     initNodeEditor(): LexicalEditor | null;
+    /**
+     * Check if editor is editable
+     */
+    isEditable(): boolean;
     /**
      * Check if editor content is empty
      * @returns true if editor content is empty, false otherwise
@@ -166,11 +174,16 @@ export interface IEditor {
      * @param content
      */
     setDocument(type: string, content: any): void;
+    /**
+     * Enable or disable editor editing capability
+     * @param editable
+     */
+    setEditable(editable: boolean): void;
     /**
      * Set document editor root node
      * @param dom
      */
-    setRootElement(dom: HTMLElement): LexicalEditor;
+    setRootElement(dom: HTMLElement, editable?: boolean): LexicalEditor;
     /**
      * Get translation text
      * @param key Translation key

package/package.json

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