@slate-editor/alignment-plugin

SlateJS alignment plugin.

Installation

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

yarn add @slate-editor/alignment-plugin

Usage

Here is a quick example to get you started:

import React from 'react'
import { SlateEditor, SlateToolbar, SlateContent } from 'slate-editor'
import { AlignmentPlugin, AlignmentButtonBar } from '@slate-editor/alignment-plugin'

const plugins = [
  AlignmentPlugin()
]

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

    <SlateContent />
  </SlateEditor>
)

export default SlateRichTextEditor

Keyboard Shortcut

OS	Action	Shortcut
	Align Left	⌘ + shift + l
	Align Center	⌘ + shift + c
	Align Right	⌘ + shift + r
	Align Left	alt + shift + l
	Align Center	alt + shift + c
	Align Right	alt + shift + r

API

Name	Description
AlignmentNode	Component that holds the html that will wrap the content with alignment style.
AlignmentUtils	Generic file that holds the util common functions.
AlignmentButtonBar	Component that holds all action buttons to handle the alignment behaviour.
AlignmentLeftButton	Component that holds button to handle the left alignment behaviour.
AlignmentCenterButton	Component that holds button to handle the center alignment behaviour.
AlignmentRightButton	Component that holds button to handle the right alignment behaviour.
AlignmentKeyboardShortcut	Keyboard shortcut file that manipulates onKeyDown event inside SlateJS.

TODO

• Make keyboard shortcut accepts customization