Popularity
6.6
Growing
Activity
9.7
Growing
1,327
19
124

Description

Remirror is still undergoing heavy development, but is used in production by at least one company. At the moment the focus is on releasing a stable API and while this is ongoing documentation has slipped from being the priority.

Right now the best way to understand the library is to read through the codebase and take a look at how existing editors have been structured. A quick way to get started is to spin up our Next.js example.

Monthly Downloads: 0
Programming language: TypeScript
License: MIT License
Latest version: v1.0.0-next.58

remirror alternatives and similar libraries

Based on the "Rich Text Editor" category.
Alternatively, view remirror alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of remirror or a related project?

Add another 'Rich Text Editor' Library

README

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.

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

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](support/root) and [readme](support/root/readme.md).

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](LICENSE) file for details


*Note that all licence references and agreements mentioned in the remirror README section above are relevant to that project's source code only.