🌵 Added the ability to configure add-ons

Author: melishev

README.md

@@ -52,6 +52,24 @@ For the plugin to work correctly, you need to give Public and Authenticated role
 
 <br>
 
+## ⚙️ How to customize editor (optional)
+
+If you want to change the look of the editor or remove unused add-ons, you can add a custom Editor.js configuration to override the default settings:
+
+1. Go to your Strapi folder
+2. Copy template config file [`node_modules/strapi-plugin-react-editorjs/admin/src/config/customTools.js`](admin/src/config/customTools.js) to `extensions/react-editorjs/admin/src/config`
+3. Set up `extensions/react-editorjs/admin/src/config/customTools.js`
+4. Rebuild Strapi
+
+```bash
+yarn run build
+# or
+npm run build
+```
+### Please note that the add-ons are configured for Strapi, be careful when changing the configuration.
+
+<br>
+
 ## 👨🏻‍🏭 Developing
 
 1. [Personality Tool](https://github.com/editor-js/personality)

admin/src/components/editorjs/index.js

@@ -1,7 +1,8 @@
 import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import EditorJs from 'react-editor-js';
-import EditorTools from './tools';
+import requiredTools from './requiredTools';
+import customTools from '../../config/customTools';
 
 import MediaLibAdapter from '../medialib/adapter'
 import MediaLibComponent from '../medialib/component';
@@ -54,7 +55,7 @@ const Editor = ({ onChange, name, value }) => {
               onChange({target: {name, value: JSON.stringify(newData)}})
             }
           }}
-          tools={{...EditorTools, ...customImageTool}}
+          tools={{...requiredTools, ...customTools, ...customImageTool}}
           instanceRef={instance => setEditorInstance(instance)}
         />
       </div>

admin/src/components/editorjs/requiredTools.js

@@ -0,0 +1,39 @@
+import PluginId from '../../pluginId'
+
+// Plugins for Editor.js
+import Image from '@editorjs/image'
+
+const requiredTools = {
+  image: {
+    class: Image,
+    config: {
+      field: "files.image",
+      additionalRequestData: {
+        data: JSON.stringify({})
+      },
+      additionalRequestHeaders: {
+        "Authorization": `Bearer ${JSON.parse(sessionStorage.getItem("jwtToken"))}`
+      },
+      endpoints: {
+        byUrl: `/${PluginId}/image/byUrl`,
+      },
+      uploader: {
+        async uploadByFile(file) {
+          const formData = new FormData();
+          formData.append("data", JSON.stringify({}));
+          formData.append("files.image", file);
+
+          const {data} = await axios.post(`/${PluginId}/image/byFile`, formData, {
+            headers: {
+              "Authorization": `Bearer ${JSON.parse(sessionStorage.getItem("jwtToken"))}`
+            }
+          });
+
+          return data
+        },
+      }
+    }
+  }
+}
+
+export default requiredTools

admin/src/components/editorjs/tools.js renamed to admin/src/config/customTools.js

@@ -1,13 +1,11 @@
-import PluginId from '../../pluginId'
+import PluginId from '../pluginId'
 
-// Plugins for Editor.js
 import Embed from '@editorjs/embed'
 import Table from '@editorjs/table'
 import List from '@editorjs/list'
 import Warning from '@editorjs/warning'
 import Code from '@editorjs/code'
 import Link from '@editorjs/link'
-import Image from '@editorjs/image'
 import Raw from '@editorjs/raw'
 import Header from '@editorjs/header'
 import Quote from '@editorjs/quote'
@@ -16,7 +14,7 @@ import CheckList from '@editorjs/checklist'
 import Delimiter from '@editorjs/delimiter'
 import InlineCode from '@editorjs/inline-code'
 
-const editorTools = {
+const customTools = {
   embed: Embed,
   table: {
     class: Table,
@@ -41,36 +39,6 @@ const editorTools = {
       endpoint: `/${PluginId}/link`,
     },
   },
-  image: {
-    class: Image,
-    config: {
-      field: "files.image",
-      additionalRequestData: {
-        data: JSON.stringify({})
-      },
-      additionalRequestHeaders: {
-        "Authorization": `Bearer ${JSON.parse(sessionStorage.getItem("jwtToken"))}`
-      },
-      endpoints: {
-        byUrl: `/${PluginId}/image/byUrl`,
-      },
-      uploader: {
-        async uploadByFile(file) {
-          const formData = new FormData();
-          formData.append("data", JSON.stringify({}));
-          formData.append("files.image", file);
-
-          const {data} = await axios.post(`/${PluginId}/image/byFile`, formData, {
-            headers: {
-              "Authorization": `Bearer ${JSON.parse(sessionStorage.getItem("jwtToken"))}`
-            }
-          });
-
-          return data
-        },
-      }
-    }
-  },
   raw: {
     class: Raw,
     inlineToolbar: true,
@@ -99,4 +67,4 @@ const editorTools = {
   inlineCode: InlineCode,
 }
 
-export default editorTools
+export default customTools