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-color-plugin

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 
 
 
Nossas Cidades logo

@slate-editor/color-plugin

SlateJS color plugin.

npm package npm downloads

Installation

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

yarn add @slate-editor/color-plugin

Usage

Here is a quick example to get you started:

import React from 'react'
import { SlateEditor, SlateToolbar, SlateContent } from 'slate-editor'
import { ColorPlugin, ColorButton, ColorStateModel } from '@slate-editor/color-plugin'

const colorPluginOptions = new ColorStateModel().rgba({ r: 100, g: 100, b: 100, a: 1 }).gen()

const plugins = [
  ColorPlugin()
]

const SlateRichTextEditor = () => (
  <SlateEditor plugins={plugins}>
    <SlateToolbar>
      <ColorButton
        initialState={colorPluginOptions}
        pickerDefaultPosition={{ x: -520, y: 17 }}
      />
    </SlateToolbar>

    <SlateContent />
  </SlateEditor>
)

export default SlateRichTextEditor

Keyboard Shortcut

OS Action Shortcut
Apple Logo Toggle Color Picker ^ + alt + l
Windows Logo Toggle Color Picker ^ + alt + l

API

Name Description
ColorMark Component that holds the html that will wrap the content with color style.
ColorUtils Generic file that holds the util common functions.
ColorButton Button component that have behaviour to wrap content with color style.
ColorKeyboardShortcut Keyboard shortcut file that manipulates onKeyDown event inside SlateJS.
ColorStateModel Class that knows the state structure of the plugin

TODO

  • Make keyboard shortcut accepts customization;
  • Add keyboard shortcut to apply color to expanded selection;
  • Add keyboard shortcut to remove color from expanded selection;
  • Add button to apply color to expanded selection;
  • Add button to remove color from expanded selection;
  • Add handle to manipulates collapsed selection to remove color to anchor word;
  • Add behaviour to show which color have applied to collapsed selection;
  • Add behaviour to show which color have applied to expanded selection;