Concepts

Plugins

3min

You've already seen how the behaviors of Slate editors can be overridden. These overrides can also be packaged up into "plugins" to be reused, tested and shared. This is one of the most powerful aspects of Slate's architecture.
A plugin is simply a function that takes an Editor object and returns it after it has augmented it in some way.
For example, a plugin that marks image nodes as "void":
JS
const withImages = editor => {
  const { isVoid } = editor

  editor.isVoid = element => {
    return element.type === 'image' ? true : isVoid(element)
  }

  return editor
}
const withImages = editor => {
  const { isVoid } = editor

  editor.isVoid = element => {
    return element.type === 'image' ? true : isVoid(element)
  }

  return editor
}
﻿
And then to use the plugin, simply:
JS
import { createEditor } from 'slate'

const editor = withImages(createEditor())
import { createEditor } from 'slate'

const editor = withImages(createEditor())
﻿
This plugin composition model makes Slate extremely easy to extend!
Helper Functions
In addition to the plugin functions, you might want to expose helper functions that are used alongside your plugins. For example:
JS
import { Editor, Element } from 'slate'

const MyEditor = {
  ...Editor,
  insertImage(editor, url) {
    const element = { type: 'image', url, children: [{ text: '' }] }
    Transforms.insertNodes(editor, element)
  },
}

const MyElement = {
  ...Element,
  isImageElement(value) {
    return Element.isElement(element) && element.type === 'image'
  },
}
import { Editor, Element } from 'slate'

const MyEditor = {
  ...Editor,
  insertImage(editor, url) {
    const element = { type: 'image', url, children: [{ text: '' }] }
    Transforms.insertNodes(editor, element)
  },
}

const MyElement = {
  ...Element,
  isImageElement(value) {
    return Element.isElement(element) && element.type === 'image'
  },
}
﻿
Then you can use MyEditor and MyElement everywhere and have access to all your helpers in one place.

🤔

Have a question?

Our super-smart AI,knowledgeable support team and an awesome community will get you an answer in a flash.

To ask a question or participate in discussions, you'll need to authenticate first.

﻿

Editor

Rendering