Skip to main content

Font

Includes the following plugins:

  • Font background color
  • Font color
  • Font family
  • Font size
  • Font weight

Installation#

npm install @udecode/plate
# or
npm install @udecode/plate-font
npm install @udecode/plate-ui-font

Usage#

Use the toolbar dropdowns to control font color and font background color.

import React, { CSSProperties } from 'react';
import { Check } from '@styled-icons/material/Check';
import { FontDownload } from '@styled-icons/material/FontDownload';
import { FormatColorText } from '@styled-icons/material/FormatColorText';
import {
  ColorPickerToolbarDropdown,
  createFontBackgroundColorPlugin,
  createFontColorPlugin,
  createFontSizePlugin,
  MARK_BG_COLOR,
  MARK_COLOR,
  Plate,
  PlateProvider,
} from '@udecode/plate';
import { basicNodesPlugins } from './basic-nodes/basicNodesPlugins';
import { editableProps } from './common/editableProps';
import { plateUI } from './common/plateUI';
import { fontValue } from './font/fontValue';
import { Toolbar } from './toolbar/Toolbar';
import { createMyPlugins, MyValue } from './typescript/plateTypes';

const styles: Record<string, CSSProperties> = {
  copyWrapper: {
    borderBottom: '1px solid #eee',
    margin: '0 -16px',
    padding: '0 16px 16px',
  },
  copy: {
    color: '#f92672',
  },
};

const tooltips = {
  color: { content: 'Text color' },
  bg: { content: 'Highlight color' },
};

const plugins = createMyPlugins(
  [
    ...basicNodesPlugins,
    createFontColorPlugin(),
    createFontBackgroundColorPlugin(),
    createFontSizePlugin(),
  ],
  {
    components: plateUI,
  }
);

const CopyContent = () => (
  <div style={styles.copyWrapper}>
    <span style={styles.copy}>Copy Me in the editor</span>
  </div>
);

export default () => (
  <PlateProvider<MyValue> initialValue={fontValue} plugins={plugins}>
    <Toolbar>
      <ColorPickerToolbarDropdown
        pluginKey={MARK_COLOR}
        icon={<FormatColorText />}
        selectedIcon={<Check />}
        tooltip={tooltips.color}
      />
      <ColorPickerToolbarDropdown
        pluginKey={MARK_BG_COLOR}
        icon={<FontDownload />}
        selectedIcon={<Check />}
        tooltip={tooltips.bg}
      />
    </Toolbar>

    <CopyContent />

    <Plate<MyValue> editableProps={editableProps} />
  </PlateProvider>

Source Code#

Edit this page