From 8533976bc369217774f68eeaac0a0a6ee526d2e8 Mon Sep 17 00:00:00 2001
From: Maxpnl <38191630+Maxpnl@users.noreply.github.com>
Date: Fri, 18 Sep 2020 17:18:02 +0200
Subject: [PATCH 1/3] Added custom editor tools

Added custom editor tools, this is supposed to be in the static files for the current project (whatever it is), it can contain any custom tool (I got this one from the editorjs wiki)
---
 django_editorjs/widgets.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/django_editorjs/widgets.py b/django_editorjs/widgets.py
index 047e293..d97decc 100644
--- a/django_editorjs/widgets.py
+++ b/django_editorjs/widgets.py
@@ -14,6 +14,7 @@ def media(self):
             css={"all": ["django-editorjs.css"]},
             js=(
                 "https://cdn.jsdelivr.net/combine/npm/@editorjs/editorjs@2.18.0,npm/@editorjs/paragraph@2.7.0,npm/@editorjs/image@2.4.2,npm/@editorjs/header@2.5.0,npm/@editorjs/list@1.5.0,npm/@editorjs/checklist@1.1.0,npm/@editorjs/quote@2.3.0,npm/@editorjs/raw@2.1.2,npm/@editorjs/embed@2.3.1,npm/@editorjs/delimiter@1.1.0,npm/@editorjs/warning@1.1.1,npm/@editorjs/link@2.2.1,npm/@editorjs/marker@1.2.2,npm/@editorjs/attaches@1.0.1,npm/@editorjs/table@1.2.2",
+                "custom-editorjs-tools.js",
                 "django-editorjs.js",
             ),
         )

From 9a0958c943b40a44089bca34524f69dbe60b7e4a Mon Sep 17 00:00:00 2001
From: Maxpnl <38191630+Maxpnl@users.noreply.github.com>
Date: Fri, 18 Sep 2020 17:20:15 +0200
Subject: [PATCH 2/3] Handled custom tools

With this patch you can use something like

        editorjs_config={
            "tools": {
                "Custom": {
                    "Customimage": {
                        "class": "SimpleImage"
                    }
                }
            }
        }

And it will be evaluated (of course, the class name should be added by someone who is trusted, and should never depend on user input as it would lead to xss)
---
 django_editorjs/static/django-editorjs.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/django_editorjs/static/django-editorjs.js b/django_editorjs/static/django-editorjs.js
index fe21be8..f0c55e7 100644
--- a/django_editorjs/static/django-editorjs.js
+++ b/django_editorjs/static/django-editorjs.js
@@ -28,6 +28,20 @@
     );
   }
 
+  /**
+   * @param {Object} config
+   */
+  function getCustomTools(config){
+    if (config && config.tools && config.tools["Custom"]){
+      var tools = {};
+      for (const [key, value] of Object.entries(config.tools["Custom"])) {
+        tools[key] = value;
+        tools[key].class = eval(tools[key].class);
+      }
+      return tools;
+    } 
+  }
+
   /**
    * @param {HTMLDivElement} field_wrapper
    */
@@ -109,6 +123,10 @@
         inlineToolbar: true,
       });
     }
+    tools = {
+      ...tools,
+      ...getCustomTools(config)
+    };
 
     const editor = new EditorJS({
       holder: holder_el,

From a6b827707201e14e130c1386ad0ed96dc118073e Mon Sep 17 00:00:00 2001
From: Maxpnl <38191630+Maxpnl@users.noreply.github.com>
Date: Fri, 18 Sep 2020 17:24:10 +0200
Subject: [PATCH 3/3] Update README.md

Explained how to use custom tools
---
 README.md | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/README.md b/README.md
index 9a34ced..86c90ac 100644
--- a/README.md
+++ b/README.md
@@ -87,6 +87,27 @@ class Post(models.Model):
   - `Attaches` - (`dict`) configuration for tool `AttachesTool`. (_For more info see official documentation for tool_).
   - `Table` - (`dict`) configuration for tool `Table`. (_For more info see official documentation for tool_).
 
+## Using Custom Block Tools
+
+You can now add custom block tools by serving a js file named "custom-editorjs-tools.js" in the static folder, this can contain any custom block tool, let's imagine it contains a *SimpleImage* block tool. You can now use this block by setting something like this in the configuration. **Warning: The class content should not ever depend on user input or any nontrusted input, as it could lead to xss**
+
+```python
+class Post(models.Model):
+    title = models.TextField()
+    body = EditorJsField(
+        editorjs_config={
+            "tools": {
+                "Custom": {
+                    "Customimage": {
+                        "class": "SimpleImage"
+                    }
+                }
+            }
+        }
+    )
+
+```
+
 # API
 
 - `EditorJsField`