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()}><<</button>
<button onClick={() => commands.increaseIndent()}>>></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 { Remirror, ThemeProvider, 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'
>
<AlignButtons />
<IndentButtons />
<LineHeightButtons />
</Remirror>
</ThemeProvider>
);
};
const AlignButtons = () => {
const commands = useCommands();
return (
<>
<button onMouseDown={(event) => event.preventDefault()} onClick={() => commands.leftAlign()}>
Left
</button>
<button
onMouseDown={(event) => event.preventDefault()}
onClick={() => commands.centerAlign()}
>
Center
</button>
<button onMouseDown={(event) => event.preventDefault()} onClick={() => commands.rightAlign()}>
Right
</button>
</>
);
};
const IndentButtons = () => {
const commands = useCommands();
return (
<>
<button
onMouseDown={(event) => event.preventDefault()}
onClick={() => commands.decreaseIndent()}
>
<<
</button>
<button
onMouseDown={(event) => event.preventDefault()}
onClick={() => commands.increaseIndent()}
>
>>
</button>
</>
);
};
const LineHeightButtons = () => {
const commands = useCommands();
return (
<>
<button
onMouseDown={(event) => event.preventDefault()}
onClick={() => commands.setLineHeight(1)}
>
Narrow
</button>
<button
onMouseDown={(event) => event.preventDefault()}
onClick={() => commands.setLineHeight(2)}
>
Wide
</button>
</>
);
};
export default Basic;