Building a text editor, like it's 1999, Remirror

Remirror was started as a personal challenge while the maintainer, Ifi, was working full-time as a software engineer to answer the question:

Would it be possible to build an editor that combined great performance with ease of use?

It was also important to give users of all frameworks, the ability to build an editor by picking and choosing their desired building blocks.

What that means to me is that I want the code to guide you, to tell you what to do. So when you add an extension to your editor, it should immediately update reflect all the new commands that are available.

So if you add the bold extension, it should immediately allow you to run bold on the selected words. You don't have to look at the documentation. The documentation is in-line.

remirror / remirror

ProseMirror toolkit for React 🎉

A React toolkit for building cross-platform text editors, based on ProseMirror

Motivation · Status · Documentation · Storybook · Contributing

Introduction

import React from 'react';
import { BoldExtension, ItalicExtension, UnderlineExtension } from 'remirror/extensions';
import { Remirror, useRemirror, OnChangeJSON } from '@remirror/react';

const extensions = () => [new BoldExtension(), new ItalicExtension(), new UnderlineExtension()];

const Editor = ({ onChange }) => {
  const { manager, state } = useRemirror({
    extensions,
    content: '<p>Hi <strong>Friend</strong></p>',
    stringHandler: 'html',
    selection: 'end',
  });

  return (
    <Remirror manager={manager} initialContent={state}>
      <OnChangeJSON onChange={onChange} />
    </Remirror>
  );
};

With this code snippet your editor now supports…

View on GitHub

Learn more about Ifi's story as a maintainer and how you can contribute to Remirror

Join us on the next Open Source Friday. Register with our meetup group to how you can get involved in open source.