Basic example

In this example we will be creating a basic editor that contains all of the pre-built bridgeExtensions and a keyboard aware toolbar. Jump To Full Example

Creating The Editor Bridge

The first thing we want to do is create our EditorBridge. To do this we will use the useEditorBridge hook. This by default will contain the TenTapStartKit which includes all of the following bridge extensions. Now we have added all of the pre-built bridgeExtensions provided by tentap, and our editor will support all of these bridgeExtensions features

const editor = useEditorBridge();

This is the same as passing

const editor = useEditorBridge({
  bridgeExtensions: TenTapStarterKit,
});

Adding the RichText component

Now we will add our RichText component, this is simply a WebView that runs a pre-built tiptap bundle with some extensions, that is then communicated with via our bridgeExtensions

The RichText component receives the EditorBridge we created before

<SafeAreaView style={exampleStyles.fullScreen}>
  <RichText editor={editor} />
</SafeAreaView>

Adding a Keyboard Aware Toolbar

Our RichText is pretty empty without a toolbar, so let's add one We need wrap the entire the toolbar and keyboard in a KeyboardAvoidingView to display the toolbar right above the keyboard

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

...

<KeyboardAvoidingView
  behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
  style={exampleStyles.keyboardAvoidingView}
>
  <Toolbar editor={editor} />
</KeyboardAvoidingView>

The exact configuration of your KeyboardAvoidingView will differ depending on how you build you app, and you might need to alter the keyboardVerticalOffset prop. For an example of this case check out this example

Full Example

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}>
      <RichText editor={editor} />
      <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>`;