Dev

admin/src/components/editorjs/index.js

@@ -1,54 +1,65 @@
-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 EditorJs 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 [editorInstance, setEditorInstance] = useState();
   const [mediaLibBlockIndex, setMediaLibBlockIndex] = useState(-1);
   const [isMediaLibOpen, setIsMediaLibOpen] = useState(false);
 
-  const mediaLibToggleFunc = useCallback(getToggleFunc({
-    openStateSetter: setIsMediaLibOpen,
-    indexStateSetter: setMediaLibBlockIndex
-  }), []);
+  const mediaLibToggleFunc = useCallback(
+    getToggleFunc({
+      openStateSetter: setIsMediaLibOpen,
+      indexStateSetter: setMediaLibBlockIndex,
+    }),
+    []
+  );
 
-  const handleMediaLibChange = useCallback((data) => {
-    changeFunc({
+  const handleMediaLibChange = useCallback(
+    (data) => {
+      changeFunc({
         indexStateSetter: setMediaLibBlockIndex,
         data,
         index: mediaLibBlockIndex,
-        editor: editorInstance
-    });
-    mediaLibToggleFunc();
-  }, [mediaLibBlockIndex, editorInstance]);
+        editor: editorInstance,
+      });
+      mediaLibToggleFunc();
+    },
+    [mediaLibBlockIndex, editorInstance]
+  );
 
   const customImageTool = {
     mediaLib: {
       class: MediaLibAdapter,
       config: {
-        mediaLibToggleFunc
-      }
-    }
-  }
+        mediaLibToggleFunc,
+      },
+    },
+  };
 
   return (
     <>
-      <div style={{ border: `1px solid rgb(227, 233, 243)`, borderRadius: `2px`, marginTop: `4px` }}>
+      <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))
+            if (value && JSON.parse(value).blocks.length) {
+              api.blocks.render(JSON.parse(value));
             }
-            document.querySelector('[data-tool="image"]').remove()
+            document.querySelector('[data-tool="image"]').remove();
           }}
           onChange={(api, newData) => {
             if (!newData.blocks.length) {
@@ -58,8 +69,8 @@ const Editor = ({ onChange, name, value }) => {
               onChange({ target: { name, value: JSON.stringify(newData) } });
             }
           }}
-          tools={{...requiredTools, ...customTools, ...customImageTool}}
-          instanceRef={instance => setEditorInstance(instance)}
+          tools={{ ...requiredTools, ...customTools, ...customImageTool }}
+          instanceRef={(instance) => setEditorInstance(instance)}
         />
       </div>
       <MediaLibComponent

admin/src/config/customTools.js

@@ -1,18 +1,16 @@
-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 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 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 Hyperlink from "editorjs-hyperlink";
 
 const customTools = {
   embed: Embed,
@@ -28,31 +26,31 @@ const customTools = {
     class: Warning,
     inlineToolbar: true,
     config: {
-      titlePlaceholder: 'Title',
-      messagePlaceholder: 'Message',
+      titlePlaceholder: "Title",
+      messagePlaceholder: "Message",
     },
   },
   code: Code,
-  LinkTool: {
-    class: LinkTool,
-    config: {
-      endpoint: `/api/${PluginId}/link`,
-    },
-  },
+
   raw: {
     class: Raw,
     inlineToolbar: true,
   },
   header: {
     class: Header,
     inlineToolbar: true,
+    config: {
+      placeholder: "Enter a header",
+      levels: [2, 3],
+      defaultLevel: 2,
+    },
   },
   quote: {
     class: Quote,
     inlineToolbar: true,
     config: {
-      quotePlaceholder: 'Quote',
-      captionPlaceholder: 'Quote`s author',
+      quotePlaceholder: "Quote",
+      captionPlaceholder: "Quote`s author",
     },
   },
   marker: {
@@ -65,6 +63,18 @@ const customTools = {
   },
   delimiter: Delimiter,
   inlineCode: InlineCode,
-}
+  hyperlink: {
+    inlineToolbar: true,
+    class: Hyperlink,
+    config: {
+      shortcut: "CMD+L",
+      target: "_blank",
+      availableTargets: ["_blank"],
+      availableRels: ["nofollow"],
+      validate: false,
+    },
+  },
+  link: function () {},
+};
 
-export default customTools
+export default customTools;