@slate-editor/underline-plugin NPM

SlateJS - Underline Plugin

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

Usage

SlateJS Underline Plugin

import React, { Component } from 'react'
import UnderlinePlugin from 'slate-underline-plugin'

const plugins = [
  UnderlinePlugin()
]

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

SlateJS Underline Plugin Button

import React, { Component } from 'react'
import { UnderlineButton } from 'slate-underline-plugin'

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

Keyboard Shortcut

Platform	Shortcut
	⌘ + u
	^ + u

API

Target	Description
UnderlineMark	Component that holds the html that will wrap the content with underline style.
UnderlineKeyboardShortcut	Keyboard shortcut file that manipulates `onKeyDown` event inside SlateJS.
UnderlineUtils	Generic file that holds the util common functions.
UnderlineButton	Button component that have behaviour to wrap content with underline style.