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

Brian Douglas - Nov 4 '20 - - Dev Community

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.

GitHub logo remirror / remirror

ProseMirror toolkit for React 🎉

animated remirror logo

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

Motivation · Status · Documentation · Storybook · Contributing

Bundled sized of core library Continuous integration badge for automatic releases Continuous integration badge for docs deployment Project maintainability provided by CodeClimate Unit test coverage for the codebase Discord Version Sponsor

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>
  );
};
Enter fullscreen mode Exit fullscreen mode

With this code snippet your editor now supports…

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.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .