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 { 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 />
        &nbsp;
        <IndentButtons />
        &nbsp;
        <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()}
      >
        &lt;&lt;
      </button>
      <button
        onMouseDown={(event) => event.preventDefault()}
        onClick={() => commands.increaseIndent()}
      >
        &gt;&gt;
      </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;

API​