How can I add third party plugin into my Slate editor?

Question

Hello guys I'm currently building my personal blog with SlateJs.

I want to adopt some useful third-party plugins for the editor

but I can't get it working.

The code below is from the official Slate(v0.66.1) document and I built my editor with this code.

import React, { useMemo, useState } from 'react'
import { createEditor, Descendant } from 'slate'
import { Slate, Editable, withReact } from 'slate-react'

const App = () => {
  const initialValue: Descendant[] = [
    {
      type: 'paragraph',
      children: [{ text: 'A line of text in a paragraph.' }],
    },
  ]
  const editor = useMemo(() => withReact(createEditor()), [])
  const [value, setValue] = useState<Descendant[]>(initialValue)
  return (
    <Slate editor={editor} value={value} onChange={setValue}>
      <Editable />
    </Slate>
  )
}

After having my very basic editor, I found some useful third-party plugins to make my editor more powerful. https://convertkit-slate-plugins.netlify.app/plugins/slate-lists

But the way they integrate the plugin with Slate editor is a bit different.

They only use <Editor> instead of <Editable> wrapped with <Slate> component,

and in the <Editor>, they have plugins property which <Editable> don't have.

The code below is from the plugin's documentation and I guess it was written to work in Slate v.047

import { Editor } from "slate-react";
import Lists from "@convertkit/slate-lists"

const plugins = [Lists({
  blocks: {
    ordered_list: "ordered-list",
    unordered_list: "unordered-list",
    list_item: "list-item",
  },
  classNames: {
    ordered_list: "ordered-list",
    unordered_list: "unordered-list",
    list_item: "list-item"
  }
})]

const MyEditor = (props) => (
  <Editor
    ...
    plugins={plugins}
  />
)

I think the way they initialize the Editor depends on the version.

But I wonder if there's anyone who has an idea to integrate the plugins to my editor?

Thank you for your time!!

How can I add third party plugin into my Slate editor?

0 Answers0