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;