react-native-pell-rich-editor

Install the package using yarn or npm, and ensure you also install the native react-native-webview dependency following the react-native-webview instructions.

yarn add react-native-pell-rich-editor
# or
npm i react-native-pell-rich-editor

To use custom fonts, use the initialCSSText property within the editorStyle prop. This involves injecting a @font-face rule via Base64.

1. Convert your font to Base64 (e.g., via transfonter.org).
2. Create a stylesheet string containing the @font-face rule.
3. Pass it to RichEditor using initialCSSText for the font definition and contentCSSText to apply it to the content.

const FontFamilyStylesheet = `
@font-face {
    font-family: 'Your Font Family';
    src: url('data:font/ttf;charset=utf-8;base64,...............');
    font-weight: normal;
}
`;

const initialCSSText = {
  initialCSSText: `${FontFamilyStylesheet}`,
  contentCSSText: `font-family: 'Your Font Family'`
};

<RichEditor editorStyle={initialCSSText}/>

When using useContainer={true}, the editor might have scrolling issues if placed inside a ScrollView. To fix this, you must provide an onCursorPosition callback to handle scroll bar positioning manually.

Example logic for the callback:

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

You can extend the toolbar by adding custom action names to the actions array. You must then provide an icon via iconMap and a handler function with the same name as the action.

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

The RichEditor component is the core editor. It can be customized via several props including initialContentHTML, placeholder, and editorStyle. You can interact with the editor instance using a ref to execute commands or manipulate the DOM.

<RichEditor
  ref={(r) => this.richtext = r}
  initialContentHTML={'Hello <b>World</b>'}
  editorInitializedCallback={() => this.onEditorInitialized()}
/>

The RichToolbar provides a UI for controlling the RichEditor. It requires a getEditor prop, which must be a function that returns the ref of the RichEditor. This ensures the ref is available when the toolbar renders.

Common actions include actions.setBold, actions.insertImage, actions.undo, etc.

const richText = React.useRef();

// In your render:
<RichToolbar editor={richText} />

The following methods are available on the RichEditor ref instance:

setContentHTML(html: string)
insertImage(url: string, style?: string)
insertLink(title: string, url: string)
insertText(text: string)
insertHTML(html: string)
insertVideo(url: string, style?: string)
setContentFocusHandler(handler: Function): Registers a function called when cursor position or styling changes.
blurContentEditor()
focusContentEditor()
registerToolbar(listener: Function)

You can use the defaultActions array to quickly populate a toolbar with common editing commands. These include keyboard toggling, bold, italic, underline, bullet lists, indentation, and more.

To use them, import defaultActions from the package and pass them to the actions prop of RichToolbar.

import RichToolbar from 'react-native-rich-editor';
import { defaultActions } from 'react-native-rich-editor';

// Inside your component
<RichToolbar
  getEditor={() => this.editorRef}
  actions={defaultActions}
/>

If you want to use your own icons instead of the default ones, provide an iconMap prop to RichToolbar. The iconMap should be an object where keys are action constants (from the actions object) and values are either an image source or a function that returns a component.

If you provide a function, it receives an object containing: { selected, disabled, tintColor, iconSize, iconGap }.

const customIconMap = {
  [actions.setBold]: ({ selected, tintColor, iconSize }) => (
    <MyCustomBoldIcon selected={selected} color={tintColor} size={iconSize} />
  ),
  [actions.setItalic]: require('./my-italic-icon.png'),
};

<RichToolbar
  getEditor={() => this.editorRef}
  iconMap={customIconMap}
/>