@lobehub/editor 1.24.0 → 1.25.0

package/es/plugins/auto-complete/plugin/index.js

@@ -0,0 +1,398 @@
+var _class;
+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 _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; }
+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 _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); }; }
+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); }
+import { $getSelection, $insertNodes, $isRangeSelection, $setSelection, COMMAND_PRIORITY_CRITICAL, COMMAND_PRIORITY_HIGH, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND } from 'lexical';
+import { INodeHelper } from "../../../editor-kernel/inode/helper";
+import { KernelPlugin } from "../../../editor-kernel/plugin";
+import { IMarkdownShortCutService } from "../../markdown";
+import { PlaceholderBlockNode, PlaceholderNode } from "../node/placeholderNode";
+export var AutoCompletePlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
+  _inherits(AutoCompletePlugin, _KernelPlugin);
+  var _super = _createSuper(AutoCompletePlugin);
+  function AutoCompletePlugin(kernel, config) {
+    var _config$delay;
+    var _this;
+    _classCallCheck(this, AutoCompletePlugin);
+    _this = _super.call(this);
+    _defineProperty(_assertThisInitialized(_this), "lastCursorPosition", null);
+    _defineProperty(_assertThisInitialized(_this), "cursorStableTimer", null);
+    _defineProperty(_assertThisInitialized(_this), "abortController", null);
+    _defineProperty(_assertThisInitialized(_this), "delay", void 0);
+    _defineProperty(_assertThisInitialized(_this), "placeholderNodes", []);
+    _defineProperty(_assertThisInitialized(_this), "currentSuggestion", null);
+    _defineProperty(_assertThisInitialized(_this), "markdownService", null);
+    _this.kernel = kernel;
+    _this.config = config;
+    _this.delay = (_config$delay = config === null || config === void 0 ? void 0 : config.delay) !== null && _config$delay !== void 0 ? _config$delay : 1000;
+    kernel.registerNodes([PlaceholderNode, PlaceholderBlockNode]);
+    if (config !== null && config !== void 0 && config.theme) {
+      kernel.registerThemes(config === null || config === void 0 ? void 0 : config.theme);
+    }
+    return _this;
+  }
+  _createClass(AutoCompletePlugin, [{
+    key: "onInit",
+    value: function onInit(editor) {
+      var _this2 = this;
+      this.markdownService = this.kernel.requireService(IMarkdownShortCutService);
+      if (!this.markdownService) {
+        console.error('MarkdownShortCutService is required for AutoCompletePlugin');
+        return;
+      }
+      this.register(editor.registerUpdateListener(function (_ref) {
+        var editorState = _ref.editorState;
+        editorState.read(function () {
+          if (editor.isComposing()) {
+            return;
+          }
+          var selection = $getSelection();
+          if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+            _this2.clearTimer();
+            _this2.clearPlaceholderNodes(editor);
+            return;
+          }
+          var currentPosition = {
+            key: selection.anchor.key,
+            offset: selection.anchor.offset,
+            type: selection.anchor.type
+          };
+
+          // Check if cursor position has changed
+          if (_this2.hasPositionChanged(currentPosition)) {
+            _this2.clearTimer();
+            _this2.clearPlaceholderNodes(editor);
+            _this2.abortController = new AbortController();
+            // Start new timer for cursor stability check
+            _this2.cursorStableTimer = window.setTimeout(function () {
+              _this2.handleCursorStable(editor, currentPosition);
+            }, _this2.delay);
+          }
+        });
+      }));
+
+      // Register Tab key handler to apply suggestion
+      this.register(editor.registerCommand(KEY_TAB_COMMAND, function (event) {
+        if (_this2.currentSuggestion) {
+          event === null || event === void 0 || event.preventDefault();
+          _this2.applySuggestion(editor);
+          return true;
+        }
+        return false;
+      }, COMMAND_PRIORITY_HIGH));
+      this.register(editor.registerCommand(KEY_ESCAPE_COMMAND, function (event) {
+        if (_this2.currentSuggestion) {
+          event === null || event === void 0 || event.preventDefault();
+          _this2.clearPlaceholderNodes(editor);
+          _this2.currentSuggestion = null;
+          return true;
+        }
+        return false;
+      }, COMMAND_PRIORITY_CRITICAL));
+
+      // Register text content listener to clear placeholder on any other input
+      this.register(editor.registerTextContentListener(function () {
+        // If user types anything while placeholder is visible, clear it
+        if (_this2.placeholderNodes.length > 0) {
+          _this2.clearPlaceholderNodes(editor);
+        }
+      }));
+    }
+  }, {
+    key: "hasPositionChanged",
+    value: function hasPositionChanged(currentPosition) {
+      if (!this.lastCursorPosition) {
+        return true;
+      }
+      return this.lastCursorPosition.key !== currentPosition.key || this.lastCursorPosition.offset !== currentPosition.offset || this.lastCursorPosition.type !== currentPosition.type;
+    }
+  }, {
+    key: "clearTimer",
+    value: function clearTimer() {
+      var _this$abortController;
+      (_this$abortController = this.abortController) === null || _this$abortController === void 0 || _this$abortController.abort('use cancel');
+      if (this.cursorStableTimer) {
+        clearTimeout(this.cursorStableTimer);
+        this.cursorStableTimer = null;
+      }
+    }
+  }, {
+    key: "handleCursorStable",
+    value: function handleCursorStable(editor, position) {
+      var _this3 = this;
+      editor.read(function () {
+        var _this3$config;
+        if (editor.isComposing()) {
+          return;
+        }
+        if (!_this3.abortController || _this3.abortController.signal.aborted) {
+          return;
+        }
+        var selection = $getSelection();
+        if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+          return;
+        }
+
+        // Verify cursor is still at the same position
+        var currentPosition = {
+          key: selection.anchor.key,
+          offset: selection.anchor.offset,
+          type: selection.anchor.type
+        };
+        if (!_this3.isSamePosition(position, currentPosition)) {
+          return;
+        }
+
+        // Avoid duplicate triggers for the same position
+        if (_this3.lastCursorPosition && _this3.isSamePosition(position, _this3.lastCursorPosition)) {
+          return;
+        }
+        _this3.lastCursorPosition = currentPosition;
+
+        // Get context around cursor for auto-complete
+        var anchorNode = selection.anchor.getNode();
+        var selectionType = 'unknown';
+
+        // Get text before cursor in the entire paragraph
+        var textRet = _this3.getTextBeforeCursor(selection);
+        selectionType = anchorNode.getType();
+
+        // Trigger auto-complete callback if provided
+        if ((_this3$config = _this3.config) !== null && _this3$config !== void 0 && _this3$config.onAutoComplete) {
+          _this3.config.onAutoComplete({
+            abortSignal: _this3.abortController.signal,
+            afterText: textRet.textAfter,
+            editor: _this3.kernel,
+            input: textRet.textBefore,
+            selectionType: selectionType
+          }).then(function (result) {
+            if (result) {
+              // Store suggestion and show placeholder
+              _this3.currentSuggestion = result;
+              _this3.showPlaceholderNodes(editor, result);
+              console.log('Auto-complete triggered:', {
+                afterText: textRet.textAfter,
+                input: textRet.textBefore,
+                position: currentPosition,
+                result: result,
+                selectionType: selectionType
+              });
+            } else {
+              _this3.clearPlaceholderNodes(editor);
+            }
+          });
+        }
+      });
+    }
+  }, {
+    key: "getTextBeforeCursor",
+    value: function getTextBeforeCursor(selection) {
+      var ret = {
+        textAfter: '',
+        textBefore: ''
+      };
+      var anchorNode = selection.anchor.getNode();
+      var anchorOffset = selection.anchor.offset;
+
+      // Find the paragraph or root container
+      var paragraphNode = anchorNode;
+      while (paragraphNode && paragraphNode.isInline()) {
+        var parent = paragraphNode.getParent();
+        if (!parent) break;
+        paragraphNode = parent;
+      }
+      if (!paragraphNode) {
+        return ret;
+      }
+      console.info('Paragraph Node Type:', paragraphNode, anchorNode);
+      var founded = false;
+
+      // Collect all text before cursor in the paragraph
+      var collectTextBeforeCursor = function collectTextBeforeCursor(node, targetNode, targetOffset) {
+        if (node === targetNode) {
+          founded = true;
+          // We've reached the target node, get text up to the cursor position
+          if (node.getTextContent) {
+            var nodeText = node.getTextContent();
+            return {
+              text: nodeText.slice(0, targetOffset),
+              textAfter: nodeText.slice(targetOffset)
+            };
+          }
+          return {
+            text: '',
+            textAfter: ''
+          };
+        }
+        var collectedText = '';
+        var collectedTextAfter = '';
+
+        // If this is a text node, collect all its text
+        if (node.getTextContent && node.getType() === 'text') {
+          if (founded) {
+            collectedTextAfter += node.getTextContent();
+          } else {
+            collectedText += node.getTextContent();
+          }
+        }
+
+        // Recursively check children
+        if (node.getChildren) {
+          var children = node.getChildren();
+          var _iterator = _createForOfIteratorHelper(children),
+            _step;
+          try {
+            for (_iterator.s(); !(_step = _iterator.n()).done;) {
+              var child = _step.value;
+              var _result = collectTextBeforeCursor(child, targetNode, targetOffset);
+              collectedTextAfter += _result.textAfter;
+              collectedText += _result.text;
+            }
+          } catch (err) {
+            _iterator.e(err);
+          } finally {
+            _iterator.f();
+          }
+        }
+        return {
+          text: collectedText,
+          textAfter: collectedTextAfter
+        };
+      };
+      var result = collectTextBeforeCursor(paragraphNode, anchorNode, anchorOffset);
+      return {
+        textAfter: result.textAfter,
+        textBefore: result.text
+      };
+    }
+  }, {
+    key: "showPlaceholderNodes",
+    value: function showPlaceholderNodes(editor, suggestion) {
+      var _this4 = this;
+      // this.clearPlaceholderNodes(editor); // Remove existing placeholder first
+
+      editor.update(function () {
+        var selection = $getSelection();
+        if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+          console.warn('No valid selection for placeholder');
+          return;
+        }
+        if (!_this4.markdownService) {
+          console.warn('No valid markdown service for placeholder');
+          return;
+        }
+        var nodes = _this4.markdownService.parseMarkdownToLexical(suggestion);
+        if (nodes.children[0]) {
+          var firstChild = nodes.children[0];
+          // Do something with the first child node
+          // @ts-expect-error not error
+          var oldChildren = firstChild.children;
+          // @ts-expect-error not error
+          firstChild.children = [{
+            children: oldChildren,
+            type: 'PlaceholderInline'
+          }];
+        }
+        for (var i = 1; i < nodes.children.length; i++) {
+          var child = nodes.children[i];
+          nodes.children[i] = {
+            // @ts-expect-error not error
+            children: [child],
+            type: 'PlaceholderBlock'
+          };
+        }
+
+        // 创建标记节点并保存其key
+        var markerNode = INodeHelper.createTextNode("\u200B"); // 使用零宽空格
+        nodes.children.push({
+          // @ts-expect-error not error
+          children: [markerNode],
+          name: '',
+          type: 'PlaceholderInline'
+        });
+        var saveSel = selection.clone();
+        _this4.markdownService.insertIRootNode(editor, nodes, selection);
+        $setSelection(saveSel);
+      });
+    }
+  }, {
+    key: "clearPlaceholderNodes",
+    value: function clearPlaceholderNodes(editor) {
+      editor.update(function () {
+        editor.getEditorState()._nodeMap.forEach(function (node) {
+          var selection = $getSelection();
+          var clonedSelection = selection ? selection.clone() : null;
+          if (node.isAttached() && ['PlaceholderBlock', 'PlaceholderInline'].includes(node.getType())) {
+            if (node.getType() === 'PlaceholderInline' && node.getTextContent().includes("\u200B") && node.getPreviousSibling() === null) {
+              var _node$getParent;
+              while (node.getNextSibling()) {
+                var next = node.getNextSibling();
+                if (next) {
+                  $insertNodes([next]);
+                }
+              }
+              $setSelection(clonedSelection);
+              (_node$getParent = node.getParent()) === null || _node$getParent === void 0 || _node$getParent.remove();
+              return;
+            }
+            node.remove();
+          }
+        });
+      });
+    }
+  }, {
+    key: "applySuggestion",
+    value: function applySuggestion(editor) {
+      var _this5 = this;
+      if (!this.currentSuggestion) {
+        return;
+      }
+      var markdown = this.currentSuggestion;
+      editor.update(function () {
+        var selection = $getSelection();
+        if (!$isRangeSelection(selection) || !selection.isCollapsed() || !_this5.markdownService) {
+          return;
+        }
+        editor.getEditorState()._nodeMap.forEach(function (node) {
+          if (node.isAttached() && ['PlaceholderBlock', 'PlaceholderInline'].includes(node.getType())) {
+            node.remove();
+          }
+        });
+        var nodes = _this5.markdownService.parseMarkdownToLexical(markdown);
+        _this5.markdownService.insertIRootNode(editor, nodes, selection);
+        _this5.clearPlaceholderNodes(editor);
+        _this5.currentSuggestion = null;
+      });
+    }
+  }, {
+    key: "isSamePosition",
+    value: function isSamePosition(pos1, pos2) {
+      return pos1.key === pos2.key && pos1.offset === pos2.offset && pos1.type === pos2.type;
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.clearTimer();
+      // Note: clearPlaceholderNodes needs editor instance, so it should be called before destroy
+      this.placeholderNodes = []; // Clear references
+      _get(_getPrototypeOf(AutoCompletePlugin.prototype), "destroy", this).call(this);
+    }
+  }]);
+  return AutoCompletePlugin;
+}(KernelPlugin), _defineProperty(_class, "pluginName", 'AutoCompletePlugin'), _class);

package/es/plugins/auto-complete/react/ReactAutoCompletePlugin.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+import { ReactAutoCompletePluginProps } from './type';
+declare const ReactAutoCompletePlugin: FC<ReactAutoCompletePluginProps>;
+export default ReactAutoCompletePlugin;

package/es/plugins/auto-complete/react/ReactAutoCompletePlugin.js

@@ -0,0 +1,35 @@
+'use client';
+
+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 { useLayoutEffect } from 'react';
+import { useLexicalComposerContext } from "../../../editor-kernel/react/react-context";
+import { AutoCompletePlugin } from "../plugin";
+import { useStyles } from "./style";
+var ReactAutoCompletePlugin = function ReactAutoCompletePlugin(_ref) {
+  var onAutoComplete = _ref.onAutoComplete,
+    delay = _ref.delay;
+  var _useLexicalComposerCo = useLexicalComposerContext(),
+    _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles;
+  useLayoutEffect(function () {
+    editor.registerPlugin(AutoCompletePlugin, {
+      delay: delay,
+      onAutoComplete: onAutoComplete,
+      theme: {
+        placeholderBlock: cx(styles.placeholderBlock),
+        placeholderInline: cx(styles.placeholderInline)
+      }
+    });
+  }, []);
+  return null;
+};
+ReactAutoCompletePlugin.displayName = 'ReactAutoCompletePlugin';
+export default ReactAutoCompletePlugin;

package/es/plugins/auto-complete/react/index.d.ts

@@ -0,0 +1 @@
+export { default as ReactAutoCompletePlugin } from './ReactAutoCompletePlugin';

package/es/plugins/auto-complete/react/index.js

@@ -0,0 +1 @@
+export { default as ReactAutoCompletePlugin } from "./ReactAutoCompletePlugin";

package/es/plugins/auto-complete/react/style.d.ts

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

package/es/plugins/auto-complete/react/style.js

@@ -0,0 +1,10 @@
+var _templateObject, _templateObject2;
+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;
+  return {
+    placeholderBlock: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    opacity: 0.4;\n  "]))),
+    placeholderInline: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    opacity: 0.4;\n  "])))
+  };
+});

package/es/plugins/auto-complete/react/type.d.ts

@@ -0,0 +1,11 @@
+import { IEditor } from "../../../types";
+export interface ReactAutoCompletePluginProps {
+    delay?: number;
+    onAutoComplete?: (opt: {
+        abortSignal: AbortSignal;
+        afterText: string;
+        editor: IEditor;
+        input: string;
+        selectionType: string;
+    }) => Promise<string | null>;
+}

package/es/plugins/auto-complete/react/type.js

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

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

@@ -332,7 +332,6 @@ export var CommonPlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
         // editor.read(() => {
         var selection = $getSelection();
         if (!$isRangeSelection(selection)) {
-          console.info('---------?');
           return false;
         }
 

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

@@ -331,6 +331,9 @@ export function registerLastElement(editor) {
   var isProcessing = false;
   return editor.registerUpdateListener(function (_ref3) {
     var dirtyElements = _ref3.dirtyElements;
+    if (!editor.isEditable()) {
+      return;
+    }
     // Only process when root node or its direct children have changes
     if (!dirtyElements.has('root') && !Array.from(dirtyElements.keys()).some(function (key) {
       var _node$getParent;

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

@@ -32,6 +32,7 @@ var ReactPlainText = /*#__PURE__*/memo(function (_ref) {
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? {} : _ref$theme,
     onChange = _ref.onChange,
+    editable = _ref.editable,
     className = _ref.className,
     variant = _ref.variant,
     _ref$enableHotkey = _ref.enableHotkey,
@@ -99,7 +100,7 @@ var ReactPlainText = /*#__PURE__*/memo(function (_ref) {
     var container = editorContainerRef.current;
     if (container && !isInitialized) {
       // Initialize the editor
-      editor.setRootElement(container);
+      editor.setRootElement(container, editable);
 
       // Set initial document content only once
       editor.setDocument(type, content);
@@ -128,6 +129,12 @@ var ReactPlainText = /*#__PURE__*/memo(function (_ref) {
       }
     });
   }, [editor, type, content, onChange, onTextChange, isInitialized]);
+  useEffect(function () {
+    if (!isInitialized) return;
+    if (typeof editable === 'boolean') {
+      editor.setEditable(editable);
+    }
+  }, [isInitialized, editable]);
   useEffect(function () {
     if (editor && onPressEnter) {
       return editor.registerHighCommand(KEY_DOWN_COMMAND, function (event) {
@@ -190,7 +197,7 @@ var ReactPlainText = /*#__PURE__*/memo(function (_ref) {
     className: cx(styles.root, markdownOption === true && styles.variant, markdownOption === false && styles.noStyle, markdownOption === false && styles.noHeader, _typeof(markdownOption) === 'object' && markdownOption.header === true && styles.header, _typeof(markdownOption) === 'object' && markdownOption.header === false && styles.noHeader, _typeof(markdownOption) === 'object' && markdownOption.code === true && styles.code, _typeof(markdownOption) === 'object' && markdownOption.quote === true && styles.blockquote, className),
     style: style,
     children: [/*#__PURE__*/_jsx("div", {
-      contentEditable: true,
+      contentEditable: editable !== null && editable !== void 0 ? editable : true,
       onBlur: handleBlur,
       onCompositionEnd: handleCompositionEnd,
       onCompositionStart: handleCompositionStart,

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-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 __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\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

@@ -11,6 +11,7 @@ export interface ReactPlainTextProps {
     autoFocus?: boolean;
     children: ReactElement<ReactEditorContentProps>;
     className?: string;
+    editable?: boolean;
     enableHotkey?: boolean;
     /**
      * Enable automatic markdown formatting for pasted content

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

@@ -1,6 +1,8 @@
 import { LexicalEditor } from 'lexical';
 export declare const INSERT_IMAGE_COMMAND: import("lexical").LexicalCommand<{
+    block?: boolean | undefined;
     file: File;
+    maxWidth?: number | undefined;
     range?: Range | null | undefined;
 }>;
 export declare function registerImageCommand(editor: LexicalEditor, handleUpload: (file: File) => Promise<{

package/es/plugins/image/command/index.js

@@ -1,6 +1,7 @@
 import { $wrapNodeInElement } from '@lexical/utils';
 import { $createParagraphNode, $createRangeSelection, $insertNodes, $isRootOrShadowRoot, $setSelection, COMMAND_PRIORITY_EDITOR, createCommand } from 'lexical';
 import { createDebugLogger } from "../../../utils/debug";
+import { $createBlockImageNode } from "../node/block-image-node";
 import { $createImageNode } from "../node/image-node";
 var logger = createDebugLogger('plugin', 'image');
 export var INSERT_IMAGE_COMMAND = createCommand('INSERT_IMAGE_COMMAND');
@@ -10,7 +11,9 @@ function isImageFile(file) {
 export function registerImageCommand(editor, handleUpload) {
   return editor.registerCommand(INSERT_IMAGE_COMMAND, function (payload) {
     var file = payload.file,
-      range = payload.range;
+      range = payload.range,
+      block = payload.block,
+      maxWidth = payload.maxWidth;
     if (!isImageFile(file)) {
       return false; // Not an image file
     }
@@ -23,8 +26,13 @@ export function registerImageCommand(editor, handleUpload) {
         }
         $setSelection(rangeSelection);
       }
-      var imageNode = $createImageNode({
+      var imageNode = block ? $createBlockImageNode({
         altText: file.name,
+        maxWidth: maxWidth || 800,
+        src: placeholderURL
+      }) : $createImageNode({
+        altText: file.name,
+        maxWidth: maxWidth || 800,
         src: placeholderURL
       });
       $insertNodes([imageNode]); // Insert a zero-width space to ensure the image is not the last child

package/es/plugins/image/node/basie-image-node.d.ts

@@ -37,6 +37,7 @@ export declare class BaseImageNode extends DecoratorNode<any> {
     exportJSON(): SerializedImageNode;
     setWidthAndHeight(width: 'inherit' | number, height: 'inherit' | number): void;
     setShowCaption(showCaption: boolean): void;
+    isInline(): boolean;
     createDOM(config: EditorConfig): HTMLElement;
     updateDOM(): false;
     getSrc(): string;

package/es/plugins/image/node/basie-image-node.js

@@ -96,6 +96,11 @@ export var BaseImageNode = /*#__PURE__*/function (_DecoratorNode) {
       var writable = this.getWritable();
       writable.__showCaption = showCaption;
     }
+  }, {
+    key: "isInline",
+    value: function isInline() {
+      return true;
+    }
 
     // View
   }, {