@slate-editor/font-size-plugin
[SlateJS](https://github.com/ianstormtaylor/slate) font size plugin.
[](https://www.npmjs.com/package/@slate-editor/font-size-plugin)
[](https://www.npmjs.com/package/@slate-editor/font-size-plugin)
## Installation
The **@slate-editor/font-size-plugin** is available as an [npm package](https://www.npmjs.com/package/@slate-editor/font-size-plugin).
```
yarn add @slate-editor/font-size-plugin
```
## Usage
Here is a quick example to get you started:
```js
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 = () => (
)
export default SlateRichTextEditor
```
## Keyboard Shortcut
| OS | Action | Shortcut |
|--------------------------|----------|----------------|
| ![Apple Logo][apple] | Increase | ⌘+shift+> |
| ![Apple Logo][apple] | Decrease | ⌘+shift+< |
| ![Windows Logo][windows] | Increase | ctrl+shift+> |
| ![Windows Logo][windows] | 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;
[apple]: https://cdn2.iconfinder.com/data/icons/designer-skills/128/apple-ios-system-platform-os-mac-linux-48.png
[windows]: https://cdn2.iconfinder.com/data/icons/designer-skills/128/windows-48.png
