@slate-editor/color-plugin

@slate-editor/color-plugin

SlateJS color plugin.

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
	Toggle Color Picker	^ + alt + l
	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;

Changelog

5.1.0 (2018-10-25)

Bug Fixes

• editor: upgrade slate and slate-react to fix any bugs on firefox (080849b)
• embed-plugin: remove focus on insert embed (85b727b)
• font-size-plugin: change strategy to pick up selected font size (6d47d8a)
• plugins: change behavior of selection when edit link (03e6c36)
• plugins: change deprecation methods for Selection (e7166e3)
• plugins: change strategy to pick up color and font family values (d3d8432)

Features

• editor: migrate slate to v0.35.0 (fb8e799)
• editor: migrate slate to v0.36.0 (aff54ac)
• editor: migrate slate to version v0.41.0 (acdd4d1)
• editor: migrate to slate version v0.37.0 (5f91b55)
• editor: upgrade slate to version v0.40.0 (6ac3941)
• slate: upgrade slate to v0.32.0 (935eb3f)
• slate: upgrade tp v0.34.0 (860dc57)

<a name="5.0.0"></a>