feat!: updates to allow Strapi v4 functionality

BREAKING CHANGE: This update refactors the plugin to work in Strapi v4. This code will not work in Strapi v3. At this time, the Image tool is not functioning. The link tool works, but thumbnails are being blocked by Strapi 4's contentSecurityPolicy. The current workaround for this is to replace the 'strapi::security' default export in ./config/middlewares.js to the following code (do this at your own risk): "{ name: 'strapi::security', config: { contentSecurityPolicy: false }, }," I've yet to find a solution that can be baked into the plugin itself. I have also added "auth: false" to the routes config so that it is not necessary to give authenticated and public permissions to the plugin. This may need to be removed if it is seen as a security risk. Custom styles have been added to Wysiwyg/wrapper.js for headers (H1-H6) because Strapi resets styles and there is no styling for the plugin without them. I have updated editorjs to 2.23.2 and several other of the plugins (see package.json). I've also added @buffetjs/core and @buffetjs/styles to package.json because the library is not in Strapi now. I also removed "axios" because that library is in Strapi. I updated node to the following: "node": ">=10.16.0 <=16.x.x"
melishev · Feb 23, 2022 · 72b4913 · 72b4913
1 parent 9a70744
commit 72b4913
Show file tree

Hide file tree

Showing 17 changed files with 1,212 additions and 233 deletions.
diff --git a/admin/src/components/Wysiwyg/index.js b/admin/src/components/Wysiwyg/index.js
@@ -1,12 +1,12 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";
 import { isEmpty } from 'lodash';
-import { LabelIconWrapper } from 'strapi-helper-plugin';
-import Editor from '../editorjs';
+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 { Description, ErrorMessage, Label } from "@buffetjs/styles";
+import { Error } from "@buffetjs/core";
 import Wrapper from './wrapper';
 
 // eslint-disable-next-line react/prefer-stateless-function
@@ -36,29 +36,33 @@ class WysiwygWithErrors extends React.Component {
     } = this.props;
 
     return (
-      <Error inputError={inputError} name={name} type="text" validations={validations}>
+      <Error
+        inputError={inputError}
+        name={name}
+        type="text"
+        validations={validations}
+      >
         {({ canCheck, onBlur, error, dispatch }) => {
           const hasError = Boolean(error);
 
           return (
-            <Wrapper
-              className={`${cn(!isEmpty(className) && className)} ${hasError ? 'bordered' : ''}`}
-              style={style}
-            >
-              <Label htmlFor={name}>
-                <span>{label}</span>
-                {labelIcon && (
-                  <LabelIconWrapper title={labelIcon.title}>{labelIcon.icon}</LabelIconWrapper>
+
+              <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>
                 )}
-              </Label>
-              <Editor
-                name={name}
-                onChange={onChange}
-                value={value}
-              />
-              {!hasError && inputDescription && <Description>{inputDescription}</Description>}
-              {hasError && <ErrorMessage>{error}</ErrorMessage>}
-            </Wrapper>
+                {hasError && <ErrorMessage>{error}</ErrorMessage>}
+              </Wrapper>
           );
         }}
       </Error>
@@ -68,21 +72,21 @@ class WysiwygWithErrors extends React.Component {
 
 WysiwygWithErrors.defaultProps = {
   autoFocus: false,
-  className: '',
+  className: "",
   deactivateErrorHighlight: false,
   didCheckErrors: false,
   disabled: false,
   error: null,
-  inputClassName: '',
-  inputDescription: '',
+  inputClassName: "",
+  inputDescription: "",
   inputStyle: {},
-  label: '',
+  label: "",
   labelIcon: null,
   onBlur: false,
-  placeholder: '',
+  placeholder: "",
   resetProps: false,
   style: {},
-  tabIndex: '0',
+  tabIndex: "0",
   validations: {},
   value: null,
 };
@@ -121,7 +125,7 @@ WysiwygWithErrors.propTypes = {
   onChange: PropTypes.func.isRequired,
   placeholder: PropTypes.string,
   resetProps: PropTypes.bool,
-  style: PropTypes.object,
+  //style: PropTypes.object,
   tabIndex: PropTypes.string,
   validations: PropTypes.object,
   value: PropTypes.string,

diff --git a/admin/src/components/Wysiwyg/wrapper.js b/admin/src/components/Wysiwyg/wrapper.js
@@ -1,38 +1,74 @@
 import styled from 'styled-components';
+import { Box } from "@strapi/design-system/Box";
 
-const Wrapper = styled.div`
-  padding-bottom: 2.8rem;
-  font-size: 1.3rem;
-  font-family: 'Lato';
-  label {
-    display: block;
-    margin-bottom: 1rem;
-  }
-  &.bordered {
-    .editorWrapper {
-      border-color: red;
-    }
-  }
-  > div + p {
-    width: 100%;
-    padding-top: 12px;
-    font-size: 1.2rem;
-    line-height: normal;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    margin-bottom: -9px;
-  }
+const Wrapper = styled(Box)`
+    @media (min-width: 651px) {
+        .codex-editor--narrow .codex-editor__redactor {
+            margin-right: 0;
+        }
+    }    
+    .codex-editor {
+        padding: 1rem;
+    }
+    *:focus-visible {
+        outline: none;
+    }
+    h1 {
+        font-size: 2.5rem;
+        font-weight: bold;
+    }
+    h2 {
+        font-size: 1.5em;
+        font-weight: bold;
+    }
+    h3 {
+        font-size: 1.17em;
+        font-weight: bold;
+    }
+    h4 {
+        font-size: 1em;
+        font-weight: bold;
+    }
+    h5 {
+        font-size: .83em;
+        font-weight: bold;
+    }
+    h6 {
+        font-size: .67em;
+        font-weight: bold;
+    }
+    padding-bottom: 2.8rem;
+    font-size: 1rem;
+    font-family: "Lato";
+    label {
+      display: block;
+      margin-bottom: 1rem;
+    }
+    &.bordered {
+      .editorWrapper {
+        border-color: red;
+      }
+    }
+    > div + p {
+      width: 100%;
+      padding-top: 12px;
+      font-size: 1.2rem;
+      line-height: normal;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin-bottom: -9px;
+    }
 
-  div,
-  pre,
-  code {
-    ::-webkit-scrollbar {
-      height: 5px;
-      width: 5px;
-      cursor: default;
-    }
-  }
+    div,
+    pre,
+    code {
+      ::-webkit-scrollbar {
+        height: 5px;
+        width: 5px;
+        cursor: default;
+      }
+    }
 `;
 
 export default Wrapper;
diff --git a/admin/src/components/medialib/component.js b/admin/src/components/medialib/component.js
@@ -1,13 +1,14 @@
 import React, {useEffect, useState} from 'react';
-import {useStrapi} from 'strapi-helper-plugin';
+import {useLibrary} from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
 
 const MediaLibComponent = ({isOpen, onChange, toggle}) => {
-  const {
+  /*const {
     strapi: {
       componentApi: {getComponent},
     },
-  } = useStrapi();
+  } = useLibrary();*/
+  const { components } = useLibrary();
   const [data, setData] = useState(null);
   const [isDisplayed, setIsDisplayed] = useState(false);
 
@@ -17,7 +18,8 @@ const MediaLibComponent = ({isOpen, onChange, toggle}) => {
     }
   }, [isOpen]);
 
-  const Component = getComponent('media-library').Component;
+  //const Component = getComponent('media-library').Component;
+  const Component = components['media-library'];
 
   const handleInputChange = data => {
     if (data) {
@@ -60,4 +62,4 @@ MediaLibComponent.propTypes = {
   toggle: PropTypes.func,
 };
 
-export default MediaLibComponent;
+export default MediaLibComponent;
diff --git a/admin/src/config/customTools.js b/admin/src/config/customTools.js
@@ -36,7 +36,7 @@ const customTools = {
   link: {
     class: Link,
     config: {
-      endpoint: `/${PluginId}/link`,
+      endpoint: `/api/${PluginId}/link`,
     },
   },
   raw: {
@@ -67,4 +67,4 @@ const customTools = {
   inlineCode: InlineCode,
 }
 
-export default customTools
+export default customTools
diff --git a/admin/src/index.js b/admin/src/index.js
@@ -2,27 +2,28 @@ import pluginPkg from '../../package.json';
 import Wysiwyg from './components/Wysiwyg';
 import pluginId from './pluginId';
 
-export default strapi => {
-  const pluginDescription = pluginPkg.strapi.description || pluginPkg.description;
+export default {
+  register(app) {
+    // executes as soon as the plugin is loaded
+    const pluginDescription = pluginPkg.strapi.description || pluginPkg.description;
 
-  const plugin = {
-    blockerComponent: null,
-    blockerComponentProps: {},
-    description: pluginDescription,
-    icon: pluginPkg.strapi.icon,
-    id: pluginId,
-    initializer: () => null,
-    injectedComponents: [],
-    isReady: true,
-    isRequired: pluginPkg.strapi.required || false,
-    mainComponent: null,
-    name: pluginPkg.strapi.name,
-    preventComponentRendering: false,
-    settings: null,
-    trads: {},
-  };
-
-  strapi.registerField({ type: 'wysiwyg', Component: Wysiwyg });
-
-  return strapi.registerPlugin(plugin);
+    app.registerPlugin({
+      blockerComponent: null,
+      blockerComponentProps: {},
+      description: pluginDescription,
+      icon: pluginPkg.strapi.icon,
+      id: pluginId,
+      initializer: () => null,
+      injectedComponents: [],
+      isReady: true,
+      isRequired: pluginPkg.strapi.required || false,
+      mainComponent: null,
+      name: pluginPkg.strapi.name,
+      preventComponentRendering: false,
+      settings: null,
+      trads: {},
+    });
+    app.addFields({ type: 'wysiwyg', Component: Wysiwyg });
+  },
+  bootstrap() {},
 };
diff --git a/admin/src/pluginId.js b/admin/src/pluginId.js
@@ -1,7 +1,8 @@
 const pluginPkg = require('../../package.json');
-const pluginId = pluginPkg.name.replace(
+/*const pluginId = pluginPkg.name.replace(
   /^strapi-plugin-/i,
   ''
-);
+);*/
+const pluginId = pluginPkg.name;
 
 module.exports = pluginId;
diff --git a/config/routes.json b/config/routes.json