5.1.1 • Published 5 years ago

@slate-editor/image-plugin v5.1.1

Weekly downloads
261
License
MIT
Repository
github
Last release
5 years ago

SlateJS image plugin.

npm package npm downloads

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

OSShortcut
Apple Logo+shift+i
Windows Logoctrl+shift+i

API

NameDescription
ImageNodeComponent that holds the html that will wrap the content with image style.
ImageKeyboardShortcutKeyboard shortcut file that manipulates onKeyDown event inside SlateJS.
ImageUtilsGeneric file that holds the util common functions.
ImageButtonButton component that have behaviour to wrap content with image style.

TODO

  • Make keyboard shortcut accepts customization