@chaitrabhairappa/react-native-rich-text-editor 2.0.0 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chaitrabhairappa/react-native-rich-text-editor",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A high-performance native rich text editor for React Native (New Architecture / Fabric only)",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -8,6 +8,7 @@
   "react-native": "lib/module/index.js",
   "source": "lib/module/index.js",
   "files": [
+    "src",
     "lib",
     "assets",
     "android",

package/src/RichTextEditorViewNativeComponent.ts

@@ -0,0 +1,82 @@
+import type { ViewProps, HostComponent } from 'react-native';
+import { requireNativeComponent, UIManager } from 'react-native';
+
+type Double = number;
+type Int32 = number;
+type DirectEventHandler<T> = (event: { nativeEvent: T }) => void;
+
+export type StyleRange = Readonly<{
+  style: string;
+  start: Int32;
+  end: Int32;
+  url?: string;
+  highlightColor?: string;
+}>;
+
+export type Block = Readonly<{
+  type: string;
+  text: string;
+  styles: ReadonlyArray<StyleRange>;
+  alignment?: string;
+  checked?: boolean;
+  indentLevel?: Int32;
+}>;
+
+type ContentChangeEventData = Readonly<{
+  text: string;
+  blocksJson: string;
+}>;
+
+type SelectionChangeEventData = Readonly<{
+  start: Int32;
+  end: Int32;
+}>;
+
+type SizeChangeEventData = Readonly<{
+  height: Double;
+}>;
+
+type ActiveStylesEventData = Readonly<{
+  bold: boolean;
+  italic: boolean;
+  underline: boolean;
+  strikethrough: boolean;
+  code: boolean;
+  highlight: boolean;
+  blockType: string;
+  alignment: string;
+}>;
+
+export interface NativeProps extends ViewProps {
+  placeholder?: string;
+  editable?: boolean;
+  maxHeight?: Double;
+  showToolbar?: boolean;
+  toolbarOptions?: ReadonlyArray<string>;
+  variant?: string;
+  initialContentJson?: string;
+
+  onContentChange?: DirectEventHandler<ContentChangeEventData>;
+  onSelectionChange?: DirectEventHandler<SelectionChangeEventData>;
+  onEditorFocus?: DirectEventHandler<Readonly<{}>>;
+  onEditorBlur?: DirectEventHandler<Readonly<{}>>;
+  onSizeChange?: DirectEventHandler<SizeChangeEventData>;
+  onActiveStylesChange?: DirectEventHandler<ActiveStylesEventData>;
+}
+
+const COMPONENT_NAME = 'RichTextEditorView';
+
+// Check if native component exists
+const hasNativeComponent = UIManager.getViewManagerConfig(COMPONENT_NAME) != null;
+
+let RichTextEditorViewNative: HostComponent<NativeProps>;
+
+if (hasNativeComponent) {
+  RichTextEditorViewNative = requireNativeComponent<NativeProps>(
+    COMPONENT_NAME,
+  ) as HostComponent<NativeProps>;
+} else {
+  RichTextEditorViewNative = (() => null) as any;
+}
+
+export default RichTextEditorViewNative;

package/src/index.tsx

@@ -0,0 +1,225 @@
+import React, { forwardRef, useImperativeHandle, useRef, useCallback, useState } from 'react';
+import { StyleSheet } from 'react-native';
+import type {
+  Block,
+  TextAlignment,
+  ContentChangeEvent,
+  SelectionChangeEvent,
+  RichTextEditorProps,
+  RichTextEditorRef,
+} from './types';
+import RichTextEditorViewNative from './RichTextEditorViewNativeComponent';
+
+interface SizeChangeEvent {
+  nativeEvent: {
+    height: number;
+  };
+}
+
+export interface ActiveStylesState {
+  bold: boolean;
+  italic: boolean;
+  underline: boolean;
+  strikethrough: boolean;
+  code: boolean;
+  highlight: boolean;
+  blockType: string;
+  alignment: string;
+}
+
+interface ActiveStylesChangeEvent {
+  nativeEvent: ActiveStylesState;
+}
+
+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 handleSizeChange = 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 */
+    },
+    toggleChecklistItem: () => {
+      /* Native toolbar handles this */
+    },
+  }));
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const handleContentChange = useCallback(
+    (event: any) => {
+      // Parse blocksJson string (codegen doesn't support nested ReadonlyArray<Object>)
+      let blocks: Block[] = [];
+      try {
+        if (event.nativeEvent.blocksJson) {
+          blocks = JSON.parse(event.nativeEvent.blocksJson);
+        } else if (event.nativeEvent.blocks) {
+          // Fallback for backward compatibility
+          blocks = [...event.nativeEvent.blocks];
+        }
+      } catch {
+        blocks = [];
+      }
+
+      // Convert native event to our API format
+      const contentEvent: ContentChangeEvent = {
+        nativeEvent: {
+          text: event.nativeEvent.text,
+          blocks,
+          delta: event.nativeEvent.delta,
+        },
+      };
+      props.onContentChange?.(contentEvent);
+    },
+    [props.onContentChange],
+  );
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const handleSelectionChange = useCallback(
+    (event: any) => {
+      const selectionEvent: SelectionChangeEvent = {
+        nativeEvent: {
+          start: event.nativeEvent.start,
+          end: event.nativeEvent.end,
+        },
+      };
+      props.onSelectionChange?.(selectionEvent);
+    },
+    [props.onSelectionChange],
+  );
+
+  const handleFocus = useCallback(() => {
+    props.onFocus?.();
+  }, [props.onFocus]);
+
+  const handleBlur = useCallback(() => {
+    props.onBlur?.();
+  }, [props.onBlur]);
+
+  const handleActiveStylesChange = useCallback(
+    (event: ActiveStylesChangeEvent) => {
+      props.onActiveStylesChange?.(event.nativeEvent);
+    },
+    [props.onActiveStylesChange],
+  );
+
+  const combinedStyle = StyleSheet.flatten([props.style, { height }]);
+
+  return (
+    <RichTextEditorViewNative
+      ref={nativeRef}
+      style={combinedStyle}
+      placeholder={props.placeholder}
+      initialContentJson={props.initialContent ? JSON.stringify(props.initialContent) : undefined}
+      editable={props.readOnly !== undefined ? !props.readOnly : true}
+      maxHeight={props.maxHeight}
+      showToolbar={props.readOnly ? false : props.showToolbar ?? true}
+      toolbarOptions={props.toolbarOptions}
+      variant={props.variant ?? 'outlined'}
+      onContentChange={handleContentChange}
+      onSelectionChange={handleSelectionChange}
+      onEditorFocus={handleFocus}
+      onEditorBlur={handleBlur}
+      onSizeChange={handleSizeChange}
+      onActiveStylesChange={handleActiveStylesChange}
+    />
+  );
+});
+
+RichTextEditor.displayName = 'RichTextEditor';
+
+export default RichTextEditor;
+export { DEFAULT_TOOLBAR_OPTIONS } from './types';
+export type {
+  Block,
+  BlockType,
+  StyleRange,
+  TextAlignment,
+  EditorVariant,
+  ContentChangeEvent,
+  SelectionChangeEvent,
+  RichTextEditorRef,
+  RichTextEditorProps,
+  ToolbarOption,
+  ContentDelta,
+  DeltaType,
+} from './types';

package/src/types.ts

@@ -0,0 +1,137 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface StyleRange {
+  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';
+
+export interface Block {
+  type: BlockType;
+  text: string;
+  styles: StyleRange[];
+  alignment?: TextAlignment;
+  checked?: boolean;
+  indentLevel?: number;
+}
+
+export interface ContentChangeEvent {
+  nativeEvent: {
+    text: string;
+    blocks: Block[];
+    delta?: ContentDelta;
+  };
+}
+
+export type DeltaType = 'insert' | 'delete' | 'format' | 'replace';
+
+export interface ContentDelta {
+  type: DeltaType;
+  position: number;
+  length?: number;
+  text?: string;
+  blockIndex?: number;
+  style?: string;
+}
+
+export interface SelectionChangeEvent {
+  nativeEvent: {
+    start: number;
+    end: number;
+  };
+}
+
+export type ToolbarOption =
+  | 'bold'
+  | 'italic'
+  | 'strikethrough'
+  | 'underline'
+  | 'code'
+  | 'highlight'
+  | 'heading'
+  | 'bullet'
+  | 'numbered'
+  | 'quote'
+  | 'checklist'
+  | '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',
+];
+
+export interface RichTextEditorProps {
+  style?: StyleProp<ViewStyle>;
+  placeholder?: string;
+  initialContent?: Block[];
+  readOnly?: boolean;
+  maxHeight?: number;
+  showToolbar?: boolean;
+  toolbarOptions?: ToolbarOption[];
+  variant?: EditorVariant;
+  onContentChange?: (event: ContentChangeEvent) => void;
+  onSelectionChange?: (event: SelectionChangeEvent) => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+}
+
+export interface RichTextEditorRef {
+  setContent: (blocks: Block[]) => void;
+  getText: () => Promise<string>;
+  getBlocks: () => Promise<Block[]>;
+  clear: () => void;
+  focus: () => void;
+  blur: () => void;
+  toggleBold: () => void;
+  toggleItalic: () => void;
+  toggleUnderline: () => void;
+  toggleStrikethrough: () => void;
+  toggleCode: () => void;
+  toggleHighlight: (color?: string) => void;
+  setHeading: () => void;
+  setBulletList: () => void;
+  setNumberedList: () => void;
+  setQuote: () => void;
+  setChecklist: () => void;
+  setParagraph: () => void;
+  insertLink: (url: string, text: string) => void;
+  undo: () => void;
+  redo: () => void;
+  clearFormatting: () => void;
+  indent: () => void;
+  outdent: () => void;
+  setAlignment: (alignment: TextAlignment) => void;
+  toggleChecklistItem: () => void;
+}