Skip to main content

HeadingExtension

Summary​

Adds headings to the editor

Usage​

Installation​

This extension is installed for you when you install the main remirror package.

You can use the imports in the following way:

import { HeadingExtension } from 'remirror/extensions';

The extension is provided by the @remirror/extension-heading package.

Examples​

Source code
import 'remirror/styles/all.css';
import './styles.css';

import { cx, htmlToProsemirrorNode } from 'remirror';
import { HeadingExtension } from 'remirror/extensions';
import { Remirror, ThemeProvider, useActive, useCommands, useRemirror } from '@remirror/react';

const extensions = () => [new HeadingExtension()];

const HeadingButtons = () => {
  const commands = useCommands();
  const active = useActive(true);
  return (
    <>
      {[1, 2, 3, 4, 5, 6].map((level) => (
        <button
          key={level}
          onMouseDown={(event) => event.preventDefault()}
          onClick={() => commands.toggleHeading({ level })}
          className={cx(active.heading({ level }) && 'active')}
        >
          H{level}
        </button>
      ))}
    </>
  );
};

const Basic = (): JSX.Element => {
  const { manager, state, onChange } = useRemirror({
    extensions: extensions,
    content: `<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3>`,
    stringHandler: htmlToProsemirrorNode,
  });

  return (
    <ThemeProvider>
      <Remirror
        manager={manager}
        autoFocus
        onChange={onChange}
        initialContent={state}
        autoRender='end'
      >
        <HeadingButtons />
      </Remirror>
    </ThemeProvider>
  );
};

export default Basic;

API​