Image tool now functioning with new features on Strapi V4

README.md

@@ -4,8 +4,11 @@
 
 <h1 align="center">🎛 Strapi + ✒️ Editor.js</h1>
 
+⚠️ **This is the Strapi v4 version of this plugin! In order to use with v3, please use release v.1.5.1 (https://github.com/melishev/strapi-plugin-react-editorjs/releases/tag/v1.5.1).**
+
 
 ## 🙉 What it is?
+
 #### This is a plugin for [Strapi Headless CMS](https://strapi.io) that replaces the standard wysiwyg editor with the cool [Editor.js](https://editorjs.io) and all its compatible add-ons.
 <br>
 
@@ -36,36 +39,80 @@
 
 #### All of the above add-ons (if added) work initially when the plugin is loaded. You can also customize the add-ons available in your application using the instructions below.
 
->  Note: the Image add-on cannot be reconfigured by you personally, this is due to some problems with the work of this add-on. You just better leave it alone.
-
 <br>
 
 ## 🤟🏻 Getting Started
+
 ```bash
 yarn add strapi-plugin-react-editorjs
 # or
 npm install strapi-plugin-react-editorjs
 ```
-For the plugin to work correctly, you need to give Public and Authenticated role access to the plugin API, at the moment it is necessary for:
-1. [Link Tool](https://github.com/editor-js/link)
-2. [Image Tool](https://github.com/editor-js/image)
+
+In order for Strapi to show the Link Tool thumbnails correctly, you will need to edit the 'strapi::security' line in ./config/middlewares.js. Change that line to the following (do this at your own risk). 
+
+```js
+module.exports = [
+  // ...
+  {
+    name: 'strapi::security',
+    config: {
+      contentSecurityPolicy: {
+        directives: {
+          'img-src': ['*'],
+        },
+      }
+    },
+  },
+  // ...
+];
+```
 
 <br>
 
-## ⚙️ How to customize editor (optional)
+## ⚙️ How to extend/develop this plugin (optional)
+
+If you want to change the look of the editor or add/remove editorJS plugins, you will need to do the following:
 
-If you want to change the look of the editor or remove unused add-ons, you can add a custom Editor.js configuration to override the default settings:
+1. If this plugin is already install via yarn or npm, uninstall: 
+```bash
+yarn remove strapi-plugin-react-editorjs
+# or
+npm uninstall strapi-plugin-react-editorjs
+```
+2. Go to the ./src/plugins folder (create it if it doesn't exist) and clone the project:
 
-1. Go to your Strapi folder
-2. Copy template config file [`node_modules/strapi-plugin-react-editorjs/admin/src/config/customTools.js`](admin/src/config/customTools.js) to `extensions/react-editorjs/admin/src/config`
-3. Set up `extensions/react-editorjs/admin/src/config/customTools.js`
-4. Rebuild Strapi
+```bash
+# If you wish to clone the Master Branch
+git clone https://github.com/melishev/strapi-plugin-react-editorjs.git
+# If you wish to clone the Beta Branch
+git clone --single-branch --branch beta https://github.com/melishev/strapi-plugin-react-editorjs.git
+```
+3. Go into the plugin and install dependencies:
+   - `cd strapi-plugin-react-editorjs`
+   - `yarn install` or `npm install`
+4. In an editor add the following code into the main Strapi v4 ./config/plugins.js file (create the file if it doesn't exist)
+
+```js
+module.exports = ({ env }) => ({
+  // ...
+  'react-editorjs': {
+    enabled: true,
+    resolve: './src/plugins/strapi-plugin-react-editorjs'
+  },
+  // ...
+})
+```
 
+5. To make changes to EditorJS plugins, edit the `./src/plugins/strapi-plugin-react-editorjs/admin/src/config/customTools.js` file. 
+   - Note: the Image Tool add-on has been highly customized in order to work in Strapi and cannot be edited in the `customTools.js` file. If you wish to develop it further, you may, but it will take much more advanced knowledge and testing.
+6. Rebuild Strapi after installation and after any changes made in the plugin.
 ```bash
-yarn run build
+yarn build
 # or
 npm run build
 ```
+
 ### Please note that the add-ons are configured for Strapi, be careful when changing the configuration.
 
 <br>

admin/src/components/Wysiwyg/index.js

@@ -1,134 +1,84 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { isEmpty } from 'lodash';
-import { LabelIconWrapper } from "@strapi/helper-plugin";
 import Editor from "../editorjs";
-
 import cn from 'classnames';
-import { Description, ErrorMessage, Label } from "@buffetjs/styles";
-import { Error } from "@buffetjs/core";
 import Wrapper from './wrapper';
+import { useIntl } from 'react-intl';
+import { Box } from '@strapi/design-system/Box';
+import { Typography } from '@strapi/design-system/Typography';
 
-// eslint-disable-next-line react/prefer-stateless-function
-class WysiwygWithErrors extends React.Component {
-  render() {
-    const {
-      autoFocus,
-      className,
-      deactivateErrorHighlight,
-      disabled,
-      error: inputError,
-      inputClassName,
-      inputDescription,
-      inputStyle,
-      label,
-      labelIcon,
-      name,
-      onBlur: handleBlur,
-      onChange,
-      placeholder,
-      resetProps,
-      style,
-      tabIndex,
-      validations,
-      value,
-      ...rest
-    } = this.props;
-
-    return (
-      <Error
-        inputError={inputError}
-        name={name}
-        type="text"
-        validations={validations}
-      >
-        {({ canCheck, onBlur, error, dispatch }) => {
-          const hasError = Boolean(error);
+const Wysiwyg = ({
+  name,
+  className,
+  error,
+  description,
+  intlLabel,
+  required,
+  onChange,
+  style,
+  value,
+  disabled,
+}) => {
+  const { formatMessage } = useIntl();
 
-          return (
-
-              <Wrapper size={1} className={`${cn(!isEmpty(className) && className)} ${hasError ? 'bordered' : ''}`}
-              style={style}>
-                <Label htmlFor={name}>
-                  <span>{label}</span>
-                  {labelIcon && (
-                    <LabelIconWrapper title={labelIcon.title}>
-                      {labelIcon.icon}
-                    </LabelIconWrapper>
-                  )}
-                </Label>
-                <Editor name={name} onChange={onChange} value={value} />
-                {!hasError && inputDescription && (
-                  <Description>{inputDescription}</Description>
-                )}
-                {hasError && <ErrorMessage>{error}</ErrorMessage>}
-              </Wrapper>
-          );
-        }}
-      </Error>
-    );
-  }
-}
+  return (
+    <Wrapper size={1} className={`${cn(!isEmpty(className) && className)}`} style={style}>            
+      <Box>
+        <Typography variant="pi" fontWeight="bold">
+          {formatMessage(intlLabel)}
+        </Typography>
+        {required && (
+          <Typography variant="pi" fontWeight="bold" textColor="danger600">
+            *
+          </Typography>
+        )}
+      </Box>
+      <Editor onChange={onChange} value={value} name={name} disabled={disabled} />
+      {error && (
+        <Typography variant="pi" textColor="danger600">
+          {formatMessage({ id: error, defaultMessage: error })}
+        </Typography>
+      )}
+      {description && (
+        <Typography variant="pi">{formatMessage(description)}</Typography>
+      )}
+
+    </Wrapper>
+  )
+};
 
-WysiwygWithErrors.defaultProps = {
-  autoFocus: false,
+Wysiwyg.defaultProps = {
   className: "",
-  deactivateErrorHighlight: false,
-  didCheckErrors: false,
-  disabled: false,
-  error: null,
-  inputClassName: "",
-  inputDescription: "",
-  inputStyle: {},
-  label: "",
-  labelIcon: null,
-  onBlur: false,
-  placeholder: "",
-  resetProps: false,
   style: {},
   tabIndex: "0",
-  validations: {},
   value: null,
+  description: '',
+  disabled: false,
+  error: undefined,
+  intlLabel: '',
+  required: false,
+  value: '',
 };
 
-WysiwygWithErrors.propTypes = {
-  autoFocus: PropTypes.bool,
+Wysiwyg.propTypes = {
   className: PropTypes.string,
-  deactivateErrorHighlight: PropTypes.bool,
-  didCheckErrors: PropTypes.bool,
+  style: PropTypes.object,
+  tabIndex: PropTypes.string,
+  description: PropTypes.shape({
+    id: PropTypes.string,
+    defaultMessage: PropTypes.string,
+  }),
   disabled: PropTypes.bool,
   error: PropTypes.string,
-  inputClassName: PropTypes.string,
-  inputDescription: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.func,
-    PropTypes.shape({
-      id: PropTypes.string,
-      params: PropTypes.object,
-    }),
-  ]),
-  inputStyle: PropTypes.object,
-  label: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.func,
-    PropTypes.shape({
-      id: PropTypes.string,
-      params: PropTypes.object,
-    }),
-  ]),
-  labelIcon: PropTypes.shape({
-    icon: PropTypes.node.isRequired,
-    title: PropTypes.string,
+  intlLabel: PropTypes.shape({
+    id: PropTypes.string,
+    defaultMessage: PropTypes.string,
   }),
+  required: PropTypes.bool,
+  value: PropTypes.string,
   name: PropTypes.string.isRequired,
-  onBlur: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
   onChange: PropTypes.func.isRequired,
-  placeholder: PropTypes.string,
-  resetProps: PropTypes.bool,
-  style: PropTypes.object,
-  tabIndex: PropTypes.string,
-  validations: PropTypes.object,
-  value: PropTypes.string,
 };
 
-export default WysiwygWithErrors;
+export default Wysiwyg;

admin/src/components/Wysiwyg/wrapper.js

@@ -2,13 +2,16 @@ import styled from 'styled-components';
 import { Box } from "@strapi/design-system/Box";
 
 const Wrapper = styled(Box)`
+    padding-bottom: 2.8rem;
     @media (min-width: 651px) {
         .codex-editor--narrow .codex-editor__redactor {
             margin-right: 0;
         }
     }    
     .codex-editor {
-        padding: 1rem;
+        padding: 16px;
+        font-size: 1rem;
+        font-family: "Lato";
     }
     *:focus-visible {
         outline: none;
@@ -37,9 +40,6 @@ const Wrapper = styled(Box)`
         font-size: .67em;
         font-weight: bold;
     }
-    padding-bottom: 2.8rem;
-    font-size: 1rem;
-    font-family: "Lato";
     label {
       display: block;
       margin-bottom: 1rem;
@@ -59,7 +59,6 @@ const Wrapper = styled(Box)`
       text-overflow: ellipsis;
       margin-bottom: -9px;
     }
-
     div,
     pre,
     code {
@@ -69,6 +68,14 @@ const Wrapper = styled(Box)`
         cursor: default;
       }
     }
+    .cdx-input.image-tool__caption {
+      font-size: .9rem;
+      color: #444;
+      line-height: 1.5;
+    }
+    .ce-block--focused {
+      background-image: linear-gradient(17deg,rgba(207,214,229,.1) 63.45%,rgba(207,214,229,.27) 98%,rgba(207,214,229,.27));
+    }
 `;
 
 export default Wrapper;