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 minimize the initial setup required to use Prosemirror toolkit and supports all features and extensions.
Let’s build a Markdown Editor with Remirror component
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 import components and helpers and create our new component using MarkdownEditor component.
import { useHelpers } from "@remirror/react";
import { MarkdownEditor } from "@remirror/react-editors/markdown";
function MarkdownPreview() {
const { getMarkdown } = useHelpers(true);
return (
<pre>
<code>{getMarkdown()}</code>
</pre>
);
}
const MdEditor = () => {
return (
<MarkdownEditor placeholder="Start typing...">
<MarkdownPreview />
</MarkdownEditor>
);
};
We need not implement the CSS styles for the editor, everything is ready to use.
See Live example on Sandbox
- 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