draft-js – Developer stories

How to add Emoji 😍 to Draft-js in React

How to add Emojis to draft-js editor using plugin in React

Draft-js is Javascript Editor framework that featured in Facebook and it is an open source project which maintained by Facebook. It has larger user base compared to other. Draft-js was a complete framework for creating Ritch text editors and social interactions.

Plugin

Draft-js Plugins allow us to quickly add features such as tool bars , social mentions.

It is a React Plugin Architecture for Draft.js

Emoji Plugin 🍒

The Emoji (😊) plugin allow us add emojis to social interaction. This plugin allow use pick and emoji of our choice by pressing :.

Let’s install create a react project

npx create-react-app dracft-editor

In the project add dependecies as follows

npm install @draft-js-plugins/editor
npm install @draft-js-plugins/emoji

We are ready to build our component. Using the Editor component we can use Editor in our app. The Editor state will manage the state of the app.

Let’s initialize the plugin and pass it as props.

import React, { Component } from "react";
import Editor, { createEditorStateWithText } from "@draft-js-plugins/editor";
import createEmojiPlugin from "@draft-js-plugins/emoji";
import editorStyles from "./editorStyles.module.css";

const emojiPlugin = createEmojiPlugin();
const { EmojiSuggestions, EmojiSelect } = emojiPlugin;
const plugins = [emojiPlugin];
const text = `Cool, we can have all sorts of Emojis here. 🙌
🌿☃️🎉🙈 aaaand maybe a few more here 🐲☀️🗻 Quite fun!`;

export default class SimpleEmojiEditor extends Component {
  state = {
    editorState: createEditorStateWithText(text)
  };

  onChange = (editorState) => {
    this.setState({
      editorState
    });
  };

  focus = () => {
    this.editor.focus();
  };

  render() {
    return (
      <div>
        <div className={editorStyles.editor} onClick={this.focus}>
          <Editor
            editorState={this.state.editorState}
            onChange={this.onChange}
            plugins={plugins}
            ref={(element) => {
              this.editor = element;
            }}
          />
          <EmojiSuggestions />
        </div>
        <div className={editorStyles.options}>
          <EmojiSelect />
        </div>
      </div>
    );
  }
}

The EmojiSuggestion component will populate a list emojis for us and EmojiSelect will bring the selected Emoji.

Remember you need to add the CSS

import "@draft-js-plugins/mention/lib/plugin.css";

See the Live project in action on Sandbox

How to add mentions to Draft-js in React

How to add mentions to draft-js editor using plugin in React

Plugin

Draft-js Plugins allow us to quickly add features such as tool bars , social mentions.

It is a React Plugin Architecture for Draft.js

Mention Plugin

The mention plugin allow us add mention feature in our editor, one like seen on Facebook, twitter etc. In real world we can fetch mentions from API, in this example we used JS object to store them.

Let’s install create a react project

npx create-react-app dracft-editor

In the project add dependecies as follows

npm install @draft-js-plugins/editor
npm install @draft-js-plugins/mention draft-js

We are ready to build our component. Using the Editor component we can use Editor in our app. The Editor state will manage the state of the app.

Let’s initialize the plugin and pass it as props.

//SimpleMention.tsx
import React, {
  ReactElement,
  useCallback,
  useMemo,
  useRef,
  useState
} from "react";
import { EditorState } from "draft-js";
import Editor from "@draft-js-plugins/editor";
import createMentionPlugin, {
  defaultSuggestionsFilter
} from "@draft-js-plugins/mention";
import editorStyles from "./SimpleMentionEditor.module.css";

import mentions from "./Mentions";

export default function SimpleMentionEditor(): ReactElement {
  const ref = useRef<Editor>(null);
  const [editorState, setEditorState] = useState(() =>
    EditorState.createEmpty()
  );
  const [open, setOpen] = useState(false);
  const [suggestions, setSuggestions] = useState(mentions);

  const { MentionSuggestions, plugins } = useMemo(() => {
    const mentionPlugin = createMentionPlugin();
    // eslint-disable-next-line no-shadow
    const { MentionSuggestions } = mentionPlugin;
    // eslint-disable-next-line no-shadow
    const plugins = [mentionPlugin];
    return { plugins, MentionSuggestions };
  }, []);

  const onOpenChange = useCallback((_open: boolean) => {
    setOpen(_open);
  }, []);
  const onSearchChange = useCallback(({ value }: { value: string }) => {
    setSuggestions(defaultSuggestionsFilter(value, mentions));
  }, []);

  return (
    <div
      className={editorStyles.editor}
      onClick={() => {
        ref.current!.focus();
      }}
    >
      <Editor
        editorKey={"editor"}
        editorState={editorState}
        onChange={setEditorState}
        plugins={plugins}
        ref={ref}
      />
      <MentionSuggestions
        open={open}
        onOpenChange={onOpenChange}
        suggestions={suggestions}
        onSearchChange={onSearchChange}
        onAddMention={() => {
          // get the mention object selected
        }}
      />
    </div>
  );
}

Remember you need to add the CSS

import "@draft-js-plugins/mention/lib/plugin.css";

The complete project can be found on Sandbox

Create RichText editor in 5 minute using react-draft-wysiwyg

How to create a WYSIWYG text editor using draft-js in 5 minutes

How to build a RichText Editor

It is primarily built for serving React, all you have to do get the dependencies and setup a project. Let’s setup a project.

npx create-react-app dracft-editor

react-draft-wysiwyg

This is a React library which ready use component with preconfigured toolbars and other features on top of Draft-js and allow us to build text editor with ease and peace. Let’s add the dependencies.

$ npm install --save react-draft-wysiwyg draft-js

We are ready to build our component.

We can wither use or functional component for creating the Draftjs Editor. Add the following code in Editor.js file.

import { Editor } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
<Editor
  editorState={editorState}
  toolbarClassName="toolbarClassName"
  wrapperClassName="wrapperClassName"
  editorClassName="editorClassName"
  onEditorStateChange={this.onEditorStateChange}
/>;

See the Sandbox for Live example.

How to add inline toolbar plugin to Draft-js in React

How to add inline toolbar to draft-js editor using plugin in React

Plugin

Draft-js Plugins allow us to quickly add features such as tool bars , social mentions.

It is a React Plugin Architecture for Draft.js

Inline Toolbar

The inline toolbar incorporate a toolbar for our editor, without the plugin we have to add all background details start from buttons, styles and function handler manually. This plugin will save our time.

Let’s install create a react project

npx create-react-app dracft-editor

In the project add dependecies as follows

npm install @draft-js-plugins/editor
npm install @draft-js-plugins/inline-toolbar

We are ready to build our component. Using the Editor component we can use Editor in our app. The Editor state will manage the state of the app.

Let’s initialize the plugin and pass it as props.

import Editor from '@draft-js-plugins/editor';
import createToolbarPlugin from '@draft-js-plugins/static-toolbar';
import React from 'react';

// Creates an Instance. At this step, a configuration object can be passed in
// as an argument.
const toolbarPlugin = createToolbarPlugin();

// The Editor accepts an array of plugins. In this case, only the toolbarPlugin
// is passed in, although it is possible to pass in multiple plugins.
const MyEditor = ({ editorState, onChange }) => (
  <Editor
    editorState={editorState}
    onChange={onChange}
    plugins={[toolbarPlugin]}
  />
);

export default MyEditor;

The complete project can be found on Sandbox

How to use toolbar plugin with Draft-js in React

How to add astatic toolbar to draft-js editor using plugin in React

Plugin

Draft-js Plugins allow us to quickly add features such as tool bars , social mentions.

It is a React Plugin Architecture for Draft.js

Static Toolbar

The static tool bar incorporate a toolbar for our editor, without the plugin we have to add all background details start from buttons, styles and function handler manually. This plugin will save our time.

Let’s install create a react project

npx create-react-app dracft-editor

In the project add dependecies as follows

npm install @draft-js-plugins/editor
npm install @draft-js-plugins/static-toolbar

We are ready to build our component. Using the Editor component we can use Editor in our app. The Editor state will manage the state of the app.

Let’s initialize the plugin and pass it as props.

import Editor from '@draft-js-plugins/editor';
import createToolbarPlugin from '@draft-js-plugins/static-toolbar';
import React from 'react';

// Creates an Instance. At this step, a configuration object can be passed in
// as an argument.
const toolbarPlugin = createToolbarPlugin();

// The Editor accepts an array of plugins. In this case, only the toolbarPlugin
// is passed in, although it is possible to pass in multiple plugins.
const MyEditor = ({ editorState, onChange }) => (
  <Editor
    editorState={editorState}
    onChange={onChange}
    plugins={[toolbarPlugin]}
  />
);

export default MyEditor;

The complete project can be found on Sandbox

How to use draft-js with react

How to use Draft-js with React components

How to use it in React

It is primarily built for serving React, all you have to do get the dependencies and setup a project.

npx create-react-app dracft-editor

In the project add dependecies as follows

yarn add draft-js"

We are ready to build our component. Using the Editor component we can use Editor in our app. The Editor state will manage the state of the app.

We can wither use or functional component for creating the Draftjs Editor. Add the following code in Editor.js file.

import React, { useState } from "react";
import { Editor, EditorState, RichUtils } from "draft-js";
import { convertToRaw } from "draft-js";

const DraftJsEditor = () => {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  const logContent = () => {
    const blocks = convertToRaw(editorState.getCurrentContent()).blocks;
    const value = blocks
      .map((block) => (!block.text.trim() && "\n") || block.text)
      .join("\n");
    console.log(value);
  };

  const handleKeyCommand = (command) => {
    const newState = RichUtils.handleKeyCommand(editorState, command);
    if (newState) {
      setEditorState(newState);
      return "handled";
    }
    return "not-handled";
  };

  const onUnderlineClick = () => {
    setEditorState(RichUtils.toggleInlineStyle(editorState, "UNDERLINE"));
  };

  const onBoldClick = () => {
    setEditorState(RichUtils.toggleInlineStyle(editorState, "BOLD"));
  };

  const onItalicClick = () => {
    setEditorState(RichUtils.toggleInlineStyle(editorState, "ITALIC"));
  };

  // We could make a toolbar component her to handle the formating tools
  // and replase the buttons with that.
  return (
    <div>
      <button onClick={onUnderlineClick}>U</button>
      <button onClick={onBoldClick}>
        <b>B</b>
      </button>
      <button onClick={onItalicClick}>
        <em>I</em>
      </button>
      <div className="editors">
        <Editor
          editorState={editorState}
          handleKeyCommand={handleKeyCommand}
          onChange={setEditorState}
        />
      </div>
      <div>
        <button onClick={logContent}>Log</button>
      </div>
    </div>
  );
};

export default DraftJsEditor;

The complete project can be found along with other examples on Github. See the Sandbox for Live example.

Plugin

Emoji Plugin 🍒

Share this:

Plugin

Mention Plugin

Share this:

How to build a RichText Editor

react-draft-wysiwyg

Share this:

Plugin

Inline Toolbar

Share this:

Plugin

Static Toolbar

Share this:

How to use it in React

Share this: