@lobehub/editor 1.24.0 → 1.26.0

package/README.md

@@ -48,6 +48,12 @@ A modern, extensible rich text editor built on Meta's Lexical framework with dua
   - [Setup](#setup)
   - [Available Scripts](#available-scripts)
   - [Debug Environment Variables](#debug-environment-variables)
+  - [Project Architecture](#project-architecture)
+- [🤝 Contributing](#-contributing)
+- [🔗 Links](#-links)
+  - [More Products](#more-products)
+  - [Design Resources](#design-resources)
+  - [Development Resources](#development-resources)
 
 ####
 
@@ -82,7 +88,7 @@ $ pnpm add @lobehub/editor
 
 <div align="right">
 
-[![\][back-to-top\]](#readme-top)
+\[!\[][back-to-top\]](#readme-top)
 
 </div>
 
@@ -231,7 +237,7 @@ editor.dispatchCommand(INSERT_HEADING_COMMAND, { tag: 'h2' });
 
 <div align="right">
 
-[![\][back-to-top\]](#readme-top)
+\[!\[][back-to-top\]](#readme-top)
 
 </div>
 
@@ -390,7 +396,7 @@ CLEAR_FORMAT_COMMAND;
 
 <div align="right">
 
-[![\][back-to-top\]](#readme-top)
+\[!\[][back-to-top\]](#readme-top)
 
 </div>
 
@@ -483,7 +489,6 @@ DEBUG=lobe-editor:plugin:*
 DEBUG=lobe-editor:service:*
 ```
 
-
 ### Project Architecture
 
 ```

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

@@ -22,6 +22,7 @@ export declare class Kernel extends EventEmitter implements IEditorKernel {
     private editor?;
     constructor();
     getHistoryState(): HistoryState;
+    isEditable(): boolean;
     private detectDevelopmentMode;
     /**
      * Globally enable or disable hot reload mode for all kernel instances
@@ -35,7 +36,8 @@ export declare class Kernel extends EventEmitter implements IEditorKernel {
     getLexicalEditor(): LexicalEditor | null;
     destroy(): void;
     getRootElement(): HTMLElement | null;
-    setRootElement(dom: HTMLElement): LexicalEditor;
+    setRootElement(dom: HTMLElement, editable?: boolean): LexicalEditor;
+    setEditable(editable: boolean): void;
     initNodeEditor(): LexicalEditor;
     setDocument(type: string, content: any): void;
     focus(): void;

package/es/editor-kernel/kernel.js

@@ -64,6 +64,12 @@ export var Kernel = /*#__PURE__*/function (_EventEmitter) {
     value: function getHistoryState() {
       return this.historyState;
     }
+  }, {
+    key: "isEditable",
+    value: function isEditable() {
+      var _this$editor;
+      return ((_this$editor = this.editor) === null || _this$editor === void 0 ? void 0 : _this$editor.isEditable()) || false;
+    }
   }, {
     key: "detectDevelopmentMode",
     value: function detectDevelopmentMode() {
@@ -119,9 +125,9 @@ export var Kernel = /*#__PURE__*/function (_EventEmitter) {
   }, {
     key: "destroy",
     value: function destroy() {
-      var _this$editor;
+      var _this$editor2;
       this.logger.info("\uD83D\uDDD1\uFE0F Destroying editor with ".concat(this.pluginsInstances.length, " plugins"));
-      (_this$editor = this.editor) === null || _this$editor === void 0 || _this$editor.setEditorState(createEmptyEditorState());
+      (_this$editor2 = this.editor) === null || _this$editor2 === void 0 || _this$editor2.setEditorState(createEmptyEditorState());
       this.dataTypeMap.clear();
       this.pluginsInstances.forEach(function (plugin) {
         if (plugin.destroy) {
@@ -138,13 +144,14 @@ export var Kernel = /*#__PURE__*/function (_EventEmitter) {
   }, {
     key: "getRootElement",
     value: function getRootElement() {
-      var _this$editor2;
-      return ((_this$editor2 = this.editor) === null || _this$editor2 === void 0 ? void 0 : _this$editor2.getRootElement()) || null;
+      var _this$editor3;
+      return ((_this$editor3 = this.editor) === null || _this$editor3 === void 0 ? void 0 : _this$editor3.getRootElement()) || null;
     }
   }, {
     key: "setRootElement",
     value: function setRootElement(dom) {
       var _this2 = this;
+      var editable = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
       // Check if editor is already initialized to prevent re-initialization
       if (this.editor) {
         this.logger.warn('[Editor] Editor is already initialized, updating root element only');
@@ -173,6 +180,7 @@ export var Kernel = /*#__PURE__*/function (_EventEmitter) {
       var editor = this.editor = createEditor({
         // @ts-expect-error Inject into lexical editor instance
         __kernel: this,
+        editable: editable,
         namespace: 'lobehub',
         nodes: this.nodes,
         onError: function onError(error) {
@@ -191,6 +199,17 @@ export var Kernel = /*#__PURE__*/function (_EventEmitter) {
       this.emit('initialized', editor);
       return this.editor;
     }
+  }, {
+    key: "setEditable",
+    value: function setEditable(editable) {
+      if (!this.editor) {
+        this.logger.error('❌ Editor not initialized');
+        throw new Error("Editor is not initialized.");
+      }
+      this.editor.setEditable(editable);
+      this.emit('editableChange', editable);
+      this.logger.debug("\u270F\uFE0F Editor editable set to ".concat(editable));
+    }
   }, {
     key: "initNodeEditor",
     value: function initNodeEditor() {
@@ -253,14 +272,14 @@ export var Kernel = /*#__PURE__*/function (_EventEmitter) {
   }, {
     key: "focus",
     value: function focus() {
-      var _this$editor3;
-      (_this$editor3 = this.editor) === null || _this$editor3 === void 0 || _this$editor3.focus();
+      var _this$editor4;
+      (_this$editor4 = this.editor) === null || _this$editor4 === void 0 || _this$editor4.focus();
     }
   }, {
     key: "blur",
     value: function blur() {
-      var _this$editor4;
-      (_this$editor4 = this.editor) === null || _this$editor4 === void 0 || _this$editor4.blur();
+      var _this$editor5;
+      (_this$editor5 = this.editor) === null || _this$editor5 === void 0 || _this$editor5.blur();
     }
   }, {
     key: "getDocument",

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

@@ -0,0 +1,3 @@
+export declare const useEditable: () => {
+    editable: boolean;
+};

package/es/editor-kernel/react/useEditable.js

@@ -0,0 +1,32 @@
+'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 { useEffect, useState } from 'react';
+import { useLexicalComposerContext } from "./react-context";
+export var useEditable = function useEditable() {
+  var _useLexicalComposerCo = useLexicalComposerContext(),
+    _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  // Don't render portal on server side
+  var _useState = useState(editor.isEditable()),
+    _useState2 = _slicedToArray(_useState, 2),
+    editable = _useState2[0],
+    setEditable = _useState2[1];
+  useEffect(function () {
+    var updateEditable = function updateEditable(newEditable) {
+      setEditable(newEditable);
+    };
+    editor.on('editableChange', updateEditable);
+    return function () {
+      editor.off('editableChange', updateEditable);
+    };
+  }, [editor]);
+  return {
+    editable: editable
+  };
+};

package/es/index.d.ts

@@ -1,5 +1,6 @@
 export * from './editor-kernel';
 export * from './editor-kernel/react';
+export * from './plugins/auto-complete';
 export * from './plugins/code';
 export * from './plugins/codeblock';
 export * from './plugins/common';
@@ -14,6 +15,7 @@ export * from './plugins/math';
 export * from './plugins/mention';
 export * from './plugins/slash';
 export * from './plugins/table';
+export * from './plugins/toolbar';
 export * from './plugins/upload';
 export type { IEditor } from './types';
 export * from './types/hotkey';

package/es/index.js

@@ -1,5 +1,6 @@
 export * from "./editor-kernel";
 export * from "./editor-kernel/react";
+export * from "./plugins/auto-complete";
 export * from "./plugins/code";
 export * from "./plugins/codeblock";
 export * from "./plugins/common";
@@ -14,6 +15,7 @@ export * from "./plugins/math";
 export * from "./plugins/mention";
 export * from "./plugins/slash";
 export * from "./plugins/table";
+export * from "./plugins/toolbar";
 export * from "./plugins/upload";
 // Hotkey utilities
 export * from "./types/hotkey";

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

@@ -0,0 +1,2 @@
+export { AutoCompletePlugin } from './plugin';
+export { ReactAutoCompletePlugin } from './react';

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

@@ -0,0 +1,2 @@
+export { AutoCompletePlugin } from "./plugin";
+export { ReactAutoCompletePlugin } from "./react";

package/es/plugins/auto-complete/node/placeholderNode.d.ts

@@ -0,0 +1,30 @@
+import { EditorConfig, ElementNode, SerializedElementNode } from 'lexical';
+export type SerializedPlaceholderNode = SerializedElementNode;
+export declare class PlaceholderNode extends ElementNode {
+    static getType(): string;
+    static clone(node: PlaceholderNode): PlaceholderNode;
+    static importJSON(serializedNode: SerializedPlaceholderNode): PlaceholderNode;
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(prevNode: unknown, dom: HTMLElement, config: EditorConfig): boolean;
+    canBeEmpty(): boolean;
+    isCardLike(): boolean;
+    isInline(): boolean;
+    canIndent(): boolean;
+    canInsertTextBefore(): boolean;
+    canInsertTextAfter(): boolean;
+}
+export declare class PlaceholderBlockNode extends ElementNode {
+    static getType(): string;
+    static clone(node: PlaceholderBlockNode): PlaceholderBlockNode;
+    static importJSON(serializedNode: SerializedPlaceholderNode): PlaceholderBlockNode;
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(prevNode: unknown, dom: HTMLElement, config: EditorConfig): boolean;
+    canBeEmpty(): boolean;
+    isCardLike(): boolean;
+    isInline(): boolean;
+    canIndent(): boolean;
+    canInsertTextBefore(): boolean;
+    canInsertTextAfter(): boolean;
+}
+export declare function $createPlaceholderNode(): PlaceholderNode;
+export declare function $createPlaceholderBlockNode(): PlaceholderBlockNode;

package/es/plugins/auto-complete/node/placeholderNode.js

@@ -0,0 +1,171 @@
+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 _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _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); }
+import { addClassNamesToElement } from '@lexical/utils';
+import { $applyNodeReplacement, ElementNode } from 'lexical';
+export var PlaceholderNode = /*#__PURE__*/function (_ElementNode) {
+  _inherits(PlaceholderNode, _ElementNode);
+  var _super = _createSuper(PlaceholderNode);
+  function PlaceholderNode() {
+    _classCallCheck(this, PlaceholderNode);
+    return _super.apply(this, arguments);
+  }
+  _createClass(PlaceholderNode, [{
+    key: "createDOM",
+    value: function createDOM(config) {
+      var element = document.createElement('span');
+      // eslint-disable-next-line unicorn/prefer-dom-node-dataset
+      element.setAttribute('data-lexical-key', this.getKey());
+      addClassNamesToElement(element, config.theme.placeholderInline);
+      return element;
+    }
+  }, {
+    key: "updateDOM",
+    value: function updateDOM(prevNode, dom, config) {
+      // Update the class names if theme has changed
+      var prevTheme = prevNode ? prevNode : null;
+      if (prevTheme !== this) {
+        addClassNamesToElement(dom, config.theme.placeholderInline);
+      }
+      return false;
+    }
+  }, {
+    key: "canBeEmpty",
+    value: function canBeEmpty() {
+      return false;
+    }
+  }, {
+    key: "isCardLike",
+    value: function isCardLike() {
+      return true;
+    }
+  }, {
+    key: "isInline",
+    value: function isInline() {
+      return true;
+    }
+  }, {
+    key: "canIndent",
+    value: function canIndent() {
+      return false;
+    }
+  }, {
+    key: "canInsertTextBefore",
+    value: function canInsertTextBefore() {
+      return true;
+    }
+  }, {
+    key: "canInsertTextAfter",
+    value: function canInsertTextAfter() {
+      return true;
+    }
+  }], [{
+    key: "getType",
+    value: function getType() {
+      return 'PlaceholderInline';
+    }
+  }, {
+    key: "clone",
+    value: function clone(node) {
+      return new PlaceholderNode(node.__key);
+    }
+  }, {
+    key: "importJSON",
+    value: function importJSON(serializedNode) {
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      return $createPlaceholderNode().updateFromJSON(serializedNode);
+    }
+  }]);
+  return PlaceholderNode;
+}(ElementNode);
+export var PlaceholderBlockNode = /*#__PURE__*/function (_ElementNode2) {
+  _inherits(PlaceholderBlockNode, _ElementNode2);
+  var _super2 = _createSuper(PlaceholderBlockNode);
+  function PlaceholderBlockNode() {
+    _classCallCheck(this, PlaceholderBlockNode);
+    return _super2.apply(this, arguments);
+  }
+  _createClass(PlaceholderBlockNode, [{
+    key: "createDOM",
+    value: function createDOM(config) {
+      var element = document.createElement('div');
+      // eslint-disable-next-line unicorn/prefer-dom-node-dataset
+      element.setAttribute('data-lexical-key', this.getKey());
+      addClassNamesToElement(element, config.theme.placeholderBlock);
+      return element;
+    }
+  }, {
+    key: "updateDOM",
+    value: function updateDOM(prevNode, dom, config) {
+      // Update the class names if theme has changed
+      var prevTheme = prevNode ? prevNode : null;
+      if (prevTheme !== this) {
+        addClassNamesToElement(dom, config.theme.placeholderBlock);
+      }
+      return false;
+    }
+  }, {
+    key: "canBeEmpty",
+    value: function canBeEmpty() {
+      return false;
+    }
+  }, {
+    key: "isCardLike",
+    value: function isCardLike() {
+      return true;
+    }
+  }, {
+    key: "isInline",
+    value: function isInline() {
+      return false;
+    }
+  }, {
+    key: "canIndent",
+    value: function canIndent() {
+      return false;
+    }
+  }, {
+    key: "canInsertTextBefore",
+    value: function canInsertTextBefore() {
+      return false;
+    }
+  }, {
+    key: "canInsertTextAfter",
+    value: function canInsertTextAfter() {
+      return false;
+    }
+  }], [{
+    key: "getType",
+    value: function getType() {
+      return 'PlaceholderBlock';
+    }
+  }, {
+    key: "clone",
+    value: function clone(node) {
+      return new PlaceholderBlockNode(node.__key);
+    }
+  }, {
+    key: "importJSON",
+    value: function importJSON(serializedNode) {
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      return $createPlaceholderBlockNode().updateFromJSON(serializedNode);
+    }
+  }]);
+  return PlaceholderBlockNode;
+}(ElementNode);
+export function $createPlaceholderNode() {
+  return $applyNodeReplacement(new PlaceholderNode());
+}
+export function $createPlaceholderBlockNode() {
+  return $applyNodeReplacement(new PlaceholderBlockNode());
+}

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

@@ -0,0 +1,17 @@
+import { IEditor, IEditorPluginConstructor } from "../../../types";
+export interface AutoCompletePluginOptions {
+    /** Delay in milliseconds before triggering auto-complete (default: 1000ms) */
+    delay?: number;
+    onAutoComplete?: (opt: {
+        abortSignal: AbortSignal;
+        afterText: string;
+        editor: IEditor;
+        input: string;
+        selectionType: string;
+    }) => Promise<string | null>;
+    theme?: {
+        placeholderBlock?: string;
+        placeholderInline?: string;
+    };
+}
+export declare const AutoCompletePlugin: IEditorPluginConstructor<AutoCompletePluginOptions>;