Wysiwyg Editor

The <WysiwygEditor> provides a state of the art richtext editor.

import { WysiwygEditor } from '@remirror/react-editors/wysiwyg';

Source code

import React, { useCallback } from 'react';
import { useHelpers, useRemirrorContext } from '@remirror/react';
import { WysiwygEditor } from '@remirror/react-editors/wysiwyg';

const SAMPLE_DOC = {
  type: 'doc',
  content: [
    {
      type: 'paragraph',
      attrs: { dir: null, ignoreBidiAutoUpdate: null },
      content: [{ type: 'text', text: 'Loaded content' }],
    },
  ],
};

function LoadButton() {
  const { setContent } = useRemirrorContext();
  const handleClick = useCallback(() => setContent(SAMPLE_DOC), [setContent]);

  return (
    <button onMouseDown={(event) => event.preventDefault()} onClick={handleClick}>
      Load
    </button>
  );
}

function SaveButton() {
  const { getJSON } = useHelpers();
  const handleClick = useCallback(() => alert(JSON.stringify(getJSON())), [getJSON]);

  return (
    <button onMouseDown={(event) => event.preventDefault()} onClick={handleClick}>
      Save
    </button>
  );
}

const Basic: React.FC = () => (
  <WysiwygEditor placeholder='Start typing...'>
    <LoadButton />
    <SaveButton />
  </WysiwygEditor>
);

export default Basic;

Find many more examples on Storybook.

note

Want to customize the behavior? Simply copy the <WysiwygEditor> code and change the extensions. That's what Remirror was built for.