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
- 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