@slate-editor/strikethrough-plugin NPM

SlateJS - Strikethrough Plugin

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

Usage

SlateJS Strikethrough Plugin

import React, { Component } from 'react'
import StrikethroughPlugin from 'slate-strikethrough-plugin'

const plugins = [
  StrikethroughPlugin()
]

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

SlateJS Strikethrough Plugin Button

import React, { Component } from 'react'
import { StrikethroughButton } from 'slate-strikethrough-plugin'

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

Keyboard Shortcut

Platform	Shortcut
	⌘ + ^ + s
	^ + alt + s

API

Target	Description
StrikethroughMark	Component that holds the html that will wrap the content with strikethrough style.
StrikethroughKeyboardShortcut	Keyboard shortcut file that manipulates `onKeyDown` event inside SlateJS.
StrikethroughUtils	Generic file that holds the util common functions.
StrikethroughButton	Button component that have behaviour to wrap content with strikethrough style.