@slate-editor/grid-plugin

SlateJS - Grid Plugin

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

Usage

SlateJS Grid Plugin

import React, { Component } from 'react'
import GridPlugin from 'slate-grid-plugin'

const plugins = [
  GridPlugin()
]

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

SlateJS Grid Plugin Button

import React, { Component } from 'react'
import { GridButton } from 'slate-grid-plugin'

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

Keyboard Shortcut

Platform	Action	Shortcut
	Add Grid	⌘ + ^ + g
	Split Row	⌘ + ^ + r
	Add Grid	^ + alt + g
	Split Row	^ + alt + r

API

Target	Description
GridNode	Component that holds the html that will render the content with grid style.
GridRowNode	Component that holds the html that will render the grid row.
GridCellNode	Component that holds the html that will render the grid cell.
GridKeyboardShortcut	Keyboard shortcut file that manipulates onKeyDown event inside SlateJS.
GridUtils	Generic file that holds the util common functions.
GridButtonBar	Component that holds all action buttons to handle the grid behaviour.
GridButton	Component that handle behaviour to wrap content with grid style.
GridSplitRowButton	Component that handle behaviour to split rows into the grid.

TODO

• Make keyboard shortcut accepts customization