@lobehub/editor 1.0.4 → 1.1.0

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

@@ -32,7 +32,14 @@ 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,
+    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 +95,22 @@ 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]);
   return /*#__PURE__*/_jsxs("div", {
     className: cx(styles.root, styles.variant, className),
     style: style,
     children: [/*#__PURE__*/_jsx("div", {
       contentEditable: true,
+      onBlur: onBlur,
+      onCompositionEnd: onCompositionEnd,
+      onCompositionStart: onCompositionStart,
+      onContextMenu: onContextMenu,
+      onFocus: onFocus,
+      onKeyDown: onKeyDown,
       ref: editorContainerRef,
       style: {
         outline: 'none'

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

@@ -1,4 +1,4 @@
-import type { CSSProperties, ReactElement, ReactNode } from 'react';
+import type { CSSProperties, CompositionEventHandler, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, ReactElement, ReactNode } from 'react';
 import { CommonPluginOptions } from "..";
 import type { IEditor } from "../../../types";
 export interface ReactEditorContentProps {
@@ -7,9 +7,16 @@ export interface ReactEditorContentProps {
     type: string;
 }
 export interface ReactPlainTextProps {
+    autoFocus?: boolean;
     children: ReactElement<ReactEditorContentProps>;
     className?: string;
+    onBlur?: FocusEventHandler<HTMLDivElement>;
     onChange?: (editor: IEditor) => void;
+    onCompositionEnd?: CompositionEventHandler<HTMLDivElement>;
+    onCompositionStart?: CompositionEventHandler<HTMLDivElement>;
+    onContextMenu?: MouseEventHandler<HTMLDivElement>;
+    onFocus?: FocusEventHandler<HTMLDivElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
     style?: CSSProperties;
     theme?: CommonPluginOptions['theme'] & {
         fontSize?: number;

package/es/react/Editor/Editor.js

@@ -9,12 +9,16 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { isModifierMatch } from 'lexical';
 import { createElement, memo, useMemo } from 'react';
+import { mergeRefs } from 'react-merge-refs';
+import { CONTROL_OR_META } from "../../common/sys";
 import { ReactEditor } from "../../editor-kernel/react/react-editor";
 import { ReactEditorContent, ReactPlainText } from "../../plugins/common";
 import { ReactMentionPlugin } from "../../plugins/mention";
 import { ReactSlashOption, ReactSlashPlugin } from "../../plugins/slash";
 import { useEditorContent } from "../EditorProvider";
+import { useEditor } from "./useEditor";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var Editor = /*#__PURE__*/memo(function (_ref) {
@@ -31,10 +35,19 @@ var Editor = /*#__PURE__*/memo(function (_ref) {
     _ref$mentionOption = _ref.mentionOption,
     mentionOption = _ref$mentionOption === void 0 ? {} : _ref$mentionOption,
     variant = _ref.variant,
+    onKeyDown = _ref.onKeyDown,
     theme = _ref.theme,
     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 ref = useEditor();
   var _useEditorContent = useEditorContent(),
     config = _useEditorContent.config;
   var enableSlash = Boolean((slashOption === null || slashOption === void 0 ? void 0 : slashOption.items) && slashOption.items.length > 0);
@@ -70,12 +83,41 @@ var Editor = /*#__PURE__*/memo(function (_ref) {
       }, restMentionOption)) : undefined]
     });
   }, [enableSlash, enableMention, slashOption, restMentionOption]);
+  var handleKeyDown = function handleKeyDown(e) {
+    // Check if currently composing (e.g., typing with IME)
+    var isComposing = e.nativeEvent.isComposing;
+
+    // Handle Enter key press
+    if (e.key === 'Enter' && !isComposing) {
+      // Support for Ctrl/Cmd + Enter for forced submit
+      if (isModifierMatch(e.nativeEvent, CONTROL_OR_META) && onPressEnter) {
+        // Force submit with modifier key
+        onPressEnter(e);
+        return;
+      }
+
+      // Regular Enter key handling
+      if (onPressEnter) {
+        onPressEnter(e);
+      }
+    }
+
+    // Call the optional onKeyDown handler
+    onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
+  };
   return /*#__PURE__*/_jsxs(ReactEditor, {
     config: config,
-    editorRef: editorRef,
+    editorRef: mergeRefs([ref, 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: handleKeyDown,
       style: style,
       theme: theme,
       variant: variant,

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

@@ -1,4 +1,4 @@
-import type { CSSProperties, FC, ReactNode, Ref } from 'react';
+import type { CSSProperties, CompositionEventHandler, FC, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, ReactNode, Ref } from 'react';
 import type { ReactEditorContentProps, ReactPlainTextProps } from "../../plugins/common/react";
 import type { ReactMentionPluginProps } from "../../plugins/mention/react";
 import type { ReactSlashOptionProps } from "../../plugins/slash/react";
@@ -8,11 +8,19 @@ interface MentionOption extends Partial<ReactSlashOptionProps> {
     markdownWriter?: ReactMentionPluginProps['markdownWriter'];
 }
 export interface EditorProps extends Partial<ReactEditorContentProps> {
+    autoFocus?: boolean;
     children?: ReactNode;
     className?: string;
     editorRef?: Ref<IEditor>;
     mentionOption?: MentionOption;
+    onBlur?: FocusEventHandler<HTMLDivElement>;
     onChange?: (editor: IEditor) => void;
+    onCompositionEnd?: CompositionEventHandler<HTMLDivElement>;
+    onCompositionStart?: CompositionEventHandler<HTMLDivElement>;
+    onContextMenu?: MouseEventHandler<HTMLDivElement>;
+    onFocus?: FocusEventHandler<HTMLDivElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
+    onPressEnter?: KeyboardEventHandler<HTMLDivElement>;
     plugins?: EditorPlugin[];
     slashOption?: Partial<ReactSlashOptionProps>;
     style?: CSSProperties;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/editor",
-  "version": "1.0.4",
+  "version": "1.1.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"
   },