@techstacker/tse-grid-plugin

@slate-editor/grid-plugin

SlateJS grid plugin.

Installation

The @slate-editor/grid-plugin is available as an npm package.

yarn add @slate-editor/grid-plugin

Usage

Here is a quick example to get you started:

import React from 'react'
import { SlateEditor, SlateToolbar, SlateContent } from 'slate-editor'
import { GridPlugin, GridButtonBar } from '@slate-editor/grid-plugin'

const plugins = [
  GridPlugin()
]

const SlateRichTextEditor = () => (
  <SlateEditor plugins={plugins}>
    <SlateToolbar>
      <GridButtonBar />
    </SlateToolbar>

    <SlateContent />
  </SlateEditor>
)

export default SlateRichTextEditor

Keyboard Shortcut

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

API

Name	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