@slate-editor/font-size-plugin v5.1.0

SlateJS font size plugin.

Installation

The @slate-editor/font-size-plugin is available as an npm package.

yarn add @slate-editor/font-size-plugin

Usage

Here is a quick example to get you started:

import React from 'react'
import { SlateEditor, SlateToolbar, SlateContent } from 'slate-editor'
import { FontSizePlugin, FontSizeInput } from '@slate-editor/font-size-plugin'

const fontSizePluginOptions = { initialFontSize: 16 }

const plugins = [
  FontSizePlugin(fontSizePluginOptions)
]

const SlateRichTextEditor = () => (
  <SlateEditor plugins={plugins}>
    <SlateToolbar>
      <FontSizeInput {...fontSizePluginOptions} />
    </SlateToolbar>

    <SlateContent />
  </SlateEditor>
)

export default SlateRichTextEditor

Keyboard Shortcut

OS	Action	Shortcut
	Increase	⌘+shift+>
	Decrease	⌘+shift+<
	Increase	ctrl+shift+>
	Decrease	ctrl+shift+<

API

TODO

• Make keyboard shortcut accepts customization;
• Add keyboard shortcut to apply font size to expanded selection;
• Add keyboard shortcut to remove font size from expanded selection;
• Add button to apply font size to expanded selection;
• Add button to remove font size from expanded selection;
• Add handle to manipulates collapsed selection to remove font size to anchor word;
• Add behaviour to show which font size have applied to collapsed selection;
• Add behaviour to show which font size have applied to expanded selection;