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