@lobehub/editor 1.0.4 → 1.2.0

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

@@ -32,7 +32,15 @@ var ReactPlainText = /*#__PURE__*/memo(function (_ref) {
     theme = _ref$theme === void 0 ? {} : _ref$theme,
     onChange = _ref.onChange,
     className = _ref.className,
-    variant = _ref.variant;
+    variant = _ref.variant,
+    onKeyDown = _ref.onKeyDown,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
+    autoFocus = _ref.autoFocus,
+    onPressEnter = _ref.onPressEnter,
+    onCompositionStart = _ref.onCompositionStart,
+    onCompositionEnd = _ref.onCompositionEnd,
+    onContextMenu = _ref.onContextMenu;
   var isChat = variant === 'chat';
   var _theme$fontSize = theme.fontSize,
     fontSize = _theme$fontSize === void 0 ? isChat ? 14 : 16 : _theme$fontSize,
@@ -88,11 +96,68 @@ var ReactPlainText = /*#__PURE__*/memo(function (_ref) {
       onChange === null || onChange === void 0 || onChange(editor);
     });
   }, [editor, type, content, onChange, isInitialized]);
+  useEffect(function () {
+    if (autoFocus && editorContainerRef.current) {
+      editorContainerRef.current.focus();
+    }
+  }, [autoFocus]);
+  var handleBlur = function handleBlur(event) {
+    onBlur === null || onBlur === void 0 || onBlur({
+      editor: editor,
+      event: event
+    });
+  };
+  var handleCompositionEnd = function handleCompositionEnd(event) {
+    onCompositionEnd === null || onCompositionEnd === void 0 || onCompositionEnd({
+      editor: editor,
+      event: event
+    });
+  };
+  var handleCompositionStart = function handleCompositionStart(event) {
+    onCompositionStart === null || onCompositionStart === void 0 || onCompositionStart({
+      editor: editor,
+      event: event
+    });
+  };
+  var handleContextMenu = function handleContextMenu(event) {
+    onContextMenu === null || onContextMenu === void 0 || onContextMenu({
+      editor: editor,
+      event: event
+    });
+  };
+  var handleFocus = function handleFocus(event) {
+    onFocus === null || onFocus === void 0 || onFocus({
+      editor: editor,
+      event: event
+    });
+  };
+  var handleKeyDown = function handleKeyDown(event) {
+    var isComposing = event.nativeEvent.isComposing;
+    if (event.key === 'Enter' && !isComposing &&
+    // Regular Enter key handling
+    onPressEnter) {
+      onPressEnter({
+        editor: editor,
+        event: event
+      });
+    }
+    // Call the optional onKeyDown handler
+    onKeyDown === null || onKeyDown === void 0 || onKeyDown({
+      editor: editor,
+      event: event
+    });
+  };
   return /*#__PURE__*/_jsxs("div", {
     className: cx(styles.root, styles.variant, className),
     style: style,
     children: [/*#__PURE__*/_jsx("div", {
       contentEditable: true,
+      onBlur: handleBlur,
+      onCompositionEnd: handleCompositionEnd,
+      onCompositionStart: handleCompositionStart,
+      onContextMenu: handleContextMenu,
+      onFocus: handleFocus,
+      onKeyDown: handleKeyDown,
       ref: editorContainerRef,
       style: {
         outline: 'none'

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

@@ -1,5 +1,5 @@
-import type { CSSProperties, ReactElement, ReactNode } from 'react';
-import { CommonPluginOptions } from "..";
+import type { CSSProperties, CompositionEvent, FocusEvent, KeyboardEvent, MouseEvent, ReactElement, ReactNode } from 'react';
+import type { CommonPluginOptions } from "..";
 import type { IEditor } from "../../../types";
 export interface ReactEditorContentProps {
     content: any;
@@ -7,9 +7,38 @@ export interface ReactEditorContentProps {
     type: string;
 }
 export interface ReactPlainTextProps {
+    autoFocus?: boolean;
     children: ReactElement<ReactEditorContentProps>;
     className?: string;
+    onBlur?: (props: {
+        editor: IEditor;
+        event: FocusEvent<HTMLDivElement>;
+    }) => void;
     onChange?: (editor: IEditor) => void;
+    onCompositionEnd?: (props: {
+        editor: IEditor;
+        event: CompositionEvent<HTMLDivElement>;
+    }) => void;
+    onCompositionStart?: (props: {
+        editor: IEditor;
+        event: CompositionEvent<HTMLDivElement>;
+    }) => void;
+    onContextMenu?: (props: {
+        editor: IEditor;
+        event: MouseEvent<HTMLDivElement>;
+    }) => void;
+    onFocus?: (props: {
+        editor: IEditor;
+        event: FocusEvent<HTMLDivElement>;
+    }) => void;
+    onKeyDown?: (props: {
+        editor: IEditor;
+        event: KeyboardEvent<HTMLDivElement>;
+    }) => void;
+    onPressEnter?: (props: {
+        editor: IEditor;
+        event: KeyboardEvent<HTMLDivElement>;
+    }) => void;
     style?: CSSProperties;
     theme?: CommonPluginOptions['theme'] & {
         fontSize?: number;

package/es/react/Editor/Editor.js

@@ -31,10 +31,17 @@ var Editor = /*#__PURE__*/memo(function (_ref) {
     _ref$mentionOption = _ref.mentionOption,
     mentionOption = _ref$mentionOption === void 0 ? {} : _ref$mentionOption,
     variant = _ref.variant,
-    theme = _ref.theme,
+    onKeyDown = _ref.onKeyDown,
     children = _ref.children,
     _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'json' : _ref$type;
+    type = _ref$type === void 0 ? 'json' : _ref$type,
+    onPressEnter = _ref.onPressEnter,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
+    autoFocus = _ref.autoFocus,
+    onCompositionStart = _ref.onCompositionStart,
+    onCompositionEnd = _ref.onCompositionEnd,
+    onContextMenu = _ref.onContextMenu;
   var _useEditorContent = useEditorContent(),
     config = _useEditorContent.config;
   var enableSlash = Boolean((slashOption === null || slashOption === void 0 ? void 0 : slashOption.items) && slashOption.items.length > 0);
@@ -74,10 +81,17 @@ var Editor = /*#__PURE__*/memo(function (_ref) {
     config: config,
     editorRef: editorRef,
     children: [memoPlugins, memoSlash, memoMention, /*#__PURE__*/_jsx(ReactPlainText, {
+      autoFocus: autoFocus,
       className: className,
+      onBlur: onBlur,
       onChange: onChange,
+      onCompositionEnd: onCompositionEnd,
+      onCompositionStart: onCompositionStart,
+      onContextMenu: onContextMenu,
+      onFocus: onFocus,
+      onKeyDown: onKeyDown,
+      onPressEnter: onPressEnter,
       style: style,
-      theme: theme,
       variant: variant,
       children: /*#__PURE__*/_jsx(ReactEditorContent, {
         content: content,

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

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

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

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

package/es/react/Editor/useEditor.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/editor",
-  "version": "1.0.4",
+  "version": "1.2.0",
   "description": "A powerful and extensible rich text editor built on Meta's Lexical framework, providing a modern editing experience with React integration.",
   "keywords": [
     "lobehub",
@@ -52,6 +52,7 @@
     "polished": "^4.3.1",
     "react-error-boundary": "^6.0.0",
     "react-layout-kit": "^2.0.0",
+    "react-merge-refs": "^3.0.2",
     "shiki": "^3.9.2",
     "use-merge-value": "^1.2.0"
   },