@lobehub/editor 1.4.1 → 1.4.2

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/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/hooks/useEditorState/index.d.ts

@@ -0,0 +1,61 @@
+import { type RefObject } from 'react';
+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;
+    /** 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;
+    /** Current code block language */
+    codeblockLang: string | null | undefined;
+    /** Format selection as code block */
+    formatCodeblock: () => void;
+    /** Insert or toggle link */
+    insertLink: () => void;
+    /** Whether selection has bold formatting */
+    isBold: boolean;
+    /** Whether selection has code formatting */
+    isCode: boolean;
+    /** Whether editor content is empty */
+    isEmpty: boolean;
+    /** Whether cursor is inside a code block */
+    isInCodeblock: 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 editorRef - Reference to the editor instance
+ * @returns Editor state and methods for toolbar functionality
+ */
+export declare function useEditorState(editorRef: RefObject<IEditor | null>): EditorState;

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

@@ -7,53 +7,26 @@ 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 { $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 editorRef - Reference to the editor instance
+ * @returns Editor state and methods for toolbar functionality
  */
-export function useToolbarState(editorRef) {
+export function useEditorState(editorRef) {
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     canUndo = _useState2[0],
@@ -98,10 +71,14 @@ export function useToolbarState(editorRef) {
     _useState22 = _slicedToArray(_useState21, 2),
     isEmpty = _useState22[0],
     setIsEmpty = _useState22[1];
-  var _useState23 = useState(null),
+  var _useState23 = useState(false),
     _useState24 = _slicedToArray(_useState23, 2),
-    blockType = _useState24[0],
-    setBlockType = _useState24[1];
+    isSelected = _useState24[0],
+    setIsSelected = _useState24[1];
+  var _useState25 = useState(null),
+    _useState26 = _slicedToArray(_useState25, 2),
+    blockType = _useState26[0],
+    setBlockType = _useState26[1];
   var $handleHeadingNode = useCallback(function (selectedElement) {
     var type = $isHeadingNode(selectedElement) ? selectedElement.getTag() : selectedElement.getType();
     setBlockType(type);
@@ -110,11 +87,13 @@ export function useToolbarState(editorRef) {
     var _editorRef$current;
     var selection = $getSelection();
     var editor = (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.getLexicalEditor();
+    setIsSelected(false);
     if (editor) {
       setIsEmpty($isRootTextContentEmpty(editor.isComposing(), false));
     }
     if ($isRangeSelection(selection)) {
       var _editorRef$current2;
+      setIsSelected(!!selection._cachedNodes);
       setIsBold(selection.hasFormat('bold'));
       setIsItalic(selection.hasFormat('italic'));
       setIsUnderline(selection.hasFormat('underline'));
@@ -142,6 +121,7 @@ export function useToolbarState(editorRef) {
         }
       }
     } else if (!selection) {
+      setIsSelected(false);
       setIsBold(false);
       setIsItalic(false);
       setIsUnderline(false);
@@ -274,29 +254,32 @@ export function useToolbarState(editorRef) {
     }
     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 useMemo(function () {
+    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,
+      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, formatCodeblock, insertLink, isBold, isCode, isEmpty, isInCodeblock, 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/editor",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "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;
-};