React Native Pell rich editor: capture changed HTML and connect the toolbar

The package uses a WebView and requires the project's react-native-webview integration. Follow the maintainer's setup instructions for the package version and native platforms your app supports. This is an editable screen; displaying existing article HTML is a separate task.

Give the toolbar the same editor ref

This component fragment starts an original bicycle workshop notice, captures its current HTML locally, and makes three formatting actions available:

import React, { useRef, useState } from 'react';
import { Button, ScrollView, Text, View } from 'react-native';
import {
  actions, RichEditor, RichToolbar
} from 'react-native-pell-rich-editor';

const startingHtml =
  '<p>Bring your bicycle to the west repair stand.</p>';

export default function WorkshopEditor() {
  const editorRef = useRef(null);
  const latestHtml = useRef(startingHtml);
  const [ready, setReady] = useState(false);
  const [capturedHtml, setCapturedHtml] = useState('');

  return (
    <View style={{ flex: 1 }}>
      <ScrollView keyboardShouldPersistTaps="handled">
        <RichEditor
          ref={editorRef}
          initialContentHTML={startingHtml}
          initialHeight={240}
          editorInitializedCallback={() => setReady(true)}
          onChange={(html) => { latestHtml.current = html; }}
        />
        <RichToolbar
          editor={editorRef}
          disabled={!ready}
          actions={[
            actions.setBold,
            actions.setItalic,
            actions.insertBulletsList
          ]}
        />
        <Button
          title="Capture current HTML"
          disabled={!ready}
          onPress={() => setCapturedHtml(latestHtml.current)}
        />
        <Text selectable>{capturedHtml}</Text>
      </ScrollView>
    </View>
  );
}

Text shows the captured source as text. The capture button takes an in-memory snapshot; connect your existing save service separately. The ref holds the latest HTML received from the editor's change callback without requiring the editor document to be replaced on every React render.

The repository README includes older getEditor wording as well as examples using editor={editorRef}. Check the actual toolbar implementation for the installed release when examples disagree. Passing a different ref, or a ref's initially empty .current value as though it were the ref object, can disconnect the toolbar from the editor.

Keep initial content distinct from record replacement

The starting HTML belongs to the record that opened this screen. Updating that string in application state is not a complete policy for switching an active editor to another record.

For a deliberate replacement after initialization, the editor exposes setContentHTML():

// Resolve unsaved changes before replacing the current record.
editorRef.current?.setContentHTML(loadedHtml);
latestHtml.current = loadedHtml;

Only run this for the intended loaded record and once the editor is ready. Do not attach it to a broad effect that fires after every content change. A late response for another record can otherwise replace the author's current work.

The editor source marks getContentHtml() deprecated in favor of onChange. Avoid building a new save flow around an old example that waits on that deprecated method. A native-to-WebView message boundary still exists, so check the final keystroke and immediate-save behavior on supported devices instead of assuming callback timing is identical to a native text input.

Check the keyboard and caret on a real device

For the workshop fixture, change “west repair stand” to “east repair stand,” bold “bicycle,” and capture the HTML. Confirm the new location and the intended emphasis. Add several paragraphs, open the keyboard, and move the caret to the last line.

The README's scroll guidance calls out useContainer, a surrounding ScrollView, and onCursorPosition. Adapt scrolling and keyboard avoidance to your screen's actual header, toolbar, and safe area. A fixed offset copied from another app can leave the caret behind the keyboard.

Test iOS and Android builds your app supports. The browser article preview for this explanation cannot establish native keyboard placement or WebView messaging behavior.

Save the notice and inspect its reader view

Submit the changed HTML through the app's existing authenticated save action. Keep failed saves visible and reopen the same record after success. The reopened document should say “east repair stand,” preserve the chosen formatting, and still allow editing.

Apply the application's content policy before displaying author-supplied HTML to other readers. For a read-only native article, the React Native HTML viewer guide explains the choice between native rendering and a WebView. Finish in that actual reader view, where the workshop's location must remain clear after the editing keyboard is gone.