@slate-editor/font-size-plugin

@slate-editor/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

Name	Description
FontSizeMark	Component that holds the html that will wrap the content with font size style.
FontSizeKeyboardShortcut	Keyboard shortcut file that manipulates onKeyDown event inside SlateJS.
FontSizeUtils	Generic file that holds the util common functions.
FontSizeInput	Input component that have behaviour to wrap content with font size style.

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;