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>
);
};
With this code snippet your editor now supports basic editing functionality.
Alternatively, take a look at our 5 minute tutorial to get up and running with an out-of-the-box WYSIWYG editor.
npm install remirror @remirror/react @remirror/pm
# Or
yarn add remirror @remirror/react @remirror/pm
# Or
pnpm add remirror @remirror/react @remirror/pm
If you run into any issues we recommend any of the following:
Whatever you decide thanks for taking the time to explore the remirror project.
View our documentation website here.
See our 5 minute tutorial to get started!
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.
This project uses SemVer for versioning. For the versions available, see the tags on this repository.
This project is licensed under the MIT License - see the LICENSE file for details