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} />;
};

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

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

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

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

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

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

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>
  );
};