From 5b37c171b75e89447d20eb28142e51a37d1662df Mon Sep 17 00:00:00 2001
From: Matvey Melishev <58311421+melishev@users.noreply.github.com>
Date: Tue, 7 Sep 2021 00:27:53 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=B5=20Added=20the=20ability=20to=20con?=
 =?UTF-8?q?figure=20add-ons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     | 18 +++++++++
 admin/src/components/editorjs/index.js        |  5 ++-
 .../src/components/editorjs/requiredTools.js  | 39 +++++++++++++++++++
 .../tools.js => config/customTools.js}        | 38 ++----------------
 4 files changed, 63 insertions(+), 37 deletions(-)
 mode change 100644 => 100755 README.md
 create mode 100644 admin/src/components/editorjs/requiredTools.js
 rename admin/src/{components/editorjs/tools.js => config/customTools.js} (58%)

diff --git a/README.md b/README.md
old mode 100644
new mode 100755
index 1005117..c3bf32e
--- a/README.md
+++ b/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)
diff --git a/admin/src/components/editorjs/index.js b/admin/src/components/editorjs/index.js
index cd23ec8..3138c6d 100755
--- a/admin/src/components/editorjs/index.js
+++ b/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>
diff --git a/admin/src/components/editorjs/requiredTools.js b/admin/src/components/editorjs/requiredTools.js
new file mode 100644
index 0000000..d021fca
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/admin/src/components/editorjs/tools.js b/admin/src/config/customTools.js
similarity index 58%
rename from admin/src/components/editorjs/tools.js
rename to admin/src/config/customTools.js
index 7614915..3dccb1e 100644
--- a/admin/src/components/editorjs/tools.js
+++ b/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
\ No newline at end of file
+export default customTools
\ No newline at end of file