bearhunter49/remirror

ProseMirror toolkit for React 🎉

A toolkit for building cross-platform text editors
in the framework of your choice.

Motivation · Status · Documentation · Storybook · Contributing

Introduction

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

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

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

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

With this code snippet your editor now supports basic editing functionality.

Installation

yarn add remirror @remirror/react @remirror/pm # Yarn

npm add remirror @remirror/react @remirror/pm # npm

pnpm add remirror @remirror/react @remirror/pm # pnpm

If you run into any issues we recommend any of the following:

• Open an issue in our github repo.
• Join our discord server and discuss the problem with our community.
• Create a pull request with your proposed improvement by clicking the edit button on the relevant page.

Whatever you decide thanks for taking the time to explore the remirror project.

Documentation

View our documentation website here.

• Introduction
• Create an editor
• Extensions
• Storybook
• CodeSandbox starter

Features

• A11y focused and ARIA compatible.
• I18n support via lingui.
• Collaborative editing with yjs.
• 30+ extensions for creating fully customized editing experiences.
• Zero configuration support for Server Side Rendering (SSR).
• Cross platform and cross-framework, with an Angular solution coming later this year.

Prerequisites

• Typescript >= 4
• pnpm >= 5.5

Getting Started

To add an editor to your codebase, first install the required dependencies.

# yarn
yarn add remirror @remirror/react @remirror/pm

# pnpm
pnpm add remirror @remirror/react @remirror/pm

# npm
npm install remirror @remirror/react @remirror/pm

Usage

Once installed you will be able to add the following code which creates an editor with the bold extension active. Clicking the button when text is selected will toggle between bold.

import React, { useCallback } from 'react';
import { BoldExtension } from 'remirror/extensions';
import {
  EditorComponent,
  Remirror,
  useActive,
  useCommands,
  useHelpers,
  useKeymap,
  useRemirror,
} from '@remirror/react';

const Button = () => {
  // Determines whether "bold" is active within the current text selection
  const { bold } = useActive();
  // Provides the ability to toggle bold on or off for the current selection
  const { toggleBold } = useCommands();

  return (
    <button
      onClick={() => toggleBold()}
      disabled={toggleBold.enabled()}
      style={{ fontWeight: bold() ? 'bold' : undefined }}
    >
      Bold
    </button>
  );
};

// Hooks can be added to the context without the need for creating custom components
const hooks = [
  () => {
    const { getJSON } = useHelpers();

    const onSave = useCallback(
      (props) => {
        const { state } = props;
        saveToBackend(getJSON(state));

        return true; // Prevents any further key handlers from being run.
      },
      [getJSON],
    );

    // "Mod" means platform agnostic modifier key - i.e. Ctrl on Windows, or Cmd on MacOS
    useKeymap('Mod-s', onSave);
  },
];

const Editor = () => {
  const { manager, state } = useRemirror({ extensions: () => [new BoldExtension()] });

  // The editor is built up like lego blocks of functionality within the editor
  // provider.
  return (
    <Remirror manager={manager} initialContent={state} hooks={hooks}>
      <Button />
      <EditorComponent />
    </Remirror>
  );
};

Contributing

Please read our contribution guide for details on our code of conduct, and the process for submitting pull requests. It also outlines the project structure so you can find help when navigating your way around the codebase.

In addition each folder in this codebase includes a readme describing why it exists.

You might also notice there are surprisingly few files in the root directory of this project. All the configuration files have been moved to the support/root directory and are symlinked to the root directory in a preinstall hook. For more information take a look at folder and readme.

Finally you can keep track on what's being worked on via the projects.

Versioning

This project uses SemVer for versioning. For the versions available, see the tags on this repository.

License

This project is licensed under the MIT License - see the LICENSE file for details