Create a Social Editor using Remirror toolkit in React

ProseMirror is a toolkit for developing or building rich-text editors for the web. Remirror is ProseMirror React tool kit, which simplify the configuration and usage.

It also minimize the initial setup required to use Prosemirror toolkit and supports all features and extensions.

Social Editor

A social editor support hash tagging and mentioning which was commonly found on CMS and social media. With Remirror it is simple to implement these feature.

Project Setup

Let’s build a React project with create-react-app command.

npx create-react-app mkdeditor

Add the remirror dependecies

yarn add @remirror/react-editors @remirror/react

Let’s hash tag objects and mentions which will be passed to our social component.

const USERS = [
    { id: "joe", label: "Joe" },
    { id: "john", label: "John" }
  ];
  const TAGS = ["remirror", "editor"];

Create a functional component for our app

import { SocialEditor } from "@remirror/react-editors/social";
const RemirrorEditor = () => {
  const USERS = [
    { id: "joe", label: "Joe" },
    { id: "john", label: "John" }
  ];
  const TAGS = ["remirror", "editor"];

  return (
    <div style={{ padding: 16 }}>
      <SocialEditor users={USERS} tags={TAGS} />
    </div>
  );
};

That’s all you need to know. We need not implement the CSS styles for the editor, everything is ready to use.

See Live example on Sandbox

Links

Remirror Repo on GitHub

• Create Quill RichText editor using react-quill
• How to get HTML from Remirror editor in Reactjs
• How to get state as JSON from Remirror editor in Reactjs
• Create a TinyMCE Rich Text Editor in React
• Create a Slate Rich Text Editor in React
• Create a Material-UI Rich Text Editor in React
• Create a RichText editor using Quilljs
• Create minimal editor with Tiptap in React
• Create a Social Editor using Remirror toolkit in React
• Create a RichText Editor using Remirror toolkit in React