Adding Dropdown and Undo plugins.

admin/src/components/editorjs/index.js

@@ -7,6 +7,8 @@ import customTools from '../../config/customTools';
 import MediaLibAdapter from '../medialib/adapter'
 import MediaLibComponent from '../medialib/component';
 import {changeFunc, getToggleFunc} from '../medialib/utils';
+import DragDrop from 'editorjs-drag-drop';
+import Undo from 'editorjs-undo';
 
 const Editor = ({ onChange, name, value }) => {
 
@@ -38,18 +40,24 @@ const Editor = ({ onChange, name, value }) => {
     }
   }
 
+  const handleReady = (editor) => {
+    new Undo({ editor });
+    new DragDrop(editor);
+    if(value && JSON.parse(value).blocks.length) {
+      editor.blocks.render(JSON.parse(value))
+    }
+    if (document.querySelector('[data-tool="image"]')) {
+      document.querySelector('[data-tool="image"]').remove()
+    }
+  };
+
   return (
     <>
       <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()
-          }}
+          onReady={ handleReady }
           onChange={(api, newData) => {
             if (!newData.blocks.length) {
               newData = null;

admin/src/config/customTools.js

@@ -1,5 +1,6 @@
 import PluginId from '../pluginId'
 
+import Paragraph from '@editorjs/paragraph'
 import Embed from '@editorjs/embed'
 import Table from '@editorjs/table'
 import List from '@editorjs/list'
@@ -13,6 +14,9 @@ import Marker from '@editorjs/marker'
 import CheckList from '@editorjs/checklist'
 import Delimiter from '@editorjs/delimiter'
 import InlineCode from '@editorjs/inline-code'
+import Underline from '@editorjs/underline';
+import NestedList from '@editorjs/nested-list';
+import AlignmentTuneTool from 'editorjs-text-alignment-blocktune';
 
 const customTools = {
   embed: Embed,
@@ -21,7 +25,7 @@ const customTools = {
     inlineToolbar: true,
   },
   list: {
-    class: List,
+    class: NestedList,
     inlineToolbar: true,
   },
   warning: {
@@ -43,9 +47,16 @@ const customTools = {
     class: Raw,
     inlineToolbar: true,
   },
+  underline: Underline,
   header: {
     class: Header,
     inlineToolbar: true,
+    tunes: ['tuneAlignment'],
+  },
+  paragraph: {
+    class: Paragraph,
+    inlineToolbar: true,
+    tunes: ['tuneAlignment'],
   },
   quote: {
     class: Quote,
@@ -65,6 +76,16 @@ const customTools = {
   },
   delimiter: Delimiter,
   inlineCode: InlineCode,
+  tuneAlignment: {
+    class: AlignmentTuneTool,
+    config:{
+      default: "left",
+      blocks: {
+        header: 'center',
+        list: 'right'
+      }
+    },
+  }
 }
 
 export default customTools

package.json

@@ -1,6 +1,7 @@
 {
   "name": "strapi-plugin-react-editorjs",
   "version": "0.0.0-development",
+  "private": true,
   "description": "Plugin for Strapi Headless CMS, hiding the standard WYSIWYG editor and replacing it with Editor.js",
   "homepage": "https://market.strapi.io/plugins/strapi-plugin-react-editorjs",
   "strapi": {
@@ -12,23 +13,28 @@
     "kind": "plugin"
   },
   "dependencies": {
+    "@editorjs/editorjs": "^2.25.0",
     "@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/nested-list": "^1.0.2",
     "@editorjs/paragraph": "2.8.0",
     "@editorjs/quote": "2.4.0",
     "@editorjs/raw": "2.3.0",
     "@editorjs/table": "2.0.1",
+    "@editorjs/underline": "^1.0.0",
     "@editorjs/warning": "1.2.0",
     "classnames": "^2.3.1",
+    "editorjs-text-alignment-blocktune": "^1.0.3",
+    "editorjs-drag-drop": "^1.1.5",
+    "editorjs-undo": "^2.0.8",
     "get-file-object-from-local-path": "1.0.2",
     "open-graph-scraper": "4.9.2",
     "react-editor-js": "1.10.0"