React Native Draft.js Editor

A full fledged React Native Rich Text editor based on Draft.js!!

Looking For Sponsors

This project is in need of a sponsorship for implementing TypeScript & Expo Support. If you are interested in sponsoring, you can buy the Gold Sponsor pack. Reach out to me on Twitter for more information.

Installation

React Native Webview

This project requires the latest version of React Native Webview to be installed and linked to work properly.

Install using npm:

npm i react-native-draftjs-editor

Install using yarn:

yarn add react-native-draftjs-editor

For Android alone

After installation, add the following lines to the end of your android/app/build.gradle file

project.afterEvaluate {
    apply from: '../../node_modules/react-native-draftjs-editor/copyHtml.gradle';
    copyEditorHtmlToAppAssets(file('../../node_modules/react-native-draftjs-editor'))
}

iOS installation does not require any additional steps.

API

RNDraftView

Props

styleMap and styleSheet are parsed as strings and are sent over to the webview. To prevent the string parsing from failing, please do not use single quotes ' within the styleMap object's keys and values or inside the styleSheet string.

Instance methods

Sample Usage

import React, { useState, useEffect } from "react";
import {
  SafeAreaView,
  StyleSheet,
  TouchableOpacity,
  View,
  Text,
  Platform
} from "react-native";
import KeyboardSpacer from "react-native-keyboard-spacer";
import RNDraftView from "react-native-draftjs-editor";

const ControlButton = ({ text, action, isActive }) => {
  return (
    <TouchableOpacity
      style={[
        styles.controlButtonContainer,
        isActive ? { backgroundColor: "gold" } : {}
      ]}
      onPress={action}
    >
      <Text>{text}</Text>
    </TouchableOpacity>
  );
};

const EditorToolBar = ({
  activeStyles,
  blockType,
  toggleStyle,
  toggleBlockType
}) => {
  return (
    <View style={styles.toolbarContainer}>
      <ControlButton
        text={"B"}
        isActive={activeStyles.includes("BOLD")}
        action={() => toggleStyle("BOLD")}
      />
      <ControlButton
        text={"I"}
        isActive={activeStyles.includes("ITALIC")}
        action={() => toggleStyle("ITALIC")}
      />
      <ControlButton
        text={"H"}
        isActive={blockType === "header-one"}
        action={() => toggleBlockType("header-one")}
      />
      <ControlButton
        text={"ul"}
        isActive={blockType === "unordered-list-item"}
        action={() => toggleBlockType("unordered-list-item")}
      />
      <ControlButton
        text={"ol"}
        isActive={blockType === "ordered-list-item"}
        action={() => toggleBlockType("ordered-list-item")}
      />
      <ControlButton
        text={"--"}
        isActive={activeStyles.includes("STRIKETHROUGH")}
        action={() => toggleStyle("STRIKETHROUGH")}
      />
    </View>
  );
};

const styleMap = {
  STRIKETHROUGH: {
    textDecoration: "line-through"
  }
};

const App = () => {
  const _draftRef = React.createRef();
  const [activeStyles, setActiveStyles] = useState([]);
  const [blockType, setActiveBlockType] = useState("unstyled");
  const [editorState, setEditorState] = useState("");

  const defaultValue =
    "<h1>A Full fledged Text Editor</h1><p>This editor is built with Draft.js. Hence should be suitable for most projects. However, Draft.js Isn’t fully compatible with mobile yet. So you might face some issues.</p><p><br></p><p>This is a simple implementation</p><ul>  <li>It contains <strong>Text formatting </strong>and <em>Some blocks formatting</em></li>  <li>Each for it’s own purpose</li></ul><p>You can also do</p><ol>  <li>Custom style map</li>  <li>Own css styles</li>  <li>Custom block styling</li></ol><p>You are welcome to try it!</p>";

  const editorLoaded = () => {
    _draftRef.current && _draftRef.current.focus();
  };

  const toggleStyle = style => {
    _draftRef.current && _draftRef.current.setStyle(style);
  };

  const toggleBlockType = blockType => {
    _draftRef.current && _draftRef.current.setBlockType(blockType);
  };

  useEffect(() => {
    /**
     * Get the current editor state in HTML.
     * Usually keep it in the submit or next action to get output after user has typed.
     */
    setEditorState(_draftRef.current ? _draftRef.current.getEditorState() : "");
  }, [_draftRef]);
  console.log(editorState);

  return (
    <SafeAreaView style={styles.containerStyle}>
      <RNDraftView
        defaultValue={defaultValue}
        onEditorReady={editorLoaded}
        style={{ flex: 1 }}
        placeholder={"Add text here..."}
        ref={_draftRef}
        onStyleChanged={setActiveStyles}
        onBlockTypeChanged={setActiveBlockType}
        styleMap={styleMap}
      />
      <EditorToolBar
        activeStyles={activeStyles}
        blockType={blockType}
        toggleStyle={toggleStyle}
        toggleBlockType={toggleBlockType}
      />
      {Platform.OS === "ios" ? <KeyboardSpacer /> : null}
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  containerStyle: {
    flex: 1,
    marginTop: 36
  },
  toolbarContainer: {
    height: 56,
    flexDirection: "row",
    backgroundColor: "silver",
    alignItems: "center",
    justifyContent: "space-around"
  },
  controlButtonContainer: {
    padding: 8,
    borderRadius: 2
  }
});

export default App;

The above code will create the following editor view:

Refer the working example in ReactNativeDraftjsExample/ directory

If you run across any issues, please note that Draft.js is not fully mobile compatible yet. Before raising any issues in this repository please check if your issue exists in the following lists:

• https://github.com/facebook/draft-js/labels/android
• https://github.com/facebook/draft-js/labels/ios

TODO

• [x] Custom Style map.
• [ ] Custom Block Components.
• [x] CSS Styling of the editor
• [ ] Test Cases
• [ ] Native iOS and Android libraries