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