amjadbouhouch/rn-text-editor

A React Native Solution to create a text rich input

rn-text-editor (⚠️ BETA Version)

rn-text-editor - Built on top of ProseMirror

rn-text-editor is an evolving and feature-rich text editor package for React Native that's currently under active development. This package offers a range of functionalities for creating and managing text content in your React Native applications. While it's not stable yet, we invite you to explore its capabilities, contribute to its improvement, and share your feedback with the community.

TODO

• Setup a basic schema
• Handle cursor position (Selection)
• handle onKeyPressed (insert new text or remove it based on the selection)
• Menu actions
• Plugins + Extensions Support
• Documentations
• Dynamic schema

Features

1. Customizable: Tailor the text editor to suit your application's requirements with various configuration options.
2. Rich Text Support: Easily incorporate rich text elements, such as bold and italic formatting, into your content.

Demo

Installation

To get started with rn-text-editor, install the package using npm or yarn:

npm install rn-text-editor
# or
yarn add rn-text-editor

Usage

See example folder.

Explore the package in its current state and feel free to contribute to its development. Integration is straightforward and can be done as follows:

import { StyleSheet, TextInput, View } from 'react-native';
import { EditorContent, extensions, useEditor } from 'rn-text-editor';

const EditorScreen = ({}: EditorScreenProps) => {
  const inputRef = React.useRef<TextInput>(null);
  const editor = useEditor({
    initialContent: [],
    extensions: [extensions.EditorCommands, extensions.Bold, extensions.Italic],
    onUpdate(props) {
      // Get the updated value!
      console.log(props.editor.contentAsJson());
    },
  });
  return (
        <EditorContent
          editor={editor}
          placeholder="Write something..."
          inputRef={inputRef}
          autoFocus
          style={tw`pl-2 text-base`}
        />
  );
};

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

rn-text-editor's Issues

'Commands' is a reserved export and may only be used to export the result of codegenNativeCommands

Hi there,

Great to see a project to address the lack of text editor that are not webview based for react-native 👍

After installing the package, I get the following error:

Web Bundling failed 9183ms (platforms/client/index.tsx)
error: ../../node_modules/rn-text-editor/lib/module/core/Extensions/commands.js: .../node_modules/rn-text-editor/lib/module/core/Extensions/commands.js: 'Commands' is a reserved export and may only be used to export the result of codegenNativeCommands.

Here's more info about my system (I use expo sdk50, metro web and expo router):

  expo-env-info 1.2.0 environment info:
    System:
      OS: macOS 14.3.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 18.19.1 - /nix/store/85siw3p53ki5lldcshgah2rrlrcgi527-nodejs-18.19.1/bin/node
      Yarn: 4.0.2 - /nix/store/06c9dy4mcp7c9mvbhajsdsx7bzny6h30-yarn-1.22.21/bin/yarn
      npm: 10.2.4 - /nix/store/85siw3p53ki5lldcshgah2rrlrcgi527-nodejs-18.19.1/bin/npm
      Watchman: 2024.01.22.00 - /opt/homebrew/bin/watchman
    Managers:
      CocoaPods: 1.15.1 - /nix/store/rkma2q5cc1m4yxhcp2bhf20xbx0hijph-cocoapods-1.15.1/bin/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 23.0, iOS 17.0, macOS 14.0, tvOS 17.0, watchOS 10.0
    IDEs:
      Android Studio: 2022.2 AI-222.4459.24.2221.10121639
      Xcode: 15.0.1/15A507 - /nix/store/k4zhfk321q6rs433hgapwiiimd8drdy2-xcode-wrapper-15.0.1/bin/xcodebuild
    Expo Workflow: bare

Cheers,

Jun