@10play/tentap-editor NPM

10tap-editor

TenTap is a typed, easy to use, customizable, and extendable Rich Text editor for React-Native based on Tiptap and Prosemirror. It offers a "plug and play" experience and comes with many essential features out of the box that can be incorporated into your apps quickly. Additionally, TenTap allows you the developers to tailor the editor to your applications specific needs.

Features

💁 Based on tiptap
➕ Extendable
🎹 Custom keyboards
⚙️ Support dynamic scheme
🛠️ Native toolbar
💅 Customizable styles
🌒 Darkmode and custom theme support
🏗️ supports new architecture*

* new arch supported on react-native version 0.73.5 and above

Why?

After years of developing rich text editors for mobile, we realized that there is an empty void for open source RichText editors on mobile especially for ReactNative. So we have decided to create this package that incorporates all that we have learned, and that provides the best possible ux. Tentap is designed for getting the best experience of editing rich-text on mobile inspired by state of the art mobile editors like: gdocs, notion, dropbox paper.

Docs and Examples

Click Here For Full Documentation

Installation

React Native

yarn add @10play/tentap-editor react-native-webview
cd ios && pod install

Expo

npx expo install @10play/tentap-editor react-native-webview
Only basic usage without custom keyboard is supported by Expo Go (see basic example).
Otherwise you will need to setup Expo Dev Client.

Now you ready to add tentap to your app!

Usage

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

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <RichText editor={editor} />
      <KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        style={{
          position: 'absolute',
          width: '100%',
          bottom: 0,
        }}
      >
        <Toolbar editor={editor} />
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
};