Skip to main content

PositionerExtension

Summary​

This is the positioner extension which is used to track the positions of different parts of your editor.

For example, you can track the cursor or all visible paragraph nodes.

note

Tip: See this blog post if you encounter performance issues.

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 { PositionerExtension } from 'remirror/extensions';

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

Examples​

Source code
import { FC } from 'react';
import {
  BoldExtension,
  BulletListExtension,
  HeadingExtension,
  ItalicExtension,
  OrderedListExtension,
  UnderlineExtension,
} from 'remirror/extensions';
import {
  FloatingWrapper,
  Remirror,
  ThemeProvider,
  useActive,
  useCommands,
  useRemirror,
} from '@remirror/react';

const extensions = () => [
  new HeadingExtension(),
  new BoldExtension(),
  new ItalicExtension(),
  new UnderlineExtension(),
  new BulletListExtension(),
  new OrderedListExtension(),
];

const FloatingButtons = () => {
  const commands = useCommands();
  const active = useActive();

  return (
    <FloatingWrapper positioner='cursor' placement='top'>
      <button
        onMouseDown={(event) => event.preventDefault()}
        onClick={() => commands.toggleBold()}
        style={{ fontWeight: active.bold() ? 'bold' : undefined }}
        data-testid='bubble-menu-bold'
      >
        Bold
      </button>
      <button
        onMouseDown={(event) => event.preventDefault()}
        onClick={() => commands.toggleItalic()}
        style={{ fontWeight: active.italic() ? 'bold' : undefined }}
      >
        Italic
      </button>
      <button
        onMouseDown={(event) => event.preventDefault()}
        onClick={() => commands.toggleUnderline()}
        style={{ fontWeight: active.underline() ? 'bold' : undefined }}
      >
        Underline
      </button>
    </FloatingWrapper>
  );
};

const Basic: FC = () => {
  const { manager, state, onChange } = useRemirror({ extensions });

  return (
    <ThemeProvider>
      <Remirror manager={manager} initialContent={state} onChange={onChange} autoRender>
        <FloatingButtons />
      </Remirror>
    </ThemeProvider>
  );
};

export default Basic;

API​