@hero-design/rn 8.108.3-alpha.0 → 8.109.1

package/types/components/RichTextEditor/BaseRichTextEditor.d.ts

@@ -0,0 +1,69 @@
+import type { ReactElement, Ref } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { TextUnit } from './types';
+export interface RichTextEditorRef {
+    requestBlur: VoidFunction;
+    insertNodes: (nodes: Record<string, unknown>[]) => void;
+    deleteBackward: (unit?: TextUnit) => void;
+    setReadOnly: (readOnly: boolean) => void;
+}
+export type EditorValue = {
+    type: string;
+    children: any;
+}[];
+export interface BaseRichTextEditorProps {
+    /**
+     * If true, the editor will be focused when the user enters the screen
+     */
+    autoFocus?: boolean;
+    /**
+     * Error message
+     */
+    error?: string;
+    /**
+     * Field value
+     */
+    value?: EditorValue;
+    /**
+     * Unique name used to communicate with webview
+     */
+    name: string;
+    /**
+     * Callback function called when the field value changed
+     */
+    onChange: (data: EditorValue) => void;
+    /**
+     * Callback function called when the cursor position changed
+     */
+    onCursorChange?: (params: {
+        position: {
+            top: number;
+        };
+    }) => void;
+    /**
+     * Field placeholder
+     */
+    placeholder?: string;
+    /**
+     * Additional styles
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing ID of the component
+     */
+    testID?: string;
+    /**
+     * Imperative ref to expose the component method
+     */
+    editorRef?: Ref<RichTextEditorRef>;
+    /**
+     * Callback function called when the editor is focused
+     */
+    onFocus?: () => void;
+    /**
+     * Callback function called when the editor is blurred
+     */
+    onBlur?: () => void;
+}
+declare const BaseRichTextEditor: ({ autoFocus, name, placeholder, onChange, onCursorChange, style, testID, editorRef, value, onFocus, onBlur, }: BaseRichTextEditorProps) => ReactElement;
+export default BaseRichTextEditor;

package/types/components/RichTextEditor/RichTextEditor.d.ts

@@ -1,54 +1,11 @@
 import React from 'react';
 import type { Ref } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
-import type { TextUnit } from './types';
-export interface RichTextEditorRef {
-    requestBlur: VoidFunction;
-    insertNodes: (nodes: Record<string, unknown>[]) => void;
-    deleteBackward: (unit?: TextUnit) => void;
-    setReadOnly: (readOnly: boolean) => void;
-}
+import type { BaseRichTextEditorProps, RichTextEditorRef } from './BaseRichTextEditor';
 export type EditorValue = {
     type: string;
     children: any;
 }[];
-export interface RichTextEditorProps {
-    /**
-     * If true, the editor will be focused when the user enters the screen
-     */
-    autoFocus?: boolean;
-    /**
-     * Error message
-     */
-    error?: string;
-    /**
-     * Field value
-     */
-    value?: EditorValue;
-    /**
-     * Unique name used to communicate with webview
-     */
-    name: string;
-    /**
-     * Callback function called when the field value changed
-     */
-    onChange: (data: EditorValue) => void;
-    /**
-     * Callback function called when the cursor position changed
-     */
-    onCursorChange?: (params: {
-        position: {
-            top: number;
-        };
-    }) => void;
-    /**
-     * Field placeholder
-     */
-    placeholder?: string;
-    /**
-     * Additional styles
-     */
-    style?: StyleProp<ViewStyle>;
+export interface RichTextEditorProps extends Omit<BaseRichTextEditorProps, 'editorRef'> {
     /**
      * Field label
      */

package/types/components/RichTextEditor/constants.d.ts

@@ -7,3 +7,7 @@ export declare enum ToolbarEvents {
     HeadingOne = "heading-one",
     HeadingTwo = "heading-two"
 }
+export declare enum EditorEvents {
+    EditorFocus = "editor-focus",
+    EditorBlur = "editor-blur"
+}

package/types/components/RichTextEditor/hooks/useRichTextEditorEvents.d.ts

@@ -0,0 +1,21 @@
+import type { EditorEvents, ToolbarEvents } from '../constants';
+type SubscribableEvent = ToolbarEvents | EditorEvents;
+/**
+ * Hook to subscribe to events for a rich text editor
+ * @param editorName - The name of the editor to subscribe to events for
+ * @returns An object with two functions: emitEvent and subscribeToEvents
+ * @example
+ * const { emitEvent, subscribeToEvents } = useRichTextEditorEvents('editorName');
+ * subscribeToEvents(EditorEvents.EditorFocus, () => {
+ *   console.log('Editor focused');
+ * });
+ * emitEvent({ type: EditorEvents.EditorFocus, data: null });
+ */
+declare const useRichTextEditorEvents: (editorName: string) => {
+    emitEvent: <TEventName extends ToolbarEvents>({ type, data, }: {
+        type: TEventName;
+        data: unknown;
+    }) => void;
+    subscribeToEvents: <TEventName extends SubscribableEvent>(eventName: TEventName, onEvent: (data: unknown) => void) => () => void;
+};
+export default useRichTextEditorEvents;

package/types/components/RichTextEditor/index.d.ts

@@ -1,7 +1,19 @@
-import type { RichTextEditorProps, RichTextEditorRef } from './RichTextEditor';
+import { EditorEvents, ToolbarEvents } from './constants';
+import type { RichTextEditorProps } from './RichTextEditor';
+import type { RichTextEditorRef } from './BaseRichTextEditor';
 export type { RichTextEditorProps, RichTextEditorRef };
 declare const _default: import("react").ForwardRefExoticComponent<Omit<RichTextEditorProps, "forwardedRef"> & import("react").RefAttributes<RichTextEditorRef>> & {
-    MentionList: <TMetaData>({ name: eventPrefix, render, }: import("./MentionList").MentionListProps<TMetaData>) => import("react").JSX.Element | null;
     Toolbar: ({ name, buttons, testID, }: import("./EditorToolbar").EditorToolbarProps) => import("react").JSX.Element | null;
+    MentionList: <TMetaData>({ name: eventPrefix, render, }: import("./MentionList").MentionListProps<TMetaData>) => import("react").JSX.Element | null;
+    EditorEvents: typeof EditorEvents;
+    ToolbarEvents: typeof ToolbarEvents;
+    useRichTextEditorEvents: (editorName: string) => {
+        emitEvent: <TEventName extends ToolbarEvents>({ type, data, }: {
+            type: TEventName;
+            data: unknown;
+        }) => void;
+        subscribeToEvents: <TEventName extends ToolbarEvents | EditorEvents>(eventName: TEventName, onEvent: (data: unknown) => void) => () => void;
+    };
+    Base: ({ autoFocus, name, placeholder, onChange, onCursorChange, style, testID, editorRef, value, onFocus, onBlur, }: import("./BaseRichTextEditor").BaseRichTextEditorProps) => import("react").ReactElement;
 };
 export default _default;