@slate-editor/font-size-plugin

SlateJS - Font Size Plugin

The goal of this plugin is to offers an easy handling of SlateJS font size mark content editable. Providing a simple API and easy usage, basing on concept of plugin-centric by SlateJS framework.

Usage

SlateJS Font Size Plugin

import React, { Component } from 'react'
import FontSizePlugin from 'slate-font-size-plugin'

const plugins = [
  FontSizePlugin()
]

class SlateEditor extends Component {
  onChange(state) {
    this.setState({ state })
  }
  render() {
    return (
      <Editor
        plugins={plugins}
        state={this.state.state}
        onChange={this.onChange.bind(this)}
      />
    )
  }
}

SlateJS Font Size Plugin - Input

import React, { Component } from 'react'
import { FontSizeInput } from 'slate-font-size-plugin'

class SlateEditor extends Component {
  onChange(state) {
    this.setState({ state })
  }
  render() {
    return (
      <div className="editor--toolbar">
        <FontSizeInput
          state={this.state.state}
          onChange={this.onChange.bind(this)}
        />
      </div>
    )
  }
}

Keyboard Shortcut

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

API

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