@slate-editor/bold-plugin

SlateJS - Bold Plugin

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

Usage

SlateJS Bold Plugin

import React, { Component } from 'react'
import BoldPlugin from 'slate-bold-plugin'

const plugins = [
  BoldPlugin()
]

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

SlateJS Bold Plugin Button

import React, { Component } from 'react'
import { BoldButton } from 'slate-bold-plugin'

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

Keyboard Shortcut

Platform	Shortcut
	⌘+b
	^+b

API

Target	Description
BoldMark	Component that holds the html that will wrap the content with bold style.
BoldUtils	Generic file that holds the util common functions.
BoldButton	Button component that have behaviour to wrap content with bold style.
BoldKeyboardShortcut	Keyboard shortcut file that manipulates onKeyDown event inside SlateJS.

TODO

• Make keyboard shortcut accepts customization