@chaitrabhairappa/react-native-rich-text-editor 1.0.1 → 1.0.3

package/README.md

@@ -39,7 +39,7 @@ yarn add @chaitrabhairappa/react-native-rich-text-editor
 ### iOS
 
 ```bash
-cd ios && pod install
+cd ios && bundle install && bundle exec pod install && cd ..
 ```
 
 ### Android
@@ -219,22 +219,6 @@ const toolbarOptions: ToolbarOption[] = ['bold', 'italic', 'underline', 'bullet'
 />;
 ```
 
-## Android Setup
-
-Add the package to your `MainApplication.java` or `MainApplication.kt`:
-
-```java
-// MainApplication.java
-import com.richtext.editor.RichTextEditorPackage;
-
-@Override
-protected List<ReactPackage> getPackages() {
-    List<ReactPackage> packages = new PackageList(this).getPackages();
-    packages.add(new RichTextEditorPackage());
-    return packages;
-}
-```
-
 ## License
 
 MIT

package/package.json

@@ -1,14 +1,13 @@
 {
   "name": "@chaitrabhairappa/react-native-rich-text-editor",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "A powerful native rich text editor for React Native with support for text formatting, lists, and more",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "types": "lib/typescript/src/index.d.ts",
-  "react-native": "src/index.tsx",
-  "source": "src/index.tsx",
+  "react-native": "lib/module/index.js",
+  "source": "lib/module/index.js",
   "files": [
-    "src",
     "lib",
     "android",
     "!android/build",

package/src/index.tsx

@@ -1,199 +0,0 @@
-import React, { forwardRef, useImperativeHandle, useRef, useCallback, useState } from 'react';
-import { requireNativeComponent, UIManager, findNodeHandle, StyleSheet } from 'react-native';
-import type {
-  Block,
-  TextAlignment,
-  ContentChangeEvent,
-  SelectionChangeEvent,
-  RichTextEditorProps,
-  RichTextEditorRef,
-} from './types';
-
-const COMPONENT_NAME = 'RichTextEditorView';
-
-interface SizeChangeEvent {
-  nativeEvent: {
-    height: number;
-  };
-}
-
-interface NativeComponentProps extends Omit<RichTextEditorProps, 'onFocus' | 'onBlur' | 'readOnly' | 'initialContent' | 'toolbarOptions'> {
-  editable?: boolean;
-  initialContent?: Block[];
-  toolbarOptions?: string[];
-  onEditorFocus?: () => void;
-  onEditorBlur?: () => void;
-  onSizeChange?: (event: SizeChangeEvent) => void;
-}
-
-const RichTextEditorViewNative = requireNativeComponent<NativeComponentProps>(COMPONENT_NAME);
-
-const RichTextEditor = forwardRef<RichTextEditorRef, RichTextEditorProps>(
-  (props, ref) => {
-    const nativeRef = useRef(null);
-    const [height, setHeight] = useState<number>(44);
-
-    const handleSizeChange = useCallback((event: SizeChangeEvent) => {
-      const newHeight = event.nativeEvent?.height;
-      if (newHeight && newHeight > 0) {
-        setHeight(newHeight);
-      }
-    }, []);
-
-    const dispatchCommand = useCallback((command: string, args: unknown[] = []) => {
-      const handle = findNodeHandle(nativeRef.current);
-      if (handle) {
-        const commands = UIManager.getViewManagerConfig(COMPONENT_NAME)?.Commands;
-        const commandId = commands?.[command];
-        if (commandId !== undefined) {
-          UIManager.dispatchViewManagerCommand(handle, commandId, args);
-        }
-      }
-    }, []);
-
-    useImperativeHandle(ref, () => ({
-      setContent: (blocks: Block[]) => {
-        dispatchCommand('setContent', [blocks]);
-      },
-      getText: async (): Promise<string> => {
-        return new Promise((resolve) => {
-          resolve('');
-        });
-      },
-      getBlocks: async (): Promise<Block[]> => {
-        return new Promise((resolve) => {
-          resolve([]);
-        });
-      },
-      clear: () => {
-        dispatchCommand('clear');
-      },
-      focus: () => {
-        dispatchCommand('focus');
-      },
-      blur: () => {
-        dispatchCommand('blur');
-      },
-      toggleBold: () => {
-        dispatchCommand('toggleBold');
-      },
-      toggleItalic: () => {
-        dispatchCommand('toggleItalic');
-      },
-      toggleUnderline: () => {
-        dispatchCommand('toggleUnderline');
-      },
-      toggleStrikethrough: () => {
-        dispatchCommand('toggleStrikethrough');
-      },
-      toggleCode: () => {
-        dispatchCommand('toggleCode');
-      },
-      toggleHighlight: (color?: string) => {
-        dispatchCommand('toggleHighlight', color ? [color] : []);
-      },
-      setHeading: () => {
-        dispatchCommand('setHeading');
-      },
-      setBulletList: () => {
-        dispatchCommand('setBulletList');
-      },
-      setNumberedList: () => {
-        dispatchCommand('setNumberedList');
-      },
-      setQuote: () => {
-        dispatchCommand('setQuote');
-      },
-      setChecklist: () => {
-        dispatchCommand('setChecklist');
-      },
-      setParagraph: () => {
-        dispatchCommand('setParagraph');
-      },
-      insertLink: (url: string, text: string) => {
-        dispatchCommand('insertLink', [url, text]);
-      },
-      undo: () => {
-        dispatchCommand('undo');
-      },
-      redo: () => {
-        dispatchCommand('redo');
-      },
-      clearFormatting: () => {
-        dispatchCommand('clearFormatting');
-      },
-      indent: () => {
-        dispatchCommand('indent');
-      },
-      outdent: () => {
-        dispatchCommand('outdent');
-      },
-      setAlignment: (alignment: TextAlignment) => {
-        dispatchCommand('setAlignment', [alignment]);
-      },
-      toggleChecklistItem: () => {
-        dispatchCommand('toggleChecklistItem');
-      },
-    }));
-
-    const handleContentChange = useCallback(
-      (event: ContentChangeEvent) => {
-        props.onContentChange?.(event);
-      },
-      [props.onContentChange]
-    );
-
-    const handleSelectionChange = useCallback(
-      (event: SelectionChangeEvent) => {
-        props.onSelectionChange?.(event);
-      },
-      [props.onSelectionChange]
-    );
-
-    const handleFocus = useCallback(() => {
-      props.onFocus?.();
-    }, [props.onFocus]);
-
-    const handleBlur = useCallback(() => {
-      props.onBlur?.();
-    }, [props.onBlur]);
-
-    const combinedStyle = StyleSheet.flatten([props.style, { height }]);
-
-    return (
-      <RichTextEditorViewNative
-        ref={nativeRef}
-        style={combinedStyle}
-        placeholder={props.placeholder}
-        initialContent={props.initialContent}
-        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}
-      />
-    );
-  }
-);
-
-RichTextEditor.displayName = 'RichTextEditor';
-
-export default RichTextEditor;
-export { DEFAULT_TOOLBAR_OPTIONS } from './types';
-export type {
-  Block,
-  BlockType,
-  StyleRange,
-  TextAlignment,
-  EditorVariant,
-  ContentChangeEvent,
-  SelectionChangeEvent,
-  RichTextEditorRef,
-  RichTextEditorProps,
-  ToolbarOption,
-} from './types';

package/src/types.ts

@@ -1,125 +0,0 @@
-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[];
-  };
-}
-
-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;
-}