Adding NestedList, Underline and Alignment and updating Editor

admin/src/components/Wysiwyg/index.js

@@ -1,12 +1,13 @@
-import React from "react";
+import { Box } from "@strapi/design-system/Box";
+import { Typography } from "@strapi/design-system/Typography";
+import cn from "clsx";
+import { isEmpty } from "lodash";
 import PropTypes from "prop-types";
-import { isEmpty } from 'lodash';
+import React from "react";
+import { useIntl } from "react-intl";
+
 import Editor from "../editorjs";
-import cn from 'classnames';
-import Wrapper from './wrapper';
-import { useIntl } from 'react-intl';
-import { Box } from '@strapi/design-system/Box';
-import { Typography } from '@strapi/design-system/Typography';
+import Wrapper from "./wrapper";
 
 const Wysiwyg = ({
   name,
@@ -58,7 +59,6 @@ Wysiwyg.defaultProps = {
   error: undefined,
   intlLabel: '',
   required: false,
-  value: '',
 };
 
 Wysiwyg.propTypes = {

admin/src/components/editorjs/index.js

@@ -1,15 +1,16 @@
-import React, { useState, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import EditorJs from 'react-editor-js';
-import requiredTools from './requiredTools';
-import customTools from '../../config/customTools';
+import React, { useState, useCallback } from "react";
+import PropTypes from "prop-types";
+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';
+import MediaLibAdapter from "../medialib/adapter";
+import MediaLibComponent from "../medialib/component";
+import { changeFunc, getToggleFunc } from "../medialib/utils";
 
-const Editor = ({ onChange, name, value }) => {
+const EditorJS = createReactEditorJS();
 
+const Editor = ({ onChange, name, value }) => {
   const [editorInstance, setEditorInstance] = useState();
   const [mediaLibBlockIndex, setMediaLibBlockIndex] = useState(-1);
   const [isMediaLibOpen, setIsMediaLibOpen] = useState(false);
@@ -29,6 +30,21 @@ const Editor = ({ onChange, name, value }) => {
     mediaLibToggleFunc();
   }, [mediaLibBlockIndex, editorInstance]);
 
+  const handleReady = (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();
+    }
+  };
+
+  const handleChange = (api, newData) => {
+    api.saver.save().then((res) => {
+      onChange({ target: { name, value: JSON.stringify(res) } });
+    });
+  };
+
   const customImageTool = {
     mediaLib: {
       class: MediaLibAdapter,
@@ -42,24 +58,13 @@ const Editor = ({ onChange, name, value }) => {
     <>
       <div style={{ border: `1px solid rgb(227, 233, 243)`, borderRadius: `2px`, marginTop: `4px` }}>
         <EditorJs
+        <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) } });
-            }
-          }}
-          tools={{...requiredTools, ...customTools, ...customImageTool}}
-          instanceRef={instance => setEditorInstance(instance)}
+          onReady={handleReady}
+          onChange={handleChange}
+          tools={{ ...requiredTools, ...customTools, ...customImageTool }}
+          instanceRef={(instance) => setEditorInstance(instance)}
         />
       </div>
       <MediaLibComponent

admin/src/config/customTools.js

@@ -1,18 +1,21 @@
-import PluginId from '../pluginId'
+import PluginId from "../pluginId";
 
-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 LinkTool from '@editorjs/link'
-import Raw from '@editorjs/raw'
-import Header from '@editorjs/header'
-import Quote from '@editorjs/quote'
-import Marker from '@editorjs/marker'
-import CheckList from '@editorjs/checklist'
-import Delimiter from '@editorjs/delimiter'
-import InlineCode from '@editorjs/inline-code'
+import CheckList from "@editorjs/checklist";
+import Code from "@editorjs/code";
+import Delimiter from "@editorjs/delimiter";
+import Embed from "@editorjs/embed";
+import Header from "@editorjs/header";
+import InlineCode from "@editorjs/inline-code";
+import LinkTool from "@editorjs/link";
+import Marker from "@editorjs/marker";
+import NestedList from "@editorjs/nested-list";
+import Paragraph from "@editorjs/paragraph";
+import Quote from "@editorjs/quote";
+import Raw from "@editorjs/raw";
+import Table from "@editorjs/table";
+import Underline from "@editorjs/underline";
+import Warning from "@editorjs/warning";
+import AlignmentTuneTool from "editorjs-text-alignment-blocktune";
 
 const customTools = {
   embed: Embed,
@@ -21,15 +24,15 @@ const customTools = {
     inlineToolbar: true,
   },
   list: {
-    class: List,
+    class: NestedList,
     inlineToolbar: true,
   },
   warning: {
     class: Warning,
     inlineToolbar: true,
     config: {
-      titlePlaceholder: 'Title',
-      messagePlaceholder: 'Message',
+      titlePlaceholder: "Title",
+      messagePlaceholder: "Message",
     },
   },
   code: Code,
@@ -43,16 +46,23 @@ 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,
     inlineToolbar: true,
     config: {
-      quotePlaceholder: 'Quote',
-      captionPlaceholder: 'Quote`s author',
+      quotePlaceholder: "Quote",
+      captionPlaceholder: "Quote's author",
     },
   },
   marker: {
@@ -65,6 +75,16 @@ const customTools = {
   },
   delimiter: Delimiter,
   inlineCode: InlineCode,
-}
+  tuneAlignment: {
+    class: AlignmentTuneTool,
+    config: {
+      default: "left",
+      blocks: {
+        header: "center",
+        list: "right",
+      },
+    },
+  },
+};
 
-export default customTools
+export default customTools;

package.json

@@ -15,23 +15,25 @@
     "@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/editorjs": "2.25.0",
+    "@editorjs/embed": "2.5.3",
     "@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/link": "2.4.1",
     "@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/raw": "2.3.1",
+    "@editorjs/table": "2.0.4",
+    "@editorjs/underline": "^1.0.0",
     "@editorjs/warning": "1.2.0",
-    "classnames": "^2.3.1",
+    "clsx": "1.2.1",
+    "editorjs-text-alignment-blocktune": "^1.0.3",
     "get-file-object-from-local-path": "1.0.2",
-    "open-graph-scraper": "4.9.2",
-    "react-editor-js": "1.10.0"
+    "open-graph-scraper": "4.11.1",
+    "react-editor-js": "2.1.0"
   },
   "devDependencies": {
     "@semantic-release/changelog": "^6.0.1",