@lobehub/editor 1.4.1 → 1.4.3

package/README.md

@@ -99,20 +99,21 @@ The simplest way to get started with a fully-featured editor:
 
 ```tsx
 import {
+  INSERT_HEADING_COMMAND,
   ReactCodeblockPlugin,
   ReactImagePlugin,
   ReactLinkPlugin,
   ReactListPlugin,
 } from '@lobehub/editor';
-import { Editor } from '@lobehub/editor/react';
+import { Editor, useEditor } from '@lobehub/editor/react';
 
 export default function MyEditor() {
-  const editorRef = Editor.useEditor();
+  const editor = useEditor();
 
   return (
     <Editor
       placeholder="Start typing..."
-      editorRef={editorRef}
+      editor={editor}
       plugins={[ReactListPlugin, ReactLinkPlugin, ReactImagePlugin, ReactCodeblockPlugin]}
       slashOption={{
         items: [
@@ -143,19 +144,20 @@ Add more functionality with built-in plugins:
 ```tsx
 import {
   INSERT_FILE_COMMAND,
+  INSERT_MENTION_COMMAND,
   INSERT_TABLE_COMMAND,
   ReactFilePlugin,
   ReactHRPlugin,
   ReactTablePlugin,
 } from '@lobehub/editor';
-import { Editor } from '@lobehub/editor/react';
+import { Editor, useEditor } from '@lobehub/editor/react';
 
 export default function AdvancedEditor() {
-  const editorRef = Editor.useEditor();
+  const editor = useEditor();
 
   return (
     <Editor
-      editorRef={editorRef}
+      editor={editor}
       plugins={[
         ReactTablePlugin,
         ReactHRPlugin,
@@ -298,8 +300,8 @@ All plugins follow a **dual-architecture design**:
 #### Utility Hooks
 
 ```tsx
-// Get editor reference
-const editorRef = Editor.useEditor();
+// Get editor instance
+const editor = useEditor();
 
 // Helper for plugin configuration
 const PluginWithConfig = Editor.withProps(ReactFilePlugin, {

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

@@ -72,4 +72,7 @@ export declare class Kernel extends EventEmitter implements IEditorKernel {
     updateTheme(key: string, value: string | Record<string, string>): void;
     registerLocale(locale: Partial<Record<keyof ILocaleKeys, string>>): void;
     t<K extends keyof ILocaleKeys>(key: K, params?: Record<string, any>): string;
+    get isEmpty(): boolean;
+    get isSelected(): boolean;
+    cleanDocument(): void;
 }

package/es/editor-kernel/kernel.js

@@ -20,9 +20,10 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 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 EventEmitter from 'eventemitter3';
-import { createEditor } from 'lexical';
+import { $getSelection, $isRangeSelection, createEditor } from 'lexical';
 import { get, merge, template, templateSettings } from 'lodash-es';
 import defaultLocale from "../locale";
+import { $isRootTextContentEmpty } from "../plugins/common/utils";
 import { registerEvent } from "./event";
 import { createEmptyEditorState } from "./utils";
 templateSettings.interpolate = /{{([\S\s]+?)}}/g;
@@ -421,6 +422,36 @@ export var Kernel = /*#__PURE__*/function (_EventEmitter) {
       }
       return translation;
     }
+  }, {
+    key: "isEmpty",
+    get: function get() {
+      var _this3 = this;
+      if (!this.editor) {
+        return true;
+      }
+      return this.editor.getEditorState().read(function () {
+        return $isRootTextContentEmpty(_this3.editor.isComposing(), true);
+      });
+    }
+  }, {
+    key: "isSelected",
+    get: function get() {
+      if (!this.editor) {
+        return false;
+      }
+      return this.editor.getEditorState().read(function () {
+        var selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+          return !!selection._cachedNodes;
+        }
+        return false;
+      });
+    }
+  }, {
+    key: "cleanDocument",
+    value: function cleanDocument() {
+      this.setDocument('text', '');
+    }
   }], [{
     key: "setGlobalHotReloadMode",
     value: function setGlobalHotReloadMode(enabled) {

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

@@ -2,4 +2,3 @@ export { LexicalErrorBoundary } from './LexicalErrorBoundary';
 export { useLexicalComposerContext } from './react-context';
 export { ReactEditor } from './react-editor';
 export { useLexicalEditor } from './useLexicalEditor';
-export { useToolbarState } from './useToolbarState';

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

@@ -1,5 +1,4 @@
 export { LexicalErrorBoundary } from "./LexicalErrorBoundary";
 export { useLexicalComposerContext } from "./react-context";
 export { ReactEditor } from "./react-editor";
-export { useLexicalEditor } from "./useLexicalEditor";
-export { useToolbarState } from "./useToolbarState";
+export { useLexicalEditor } from "./useLexicalEditor";

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

@@ -1,12 +1,15 @@
 /**
  * Support configuration through react children
  */
-import { type FC, type ReactNode, type Ref } from 'react';
+import { type FC, type ReactNode } from 'react';
 import type { IEditor } from "../../types";
 export interface IReactEditorProps {
     children?: ReactNode | undefined;
     /** Editor configuration */
     config?: Record<string, any>;
-    editorRef?: Ref<IEditor>;
+    /** Editor instance to use */
+    editor?: IEditor;
+    /** Callback called when editor is initialized */
+    onInit?: (editor: IEditor) => void;
 }
 export declare const ReactEditor: FC<IReactEditorProps>;

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

@@ -12,14 +12,6 @@ import Editor from "../";
 import { LexicalComposerContext, createLexicalComposerContext, useLexicalComposerContext } from "./react-context";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-function updateRef(ref, value) {
-  if (typeof ref === 'function') {
-    ref(value);
-  } else if (ref) {
-    ref.current = value;
-  }
-}
-
 // Configuration injection component
 var ConfigInjector = function ConfigInjector(_ref) {
   var config = _ref.config;
@@ -34,20 +26,23 @@ var ConfigInjector = function ConfigInjector(_ref) {
   return null;
 };
 export var ReactEditor = function ReactEditor(_ref2) {
-  var editorRef = _ref2.editorRef,
+  var editorProp = _ref2.editor,
     children = _ref2.children,
-    config = _ref2.config;
+    config = _ref2.config,
+    onInit = _ref2.onInit;
   var composerContext = useMemo(function () {
-    var editor = Editor.createEditor();
+    var editor = editorProp || Editor.createEditor();
     var theme = createLexicalComposerContext(null, null);
     return [editor, theme];
-  }, []);
+  }, [editorProp]);
   useEffect(function () {
-    updateRef(editorRef, composerContext[0]);
-    return function () {
-      updateRef(editorRef, undefined);
-    };
-  }, [editorRef, composerContext]);
+    var editor = composerContext[0];
+
+    // Call onInit callback
+    if (onInit) {
+      onInit(editor);
+    }
+  }, [composerContext, onInit]);
   return /*#__PURE__*/_jsxs(LexicalComposerContext, {
     value: composerContext,
     children: [/*#__PURE__*/_jsx(ConfigInjector, {

package/es/react/ChatInputActions/ChatInputActions.js

@@ -102,7 +102,7 @@ var ChatInputActions = /*#__PURE__*/memo(function (_ref) {
           height: 20
         },
         type: 'vertical'
-      }, i);
+      }, "divider-".concat(i));
     }
     var wrapper = item.wrapper,
       icon = item.icon,
@@ -157,7 +157,7 @@ var ChatInputActions = /*#__PURE__*/memo(function (_ref) {
           children: item.children.map(function (child, childIndex) {
             return mapActions(child, childIndex);
           })
-        }, index);
+        }, "collapse-".concat(index));
       }
       if (item.type === 'dropdown') {
         return /*#__PURE__*/_jsx(Dropdown, {

package/es/react/Editor/Editor.js

@@ -21,7 +21,8 @@ var Editor = /*#__PURE__*/memo(function (_ref) {
   var content = _ref.content,
     style = _ref.style,
     className = _ref.className,
-    editorRef = _ref.editorRef,
+    editor = _ref.editor,
+    onInit = _ref.onInit,
     onChange = _ref.onChange,
     placeholder = _ref.placeholder,
     _ref$plugins = _ref.plugins,
@@ -79,7 +80,8 @@ var Editor = /*#__PURE__*/memo(function (_ref) {
   }, [enableSlash, enableMention, slashOption, restMentionOption]);
   return /*#__PURE__*/_jsxs(ReactEditor, {
     config: config,
-    editorRef: editorRef,
+    editor: editor,
+    onInit: onInit,
     children: [memoPlugins, memoSlash, memoMention, /*#__PURE__*/_jsx(ReactPlainText, {
       autoFocus: autoFocus,
       className: className,

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

@@ -1,14 +1,15 @@
 import type { ReactNode } from 'react';
+import { useEditor } from '../hooks/useEditor';
+import { useEditorState } from '../hooks/useEditorState';
 import type { EditorProps } from './type';
-import { useEditor } from './useEditor';
 import { withProps } from './utils';
 interface IEditor {
     (props: EditorProps): ReactNode;
     useEditor: typeof useEditor;
+    useEditorState: typeof useEditorState;
     withProps: typeof withProps;
 }
 declare const Editor: IEditor;
 export default Editor;
 export * from './type';
-export { useEditor } from './useEditor';
 export * from './utils';

package/es/react/Editor/index.js

@@ -1,10 +1,11 @@
+import { useEditor } from "../hooks/useEditor";
+import { useEditorState } from "../hooks/useEditorState";
 import EditorParent from "./Editor";
-import { useEditor } from "./useEditor";
 import { withProps } from "./utils";
 var Editor = EditorParent;
 Editor.useEditor = useEditor;
+Editor.useEditorState = useEditorState;
 Editor.withProps = withProps;
 export default Editor;
 export * from "./type";
-export { useEditor } from "./useEditor";
 export * from "./utils";

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

@@ -1,4 +1,4 @@
-import type { CSSProperties, FC, ReactNode, RefObject } from 'react';
+import type { CSSProperties, FC, ReactNode } from 'react';
 import type { ReactEditorContentProps, ReactPlainTextProps } from "../../plugins/common/react";
 import type { ReactMentionPluginProps } from "../../plugins/mention/react";
 import type { ReactSlashOptionProps } from "../../plugins/slash/react";
@@ -11,8 +11,9 @@ export interface EditorProps extends Partial<ReactEditorContentProps>, Omit<Reac
     autoFocus?: boolean;
     children?: ReactNode;
     className?: string;
-    editorRef?: RefObject<IEditor | null>;
+    editor?: IEditor;
     mentionOption?: MentionOption;
+    onInit?: (editor: IEditor) => void;
     plugins?: EditorPlugin[];
     slashOption?: Partial<ReactSlashOptionProps>;
     style?: CSSProperties;

package/es/react/hooks/useEditor.d.ts

@@ -0,0 +1,2 @@
+import type { IEditor } from "../../types";
+export declare const useEditor: () => IEditor;

package/es/react/hooks/useEditor.js

@@ -0,0 +1,7 @@
+import { useMemo } from 'react';
+import Editor from "../../editor-kernel";
+export var useEditor = function useEditor() {
+  return useMemo(function () {
+    return Editor.createEditor();
+  }, []);
+};

package/es/react/hooks/useEditorState/index.d.ts

@@ -0,0 +1,64 @@
+import { IEditor } from "../../../types";
+/**
+ * Editor state and toolbar methods return type
+ */
+export interface EditorState {
+    /** Current block type (e.g., 'paragraph', 'h1', 'h2', 'bullet', 'number', 'code') */
+    blockType: string | null;
+    /** Format selection as blockquote */
+    blockquote: () => void;
+    /** Toggle bold formatting */
+    bold: () => void;
+    /** Toggle bullet list */
+    bulletList: () => void;
+    /** Whether redo operation is available */
+    canRedo: boolean;
+    /** Whether undo operation is available */
+    canUndo: boolean;
+    /** Toggle code formatting */
+    code: () => void;
+    /** Format selection as code block */
+    codeblock: () => void;
+    /** Current code block language */
+    codeblockLang: string | null | undefined;
+    /** Insert or toggle link */
+    insertLink: () => void;
+    /** Whether cursor is inside a blockquote */
+    isBlockquote: boolean;
+    /** Whether selection has bold formatting */
+    isBold: boolean;
+    /** Whether selection has code formatting */
+    isCode: boolean;
+    /** Whether cursor is inside a code block */
+    isCodeblock: boolean;
+    /** Whether editor content is empty */
+    isEmpty: boolean;
+    /** Whether selection has italic formatting */
+    isItalic: boolean;
+    /** Whether editor has selection */
+    isSelected: boolean;
+    /** Whether selection has strikethrough formatting */
+    isStrikethrough: boolean;
+    /** Whether selection has underline formatting */
+    isUnderline: boolean;
+    /** Toggle italic formatting */
+    italic: () => void;
+    /** Toggle numbered list */
+    numberList: () => void;
+    /** Redo last operation */
+    redo: () => void;
+    /** Toggle strikethrough formatting */
+    strikethrough: () => void;
+    /** Toggle underline formatting */
+    underline: () => void;
+    /** Undo last operation */
+    undo: () => void;
+    /** Update code block language */
+    updateCodeblockLang: (lang: string) => void;
+}
+/**
+ * Provide toolbar state and toolbar methods
+ * @param editor - Editor instance
+ * @returns Editor state and methods for toolbar functionality
+ */
+export declare function useEditorState(editor: IEditor): EditorState;

package/es/{editor-kernel/react/useToolbarState.js → react/hooks/useEditorState/index.js}

@@ -6,54 +6,27 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { $createCodeNode, $isCodeNode } from '@lexical/code';
 import { $isListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListNode } from '@lexical/list';
-import { $isHeadingNode } from '@lexical/rich-text';
-import { $isAtNodeEnd, $setBlocksType } from '@lexical/selection';
-import { $findMatchingParent, $getNearestNodeOfType, mergeRegister } from '@lexical/utils';
-import { $createParagraphNode, $getSelection, $isRangeSelection, $isRootOrShadowRoot, CAN_REDO_COMMAND, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, FORMAT_TEXT_COMMAND, REDO_COMMAND, SELECTION_CHANGE_COMMAND, UNDO_COMMAND } from 'lexical';
-import { useCallback, useEffect, useState } from 'react';
-import { UPDATE_CODEBLOCK_LANG } from "../../plugins/codeblock";
-import { $isRootTextContentEmpty } from "../../plugins/common/utils";
-import { $isLinkNode, TOGGLE_LINK_COMMAND } from "../../plugins/link/node/LinkNode";
-import { sanitizeUrl } from "../../plugins/link/utils";
-function $findTopLevelElement(node) {
-  var topLevelElement = node.getKey() === 'root' ? node : $findMatchingParent(node, function (e) {
-    var parent = e.getParent();
-    return parent !== null && $isRootOrShadowRoot(parent);
-  });
-  if (topLevelElement === null) {
-    topLevelElement = node.getTopLevelElementOrThrow();
-  }
-  return topLevelElement;
-}
-var formatParagraph = function formatParagraph(editor) {
-  editor === null || editor === void 0 || editor.update(function () {
-    var selection = $getSelection();
-    $setBlocksType(selection, function () {
-      return $createParagraphNode();
-    });
-  });
-};
-function getSelectedNode(selection) {
-  var anchor = selection.anchor;
-  var focus = selection.focus;
-  var anchorNode = selection.anchor.getNode();
-  var focusNode = selection.focus.getNode();
-  if (anchorNode === focusNode) {
-    return anchorNode;
-  }
-  var isBackward = selection.isBackward();
-  if (isBackward) {
-    return $isAtNodeEnd(focus) ? anchorNode : focusNode;
-  } else {
-    return $isAtNodeEnd(anchor) ? anchorNode : focusNode;
-  }
-}
+import { $createQuoteNode, $isHeadingNode, $isQuoteNode } from '@lexical/rich-text';
+import { $setBlocksType } from '@lexical/selection';
+import { $getNearestNodeOfType, mergeRegister } from '@lexical/utils';
+import { $getSelection, $isRangeSelection, CAN_REDO_COMMAND, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, FORMAT_TEXT_COMMAND, REDO_COMMAND, SELECTION_CHANGE_COMMAND, UNDO_COMMAND } from 'lexical';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { UPDATE_CODEBLOCK_LANG } from "../../../plugins/codeblock";
+import { $isRootTextContentEmpty } from "../../../plugins/common/utils";
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from "../../../plugins/link/node/LinkNode";
+import { sanitizeUrl } from "../../../plugins/link/utils";
+import { $findTopLevelElement, formatParagraph, getSelectedNode } from "./utils";
+
+/**
+ * Editor state and toolbar methods return type
+ */
 
 /**
  * Provide toolbar state and toolbar methods
- * @returns
+ * @param editor - Editor instance
+ * @returns Editor state and methods for toolbar functionality
  */
-export function useToolbarState(editorRef) {
+export function useEditorState(editor) {
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     canUndo = _useState2[0],
@@ -88,33 +61,42 @@ export function useToolbarState(editorRef) {
     setIsLink = _useState16[1];
   var _useState17 = useState(false),
     _useState18 = _slicedToArray(_useState17, 2),
-    isInCodeblock = _useState18[0],
+    isCodeblock = _useState18[0],
     setIsInCodeblok = _useState18[1];
-  var _useState19 = useState(null),
+  var _useState19 = useState(false),
     _useState20 = _slicedToArray(_useState19, 2),
-    codeblockLang = _useState20[0],
-    setCodeblockLang = _useState20[1];
-  var _useState21 = useState(true),
+    isBlockquote = _useState20[0],
+    setIsInBlockquote = _useState20[1];
+  var _useState21 = useState(null),
     _useState22 = _slicedToArray(_useState21, 2),
-    isEmpty = _useState22[0],
-    setIsEmpty = _useState22[1];
-  var _useState23 = useState(null),
+    codeblockLang = _useState22[0],
+    setCodeblockLang = _useState22[1];
+  var _useState23 = useState(true),
     _useState24 = _slicedToArray(_useState23, 2),
-    blockType = _useState24[0],
-    setBlockType = _useState24[1];
+    isEmpty = _useState24[0],
+    setIsEmpty = _useState24[1];
+  var _useState25 = useState(false),
+    _useState26 = _slicedToArray(_useState25, 2),
+    isSelected = _useState26[0],
+    setIsSelected = _useState26[1];
+  var _useState27 = useState(null),
+    _useState28 = _slicedToArray(_useState27, 2),
+    blockType = _useState28[0],
+    setBlockType = _useState28[1];
   var $handleHeadingNode = useCallback(function (selectedElement) {
     var type = $isHeadingNode(selectedElement) ? selectedElement.getTag() : selectedElement.getType();
     setBlockType(type);
   }, [setBlockType]);
   var $updateToolbar = useCallback(function () {
-    var _editorRef$current;
     var selection = $getSelection();
-    var editor = (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.getLexicalEditor();
-    if (editor) {
-      setIsEmpty($isRootTextContentEmpty(editor.isComposing(), false));
+    var lexicalEditor = editor === null || editor === void 0 ? void 0 : editor.getLexicalEditor();
+    setIsSelected(false);
+    if (lexicalEditor) {
+      setIsEmpty($isRootTextContentEmpty(lexicalEditor.isComposing(), false));
     }
     if ($isRangeSelection(selection)) {
-      var _editorRef$current2;
+      var _editor$getLexicalEdi;
+      setIsSelected(!!selection._cachedNodes);
       setIsBold(selection.hasFormat('bold'));
       setIsItalic(selection.hasFormat('italic'));
       setIsUnderline(selection.hasFormat('underline'));
@@ -125,13 +107,15 @@ export function useToolbarState(editorRef) {
       var element = $findTopLevelElement(anchorNode);
       var focusElement = $findTopLevelElement(focusNode);
       var elementKey = element.getKey();
-      var elementDOM = (_editorRef$current2 = editorRef.current) === null || _editorRef$current2 === void 0 || (_editorRef$current2 = _editorRef$current2.getLexicalEditor()) === null || _editorRef$current2 === void 0 ? void 0 : _editorRef$current2.getElementByKey(elementKey);
+      var elementDOM = editor === null || editor === void 0 || (_editor$getLexicalEdi = editor.getLexicalEditor()) === null || _editor$getLexicalEdi === void 0 ? void 0 : _editor$getLexicalEdi.getElementByKey(elementKey);
       var node = getSelectedNode(selection);
       var parent = node.getParent();
       setIsLink($isLinkNode(parent) || $isLinkNode(node));
       var isCodeBlock = $isCodeNode(element) && $isCodeNode(focusElement) && elementKey === focusElement.getKey();
       setIsInCodeblok(isCodeBlock);
       setCodeblockLang(isCodeBlock ? element.getLanguage() : '');
+      var _isBlockquote = $isQuoteNode(element) && $isQuoteNode(focusElement) && elementKey === focusElement.getKey();
+      setIsInBlockquote(_isBlockquote);
       if (elementDOM !== null) {
         if ($isListNode(element)) {
           var parentList = $getNearestNodeOfType(anchorNode, ListNode);
@@ -142,6 +126,7 @@ export function useToolbarState(editorRef) {
         }
       }
     } else if (!selection) {
+      setIsSelected(false);
       setIsBold(false);
       setIsItalic(false);
       setIsUnderline(false);
@@ -149,22 +134,20 @@ export function useToolbarState(editorRef) {
       setIsCode(false);
       setIsLink(false);
       setIsInCodeblok(false);
+      setIsInBlockquote(false);
       setCodeblockLang(null);
       setBlockType(null);
     }
-  }, [editorRef.current]);
+  }, [editor]);
   var undo = useCallback(function () {
-    var _editorRef$current3;
-    (_editorRef$current3 = editorRef.current) === null || _editorRef$current3 === void 0 || _editorRef$current3.dispatchCommand(UNDO_COMMAND, undefined);
-  }, [editorRef.current]);
+    editor === null || editor === void 0 || editor.dispatchCommand(UNDO_COMMAND, undefined);
+  }, [editor]);
   var redo = useCallback(function () {
-    var _editorRef$current4;
-    (_editorRef$current4 = editorRef.current) === null || _editorRef$current4 === void 0 || _editorRef$current4.dispatchCommand(REDO_COMMAND, undefined);
-  }, [editorRef.current]);
+    editor === null || editor === void 0 || editor.dispatchCommand(REDO_COMMAND, undefined);
+  }, [editor]);
   var formatText = useCallback(function (type) {
-    var _editorRef$current5;
-    (_editorRef$current5 = editorRef.current) === null || _editorRef$current5 === void 0 || _editorRef$current5.dispatchCommand(FORMAT_TEXT_COMMAND, type);
-  }, [editorRef.current]);
+    editor === null || editor === void 0 || editor.dispatchCommand(FORMAT_TEXT_COMMAND, type);
+  }, [editor]);
   var bold = useCallback(function () {
     formatText('bold');
   }, [formatText]);
@@ -182,26 +165,22 @@ export function useToolbarState(editorRef) {
   }, [formatText]);
   var bulletList = useCallback(function () {
     if (blockType !== 'bullet') {
-      var _editorRef$current6;
-      (_editorRef$current6 = editorRef.current) === null || _editorRef$current6 === void 0 || _editorRef$current6.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+      editor === null || editor === void 0 || editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
     } else {
-      var _editorRef$current7;
-      formatParagraph((_editorRef$current7 = editorRef.current) === null || _editorRef$current7 === void 0 ? void 0 : _editorRef$current7.getLexicalEditor());
+      formatParagraph(editor === null || editor === void 0 ? void 0 : editor.getLexicalEditor());
     }
-  }, [blockType]);
+  }, [blockType, editor]);
   var numberList = useCallback(function () {
     if (blockType !== 'number') {
-      var _editorRef$current8;
-      (_editorRef$current8 = editorRef.current) === null || _editorRef$current8 === void 0 || _editorRef$current8.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+      editor === null || editor === void 0 || editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
     } else {
-      var _editorRef$current9;
-      formatParagraph((_editorRef$current9 = editorRef.current) === null || _editorRef$current9 === void 0 ? void 0 : _editorRef$current9.getLexicalEditor());
+      formatParagraph(editor === null || editor === void 0 ? void 0 : editor.getLexicalEditor());
     }
-  }, [blockType]);
-  var formatCodeblock = useCallback(function () {
+  }, [blockType, editor]);
+  var codeblock = useCallback(function () {
     if (blockType !== 'code') {
-      var _editorRef$current10;
-      (_editorRef$current10 = editorRef.current) === null || _editorRef$current10 === void 0 || (_editorRef$current10 = _editorRef$current10.getLexicalEditor()) === null || _editorRef$current10 === void 0 || _editorRef$current10.update(function () {
+      var _editor$getLexicalEdi2;
+      editor === null || editor === void 0 || (_editor$getLexicalEdi2 = editor.getLexicalEditor()) === null || _editor$getLexicalEdi2 === void 0 || _editor$getLexicalEdi2.update(function () {
         var selection = $getSelection();
         if (!selection) {
           return;
@@ -220,83 +199,103 @@ export function useToolbarState(editorRef) {
           }
         }
       });
+    } else {
+      formatParagraph(editor === null || editor === void 0 ? void 0 : editor.getLexicalEditor());
+    }
+  }, [blockType, editor]);
+  var blockquote = useCallback(function () {
+    if (blockType !== 'quote') {
+      var _editor$getLexicalEdi3;
+      editor === null || editor === void 0 || (_editor$getLexicalEdi3 = editor.getLexicalEditor()) === null || _editor$getLexicalEdi3 === void 0 || _editor$getLexicalEdi3.update(function () {
+        var selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+          $setBlocksType(selection, function () {
+            return $createQuoteNode();
+          });
+        }
+      });
+    } else {
+      formatParagraph(editor === null || editor === void 0 ? void 0 : editor.getLexicalEditor());
     }
-  }, [blockType]);
+  }, [blockType, editor]);
   var updateCodeblockLang = useCallback(function (lang) {
-    var _editorRef$current11;
-    if (!isInCodeblock) {
+    if (!isCodeblock) {
       return;
     }
-    (_editorRef$current11 = editorRef.current) === null || _editorRef$current11 === void 0 || _editorRef$current11.dispatchCommand(UPDATE_CODEBLOCK_LANG, {
+    editor === null || editor === void 0 || editor.dispatchCommand(UPDATE_CODEBLOCK_LANG, {
       lang: lang
     });
-  }, [editorRef.current, isInCodeblock]);
+  }, [editor, isCodeblock]);
   var insertLink = useCallback(function () {
     if (!isLink) {
-      var _editorRef$current12;
+      var _editor$getLexicalEdi4;
       setIsLink(true);
-      (_editorRef$current12 = editorRef.current) === null || _editorRef$current12 === void 0 || (_editorRef$current12 = _editorRef$current12.getLexicalEditor()) === null || _editorRef$current12 === void 0 || _editorRef$current12.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl('https://'));
+      editor === null || editor === void 0 || (_editor$getLexicalEdi4 = editor.getLexicalEditor()) === null || _editor$getLexicalEdi4 === void 0 || _editor$getLexicalEdi4.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl('https://'));
     } else {
-      var _editorRef$current13;
+      var _editor$getLexicalEdi5;
       setIsLink(false);
-      (_editorRef$current13 = editorRef.current) === null || _editorRef$current13 === void 0 || (_editorRef$current13 = _editorRef$current13.getLexicalEditor()) === null || _editorRef$current13 === void 0 || _editorRef$current13.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+      editor === null || editor === void 0 || (_editor$getLexicalEdi5 = editor.getLexicalEditor()) === null || _editor$getLexicalEdi5 === void 0 || _editor$getLexicalEdi5.dispatchCommand(TOGGLE_LINK_COMMAND, null);
     }
-  }, [editorRef.current, isLink]);
+  }, [editor, isLink]);
   useEffect(function () {
-    if (!editorRef.current) return;
-    var editor = editorRef.current;
+    if (!editor) return;
     var lexicalEditor = editor.getLexicalEditor();
     var cleanup = function cleanup() {};
-    var handleLeixcalEditor = function handleLeixcalEditor(editor) {
-      cleanup = mergeRegister(editor.registerUpdateListener(function (_ref) {
+    var handleLexicalEditor = function handleLexicalEditor(lexicalEditor) {
+      cleanup = mergeRegister(lexicalEditor.registerUpdateListener(function (_ref) {
         var editorState = _ref.editorState;
         editorState.read(function () {
           $updateToolbar();
         });
-      }), editor.registerCommand(SELECTION_CHANGE_COMMAND, function () {
+      }), lexicalEditor.registerCommand(SELECTION_CHANGE_COMMAND, function () {
         $updateToolbar();
         return false;
-      }, COMMAND_PRIORITY_LOW), editor.registerCommand(CAN_UNDO_COMMAND, function (payload) {
+      }, COMMAND_PRIORITY_LOW), lexicalEditor.registerCommand(CAN_UNDO_COMMAND, function (payload) {
         setCanUndo(payload);
         return false;
-      }, COMMAND_PRIORITY_LOW), editor.registerCommand(CAN_REDO_COMMAND, function (payload) {
+      }, COMMAND_PRIORITY_LOW), lexicalEditor.registerCommand(CAN_REDO_COMMAND, function (payload) {
         setCanRedo(payload);
         return false;
       }, COMMAND_PRIORITY_LOW));
       return cleanup;
     };
     if (!lexicalEditor) {
-      editor.on('initialized', handleLeixcalEditor);
+      editor.on('initialized', handleLexicalEditor);
       return function () {
         cleanup();
-        editor.off('initialized', handleLeixcalEditor);
+        editor.off('initialized', handleLexicalEditor);
       };
     }
-    return handleLeixcalEditor(lexicalEditor);
-  }, [editorRef.current]);
-  return {
-    blockType: blockType,
-    bold: bold,
-    bulletList: bulletList,
-    canRedo: canRedo,
-    canUndo: canUndo,
-    code: code,
-    codeblockLang: codeblockLang,
-    formatCodeblock: formatCodeblock,
-    insertLink: insertLink,
-    isBold: isBold,
-    isCode: isCode,
-    isEmpty: isEmpty,
-    isInCodeblock: isInCodeblock,
-    isItalic: isItalic,
-    isStrikethrough: isStrikethrough,
-    isUnderline: isUnderline,
-    italic: italic,
-    numberList: numberList,
-    redo: redo,
-    strikethrough: strikethrough,
-    underline: underline,
-    undo: undo,
-    updateCodeblockLang: updateCodeblockLang
-  };
+    return handleLexicalEditor(lexicalEditor);
+  }, [editor, $updateToolbar]);
+  return useMemo(function () {
+    return {
+      blockType: blockType,
+      blockquote: blockquote,
+      bold: bold,
+      bulletList: bulletList,
+      canRedo: canRedo,
+      canUndo: canUndo,
+      code: code,
+      codeblock: codeblock,
+      codeblockLang: codeblockLang,
+      insertLink: insertLink,
+      isBlockquote: isBlockquote,
+      isBold: isBold,
+      isCode: isCode,
+      isCodeblock: isCodeblock,
+      isEmpty: isEmpty,
+      isItalic: isItalic,
+      isSelected: isSelected,
+      isStrikethrough: isStrikethrough,
+      isUnderline: isUnderline,
+      italic: italic,
+      numberList: numberList,
+      redo: redo,
+      strikethrough: strikethrough,
+      underline: underline,
+      undo: undo,
+      updateCodeblockLang: updateCodeblockLang
+    };
+  }, [blockType, bold, bulletList, canRedo, canUndo, code, codeblockLang, blockquote, codeblock, insertLink, isBold, isCode, isEmpty, isBlockquote, isCodeblock, isItalic, isSelected, isStrikethrough, isUnderline, italic, numberList, redo, strikethrough, underline, undo, updateCodeblockLang]);
 }

package/es/react/hooks/useEditorState/utils.d.ts

@@ -0,0 +1,4 @@
+import { ElementNode, LexicalEditor, LexicalNode, RangeSelection, TextNode } from 'lexical';
+export declare const $findTopLevelElement: (node: LexicalNode) => LexicalNode;
+export declare const formatParagraph: (editor?: LexicalEditor | null) => void;
+export declare const getSelectedNode: (selection: RangeSelection) => TextNode | ElementNode;

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

@@ -0,0 +1,36 @@
+import { $isAtNodeEnd, $setBlocksType } from '@lexical/selection';
+import { $findMatchingParent } from '@lexical/utils';
+import { $createParagraphNode, $getSelection, $isRootOrShadowRoot } from 'lexical';
+export var $findTopLevelElement = function $findTopLevelElement(node) {
+  var topLevelElement = node.getKey() === 'root' ? node : $findMatchingParent(node, function (e) {
+    var parent = e.getParent();
+    return parent !== null && $isRootOrShadowRoot(parent);
+  });
+  if (topLevelElement === null) {
+    topLevelElement = node.getTopLevelElementOrThrow();
+  }
+  return topLevelElement;
+};
+export var formatParagraph = function formatParagraph(editor) {
+  editor === null || editor === void 0 || editor.update(function () {
+    var selection = $getSelection();
+    $setBlocksType(selection, function () {
+      return $createParagraphNode();
+    });
+  });
+};
+export var getSelectedNode = function getSelectedNode(selection) {
+  var anchor = selection.anchor;
+  var focus = selection.focus;
+  var anchorNode = selection.anchor.getNode();
+  var focusNode = selection.focus.getNode();
+  if (anchorNode === focusNode) {
+    return anchorNode;
+  }
+  var isBackward = selection.isBackward();
+  if (isBackward) {
+    return $isAtNodeEnd(focus) ? anchorNode : focusNode;
+  } else {
+    return $isAtNodeEnd(anchor) ? anchorNode : focusNode;
+  }
+};

package/es/react/index.d.ts

@@ -2,7 +2,9 @@ export { default as ChatInput, type ChatInputProps } from './ChatInput';
 export { default as ChatInputActionBar, type ChatInputActionBarProps } from './ChatInputActionBar';
 export { type ChatInputActionEvent, default as ChatInputActions, type ChatInputActionsProps, } from './ChatInputActions';
 export { default as CodeLanguageSelect, type CodeLanguageSelectProps } from './CodeLanguageSelect';
-export { default as Editor, type EditorProps, useEditor, withProps } from './Editor';
+export { default as Editor, type EditorProps, withProps } from './Editor';
 export { EditorProvider, type EditorProviderConfig, type EditorProviderProps, useEditorContent, } from './EditorProvider';
+export { useEditor } from './hooks/useEditor';
+export { type EditorState, useEditorState } from './hooks/useEditorState';
 export { default as SendButton, type SendButtonProps } from './SendButton';
 export { default as SlashMenu, type SlashMenuProps } from './SlashMenu';

package/es/react/index.js

@@ -2,7 +2,9 @@ export { default as ChatInput } from "./ChatInput";
 export { default as ChatInputActionBar } from "./ChatInputActionBar";
 export { default as ChatInputActions } from "./ChatInputActions";
 export { default as CodeLanguageSelect } from "./CodeLanguageSelect";
-export { default as Editor, useEditor, withProps } from "./Editor";
+export { default as Editor, withProps } from "./Editor";
 export { EditorProvider, useEditorContent } from "./EditorProvider";
+export { useEditor } from "./hooks/useEditor";
+export { useEditorState } from "./hooks/useEditorState";
 export { default as SendButton } from "./SendButton";
 export { default as SlashMenu } from "./SlashMenu";

package/es/types/kernel.d.ts

@@ -28,6 +28,10 @@ export interface IEditor {
      * Lose focus
      */
     blur(): void;
+    /**
+     * Clean editor content (clear all content)
+     */
+    cleanDocument(): void;
     /**
      * Destroy editor instance
      */
@@ -63,6 +67,16 @@ export interface IEditor {
      * Get editor theme
      */
     getTheme(): Record<string, string | Record<string, string>>;
+    /**
+     * Check if editor content is empty
+     * @returns true if editor content is empty, false otherwise
+     */
+    get isEmpty(): boolean;
+    /**
+     * Check if editor has active selection
+     * @returns true if editor has selection, false otherwise
+     */
+    get isSelected(): boolean;
     /**
      * Remove editor event listener
      * @param event

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/editor",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "description": "A powerful and extensible rich text editor built on Meta's Lexical framework, providing a modern editing experience with React integration.",
   "keywords": [
     "lobehub",

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

@@ -1,31 +0,0 @@
-import { type RefObject } from 'react';
-import { IEditor } from "../../types";
-/**
- * Provide toolbar state and toolbar methods
- * @returns
- */
-export declare function useToolbarState(editorRef: RefObject<IEditor | null>): {
-    blockType: string | null;
-    bold: () => void;
-    bulletList: () => void;
-    canRedo: boolean;
-    canUndo: boolean;
-    code: () => void;
-    codeblockLang: string | null | undefined;
-    formatCodeblock: () => void;
-    insertLink: () => void;
-    isBold: boolean;
-    isCode: boolean;
-    isEmpty: boolean;
-    isInCodeblock: boolean;
-    isItalic: boolean;
-    isStrikethrough: boolean;
-    isUnderline: boolean;
-    italic: () => void;
-    numberList: () => void;
-    redo: () => void;
-    strikethrough: () => void;
-    underline: () => void;
-    undo: () => void;
-    updateCodeblockLang: (lang: string) => void;
-};

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

@@ -1,3 +0,0 @@
-import { RefObject } from 'react';
-import type { IEditor } from "../../types";
-export declare const useEditor: (editorRef?: RefObject<IEditor | null>) => RefObject<IEditor | null>;

package/es/react/Editor/useEditor.js

@@ -1,5 +0,0 @@
-import { useRef } from 'react';
-export var useEditor = function useEditor(editorRef) {
-  var ref = useRef(null);
-  return editorRef || ref;
-};