@lobehub/editor 1.1.0 → 1.2.1

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

@@ -39,15 +39,15 @@ export var ReactEditor = function ReactEditor(_ref2) {
     config = _ref2.config;
   var composerContext = useMemo(function () {
     var editor = Editor.createEditor();
-    updateRef(editorRef, editor);
     var theme = createLexicalComposerContext(null, null);
     return [editor, theme];
   }, []);
   useEffect(function () {
+    updateRef(editorRef, composerContext[0]);
     return function () {
       updateRef(editorRef, undefined);
     };
-  }, [editorRef]);
+  }, [editorRef, composerContext]);
   return /*#__PURE__*/_jsxs(LexicalComposerContext, {
     value: composerContext,
     children: [/*#__PURE__*/_jsx(ConfigInjector, {

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

@@ -37,6 +37,7 @@ var ReactPlainText = /*#__PURE__*/memo(function (_ref) {
     onFocus = _ref.onFocus,
     onBlur = _ref.onBlur,
     autoFocus = _ref.autoFocus,
+    onPressEnter = _ref.onPressEnter,
     onCompositionStart = _ref.onCompositionStart,
     onCompositionEnd = _ref.onCompositionEnd,
     onContextMenu = _ref.onContextMenu;
@@ -100,17 +101,63 @@ var ReactPlainText = /*#__PURE__*/memo(function (_ref) {
       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: onBlur,
-      onCompositionEnd: onCompositionEnd,
-      onCompositionStart: onCompositionStart,
-      onContextMenu: onContextMenu,
-      onFocus: onFocus,
-      onKeyDown: onKeyDown,
+      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, CompositionEventHandler, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, 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;
@@ -10,13 +10,35 @@ export interface ReactPlainTextProps {
     autoFocus?: boolean;
     children: ReactElement<ReactEditorContentProps>;
     className?: string;
-    onBlur?: FocusEventHandler<HTMLDivElement>;
+    onBlur?: (props: {
+        editor: IEditor;
+        event: FocusEvent<HTMLDivElement>;
+    }) => void;
     onChange?: (editor: IEditor) => void;
-    onCompositionEnd?: CompositionEventHandler<HTMLDivElement>;
-    onCompositionStart?: CompositionEventHandler<HTMLDivElement>;
-    onContextMenu?: MouseEventHandler<HTMLDivElement>;
-    onFocus?: FocusEventHandler<HTMLDivElement>;
-    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
+    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

@@ -9,16 +9,12 @@ 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) {
@@ -36,7 +32,6 @@ var Editor = /*#__PURE__*/memo(function (_ref) {
     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,
@@ -47,7 +42,6 @@ var Editor = /*#__PURE__*/memo(function (_ref) {
     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);
@@ -83,31 +77,9 @@ 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: mergeRefs([ref, editorRef]),
+    editorRef: editorRef,
     children: [memoPlugins, memoSlash, memoMention, /*#__PURE__*/_jsx(ReactPlainText, {
       autoFocus: autoFocus,
       className: className,
@@ -117,9 +89,9 @@ var Editor = /*#__PURE__*/memo(function (_ref) {
       onCompositionStart: onCompositionStart,
       onContextMenu: onContextMenu,
       onFocus: onFocus,
-      onKeyDown: handleKeyDown,
+      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, CompositionEventHandler, FC, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, 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,24 +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;
-    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;
-    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.1.0",
+  "version": "1.2.1",
   "description": "A powerful and extensible rich text editor built on Meta's Lexical framework, providing a modern editing experience with React integration.",
   "keywords": [
     "lobehub",