@chaitrabhairappa/react-native-rich-text-editor 1.0.0

package/lib/typescript/src/types.d.ts

@@ -0,0 +1,76 @@
+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 declare const DEFAULT_TOOLBAR_OPTIONS: ToolbarOption[];
+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;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@chaitrabhairappa/react-native-rich-text-editor",
+  "version": "1.0.0",
+  "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",
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "!android/build",
+    "ios",
+    "!ios/build",
+    "react-native-richtext-editor.podspec",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!lib/typescript/example"
+  ],
+  "scripts": {
+    "typescript": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "prepare": "bob build",
+    "clean": "del-cli lib"
+  },
+  "keywords": [
+    "react-native",
+    "rich-text",
+    "editor",
+    "wysiwyg",
+    "text-formatting",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Chaitra9225/react-native-richtext-editor.git"
+  },
+  "author": "Chaitra Bhairappa <chaithrachinnu.cbg@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Chaitra9225/react-native-richtext-editor/issues"
+  },
+  "homepage": "https://github.com/Chaitra9225/react-native-richtext-editor#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-native": "^0.72.0",
+    "del-cli": "^5.0.0",
+    "react": "18.2.0",
+    "react-native": "0.72.0",
+    "react-native-builder-bob": "^0.23.0",
+    "typescript": "^5.0.0"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  }
+}

package/react-native-richtext-editor.podspec

@@ -0,0 +1,21 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "react-native-richtext-editor"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => "13.0" }
+  s.source       = { :git => "https://github.com/yourusername/react-native-richtext-editor.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift}"
+
+  s.dependency "React-Core"
+
+  s.swift_version = "5.0"
+end

package/src/index.tsx

@@ -0,0 +1,199 @@
+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

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