Skip to main content

FontFamilyExtension

Summary​

Add a font family 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 { FontFamilyExtension } from 'remirror/extensions';

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

Examples​

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

import { htmlToProsemirrorNode } from 'remirror';
import { FontFamilyExtension } from 'remirror/extensions';
import { Remirror, ThemeProvider, useCommands, useRemirror } from '@remirror/react';

const extensions = () => [new FontFamilyExtension()];

const FontFamilyButtons = () => {
  const commands = useCommands();
  return (
    <>
      <button
        onMouseDown={(event) => event.preventDefault()}
        onClick={() => commands.setFontFamily('serif')}
      >
        Serif
      </button>
      <button
        onMouseDown={(event) => event.preventDefault()}
        onClick={() => commands.setFontFamily('sans-serif')}
      >
        Sans serif
      </button>
    </>
  );
};

const Basic = (): JSX.Element => {
  const { manager, state, onChange } = useRemirror({
    extensions: extensions,
    content:
      '<p>Some text in <span style=" font-family:serif" data-font-family="serif">serif</span></p>',
    stringHandler: htmlToProsemirrorNode,
  });

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

export default Basic;

API​