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

| 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;