Skip to content
This repository has been archived by the owner on Nov 4, 2021. It is now read-only.

Latest commit

 

History

History

slate-editor-alignment-plugin

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 
 
 
Nossas Cidades logo

@slate-editor/alignment-plugin

SlateJS alignment plugin.

npm package npm downloads

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
Apple Logo Align Left + shift + l
Apple Logo Align Center + shift + c
Apple Logo Align Right + shift + r
Windows Logo Align Left alt + shift + l
Windows Logo Align Center alt + shift + c
Windows Logo 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