Update EditorJS and support for Strapi 4.10

.gitignore

@@ -7,3 +7,4 @@ stats.json
 .DS_Store
 npm-debug.log
 .idea
+.yarn

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

admin/src/components/editorjs/index.js

@@ -1,13 +1,15 @@
 import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import EditorJs from 'react-editor-js';
+import { createReactEditorJS } from 'react-editor-js'
 import requiredTools from './requiredTools';
 import customTools from '../../config/customTools';
 
 import MediaLibAdapter from '../medialib/adapter'
 import MediaLibComponent from '../medialib/component';
 import {changeFunc, getToggleFunc} from '../medialib/utils';
 
+const EditorJs = createReactEditorJS();
+
 const Editor = ({ onChange, name, value }) => {
 
   const [editorInstance, setEditorInstance] = useState();
@@ -42,24 +44,25 @@ const Editor = ({ onChange, name, value }) => {
     <>
       <div style={{ border: `1px solid rgb(227, 233, 243)`, borderRadius: `2px`, marginTop: `4px` }}>
         <EditorJs
-          // data={JSON.parse(value)}
-          // enableReInitialize={true}
-          onReady={(api) => {
-            if(value && JSON.parse(value).blocks.length) {
-              api.blocks.render(JSON.parse(value))
-            }
-            document.querySelector('[data-tool="image"]').remove()
-          }}
-          onChange={(api, newData) => {
-            if (!newData.blocks.length) {
-              newData = null;
-              onChange({ target: { name, value: newData } });
-            } else {
-              onChange({ target: { name, value: JSON.stringify(newData) } });
-            }
+          onChange={(api, ev) => {
+            api.saver.save().then(newData => {
+                if (!newData.blocks.length) {
+                    onChange({ target: { name, value: null } });
+                } else {
+                    onChange({ target: { name, value: JSON.stringify(newData) } });
+                }
+            });
           }}
           tools={{...requiredTools, ...customTools, ...customImageTool}}
-          instanceRef={instance => setEditorInstance(instance)}
+          onInitialize={editor => {
+            const api = editor.dangerouslyLowLevelInstance;
+            api.isReady.then(() => {
+                setEditorInstance(api);
+                if(value && JSON.parse(value).blocks.length) {
+                    api.render(JSON.parse(value))
+                }
+            })
+          }}
         />
       </div>
       <MediaLibComponent

admin/src/components/editorjs/requiredTools.js

@@ -17,15 +17,15 @@ const requiredTools = {
         "Authorization": `Bearer ${auth.getToken()}`
       },
       endpoints: {
-        byUrl: `/api/${PluginId}/image/byUrl`,
+        byUrl: `${process.env.STRAPI_ADMIN_BACKEND_URL}/${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(`/api/${PluginId}/image/byFile`, formData, {
+          const {data} = await axios.post(`${process.env.STRAPI_ADMIN_BACKEND_URL}/${PluginId}/image/byFile`, formData, {
             headers: {
               "Authorization": `Bearer ${auth.getToken()}`
             }

admin/src/components/medialib/adapter.js

@@ -2,7 +2,7 @@ export default class MediaLibAdapter {
 
   static get toolbox() {
     return {
-      title: 'Image',
+      title: 'Strapi Image',
       icon: '<svg xmlns="http://www.w3.org/2000/svg" width="17" height="15" viewBox="0 0 336 276"><path d="M291 150.242V79c0-18.778-15.222-34-34-34H79c-18.778 0-34 15.222-34 34v42.264l67.179-44.192 80.398 71.614 56.686-29.14L291 150.242zm-.345 51.622l-42.3-30.246-56.3 29.884-80.773-66.925L45 174.187V197c0 18.778 15.222 34 34 34h178c17.126 0 31.295-12.663 33.655-29.136zM79 0h178c43.63 0 79 35.37 79 79v118c0 43.63-35.37 79-79 79H79c-43.63 0-79-35.37-79-79V79C0 35.37 35.37 0 79 0z"/></svg>'
     }
   }

admin/src/config/customTools.js

@@ -14,6 +14,8 @@ import CheckList from '@editorjs/checklist'
 import Delimiter from '@editorjs/delimiter'
 import InlineCode from '@editorjs/inline-code'
 
+import { auth } from '@strapi/helper-plugin';
+
 const customTools = {
   embed: Embed,
   table: {
@@ -36,7 +38,10 @@ const customTools = {
   LinkTool: {
     class: LinkTool,
     config: {
-      endpoint: `/api/${PluginId}/link`,
+      endpoint: `${process.env.STRAPI_ADMIN_BACKEND_URL}/${PluginId}/link`,
+      headers: {
+        "Authorization": `Bearer ${auth.getToken()}`
+      }
     },
   },
   raw: {

package.json

@@ -12,33 +12,44 @@
     "kind": "plugin"
   },
   "dependencies": {
-    "@editorjs/checklist": "1.3.0",
-    "@editorjs/code": "2.7.0",
-    "@editorjs/delimiter": "1.2.0",
-    "@editorjs/editorjs": "2.23.2",
-    "@editorjs/embed": "2.5.0",
-    "@editorjs/header": "2.6.2",
-    "@editorjs/image": "2.6.2",
-    "@editorjs/inline-code": "1.3.1",
-    "@editorjs/link": "2.4.0",
-    "@editorjs/list": "1.6.2",
-    "@editorjs/marker": "1.2.2",
-    "@editorjs/paragraph": "2.8.0",
-    "@editorjs/quote": "2.4.0",
-    "@editorjs/raw": "2.3.0",
-    "@editorjs/table": "2.0.1",
-    "@editorjs/warning": "1.2.0",
+    "@editorjs/checklist": "1.5.0",
+    "@editorjs/code": "2.8.0",
+    "@editorjs/delimiter": "1.3.0",
+    "@editorjs/editorjs": "2.27.0",
+    "@editorjs/embed": "2.5.3",
+    "@editorjs/header": "2.7.0",
+    "@editorjs/image": "2.8.1",
+    "@editorjs/inline-code": "1.4.0",
+    "@editorjs/link": "2.5.0",
+    "@editorjs/list": "1.8.0",
+    "@editorjs/marker": "1.3.0",
+    "@editorjs/paragraph": "2.9.0",
+    "@editorjs/quote": "2.5.0",
+    "@editorjs/raw": "2.4.0",
+    "@editorjs/table": "2.2.1",
+    "@editorjs/warning": "1.3.0",
+    "axios": "^1.4.0",
     "classnames": "^2.3.1",
     "get-file-object-from-local-path": "1.0.2",
     "open-graph-scraper": "4.9.2",
-    "react-editor-js": "1.10.0"
+    "react-editor-js": "2.1.0"
   },
   "devDependencies": {
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/git": "^10.0.1",
+    "@strapi/design-system": "1.7.5",
+    "@strapi/utils": "4.10.5",
+    "axios": "1.3.4",
     "cz-conventional-changelog": "^3.3.0",
+    "prop-types": "^15.8.1",
     "semantic-release": "^19.0.2"
   },
+  "peerDependencies": {
+    "@strapi/design-system": "^1.7.5",
+    "@strapi/utils": "^4.10.5",
+    "axios": "^1.3.4",
+    "prop-types": "^15.8.1"
+  },
   "config": {
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
@@ -64,10 +75,6 @@
     "node": ">=10.16.0 <=16.x.x",
     "npm": ">=6.0.0"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/melishev/strapi-plugin-editor-js.git"
-  },
   "bugs": {
     "url": "https://github.com/melishev/strapi-plugin-editor-js/issues"
   },
@@ -77,5 +84,12 @@
     "editor-js",
     "wysiwyg"
   ],
-  "license": "MIT"
+  "license": "MIT",
+  "files": [
+    "./admin",
+    "./server",
+    "./types",
+    "./strapi-admin.js",
+    "./strapi-server.js"
+  ]
 }

server/routes/index.js

@@ -1,32 +1,18 @@
-module.exports = {
-  "content-api": {
-    type: "content-api",
-    routes: [
-      {
+module.exports = [
+    {
         method: "GET",
         path: "/link",
         handler: "editorjs.link",
-        config: {
-          "description": "Get a URL link",
-          auth: false
-        },
-      },
-      {
+    },
+    {
         method: "POST",
         path: "/image/byFile",
         handler: "editorjs.byFile",
-        config: {
-          auth: false
-        },
-      },
-      {
+    },
+    {
         method: "POST",
         path: "/image/byUrl",
         handler: "editorjs.byURL",
-        config: {
-          auth: false
-        },
-      },
-    ]
-  }
-}
+    },
+]
+