@slate-editor/font-size-plugin v5.0.0-alpha.f4219f70

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

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;