React Native Pell Rich Editor

https://github.com/wxik/react-native-rich-editor
Admin
React Native Pell Rich Editor is a fully functional rich text editor component for both Android and...
Tokens:14,981
Snippets:71
Trust Score:5.6
License:MIT
Update:5 months ago
Show doc for...
Tokens:
Raw
### Example Usage

Source: https://github.com/wxik/react-native-rich-editor/blob/master/README.md

A basic example demonstrating how to implement and use the RichEditor component in a React Native application.

```APIDOC
## Example Usage

```javascript
<RichEditor
  ref={(r) => this.richtext = r}
  initialContentHTML={'Hello <b>World</b> <p>this is a new paragraph</p> <p>this is another new paragraph</p>'}
  editorInitializedCallback={() => this.onEditorInitialized()}
/>
```
```

--------------------------------

### Complete Functional Component Example for Rich Editor

Source: https://github.com/wxik/react-native-rich-editor/blob/master/README.md

This snippet demonstrates a full implementation of a functional component using RichEditor and RichToolbar. It includes necessary imports and basic setup for text input and formatting.

```javascript
import React from "react";
import { Text, Platform, KeyboardAvoidingView, SafeAreaView, ScrollView } from "react-native";
import {actions, RichEditor, RichToolbar} from "react-native-pell-rich-editor";


const handleHead = ({tintColor}) => <Text style={{color: tintColor}}>H1</Text>
const TempScreen = () => {
	const richText = React.useRef();
	return (
    <SafeAreaView>
      <ScrollView>
        <KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"}	style={{ flex: 1 }}>
          <Text>Description:</Text>
          <RichEditor
              ref={richText}
              onChange={ descriptionText => {
                  console.log("descriptionText:", descriptionText);
              }}
          />
        </KeyboardAvoidingView>
      </ScrollView>

      <RichToolbar
        editor={richText}
        actions={[ actions.setBold, actions.setItalic, actions.setUnderline, actions.heading1 ]}
        iconMap={{ [actions.heading1]: handleHead }}
      />
    </SafeAreaView>
  );
};

export default TempScreen;
```

--------------------------------

### Basic RichEditor Component Setup

Source: https://context7.com/wxik/react-native-rich-editor/llms.txt

Demonstrates the basic setup of the RichEditor component, including handling content changes and cursor position. Ensure to import necessary components and hooks.

```jsx
import React, { useRef, useCallback } from 'react';
import { SafeAreaView, ScrollView, StyleSheet } from 'react-native';
import { RichEditor } from 'react-native-pell-rich-editor';

function BasicEditor() {
  const richText = useRef();
  const scrollRef = useRef();

  const handleChange = useCallback((html) => {
    console.log('Editor content:', html);
  }, []);

  const handleCursorPosition = useCallback((scrollY) => {
    // Keep cursor visible when typing
    scrollRef.current?.scrollTo({ y: scrollY - 30, animated: true });
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView ref={scrollRef} style={styles.scroll}>
        <RichEditor
          ref={richText}
          placeholder="Start typing here..."
          initialContentHTML="<p>Hello <b>World</b>!</p>"
          initialHeight={300}
          useContainer={true}
          onChange={handleChange}
          onCursorPosition={handleCursorPosition}
          onFocus={() => console.log('Editor focused')}
          onBlur={() => console.log('Editor blurred')}
          editorStyle={{
            backgroundColor: '#ffffff',
            color: '#000033',
            placeholderColor: '#a9a9a9',
            caretColor: '#007AFF',
            contentCSSText: 'font-size: 16px; min-height: 200px;'
          }}
        />
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  scroll: { flex: 1, backgroundColor: '#fff' }
});

```

--------------------------------

### Install React Native Pell Rich Editor and WebView

Source: https://context7.com/wxik/react-native-rich-editor/llms.txt

Install the package and its peer dependency for WebView support using yarn or npm.

```bash
yarn add react-native-pell-rich-editor react-native-webview
```

```bash
npm install react-native-pell-rich-editor react-native-webview
```

--------------------------------

### Using Custom Fonts

Source: https://github.com/wxik/react-native-rich-editor/blob/master/README.md

This section guides you through the process of using custom fonts within the Rich Editor component by leveraging the `initialCSSText` prop.

```APIDOC
## Using Custom Fonts

To use custom fonts, you need to utilize the `initialCSSText` property within the `editorStyle` prop.

### Steps:

1.  **Font Preparation**: Upload your font files to a service like Transfonter.org, ensuring the 'base64' option is selected. Download the generated zip file, which will contain a `stylesheet.css` file.
2.  **Stylesheet Conversion**: Create a `stylesheet.js` file and copy the content from the `stylesheet.css` file into it. Define an export for the font family, including the base64 encoded font data or a web URL.
    ```javascript
    const FontFamilyStylesheet = `
    @font-face {
        font-family: 'Your Font Family';
        src: url('data:font/ttf;charset=utf-8;base64,...............'); // Or a web URL
        font-weight: normal;
    }
    `;

    export default FontFamilyStylesheet;
    ```
3.  **Integration**: Import the `stylesheet.js` file into your component where `RichEditor` is used. Define the font family name and construct the `initialCSSText` object.
    ```javascript
    import FontFamilyStylesheet from 'stylesheet.js';

    const fontFamily = 'Your_Font_Family';
    const initialCSSText = { initialCSSText: `${FontFamilyStylesheet}`, contentCSSText: `font-family: ${fontFamily}` };
    <RichEditor editorStyle={initialCSSText}/>
    ```
4.  **Reload**: After implementing these steps, reload your application to see the Rich Editor content rendered with your custom font.

For more detailed information, refer to the [PR #111](https://github.com/wxik/react-native-rich-editor/pull/111) and [issue comment #70](https://github.com/wxik/react-native-rich-editor/issues/70#issuecomment-759441101).
```

--------------------------------

### Install React Native Rich Text Editor

Source: https://github.com/wxik/react-native-rich-editor/blob/master/README.md

Use either Yarn or npm to add the react-native-pell-rich-editor package to your project. Ensure you also follow instructions for the react-native-webview dependency.

```bash
yarn add react-native-pell-rich-editor
or
npm i react-native-pell-rich-editor
```

--------------------------------

### Image Click Event Handling

Source: https://github.com/wxik/react-native-rich-editor/blob/master/README.md

An example of an `onclick` event handler for an `img` tag within the RichEditor's HTML content, which sends an event using `_.sendEvent`.

```html
<img src="" onclick="_.sendEvent('ImgClick')" contenteditable="false"/>
```

--------------------------------

### Handle Editor Events in React Native

Source: https://context7.com/wxik/react-native-rich-editor/llms.txt

Use useCallback hooks to manage various editor events such as content changes, focus, blur, paste, keyboard input, link clicks, cursor position, and custom messages. Ensure proper setup for event handlers.

```jsx
import React, { useRef, useCallback } from 'react';
import { Alert, ScrollView, SafeAreaView } from 'react-native';
import { RichEditor, RichToolbar } from 'react-native-pell-rich-editor';

function EditorWithEvents() {
  const richText = useRef();
  const scrollRef = useRef();
  const contentRef = useRef('');

  // Content change handler
  const handleChange = useCallback((html) => {
    contentRef.current = html;
    console.log('Content updated:', html.substring(0, 100));
  }, []);

  // Height change handler (useful for dynamic sizing)
  const handleHeightChange = useCallback((height) => {
    console.log('Editor height:', height);
  }, []);

  // Focus and blur handlers
  const handleFocus = useCallback(() => {
    console.log('Editor gained focus');
  }, []);

  const handleBlur = useCallback(() => {
    console.log('Editor lost focus, content:', contentRef.current);
  }, []);

  // Paste handler (use with pasteAsPlainText prop)
  const handlePaste = useCallback((data) => {
    console.log('Pasted content:', data);
  }, []);

  // Keyboard event handlers
  const handleKeyUp = useCallback(({ keyCode, key }) => {
    console.log('Key up:', key, keyCode);
  }, []);

  const handleKeyDown = useCallback(({ keyCode, key }) => {
    console.log('Key down:', key, keyCode);
  }, []);

  // Input handler
  const handleInput = useCallback(({ data, inputType }) => {
    console.log('Input:', inputType, data);
  }, []);

  // Link click handler
  const handleLink = useCallback((url) => {
    Alert.alert('Link Clicked', url, [
      { text: 'Open', onPress: () => console.log('Opening:', url) },
      { text: 'Cancel', style: 'cancel' }
    ]);
  }, []);

  // Cursor position handler (for scroll management)
  const handleCursorPosition = useCallback((scrollY) => {
    scrollRef.current?.scrollTo({ y: scrollY - 30, animated: true });
  }, []);

  // Custom message handler (for onclick events in HTML content)
  const handleMessage = useCallback(({ type, id, data }) => {
    switch (type) {
      case 'ImageClick':
        Alert.alert('Image clicked', `Element ID: ${id}`);
        break;
      case 'CustomAction':
        richText.current?.commandDOM(`$('#${id}').style.border = '2px solid red'`);
        break;
      default:
        console.log('Message received:', type, id, data);
    }
  }, []);

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <ScrollView ref={scrollRef}>
        <RichEditor
          ref={richText}
          initialContentHTML={`
            <p>Click the image below:</p>
            <img src="https://example.com/image.jpg" onclick="_.sendEvent('ImageClick')" />
          `}
          onChange={handleChange}
          onHeightChange={handleHeightChange}
          onFocus={handleFocus}
          onBlur={handleBlur}
          onPaste={handlePaste}
          onKeyUp={handleKeyUp}
          onKeyDown={handleKeyDown}
          onInput={handleInput}
          onLink={handleLink}
          onCursorPosition={handleCursorPosition}
          onMessage={handleMessage}
          pasteAsPlainText={true}
          useContainer={true}
          initialHeight={400}
        />
      </ScrollView>
      <RichToolbar editor={richText} />
    </SafeAreaView>
  );
}

```

--------------------------------

### Handle Scroll Positioning in ScrollView

Source: https://github.com/wxik/react-native-rich-editor/blob/master/README.md

When using `usecontainer = {true}` within a ScrollView, implement the `oncursorPosition` callback to manage scroll bar positioning. This example shows how to programmatically scroll to a specific Y offset.

```javascript
this.scrollRef.current.scrollTo({y: scrollY - 30, animated: true});
```

--------------------------------

### Executing Command in RichEditor

Source: https://github.com/wxik/react-native-rich-editor/blob/master/README.md

Execute a JavaScript command within the RichEditor's DOM context using the `commandDOM` method. This example inserts an HTML break tag.

```javascript
this.richText.current?.commandDOM('$.execCommand(\'insertHTML\', false, "<br/>")');
```

--------------------------------

### Manipulating DOM Element Style in RichEditor

Source: https://github.com/wxik/react-native-rich-editor/blob/master/README.md

Use the `commandDOM` method to directly manipulate the DOM within the RichEditor. This example changes the color of an element with the ID 'title'.

```javascript
this.richText.current?.commandDOM(`$('#title').style.color='${color}'`);
```

--------------------------------

### Initialize Rich Editor

Source: https://github.com/wxik/react-native-rich-editor/blob/master/web/index.html

Initializes the Rich Editor by creating HTML content and writing it to the webview. It sets up event listeners for messages from the webview.

```javascript
import {actions, messages} from '../src/const.js'; import {createHTML} from '../src/editor.js'; const HTML = createHTML({ cssText: 'html {overflow-y: auto;}', pasteAsPlainText: false, useContainer: false, }); window.actions = actions; const initHTML = 
 <br/> 
 <center><b>Rich Editor</b></center> 
 <center> 
 <a href="https://github.com/wxik/react-native-rich-editor">React Native</a> 
 <span>And</span> 
 <a href="https://github.com/wxik/flutter-rich-editor">Flutter</a> 
 </center> 
 <div style="padding:10px 0;" contentEditable="false"> 
 <iframe width="100%" height="200" src="https://www.youtube.com/embed/6FrNXgXlCGA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 
 </div> 
 <br/> 
 <div><center><img src="https://img.lesmao.vip/k/h256/R/MeiTu/1293.jpg" /></center></div> 
 <br/><br/> 
 ; const selectionChangeListeners = [] 
 const webview = document.querySelector('#editor'); const childDoc = webview.contentWindow.document; childDoc.open(); childDoc.write(HTML); childDoc.close(); 
 // toolbar selected 
 selectionChangeListeners.push({ routeKey: function (items) { const icons = document.querySelectorAll('.toolbar .icon'); icons.forEach(da => { if (items.indexOf(da.id) !== -1) { da.classList.add('selected'); } else { da.classList.remove('selected'); } }); }, }); 
 window.editor = (function () { const editor = { _sendAction(type, action, data) { let jsonString = JSON.stringify({type, name: action, data}); webview.contentWindow.postMessage(jsonString); }, focusContentEditor() { this._sendAction(actions.content, 'focus'); }, setContentHTML(html) { this._sendAction(actions.content, 'setHtml', html); }, init() { webview.contentWindow.addEventListener('click', () => this.focusContentEditor(), false); webview.contentWindow.document.body.addEventListener('click', event => event.stopPropagation(), false); editor.setContentHTML(initHTML); }, onPressAddImage() { this._sendAction( actions.insertImage, 'result', 'https://pbs.twimg.com/profile_images/1242293847918391296/6uUsvfJZ.png', ); }, onToolbarClick(action) { switch (action) { case actions.insertLink: case actions.setBold: case actions.setItalic: case actions.heading1: case actions.heading2: case actions.insertBulletsList: case actions.insertOrderedList: case actions.checkboxList: case actions.indent: case actions.outdent: case actions.code: case actions.line: case actions.blockquote: case actions.setStrikethrough: case actions.setUnderline: case actions.removeFormat: editor._sendAction(action, 'result'); break; case actions.insertImage: this.onPressAddImage(); break; default: break; } }, }; webview.onload = function () { editor.init(); }; 
 window.addEventListener( 'message', function (event) { if (typeof event.data === 'object') return; const message = JSON.parse(event.data); // console.log('webview', message) switch (message.type) { case messages.SELECTION_CHANGE: { const items = message.data; selectionChangeListeners.map(listener => listener(items)); break; } case messages.CONTENT_CHANGE: { // console.log(message.data) break; } case messages.OFFSET_HEIGHT: // this.setWebHeight(message.data); break; } }, false, ); 
 return editor; })(); 
 +(function () { const time = document.querySelector('.time'); function dtTime() { const date = new Date(); const m = date.getMinutes(); time.innerText = 
 ${date.getHours()}:${m < 10 ? '0' + m : m}
 ; } setInterval(dtTime, 500); dtTime(); })();
```

--------------------------------

### Basic RichEditor Initialization

Source: https://github.com/wxik/react-native-rich-editor/blob/master/README.md

Initialize the RichEditor component with initial HTML content and an editor initialization callback.

```javascript
<RichEditor
  ref={(r) => this.richtext = r}
  initialContentHTML={'Hello <b>World</b> <p>this is a new paragraph</p> <p>this is another new paragraph</p>'}
  editorInitializedCallback={() => this.onEditorInitialized()}
/>
```

--------------------------------

### Available Formatting Actions

Source: https://context7.com/wxik/react-native-rich-editor/llms.txt

Import and use these actions to apply formatting or manipulate content programmatically. They cover text styling, headings, lists, alignment, content insertion, color, font, and history management.

```jsx
import { actions } from 'react-native-pell-rich-editor';

// Text formatting
actions.setBold           // Bold text
actions.setItalic         // Italic text
actions.setUnderline      // Underline text
actions.setStrikethrough  // Strikethrough text
actions.setSubscript      // Subscript text
actions.setSuperscript    // Superscript text
actions.removeFormat      // Remove all formatting

// Headings
actions.heading1          // H1 heading
actions.heading2          // H2 heading
actions.heading3          // H3 heading
actions.heading4          // H4 heading
actions.heading5          // H5 heading
actions.heading6          // H6 heading
actions.setParagraph      // Normal paragraph

// Lists
actions.insertBulletsList   // Unordered list
actions.insertOrderedList   // Ordered list
actions.checkboxList        // Checkbox/todo list
actions.indent              // Increase indent
actions.outdent             // Decrease indent

// Alignment
actions.alignLeft         // Left align
actions.alignCenter       // Center align
actions.alignRight        // Right align
actions.alignFull         // Justify

// Insert content
actions.insertImage       // Insert image
actions.insertVideo       // Insert video
actions.insertLink        // Insert hyperlink
actions.insertHTML        // Insert raw HTML
actions.insertText        // Insert plain text
actions.line              // Insert horizontal rule
actions.blockquote        // Blockquote
actions.code              // Code block

// Colors and fonts
actions.foreColor         // Text color
actions.hiliteColor       // Background/highlight color
actions.fontSize          // Font size (1-7)
actions.fontName          // Font family

// History
actions.undo              // Undo last action
actions.redo              // Redo last action

// Utility
actions.keyboard          // Toggle keyboard
```

--------------------------------

### Apply Editor Styling and Theming

Source: https://context7.com/wxik/react-native-rich-editor/llms.txt

Configure the editor's appearance using the `editorStyle` prop, which accepts properties like background color, text color, and caret color. Custom CSS can be applied via `contentCSSText` and `cssText`.

```jsx
import React, { useState, useMemo } from 'react';
import { SafeAreaView, Button, StyleSheet } from 'react-native';
import { RichEditor, RichToolbar } from 'react-native-pell-rich-editor';

function ThemedEditor() {
  const [isDark, setIsDark] = useState(false);
  const richText = React.useRef();

  const editorStyle = useMemo(() => ({
    // Background color of the editor
    backgroundColor: isDark ? '#1a1a2e' : '#ffffff',
    // Text color
    color: isDark ? '#eaeaea' : '#000033',
    // Cursor/caret color
    caretColor: isDark ? '#00ff88' : '#007AFF',
    // Placeholder text color
    placeholderColor: isDark ? '#666666' : '#a9a9a9',
    // CSS applied to editor content area
    contentCSSText: '
      font-size: 16px;
      min-height: 200px;
      padding: 12px;
      line-height: 1.6;
    ',
    // Global CSS (applied to entire editor)
    cssText: '
      #editor { border-radius: 8px; }
      a { color: ${isDark ? '#4da6ff' : '#0066cc'}; }
    ',
    // Initial CSS (useful for @font-face declarations)
    initialCSSText: '
      @font-face {
        font-family: "CustomFont";
        src: url("data:font/ttf;base64,...");
      }
    '
  }), [isDark]);

  const toolbarStyle = useMemo(() => ({
    backgroundColor: isDark ? '#2d2d44' : '#f5f5f5',
    borderTopWidth: 1,
    borderColor: isDark ? '#444' : '#e0e0e0'
  }), [isDark]);

  return (
    <SafeAreaView style={[styles.container, isDark && styles.darkContainer]}>
      <Button title="Toggle Theme" onPress={() => setIsDark(!isDark)} />
      <RichEditor
        ref={richText}
        placeholder="Write with style..."
        editorStyle={editorStyle}
        initialHeight={350}
        useContainer={true}
      />
      <RichToolbar
        editor={richText}
        style={toolbarStyle}
        iconTint={isDark ? '#aaaaaa' : '#71787F'}
        selectedIconTint={isDark ? '#00ff88' : '#2095F2'}
        disabledIconTint={isDark ? '#444444' : '#cccccc'}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#fff' },
  darkContainer: { backgroundColor: '#1a1a2e' }
});

```

--------------------------------

### Basic RichToolbar Initialization

Source: https://github.com/wxik/react-native-rich-editor/blob/master/README.md

Initialize the RichToolbar component by providing a reference to the RichEditor instance using `useRef` or `createRef`. This is required for the toolbar to control the editor.

```javascript
const richText = React.createRef() || useRef();
<RichToolbar editor={that.richText}/>
```

--------------------------------

### Editor Focus and Blur Controls

Source: https://context7.com/wxik/react-native-rich-editor/llms.txt

Use `focusContentEditor` to bring focus to the editor and `blurContentEditor` to remove focus. `dismissKeyboard` hides the keyboard.

```jsx
import React, { useRef } from 'react';
import { Button, View } from 'react-native';
import { RichEditor } from 'react-native-pell-rich-editor';

function EditorWithMethods() {
  const richText = useRef();

  // Focus and blur controls
  const focusEditor = () => richText.current?.focusContentEditor();
  const blurEditor = () => richText.current?.blurContentEditor();
  const dismissKeyboard = () => richText.current?.dismissKeyboard();

  return (
    <View>
      <RichEditor ref={richText} initialHeight={300} />
      <Button title="Focus" onPress={focusEditor} />
      <Button title="Blur" onPress={blurEditor} />
      <Button title="Dismiss Keyboard" onPress={dismissKeyboard} />
    </View>
  );
}

```

--------------------------------

### Insert Video into Editor

Source: https://context7.com/wxik/react-native-rich-editor/llms.txt

Use `insertVideo` to embed a video at the cursor. You can specify an optional style string for the video element.

```jsx
import React, { useRef } from 'react';
import { Button, View } from 'react-native';
import { RichEditor } from 'react-native-pell-rich-editor';

function EditorWithMethods() {
  const richText = useRef();

  // Insert video with optional style
  const addVideo = () => {
    richText.current?.insertVideo(
      'https://example.com/video.mp4',
      'width: 100%; max-width: 400px;'
    );
  };

  return (
    <View>
      <RichEditor ref={richText} initialHeight={300} />
      <Button title="Add Video" onPress={addVideo} />
    </View>
  );
}

```

--------------------------------

### Available Actions

Source: https://context7.com/wxik/react-native-rich-editor/llms.txt

A comprehensive list of actions that can be used to format text and manipulate content within the Rich Editor, either through the toolbar or programmatically.

```APIDOC
## Available Actions

All formatting actions that can be used with the toolbar or called programmatically on the editor.

### Text Formatting
- `actions.setBold`: Bold text
- `actions.setItalic`: Italic text
- `actions.setUnderline`: Underline text
- `actions.setStrikethrough`: Strikethrough text
- `actions.setSubscript`: Subscript text
- `actions.setSuperscript`: Superscript text
- `actions.removeFormat`: Remove all formatting

### Headings
- `actions.heading1`: H1 heading
- `actions.heading2`: H2 heading
- `actions.heading3`: H3 heading
- `actions.heading4`: H4 heading
- `actions.heading5`: H5 heading
- `actions.heading6`: H6 heading
- `actions.setParagraph`: Normal paragraph

### Lists
- `actions.insertBulletsList`: Unordered list
- `actions.insertOrderedList`: Ordered list
- `actions.checkboxList`: Checkbox/todo list
- `actions.indent`: Increase indent
- `actions.outdent`: Decrease indent

### Alignment
- `actions.alignLeft`: Left align
- `actions.alignCenter`: Center align
- `actions.alignRight`: Right align
- `actions.alignFull`: Justify

### Insert Content
- `actions.insertImage`: Insert image
- `actions.insertVideo`: Insert video
- `actions.insertLink`: Insert hyperlink
- `actions.insertHTML`: Insert raw HTML
- `actions.insertText`: Insert plain text
- `actions.line`: Insert horizontal rule
- `actions.blockquote`: Blockquote
- `actions.code`: Code block

### Colors and Fonts
- `actions.foreColor`: Text color
- `actions.hiliteColor`: Background/highlight color
- `actions.fontSize`: Font size (1-7)
- `actions.fontName`: Font family

### History
- `actions.undo`: Undo last action
- `actions.redo`: Redo last action

### Utility
- `actions.keyboard`: Toggle keyboard
```

--------------------------------

### Execute Document Commands

Source: https://context7.com/wxik/react-native-rich-editor/llms.txt

Use `command` to execute standard browser document commands, such as `execCommand`. The `$` shorthand refers to the `document` object.

```jsx
import React, { useRef } from 'react';
import { Button, View } from 'react-native';
import { RichEditor } from 'react-native-pell-rich-editor';

function EditorWithMethods() {
  const richText = useRef();

  // Execute document commands
  const execCommand = () => {
    // $ = document
    richText.current?.command(`$.execCommand('insertHTML', false, '<br/>')`);
  };

  return (
    <View>
      <RichEditor ref={richText} initialHeight={300} />
      <Button title="Execute Command" onPress={execCommand} />
    </View>
  );
}

```

--------------------------------

### RichToolbar with Custom Action

Source: https://github.com/wxik/react-native-rich-editor/blob/master/README.md

Configure the RichToolbar to include custom actions by adding the action name to the `actions` array, providing an icon in `iconMap`, and defining a handler function for the custom action.

```javascript
<RichToolbar
    editor={that.richText}
	actions={[
		actions.setBold,
		actions.setItalic,
		actions.insertBulletsList,
		actions.insertOrderedList,
		actions.insertImage,
		'customAction',
	]}
	iconMap={{
		customAction: customIcon,
	}}
	customAction={this.handleCustomAction}
/>
```

--------------------------------

### Insert Raw HTML

Source: https://context7.com/wxik/react-native-rich-editor/llms.txt

Use `insertHTML` to insert raw HTML content at the current cursor position. This allows for custom block elements.

```jsx
import React, { useRef } from 'react';
import { Button, View } from 'react-native';
import { RichEditor } from 'react-native-pell-rich-editor';

function EditorWithMethods() {
  const richText = useRef();

  // Insert raw HTML at cursor
  const addHTML = () => {
    richText.current?.insertHTML(
      '<div style="padding: 10px; background: #f0f0f0;"><b>Custom HTML Block</b></div>'
    );
  };

  return (
    <View>
      <RichEditor ref={richText} initialHeight={300} />
      <Button title="Add HTML" onPress={addHTML} />
    </View>
  );
}

```

--------------------------------

### Change Text Color

Source: https://context7.com/wxik/react-native-rich-editor/llms.txt

Use `setForeColor` to change the text color. Provide a valid CSS color string (e.g., hex code).

```jsx
import React, { useRef } from 'react';
import { Button, View } from 'react-native';
import { RichEditor } from 'react-native-pell-rich-editor';

function EditorWithMethods() {
  const richText = useRef();

  // Set text color
  const changeTextColor = () => {
    richText.current?.setForeColor('#FF5733');
  };

  return (
    <View>
      <RichEditor ref={richText} initialHeight={300} />
      <Button title="Change Text Color" onPress={changeTextColor} />
    </View>
  );
}

```

--------------------------------

### Set HTML Content

Source: https://context7.com/wxik/react-native-rich-editor/llms.txt

Use `setContentHTML` to programmatically set the entire HTML content of the editor. Ensure the `richText.current` ref is available.

```jsx
import React, { useRef } from 'react';
import { Button, View } from 'react-native';
import { RichEditor } from 'react-native-pell-rich-editor';

function EditorWithMethods() {
  const richText = useRef();

  // Set HTML content
  const setContent = () => {
    richText.current?.setContentHTML('<h1>New Content</h1><p>This is <b>bold</b> text.</p>');
  };

  return (
    <View>
      <RichEditor ref={richText} initialHeight={300} />
      <Button title="Set Content" onPress={setContent} />
    </View>
  );
}

```

--------------------------------

### Add Custom Toolbar Actions

Source: https://context7.com/wxik/react-native-rich-editor/llms.txt

Define custom actions for the Rich Toolbar, including handlers for inserting text, HTML, or applying specific formatting. Ensure custom action names match handler props.

```jsx
import React, { useRef } from 'react';
import { Text, StyleSheet } from 'react-native';
import { RichEditor, RichToolbar, actions } from 'react-native-pell-rich-editor';

const emojiIcon = require('./assets/emoji.png');

function CustomToolbarExample() {
  const richText = useRef();

  const handleInsertEmoji = () => {
    richText.current?.insertText('😀');
  };

  const handleInsertTable = () => {
    richText.current?.insertHTML(
      `<table border="1" style="width: 100%; border-collapse: collapse;">
        <tr><td>Cell 1</td><td>Cell 2</td></tr>
        <tr><td>Cell 3</td><td>Cell 4</td></tr>
      </table>`
    );
  };

  const handleFontSize = () => {
    const sizes = [1, 2, 3, 4, 5, 6, 7];
    const randomSize = sizes[Math.floor(Math.random() * sizes.length)];
    richText.current?.setFontSize(randomSize);
  };

  return (
    <>
      <RichEditor ref={richText} initialHeight={300} />
      <RichToolbar
        editor={richText}
        actions={[
          actions.setBold,
          actions.setItalic,
          actions.heading1,
          actions.heading2,
          actions.foreColor,
          'insertEmoji',      // Custom action name
          'insertTable',      // Custom action name
          'fontSize'          // Custom action name
        ]}
        iconMap={{
          // Custom render function for heading1
          [actions.heading1]: ({ tintColor }) => (
            <Text style={[styles.toolbarIcon, { color: tintColor }]}>H1</Text>
          ),
          // Custom render function for heading2
          [actions.heading2]: ({ tintColor }) => (
            <Text style={[styles.toolbarIcon, { color: tintColor }]}>H2</Text>
          ),
          // Custom render for foreColor
          [actions.foreColor]: () => (
            <Text style={[styles.toolbarIcon, { color: 'blue' }]}>FC</Text>
          ),
          // Image source for custom action
          insertEmoji: emojiIcon,
          // Render function for custom action
          insertTable: ({ tintColor }) => (
            <Text style={[styles.toolbarIcon, { color: tintColor }]}>TBL</Text>
          ),
          fontSize: ({ tintColor }) => (
            <Text style={[styles.toolbarIcon, { color: tintColor }]}>Aa</Text>
          )
        }}
        // Handler props match custom action names
        insertEmoji={handleInsertEmoji}
        insertTable={handleInsertTable}
        fontSize={handleFontSize}
        foreColor={() => richText.current?.setForeColor('red')}
      />
    </>
  );
}

const styles = StyleSheet.create({
  toolbarIcon: {
    fontSize: 16,
    fontWeight: 'bold',
    textAlign: 'center'
  }
});
```

--------------------------------

### Insert Image into Editor

Source: https://context7.com/wxik/react-native-rich-editor/llms.txt

Use `insertImage` to add an image to the editor at the current cursor position. An optional style string can be provided.

```jsx
import React, { useRef } from 'react';
import { Button, View } from 'react-native';
import { RichEditor } from 'react-native-pell-rich-editor';

function EditorWithMethods() {
  const richText = useRef();

  // Insert image with optional style
  const addImage = () => {
    richText.current?.insertImage(
      'https://example.com/photo.jpg',
      'width: 100%; border-radius: 8px;'
    );
  };

  return (
    <View>
      <RichEditor ref={richText} initialHeight={300} />
      <Button title="Add Image" onPress={addImage} />
    </View>
  );
}

```

--------------------------------

### Track Active Text Styles with Toolbar Listener

Source: https://context7.com/wxik/react-native-rich-editor/llms.txt

Register a toolbar listener using useEffect to detect and display active text formatting styles. A small delay is recommended to ensure the editor is fully initialized before registering the listener.

```jsx
import React, { useRef, useEffect, useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { RichEditor, RichToolbar, actions } from 'react-native-pell-rich-editor';

function EditorWithSelectionTracking() {
  const richText = useRef();
  const [activeStyles, setActiveStyles] = useState([]);

  useEffect(() => {
    // Register toolbar listener after editor is initialized
    const setupToolbar = () => {
      richText.current?.registerToolbar((selectedItems) => {
        // selectedItems is an array of active formatting actions
        // e.g., ['bold', 'italic', { type: 'fontSize', value: '4' }]
        setActiveStyles(selectedItems);
        console.log('Active formatting:', selectedItems);
      });
    };

    // Small delay to ensure editor is ready
    setTimeout(setupToolbar, 100);
  }, []);

  const formatActiveStyles = () => {
    return activeStyles.map(item =>
      typeof item === 'string' ? item : `${item.type}: ${item.value}`
    ).join(', ') || 'None';
  };

  return (
    <View style={styles.container}>
      <Text style={styles.statusText}>
        Active styles: {formatActiveStyles()}
      </Text>
      <RichEditor
        ref={richText}
        placeholder="Select text to see active styles..."
        initialHeight={300}
        editorInitializedCallback={() => console.log('Editor ready')}
      />
      <RichToolbar editor={richText} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  statusText: { padding: 10, backgroundColor: '#f0f0f0' }
});

```

--------------------------------

### Insert Hyperlink

Source: https://context7.com/wxik/react-native-rich-editor/llms.txt

Use `insertLink` to add a hyperlink to the editor. Provide the display text and the URL.

```jsx
import React, { useRef } from 'react';
import { Button, View } from 'react-native';
import { RichEditor } from 'react-native-pell-rich-editor';

function EditorWithMethods() {
  const richText = useRef();

  // Insert hyperlink
  const addLink = () => {
    richText.current?.insertLink('Visit Example', 'https://example.com');
  };

  return (
    <View>
      <RichEditor ref={richText} initialHeight={300} />
      <Button title="Add Link" onPress={addLink} />
    </View>
  );
}

```

--------------------------------

### Change Font Size

Source: https://context7.com/wxik/react-native-rich-editor/llms.txt

Use `setFontSize` to change the font size of the selected text or at the cursor. Sizes range from 1 (10px) to 7 (48px).

```jsx
import React, { useRef } from 'react';
import { Button, View } from 'react-native';
import { RichEditor } from 'react-native-pell-rich-editor';

function EditorWithMethods() {
  const richText = useRef();

  // Set font size (1=10px, 2=13px, 3=16px, 4=18px, 5=24px, 6=32px, 7=48px)
  const changeFontSize = () => {
    richText.current?.setFontSize(4); // 18px
  };

  return (
    <View>
      <RichEditor ref={richText} initialHeight={300} />
      <Button title="Change Font Size" onPress={changeFontSize} />
    </View>
  );
}

```

--------------------------------

### Complete Email Composer with Rich Editor and Toolbar

Source: https://context7.com/wxik/react-native-rich-editor/llms.txt

Use this component to build a full-featured email composition interface. It requires 'react-native-pell-rich-editor' and includes input fields for 'To' and 'Subject', a rich text editor, and a toolbar for formatting options.

```jsx
import React, { useRef, useCallback, useState } from 'react';
import {
  SafeAreaView, ScrollView, View, Text, TextInput,
  Button, KeyboardAvoidingView, Platform, StyleSheet, Alert
} from 'react-native';
import { RichEditor, RichToolbar, actions, getContentCSS } from 'react-native-pell-rich-editor';

function EmailComposer({ onSend }) {
  const richText = useRef();
  const scrollRef = useRef();
  const [to, setTo] = useState('');
  const [subject, setSubject] = useState('');
  const contentRef = useRef('');

  const handleChange = useCallback((html) => {
    contentRef.current = html;
  }, []);

  const handleCursorPosition = useCallback((scrollY) => {
    scrollRef.current?.scrollTo({ y: scrollY - 30, animated: true });
  }, []);

  const handleSend = useCallback(() => {
    if (!to || !subject) {
      Alert.alert('Error', 'Please fill in To and Subject fields');
      return;
    }
    onSend?.({
      to,
      subject,
      body: contentRef.current,
      css: getContentCSS() // Get CSS for rendering in webview
    });
  }, [to, subject, onSend]);

  const handleAddImage = useCallback(() => {
    // In real app, use image picker
    richText.current?.insertImage(
      'https://via.placeholder.com/300x200',
      'max-width: 100%; border-radius: 4px;'
    );
  }, []);

  const handleInsertLink = useCallback(() => {
    Alert.prompt('Insert Link', 'Enter URL:', (url) => {
      if (url) {
        richText.current?.insertLink(url, url);
      }
    });
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <Button title="Send" onPress={handleSend} />
      </View>

      <ScrollView ref={scrollRef} style={styles.scroll} keyboardDismissMode="none">
        <View style={styles.field}>
          <Text style={styles.label}>To:</Text>
          <TextInput
            style={styles.input}
            value={to}
            onChangeText={setTo}
            placeholder="recipient@example.com"
            keyboardType="email-address"
            autoCapitalize="none"
          />
        </View>

        <View style={styles.field}>
          <Text style={styles.label}>Subject:</Text>
          <TextInput
            style={styles.input}
            value={subject}
            onChangeText={setSubject}
            placeholder="Email subject"
          />
        </View>

        <RichEditor
          ref={richText}
          placeholder="Compose your email..."
          initialHeight={400}
          useContainer={true}
          onChange={handleChange}
          onCursorPosition={handleCursorPosition}
          pasteAsPlainText={false}
          autoCapitalize="sentences"
          enterKeyHint="done"
          editorStyle={{
            backgroundColor: '#ffffff',
            color: '#333333',
            placeholderColor: '#999999',
            contentCSSText: 'font-size: 16px; padding: 8px;'
          }}
        />
      </ScrollView>

      <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
        <RichToolbar
          editor={richText}
          actions={[
            actions.keyboard,
            actions.setBold,
            actions.setItalic,
            actions.setUnderline,
            actions.insertBulletsList,
            actions.insertOrderedList,
            actions.insertLink,
            actions.insertImage,
            actions.undo,
            actions.redo
          ]}
          onPressAddImage={handleAddImage}
          onInsertLink={handleInsertLink}
          style={styles.toolbar}
          iconTint="#555555"
          selectedIconTint="#007AFF"
        />
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#f5f5f5' },
  header: { flexDirection: 'row', justifyContent: 'flex-end', padding: 10 },
  scroll: { flex: 1, backgroundColor: '#ffffff' },
  field: { flexDirection: 'row', alignItems: 'center', padding: 12, borderBottomWidth: 1, borderColor: '#e0e0e0' },
  label: { width: 60, fontWeight: '600', color: '#333' },
  input: { flex: 1, fontSize: 16 },
  toolbar: { backgroundColor: '#fafafa', borderTopWidth: 1, borderColor: '#e0e0e0' }
});

export default EmailComposer;

```

--------------------------------

### RichEditor Component Methods

Source: https://github.com/wxik/react-native-rich-editor/blob/master/README.md

This section details the methods available on the RichEditor component's ref, which allow programmatic control over the editor's content and state.

```APIDOC
## RichEditor Component Methods

The `RichEditor` component exposes the following methods via its `ref`:

* **`setContentHTML(html: string)`**: Sets the HTML content of the editor.
* **`insertImage(url: string, style?: string)`**: Inserts an image at the current cursor position.
* **`insertLink(title: string, url: string)`**: Inserts a hyperlink with the specified title and URL.
* **`insertText(text: string)`**: Inserts plain text at the current cursor position.
* **`insertHTML(html: string)`**: Inserts HTML content at the current cursor position.
* **`insertVideo(url: string, style?: string)`**: Inserts a video with the specified URL and optional style.
* **`setContentFocusHandler(handler: Function)`**: Registers a handler function to be called when the cursor position changes or editor styling is modified at the cursor's position. The handler receives an array of active actions.
* **`blurContentEditor()`**: Programmatically blurs the editor, removing focus.
* **`focusContentEditor()`**: Programmatically focuses the editor.
* **`registerToolbar(listener: Function)`**: Registers a listener function that is called whenever the cursor position changes or the editor's styling at the cursor's position is modified. The listener receives an array of active actions, enabling toolbar updates.
```

--------------------------------

### Execute Custom DOM Commands

Source: https://context7.com/wxik/react-native-rich-editor/llms.txt

Use `commandDOM` to execute custom JavaScript commands directly on the editor's DOM. The `$` shorthand can be used to query elements.

```jsx
import React, { useRef } from 'react';
import { Button, View } from 'react-native';
import { RichEditor } from 'react-native-pell-rich-editor';

function EditorWithMethods() {
  const richText = useRef();

  // Execute custom DOM commands
  const customCommand = () => {
    // $ = document.querySelector
    richText.current?.commandDOM(`$('#myElement').style.color = 'red'`);
  };

  return (
    <View>
      <RichEditor ref={richText} initialHeight={300} />
      <Button title="Custom DOM Command" onPress={customCommand} />
    </View>
  );
}

```

--------------------------------

### Load and Use Custom Fonts in Rich Editor

Source: https://context7.com/wxik/react-native-rich-editor/llms.txt

Define custom fonts using @font-face in a stylesheet and apply them to the editor content. Ensure the font files are accessible via URL or base64 encoding.

```jsx
import React from 'react';
import { SafeAreaView } from 'react-native';
import { RichEditor, RichToolbar } from 'react-native-pell-rich-editor';

// Font stylesheet with base64 encoded font or web URL
const CustomFontStylesheet = `
  @font-face {
    font-family: 'Roboto';
    src: url('https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
  }
  @font-face {
    font-family: 'Roboto';
    src: url('https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBBc4.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
  }
`;

function CustomFontEditor() {
  const richText = React.useRef();

  const editorStyle = {
    backgroundColor: '#ffffff',
    color: '#333333',
    placeholderColor: '#999999',
    // Load custom fonts
    initialCSSText: CustomFontStylesheet,
    // Apply custom font to content
    contentCSSText: `
      font-family: 'Roboto', Arial, sans-serif;
      font-size: 16px;
      line-height: 1.6;
    `
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <RichEditor
        ref={richText}
        editorStyle={editorStyle}
        placeholder="Type with custom Roboto font..."
        initialHeight={400}
      />
      <RichToolbar editor={richText} />
    </SafeAreaView>
  );
}

```

--------------------------------

### Change Highlight Color

Source: https://context7.com/wxik/react-native-rich-editor/llms.txt

Use `setHiliteColor` to change the background or highlight color of the text. Provide a valid CSS color string.

```jsx
import React, { useRef } from 'react';
import { Button, View } from 'react-native';
import { RichEditor } from 'react-native-pell-rich-editor';

function EditorWithMethods() {
  const richText = useRef();

  // Set highlight/background color
  const changeHighlight = () => {
    richText.current?.setHiliteColor('#FFFF00');
  };

  return (
    <View>
      <RichEditor ref={richText} initialHeight={300} />
      <Button title="Change Highlight" onPress={changeHighlight} />
    </View>
  );
}

```

--------------------------------

### Insert Plain Text

Source: https://context7.com/wxik/react-native-rich-editor/llms.txt

Use `insertText` to insert plain text at the current cursor position in the editor.

```jsx
import React, { useRef } from 'react';
import { Button, View } from 'react-native';
import { RichEditor } from 'react-native-pell-rich-editor';

function EditorWithMethods() {
  const richText = useRef();

  // Insert plain text at cursor
  const addText = () => {
    richText.current?.insertText('Inserted text here');
  };

  return (
    <View>
      <RichEditor ref={richText} initialHeight={300} />
      <Button title="Add Text" onPress={addText} />
    </View>
  );
}

```
Tokens:
Raw