Skip to main content

NodeFormattingExtension

Summary

This extension adds node formatting to your text editor.

Features

Text alignment

Text can be aligned in different ways like left, right, center, justify, etc.

const AlignButtons = () => {
const commands = useCommands();
return (
<>
<button onClick={() => commands.leftAlign()}>Left</button>
<button onClick={() => commands.centerAlign()}>Center</button>
<button onClick={() => commands.rightAlign()}>Right</button>
</>
);
};

Indent

Text can be structured with different levels of indent.

const IndentButtons = () => {
const commands = useCommands();
return (
<>
<button onClick={() => commands.decreaseIndent()}>&lt;&lt;</button>
<button onClick={() => commands.increaseIndent()}>&gt;&gt;</button>
</>
);
};

Line height

The line height can be adjusted to be:

  • More compact: showing more lines of text per page allows to convey more information
  • More spacious: adding more whitespace between lines eases reading
const LineHeightButtons = () => {
const commands = useCommands();
return (
<>
<button onClick={() => commands.setLineHeight(1)}>Narrow</button>
<button onClick={() => commands.setLineHeight(2)}>Wide</button>
</>
);
};

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

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

Examples

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

import React from 'react';
import { htmlToProsemirrorNode } from 'remirror';
import {
BlockquoteExtension,
BulletListExtension,
NodeFormattingExtension,
} from 'remirror/extensions';
import {
CommandButtonGroup,
CommandMenuItem,
DropdownButton,
IndentationButtonGroup,
Remirror,
TextAlignmentButtonGroup,
ThemeProvider,
Toolbar,
useCommands,
useRemirror,
} from '@remirror/react';

const Basic: React.FC = () => {
const { manager, state, onChange } = useRemirror({
extensions: () => [
new BlockquoteExtension(),
new NodeFormattingExtension(),
new BulletListExtension(),
],
content: '<p>Click buttons to change alignment, indent,<br> and line height</p>',
stringHandler: htmlToProsemirrorNode,
});

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

const LineHeightButtonDropdown = () => {
const { setLineHeight } = useCommands();
return (
<CommandButtonGroup>
<DropdownButton aria-label='Line height' icon='lineHeight'>
<CommandMenuItem
commandName='setLineHeight'
onSelect={() => setLineHeight(1)}
enabled={setLineHeight.enabled(1)}
label='Narrow'
/>
<CommandMenuItem
commandName='setLineHeight'
onSelect={() => setLineHeight(2)}
enabled={setLineHeight.enabled(2)}
label='Wide'
/>
</DropdownButton>
</CommandButtonGroup>
);
};

export default Basic;

API