FontSizeExtension

Summary

Add a font size to the selected text (or text within a specified range).

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

The extension is provided by the @remirror/extension-font-size package.

Examples

Source code

import 'remirror/styles/all.css';

import React from 'react';
import { htmlToProsemirrorNode } from 'remirror';
import { FontSizeExtension } from 'remirror/extensions';
import {
  CommandButtonGroup,
  CommandMenuItem,
  DecreaseFontSizeButton,
  DropdownButton,
  IncreaseFontSizeButton,
  Remirror,
  ThemeProvider,
  Toolbar,
  useActive,
  useCommands,
  useRemirror,
} from '@remirror/react';

const extensions = () => [new FontSizeExtension({ defaultSize: '16', unit: 'px' })];

const FONT_SIZES = ['8', '10', '12', '14', '16', '18', '24', '30'];

const FontSizeButtons = () => {
  const { setFontSize } = useCommands();
  const { fontSize } = useActive();
  return (
    <DropdownButton aria-label='Set font size' icon='fontSize'>
      {FONT_SIZES.map((size) => (
        <CommandMenuItem
          key={size}
          commandName='setFontSize'
          onSelect={() => setFontSize(size)}
          enabled={setFontSize.enabled(size)}
          active={fontSize({ size })}
          label={size}
          icon={null}
          displayDescription={false}
        />
      ))}
    </DropdownButton>
  );
};

const Basic = (): JSX.Element => {
  const { manager, state, onChange } = useRemirror({
    extensions: extensions,
    content: '<p>Some text to resize</p>',
    stringHandler: htmlToProsemirrorNode,
  });

  return (
    <ThemeProvider>
      <Remirror
        manager={manager}
        autoFocus
        onChange={onChange}
        initialContent={state}
        autoRender='end'
      >
        <Toolbar>
          <CommandButtonGroup>
            <DecreaseFontSizeButton />
            <FontSizeButtons />
            <IncreaseFontSizeButton />
          </CommandButtonGroup>
        </Toolbar>
      </Remirror>
    </ThemeProvider>
  );
};

export default Basic;

JSON Content

Initial content can be provided as JSON instead of HTML. Here is how you would provide the size mark.

import { FontSizeExtension } from 'remirror/extensions';
import { useRemirror } from '@remirror/react';

const { manager, state } = useRemirror({
  extensions: () => [new FontSizeExtension()],

  content: {
    type: 'doc',
    content: [
      {
        type: 'paragraph',
        content: [
          { type: 'text', text: 'Hello ', marks: [{ type: 'fontSize', attrs: { size: '20pt' } }] },
        ],
      },
    ],
  },
});

Make sure you include the size unit in the mark because it can throw an error without a unit.

API

• FontSizeExtension