A ProseMirror toolkit for building a CMS in React

Brian Douglas - Mar 22 '21 - - Dev Community

remirror was started as a personal challenge. Would it be possible to build an editor that combined excellent performance with ease of use? It was also essential to give users of all frameworks the ability to create an editor by picking and choosing their desired building blocks.

remirror was started as a personal challenge. 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.

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…

Demo

In the last year, Ifiok has focused on building elegant developer experiences with CMS's. Watch this interview to see this project in action and learn how we could secure enough sponsorship to work on this problem full time.

Open Source Fridays

Come along to our Open Source Friday live streams. We go live on the GitHub Twitch Channel most Fridays. Join the Meetup Group to stay up to date and see the topics each week.

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