Custom Strapi EditorJS plugins

Usage

Patch your strapi-plugin-react-editorjs plugin in node_modules folder as your project needs. (Or extend the plugin as the author suggests: Editor.js plugin) For patching use: patch-package

Plugins

Video

Fields

• cover image
• video ID (eg. YouTube ID)
• title
• video length
• description

Gallery

Sortable images from Strapi media picker.

IconList

Fields for every item:

• icon (configurable)
• title
• description

Button

Fields

• title
• url
• variant (primary or secondary)
• blank (boolean)

Example - Add Video and Button plugin

Patch strapi-plugin-react-editorjs/admin/src/components/editorjs/index.js file to contain the following additional rows:

+ import { Video, Button } from '@digitalthinkers/strapi-editorjs-plugins';
+ import useMediaDialog from '../medialib/useMediaDialog';

...

+ const { getDialog, openMediaLib } = useMediaDialog();

...

const customImageTool = {
  mediaLib: {
    class: MediaLibAdapter,
    config: {
      mediaLibToggleFunc
    }
  },
+  video: {
+    class: Video,
+    inlineToolbar: true,
+    config: {
+      openMediaLib,
+      videoIdPlaceholder: 'YouTube ID',
+      titlePlaceholder: 'Title',
+      lengthPlaceholder: 'Video length',
+      descriptionPlaceholder: 'Description'
+    }
+  }
+  button: {
+    class: Button,
+  }
};

...

return (
  <>
    ...
    <MediaLibComponent
        isOpen={isMediaLibOpen}
        onChange={handleMediaLibChange}
        onToggle={mediaLibToggleFunc}
      />
+      {getDialog()}
  </>
)