Rich-text editor with react-native: Upload photo

GuySerfaty — Mon, 19 Feb 2024 14:33:17 +0000

There are many scenarios where you need a rich-text editor in your app and sometimes you want to let your users embed photos in it, for example:

Compose a message, email app, chat app or any messing scenario
Create a ticket
Edit a doc
Feedback popup
and many more...

Here I am going to show how I created a rich-text editor app (with 10tap) that can open the camera and add photos (with vision-camera)

FULL EXAMPLE IS ON THE BOTTOM OF THIS POST

First:
yarn add react-native-webview @10play/tentap-editor react-native-vision-camera react-native-fs

Then we can add the very basic tentap-editor example just to have something to start with:



import type { NativeStackScreenProps } from '@react-navigation/native-stack';
import React from 'react';
import {
  SafeAreaView,
  View,
  KeyboardAvoidingView,
  Platform,
  StyleSheet,
} from 'react-native';
import { RichText, Toolbar, useEditorBridge } from '@10play/tentap-editor';

export const Basic = () => {
  const editor = useEditorBridge({
    autofocus: true,
    avoidIosKeyboard: true,
    initialContent,
  });

  return (
    <SafeAreaView style={exampleStyles.fullScreen}>
      <View style={exampleStyles.fullScreen}>
        <RichText editor={editor} />
      </View>
      <KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        style={exampleStyles.keyboardAvoidingView}
      >
        <Toolbar editor={editor} />
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
};

const exampleStyles = StyleSheet.create({
  fullScreen: {
    flex: 1,
  },
  keyboardAvoidingView: {
    position: 'absolute',
    width: '100%',
    bottom: 0,
  },
});

const initialContent = `<p>This is a basic example!</p>`;

This will add an editor to our app and a nice toolbar that we will extend in a bit with the camera button :)

Now let's edit the info.plist, add this:



    <key>NSCameraUsageDescription</key>
    <string>$(PRODUCT_NAME) needs access to your Camera.</string>
    <key>LSApplicationQueriesSchemes</key>
    <array>
        <string>file</string>
    </array>

NSCameraUsageDescription - so we have permission on camera
LSApplicationQueriesSchemes - so we have permission to access local files, will explain later

Now let's add camera button to the default toolbar:



import cameraPng from '../assets/camera.png';
import {DEFAULT_TOOLBAR_ITEMS} from '@10play/tentap-editor';

...
const [cameraIsOn, setCameraIsOn] = React.useState(false);
...
        <Toolbar
          items={[
            {
              onPress: () => () => {
                editor.blur();
                setCameraIsOn(true);
              },
              active: () => false,
              disabled: () => false,
              image: () => cameraPng,
            },
            ...DEFAULT_TOOLBAR_ITEMS,
          ]}
          editor={editor}
        />
...

So here we extend the DEFAULT_TOOLBAR_ITEMS from tentap-editor and we add a new ToolbarItem that will close the keyboard and the state for if the camera is ON

Now let's add the camera part to our app:



...
  const camera = useRef<Camera>(null);
  const { hasPermission, requestPermission } = useCameraPermission();
  useEffect(() => {
    if (!hasPermission) {
      requestPermission();
    }
  }, [hasPermission]);


  const device = useCameraDevice('back');

  const EditorCamera = device ? (
    <>
      <Camera
        ref={camera}
        style={StyleSheet.absoluteFill}
        device={device}
        isActive={true}
        photo={true}
      />
      <View
        style={{
          width: '100%',
          justifyContent: 'center',
          alignItems: 'center',
          position: 'absolute',
          bottom: 50,
          left: 0,
        }}
      >
        <TouchableOpacity
          style={{
            height: 80,
            width: 80,
            borderRadius: 50,
            borderWidth: 5,
            borderColor: 'white',
          }}
          onPress={async () => {
            if (!camera.current) {
              return;
            }
            const file = await camera.current.takePhoto();
            const name = 'test' + new Date().getTime() + '.jpeg';
            await rnFS.moveFile(
              file.path ?? '',
              rnFS.CachesDirectoryPath + '/' + name
            );
            setCameraIsOn(false);
            editor.setImage(`file://${rnFS.CachesDirectoryPath}` + '/' + name);
            const editorState = editor.getEditorState();
            editor.setSelection(
              editorState.selection.from,
              editorState.selection.from
            );
            editor.focus();
          }}
        />
      </View>
    </>
  ) : null;
...
      {cameraIsOn && EditorCamera}
    </View>

First, we check for permissions and ask for them if needed. Then we build EditorCamera this is a jsx that wraps the Camera component and adds to it a button to take a photo, you can add any additional functionality you want like zoom.

The onPress on the "take photo" button does:

take a photo with the camera ref
generate a name for the new photo
move the photo to the cache directory
close the camera - so it will be going back to the editor
use setImage of EditorBridge to insert the new image
change the editor selection
refocus the editor

In the last part, we are only rendering EditorCamera when the cameraIsOn state is true

Great! now we have almost everything, we have an app with a rich-text editor, a toolbar with a button for opening the camera and when the user takes a photo we insert the image into the doc, the only problem is this:

To fix that we will have to modify the RichText component of tentap-editor, to allow access to local assets like photos we just took.

We will have to import the "simple editor" bundle from tentap-editor and store it in the same place with our photos, for additional reading please see that GitHub thread



import {editorHtml} from '@10play/tentap-editor';
...
  useEffect(() => {
    rnFS.writeFile(
      rnFS.CachesDirectoryPath + '/editorOnDevice.html',
      editorHtml,
      'utf8'
    );
  }, []);

...

      <RichText
        editor={editor}
        source={{
          uri: 'file://' + rnFS.CachesDirectoryPath + '/editorOnDevice.html',
        }}
        allowFileAccess={true}
        allowFileAccessFromFileURLs={true}
        allowUniversalAccessFromFileURLs={true}
        originWhitelist={['*']}
        mixedContentMode="always"
        allowingReadAccessToURL={'file://' + rnFS.CachesDirectoryPath}
      />

When the user takes a photo we move it to CachesDirectoryPath (can be what path you want) we need to store the editor bundle there as well. So when the app mounts we will write editorHtml there.

Then we also need to modify RichText component and add to it:



        source={{
          uri: 'file://' + rnFS.CachesDirectoryPath + '/editorOnDevice.html',
        }}
        allowFileAccess={true}
        allowFileAccessFromFileURLs={true}
        allowUniversalAccessFromFileURLs={true}
        originWhitelist={['*']}
        mixedContentMode="always"
        allowingReadAccessToURL={'file://' + rnFS.CachesDirectoryPath}

we override the source to load from the path we want, add some props that allow to access files, and add allowingReadAccessToURL for the cache path

And we're done :)

here is a full example:



import React, { useEffect, useRef } from 'react';
import rnFS from 'react-native-fs';
import {
  View,
  StyleSheet,
  TouchableOpacity,
  KeyboardAvoidingView,
  Platform,
} from 'react-native';
import {
  RichText,
  useEditorBridge,
  editorHtml,
  Toolbar,
  DEFAULT_TOOLBAR_ITEMS,
} from '@10play/tentap-editor';
import cameraPng from '../assets/camera.png';
import {
  Camera,
  useCameraDevice,
  useCameraPermission,
} from 'react-native-vision-camera';

const exampleStyles = StyleSheet.create({
  fullScreen: {
    flex: 1,
    backgroundColor: 'white',
  },
  keyboardAvoidingView: {
    position: 'absolute',
    width: '100%',
    bottom: 0,
  },
});

export const WithVisionCamera = () => {
  const { hasPermission, requestPermission } = useCameraPermission();
  const [cameraIsOn, setCameraIsOn] = React.useState(false);
  const camera = useRef<Camera>(null);

  useEffect(() => {
    rnFS.writeFile(
      rnFS.CachesDirectoryPath + '/indexr.html',
      editorHtml,
      'utf8'
    );
  }, []);
  useEffect(() => {
    if (!hasPermission) {
      requestPermission();
    }
  }, [hasPermission]);
  const editor = useEditorBridge({
    autofocus: true,
    avoidIosKeyboard: true,
  });

  const device = useCameraDevice('back');

  const EditorCamera = device ? (
    <>
      <Camera
        ref={camera}
        style={StyleSheet.absoluteFill}
        device={device}
        isActive={true}
        photo={true}
      />
      <View
        style={{
          width: '100%',
          justifyContent: 'center',
          alignItems: 'center',
          position: 'absolute',
          bottom: 50,
          left: 0,
        }}
      >
        <TouchableOpacity
          style={{
            height: 80,
            width: 80,
            borderRadius: 50,
            borderWidth: 5,
            borderColor: 'white',
          }}
          onPress={async () => {
            if (!camera.current) {
              return;
            }
            const file = await camera.current.takePhoto();
            const name = 'test' + new Date().getTime() + '.jpeg';
            await rnFS.moveFile(
              file.path ?? '',
              rnFS.CachesDirectoryPath + '/' + name
            );
            setCameraIsOn(false);
            editor.setImage(`file://${rnFS.CachesDirectoryPath}` + '/' + name);
            const editorState = editor.getEditorState();
            editor.setSelection(
              editorState.selection.from,
              editorState.selection.from
            );
            editor.focus();
          }}
        />
      </View>
    </>
  ) : null;

  return (
    <View style={exampleStyles.fullScreen}>
      <RichText
        editor={editor}
        source={{
          uri: 'file://' + rnFS.CachesDirectoryPath + '/indexr.html',
        }}
        allowFileAccess={true}
        allowFileAccessFromFileURLs={true}
        allowUniversalAccessFromFileURLs={true}
        originWhitelist={['*']}
        mixedContentMode="always"
        allowingReadAccessToURL={'file://' + rnFS.CachesDirectoryPath}
      />
      <KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        style={exampleStyles.keyboardAvoidingView}
      >
        <Toolbar
          items={[
            {
              onPress: () => () => {
                editor.blur();
                setCameraIsOn(true);
              },
              active: () => false,
              disabled: () => false,
              image: () => cameraPng,
            },
            ...DEFAULT_TOOLBAR_ITEMS,
          ]}
          editor={editor}
        />
      </KeyboardAvoidingView>
      {cameraIsOn && EditorCamera}
    </View>
  );
};

DEV Community: GuySerfaty

Rich-text editor with react-native: Upload photo