@techstacker/tse-image-plugin

@slate-editor/image-plugin

SlateJS image plugin.

Installation

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

yarn add @slate-editor/image-plugin

Usage

Here is a quick example to get you started:

import React from 'react'
import { SlateEditor, SlateToolbar, SlateContent } from 'slate-editor'
import { ImagePlugin, ImageButton } from '@slate-editor/image-plugin'

const plugins = [
  ImagePlugin()
]

const SlateRichTextEditor = () => (
  <SlateEditor plugins={plugins}>
    <SlateToolbar>
      <ImageButton
        signingUrl={
          process.env.REACT_APP_API_URL +
          process.env.REACT_APP_SIGNING_URL_ENDPOINT
        }
      />
    </SlateToolbar>

    <SlateContent />
  </SlateEditor>
)

export default SlateRichTextEditor

Keyboard Shortcut

OS	Shortcut
	⌘+shift+i
	ctrl+shift+i

API

Name	Description
ImageNode	Component that holds the html that will wrap the content with image style.
ImageKeyboardShortcut	Keyboard shortcut file that manipulates onKeyDown event inside SlateJS.
ImageUtils	Generic file that holds the util common functions.
ImageButton	Button component that have behaviour to wrap content with image style.

TODO

• Make keyboard shortcut accepts customization