@chaitrabhairappa/react-native-rich-text-editor 2.1.2 → 3.1.0

package/src/index.tsx

@@ -1,14 +1,21 @@
-import React, { forwardRef, useImperativeHandle, useRef, useCallback, useState } from 'react';
-import { StyleSheet } from 'react-native';
+import React from "react";
+import {
+  findNodeHandle,
+  NativeModules,
+  Platform,
+  StyleSheet,
+  UIManager,
+} from "react-native";
 import type {
   Block,
+  MediaAttachment,
   TextAlignment,
   ContentChangeEvent,
   SelectionChangeEvent,
   RichTextEditorProps,
   RichTextEditorRef,
-} from './types';
-import RichTextEditorViewNative from './RichTextEditorViewNativeComponent';
+} from "./types";
+import RichTextEditorViewNative from "./RichTextEditorViewNativeComponent";
 
 interface SizeChangeEvent {
   nativeEvent: {
@@ -35,97 +42,168 @@ export interface RichTextEditorPropsExtended extends RichTextEditorProps {
   onActiveStylesChange?: (styles: ActiveStylesState) => void;
 }
 
-const RichTextEditor = forwardRef<RichTextEditorRef, RichTextEditorPropsExtended>((props, ref) => {
-  const nativeRef = useRef<React.ElementRef<typeof RichTextEditorViewNative>>(null);
-  const [height, setHeight] = useState<number>(44);
+const RichTextEditor = React.forwardRef<
+  RichTextEditorRef,
+  RichTextEditorPropsExtended
+>((props, ref) => {
+  const nativeRef =
+    React.useRef<React.ElementRef<typeof RichTextEditorViewNative>>(null);
+  const [height, setHeight] = React.useState<number>(44);
 
-  const handleSizeChange = useCallback((event: SizeChangeEvent) => {
+  const handleSizeChange = React.useCallback((event: SizeChangeEvent) => {
     const newHeight = event.nativeEvent?.height;
     if (newHeight && newHeight > 0) {
       setHeight(newHeight);
     }
   }, []);
 
-  // These are placeholder methods for potential future UIManager.dispatchViewManagerCommand usage
-  useImperativeHandle(ref, () => ({
-    setContent: (_blocks: Block[]) => {
-      /* Native toolbar handles this */
-    },
-    getText: async (): Promise<string> => '',
-    getBlocks: async (): Promise<Block[]> => [],
-    clear: () => {
-      /* Native toolbar handles this */
-    },
-    focus: () => {
-      /* Native toolbar handles this */
-    },
-    blur: () => {
-      /* Native toolbar handles this */
-    },
-    toggleBold: () => {
-      /* Native toolbar handles this */
-    },
-    toggleItalic: () => {
-      /* Native toolbar handles this */
-    },
-    toggleUnderline: () => {
-      /* Native toolbar handles this */
-    },
-    toggleStrikethrough: () => {
-      /* Native toolbar handles this */
-    },
-    toggleCode: () => {
-      /* Native toolbar handles this */
-    },
-    toggleHighlight: (_color?: string) => {
-      /* Native toolbar handles this */
-    },
-    setHeading: () => {
-      /* Native toolbar handles this */
-    },
-    setBulletList: () => {
-      /* Native toolbar handles this */
-    },
-    setNumberedList: () => {
-      /* Native toolbar handles this */
-    },
-    setQuote: () => {
-      /* Native toolbar handles this */
-    },
-    setChecklist: () => {
-      /* Native toolbar handles this */
-    },
-    setParagraph: () => {
-      /* Native toolbar handles this */
-    },
-    insertLink: (_url: string, _text: string) => {
-      /* Native toolbar handles this */
-    },
-    undo: () => {
-      /* Native toolbar handles this */
-    },
-    redo: () => {
-      /* Native toolbar handles this */
-    },
-    clearFormatting: () => {
-      /* Native toolbar handles this */
-    },
-    indent: () => {
-      /* Native toolbar handles this */
-    },
-    outdent: () => {
-      /* Native toolbar handles this */
-    },
-    setAlignment: (_alignment: TextAlignment) => {
-      /* Native toolbar handles this */
+  const dispatchAndroidCommand = React.useCallback(
+    (commandName: string, args: (string | number | boolean)[] = []) => {
+      if (Platform.OS !== "android") return;
+
+      const nativeTag = findNodeHandle(nativeRef.current);
+      if (nativeTag == null) return;
+
+      const commandConfig =
+        UIManager.getViewManagerConfig("RichTextEditorView")?.Commands;
+      const commandId = commandConfig?.[commandName];
+
+      if (commandId == null) return;
+
+      UIManager.dispatchViewManagerCommand(nativeTag, commandId, args);
     },
-    toggleChecklistItem: () => {
-      /* Native toolbar handles this */
+    [],
+  );
+
+  const dispatchInsertMediaAttachment = React.useCallback(
+    (uri: string) => {
+      if (typeof uri !== "string" || uri.trim().length === 0) return;
+
+      if (Platform.OS === "android") {
+        dispatchAndroidCommand("insertMediaAttachment", [uri]);
+        return;
+      }
+
+      if (Platform.OS === "ios") {
+        const nativeTag = findNodeHandle(nativeRef.current);
+        if (nativeTag == null) return;
+
+        const manager = NativeModules
+          ? (NativeModules as Record<string, unknown>)[
+              "RichTextEditorViewManager"
+            ]
+          : null;
+
+        if (
+          manager &&
+          typeof manager === "object" &&
+          typeof (manager as { insertMediaAttachment?: unknown })
+            .insertMediaAttachment === "function"
+        ) {
+          (
+            manager as {
+              insertMediaAttachment: (tag: number, value: string) => void;
+            }
+          ).insertMediaAttachment(nativeTag, uri);
+        }
+      }
     },
-  }));
+    [dispatchAndroidCommand],
+  );
+
+  // These are placeholder methods for potential future UIManager.dispatchViewManagerCommand usage
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      setContent: (_blocks: Block[]) => {
+        /* Native toolbar handles this */
+      },
+      getText: async (): Promise<string> => "",
+      getBlocks: async (): Promise<Block[]> => [],
+      clear: () => {
+        /* Native toolbar handles this */
+      },
+      focus: () => {
+        /* Native toolbar handles this */
+      },
+      blur: () => {
+        /* Native toolbar handles this */
+      },
+      toggleBold: () => {
+        /* Native toolbar handles this */
+      },
+      toggleItalic: () => {
+        /* Native toolbar handles this */
+      },
+      toggleUnderline: () => {
+        /* Native toolbar handles this */
+      },
+      toggleStrikethrough: () => {
+        /* Native toolbar handles this */
+      },
+      toggleCode: () => {
+        /* Native toolbar handles this */
+      },
+      toggleHighlight: (_color?: string) => {
+        /* Native toolbar handles this */
+      },
+      setHeading: () => {
+        /* Native toolbar handles this */
+      },
+      setBulletList: () => {
+        /* Native toolbar handles this */
+      },
+      setNumberedList: () => {
+        /* Native toolbar handles this */
+      },
+      setQuote: () => {
+        /* Native toolbar handles this */
+      },
+      setChecklist: () => {
+        /* Native toolbar handles this */
+      },
+      setParagraph: () => {
+        /* Native toolbar handles this */
+      },
+      insertLink: (_url: string, _text: string) => {
+        /* Native toolbar handles this */
+      },
+      insertMediaAttachment: (mediaAttachment: MediaAttachment) => {
+        if (
+          mediaAttachment &&
+          typeof mediaAttachment === "object" &&
+          typeof mediaAttachment.uri === "string"
+        ) {
+          dispatchInsertMediaAttachment(mediaAttachment.uri);
+        }
+      },
+      undo: () => {
+        /* Native toolbar handles this */
+      },
+      redo: () => {
+        /* Native toolbar handles this */
+      },
+      clearFormatting: () => {
+        /* Native toolbar handles this */
+      },
+      indent: () => {
+        /* Native toolbar handles this */
+      },
+      outdent: () => {
+        /* Native toolbar handles this */
+      },
+      setAlignment: (_alignment: TextAlignment) => {
+        /* Native toolbar handles this */
+      },
+      toggleChecklistItem: () => {
+        /* Native toolbar handles this */
+      },
+    }),
+    [dispatchInsertMediaAttachment],
+  );
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const handleContentChange = useCallback(
+  const handleContentChange = React.useCallback(
     (event: any) => {
       // Parse blocksJson string (codegen doesn't support nested ReadonlyArray<Object>)
       let blocks: Block[] = [];
@@ -154,7 +232,7 @@ const RichTextEditor = forwardRef<RichTextEditorRef, RichTextEditorPropsExtended
   );
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const handleSelectionChange = useCallback(
+  const handleSelectionChange = React.useCallback(
     (event: any) => {
       const selectionEvent: SelectionChangeEvent = {
         nativeEvent: {
@@ -167,15 +245,15 @@ const RichTextEditor = forwardRef<RichTextEditorRef, RichTextEditorPropsExtended
     [props.onSelectionChange],
   );
 
-  const handleFocus = useCallback(() => {
+  const handleFocus = React.useCallback(() => {
     props.onFocus?.();
   }, [props.onFocus]);
 
-  const handleBlur = useCallback(() => {
+  const handleBlur = React.useCallback(() => {
     props.onBlur?.();
   }, [props.onBlur]);
 
-  const handleActiveStylesChange = useCallback(
+  const handleActiveStylesChange = React.useCallback(
     (event: ActiveStylesChangeEvent) => {
       props.onActiveStylesChange?.(event.nativeEvent);
     },
@@ -189,13 +267,15 @@ const RichTextEditor = forwardRef<RichTextEditorRef, RichTextEditorPropsExtended
       ref={nativeRef}
       style={combinedStyle}
       placeholder={props.placeholder}
-      initialContentJson={props.initialContent ? JSON.stringify(props.initialContent) : undefined}
+      initialContentJson={
+        props.initialContent ? JSON.stringify(props.initialContent) : undefined
+      }
       editable={props.readOnly !== undefined ? !props.readOnly : true}
       maxHeight={props.maxHeight}
       numberOfLines={props.numberOfLines}
-      showToolbar={props.readOnly ? false : props.showToolbar ?? true}
+      showToolbar={props.readOnly ? false : (props.showToolbar ?? true)}
       toolbarOptions={props.toolbarOptions}
-      variant={props.variant ?? 'outlined'}
+      variant={props.variant ?? "outlined"}
       onContentChange={handleContentChange}
       onSelectionChange={handleSelectionChange}
       onEditorFocus={handleFocus}
@@ -206,14 +286,15 @@ const RichTextEditor = forwardRef<RichTextEditorRef, RichTextEditorPropsExtended
   );
 });
 
-RichTextEditor.displayName = 'RichTextEditor';
+RichTextEditor.displayName = "RichTextEditor";
 
 export default RichTextEditor;
-export { DEFAULT_TOOLBAR_OPTIONS } from './types';
+export { DEFAULT_TOOLBAR_OPTIONS } from "./types";
 export type {
   Block,
   BlockType,
   StyleRange,
+  MediaAttachment,
   TextAlignment,
   EditorVariant,
   ContentChangeEvent,
@@ -223,4 +304,4 @@ export type {
   ToolbarOption,
   ContentDelta,
   DeltaType,
-} from './types';
+} from "./types";

package/src/types.ts

@@ -1,16 +1,38 @@
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, ViewStyle } from "react-native";
 
 export interface StyleRange {
-  style: 'bold' | 'italic' | 'underline' | 'strikethrough' | 'link' | 'code' | 'highlight';
+  style:
+    | "bold"
+    | "italic"
+    | "underline"
+    | "strikethrough"
+    | "link"
+    | "code"
+    | "highlight";
   start: number;
   end: number;
   url?: string;
   highlightColor?: string;
 }
 
-export type BlockType = 'paragraph' | 'bullet' | 'numbered' | 'heading' | 'quote' | 'checklist';
-export type TextAlignment = 'left' | 'center' | 'right';
-export type EditorVariant = 'outlined' | 'flat' | 'plain';
+export type BlockType =
+  | "paragraph"
+  | "bullet"
+  | "numbered"
+  | "heading"
+  | "quote"
+  | "checklist"
+  | "mediaAttachment";
+export type TextAlignment = "left" | "center" | "right";
+export type EditorVariant = "outlined" | "flat" | "plain";
+
+export interface MediaAttachment {
+  kind: "image";
+  uri: string;
+  width?: number;
+  height?: number;
+  alt?: string;
+}
 
 export interface Block {
   type: BlockType;
@@ -19,6 +41,7 @@ export interface Block {
   alignment?: TextAlignment;
   checked?: boolean;
   indentLevel?: number;
+  mediaAttachment?: MediaAttachment;
 }
 
 export interface ContentChangeEvent {
@@ -29,7 +52,7 @@ export interface ContentChangeEvent {
   };
 }
 
-export type DeltaType = 'insert' | 'delete' | 'format' | 'replace';
+export type DeltaType = "insert" | "delete" | "format" | "replace";
 
 export interface ContentDelta {
   type: DeltaType;
@@ -48,48 +71,50 @@ export interface SelectionChangeEvent {
 }
 
 export type ToolbarOption =
-  | 'bold'
-  | 'italic'
-  | 'strikethrough'
-  | 'underline'
-  | 'code'
-  | 'highlight'
-  | 'heading'
-  | 'bullet'
-  | 'numbered'
-  | 'quote'
-  | 'checklist'
-  | 'link'
-  | 'undo'
-  | 'redo'
-  | 'clearFormatting'
-  | 'indent'
-  | 'outdent'
-  | 'alignLeft'
-  | 'alignCenter'
-  | 'alignRight';
+  | "bold"
+  | "italic"
+  | "strikethrough"
+  | "underline"
+  | "code"
+  | "highlight"
+  | "heading"
+  | "bullet"
+  | "numbered"
+  | "quote"
+  | "checklist"
+  | "mediaAttachment"
+  | "link"
+  | "undo"
+  | "redo"
+  | "clearFormatting"
+  | "indent"
+  | "outdent"
+  | "alignLeft"
+  | "alignCenter"
+  | "alignRight";
 
 export const DEFAULT_TOOLBAR_OPTIONS: ToolbarOption[] = [
-  'bold',
-  'italic',
-  'underline',
-  'strikethrough',
-  'code',
-  'highlight',
-  'heading',
-  'bullet',
-  'numbered',
-  'quote',
-  'checklist',
-  'link',
-  'undo',
-  'redo',
-  'clearFormatting',
-  'indent',
-  'outdent',
-  'alignLeft',
-  'alignCenter',
-  'alignRight',
+  "bold",
+  "italic",
+  "underline",
+  "strikethrough",
+  "code",
+  "highlight",
+  "heading",
+  "bullet",
+  "numbered",
+  "quote",
+  "checklist",
+  "mediaAttachment",
+  "link",
+  "undo",
+  "redo",
+  "clearFormatting",
+  "indent",
+  "outdent",
+  "alignLeft",
+  "alignCenter",
+  "alignRight",
 ];
 
 export interface RichTextEditorProps {
@@ -128,6 +153,7 @@ export interface RichTextEditorRef {
   setChecklist: () => void;
   setParagraph: () => void;
   insertLink: (url: string, text: string) => void;
+  insertMediaAttachment: (mediaAttachment: MediaAttachment) => void;
   undo: () => void;
   redo: () => void;
   clearFormatting: () => void;