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
• ⚙️ Support dynamic scheme
• 🛠️ Native toolbar
• 🎹 Custom keyboards
• 💅 Customizable styles
• 🌒 Darkmode and custom theme support
• 🏗️ Supports the new architecture (including bridgeless) and the old architecture

See Installation for the supported React Native versions.

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.

Installation

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

With Expo: npx expo install @10play/tentap-editor react-native-webview. The editor works in Expo Go; for the native custom keyboard driver use a development build.

See Installation for the details and the supported versions. Upgrading from an older version? See the 1.1 migration guide.

Usage

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import {
  EditorKeyboardAvoidingView,
  RichText,
  Toolbar,
  useEditorBridge,
} from '@10play/tentap-editor';

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

  return (
    <SafeAreaView style={styles.fullScreen}>
      <EditorKeyboardAvoidingView style={styles.fullScreen}>
        <View style={styles.fullScreen}>
          <RichText editor={editor} />
        </View>
        <View style={styles.toolbarRow}>
          <Toolbar editor={editor} />
        </View>
      </EditorKeyboardAvoidingView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  fullScreen: { flex: 1 },
  toolbarRow: { flexDirection: 'row' },
});

EditorKeyboardAvoidingView keeps the toolbar on top of the keyboard without a keyboardVerticalOffset, also on edge-to-edge Android. See Keyboard and caret.

Example apps

The repository has two example apps you can run:

• example/: a React Native CLI app (React Native 0.81, new and old architecture) with every example in these docs, including custom keyboards, dynamic height, a navigation header and the advanced setup.
• example-expo/: an Expo app (development build) with the basic editor, dynamic height, custom keyboards in both layouts and two editors on one screen, in light and dark mode. It also runs on the web.

Questions? Check the FAQ.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library