Skip to content

Commit 72b4913

Browse files
author
Jason Skipper
committed
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"
1 parent 9a70744 commit 72b4913

File tree

17 files changed

+1212
-233
lines changed

17 files changed

+1212
-233
lines changed

‎admin/src/components/Wysiwyg/index.js

+35-31
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import React from 'react';
2-
import PropTypes from 'prop-types';
1+
import React from "react";
2+
import PropTypes from "prop-types";
33
import { isEmpty } from 'lodash';
4-
import { LabelIconWrapper } from 'strapi-helper-plugin';
5-
import Editor from '../editorjs';
4+
import { LabelIconWrapper } from "@strapi/helper-plugin";
5+
import Editor from "../editorjs";
66

77
import cn from 'classnames';
8-
import { Description, ErrorMessage, Label } from '@buffetjs/styles';
9-
import { Error } from '@buffetjs/core';
8+
import { Description, ErrorMessage, Label } from "@buffetjs/styles";
9+
import { Error } from "@buffetjs/core";
1010
import Wrapper from './wrapper';
1111

1212
// eslint-disable-next-line react/prefer-stateless-function
@@ -36,29 +36,33 @@ class WysiwygWithErrors extends React.Component {
3636
} = this.props;
3737

3838
return (
39-
<Error inputError={inputError} name={name} type="text" validations={validations}>
39+
<Error
40+
inputError={inputError}
41+
name={name}
42+
type="text"
43+
validations={validations}
44+
>
4045
{({ canCheck, onBlur, error, dispatch }) => {
4146
const hasError = Boolean(error);
4247

4348
return (
44-
<Wrapper
45-
className={`${cn(!isEmpty(className) && className)} ${hasError ? 'bordered' : ''}`}
46-
style={style}
47-
>
48-
<Label htmlFor={name}>
49-
<span>{label}</span>
50-
{labelIcon && (
51-
<LabelIconWrapper title={labelIcon.title}>{labelIcon.icon}</LabelIconWrapper>
49+
50+
<Wrapper size={1} className={`${cn(!isEmpty(className) && className)} ${hasError ? 'bordered' : ''}`}
51+
style={style}>
52+
<Label htmlFor={name}>
53+
<span>{label}</span>
54+
{labelIcon && (
55+
<LabelIconWrapper title={labelIcon.title}>
56+
{labelIcon.icon}
57+
</LabelIconWrapper>
58+
)}
59+
</Label>
60+
<Editor name={name} onChange={onChange} value={value} />
61+
{!hasError && inputDescription && (
62+
<Description>{inputDescription}</Description>
5263
)}
53-
</Label>
54-
<Editor
55-
name={name}
56-
onChange={onChange}
57-
value={value}
58-
/>
59-
{!hasError && inputDescription && <Description>{inputDescription}</Description>}
60-
{hasError && <ErrorMessage>{error}</ErrorMessage>}
61-
</Wrapper>
64+
{hasError && <ErrorMessage>{error}</ErrorMessage>}
65+
</Wrapper>
6266
);
6367
}}
6468
</Error>
@@ -68,21 +72,21 @@ class WysiwygWithErrors extends React.Component {
6872

6973
WysiwygWithErrors.defaultProps = {
7074
autoFocus: false,
71-
className: '',
75+
className: "",
7276
deactivateErrorHighlight: false,
7377
didCheckErrors: false,
7478
disabled: false,
7579
error: null,
76-
inputClassName: '',
77-
inputDescription: '',
80+
inputClassName: "",
81+
inputDescription: "",
7882
inputStyle: {},
79-
label: '',
83+
label: "",
8084
labelIcon: null,
8185
onBlur: false,
82-
placeholder: '',
86+
placeholder: "",
8387
resetProps: false,
8488
style: {},
85-
tabIndex: '0',
89+
tabIndex: "0",
8690
validations: {},
8791
value: null,
8892
};
@@ -121,7 +125,7 @@ WysiwygWithErrors.propTypes = {
121125
onChange: PropTypes.func.isRequired,
122126
placeholder: PropTypes.string,
123127
resetProps: PropTypes.bool,
124-
style: PropTypes.object,
128+
//style: PropTypes.object,
125129
tabIndex: PropTypes.string,
126130
validations: PropTypes.object,
127131
value: PropTypes.string,

‎admin/src/components/Wysiwyg/wrapper.js

+68-32
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,74 @@
11
import styled from 'styled-components';
2+
import { Box } from "@strapi/design-system/Box";
23

3-
const Wrapper = styled.div`
4-
padding-bottom: 2.8rem;
5-
font-size: 1.3rem;
6-
font-family: 'Lato';
7-
label {
8-
display: block;
9-
margin-bottom: 1rem;
10-
}
11-
&.bordered {
12-
.editorWrapper {
13-
border-color: red;
14-
}
15-
}
16-
> div + p {
17-
width: 100%;
18-
padding-top: 12px;
19-
font-size: 1.2rem;
20-
line-height: normal;
21-
white-space: nowrap;
22-
overflow: hidden;
23-
text-overflow: ellipsis;
24-
margin-bottom: -9px;
25-
}
4+
const Wrapper = styled(Box)`
5+
@media (min-width: 651px) {
6+
.codex-editor--narrow .codex-editor__redactor {
7+
margin-right: 0;
8+
}
9+
}
10+
.codex-editor {
11+
padding: 1rem;
12+
}
13+
*:focus-visible {
14+
outline: none;
15+
}
16+
h1 {
17+
font-size: 2.5rem;
18+
font-weight: bold;
19+
}
20+
h2 {
21+
font-size: 1.5em;
22+
font-weight: bold;
23+
}
24+
h3 {
25+
font-size: 1.17em;
26+
font-weight: bold;
27+
}
28+
h4 {
29+
font-size: 1em;
30+
font-weight: bold;
31+
}
32+
h5 {
33+
font-size: .83em;
34+
font-weight: bold;
35+
}
36+
h6 {
37+
font-size: .67em;
38+
font-weight: bold;
39+
}
40+
padding-bottom: 2.8rem;
41+
font-size: 1rem;
42+
font-family: "Lato";
43+
label {
44+
display: block;
45+
margin-bottom: 1rem;
46+
}
47+
&.bordered {
48+
.editorWrapper {
49+
border-color: red;
50+
}
51+
}
52+
> div + p {
53+
width: 100%;
54+
padding-top: 12px;
55+
font-size: 1.2rem;
56+
line-height: normal;
57+
white-space: nowrap;
58+
overflow: hidden;
59+
text-overflow: ellipsis;
60+
margin-bottom: -9px;
61+
}
2662
27-
div,
28-
pre,
29-
code {
30-
::-webkit-scrollbar {
31-
height: 5px;
32-
width: 5px;
33-
cursor: default;
34-
}
35-
}
63+
div,
64+
pre,
65+
code {
66+
::-webkit-scrollbar {
67+
height: 5px;
68+
width: 5px;
69+
cursor: default;
70+
}
71+
}
3672
`;
3773

3874
export default Wrapper;

‎admin/src/components/medialib/component.js

+7-5
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import React, {useEffect, useState} from 'react';
2-
import {useStrapi} from 'strapi-helper-plugin';
2+
import {useLibrary} from '@strapi/helper-plugin';
33
import PropTypes from 'prop-types';
44

55
const MediaLibComponent = ({isOpen, onChange, toggle}) => {
6-
const {
6+
/*const {
77
strapi: {
88
componentApi: {getComponent},
99
},
10-
} = useStrapi();
10+
} = useLibrary();*/
11+
const { components } = useLibrary();
1112
const [data, setData] = useState(null);
1213
const [isDisplayed, setIsDisplayed] = useState(false);
1314

@@ -17,7 +18,8 @@ const MediaLibComponent = ({isOpen, onChange, toggle}) => {
1718
}
1819
}, [isOpen]);
1920

20-
const Component = getComponent('media-library').Component;
21+
//const Component = getComponent('media-library').Component;
22+
const Component = components['media-library'];
2123

2224
const handleInputChange = data => {
2325
if (data) {
@@ -60,4 +62,4 @@ MediaLibComponent.propTypes = {
6062
toggle: PropTypes.func,
6163
};
6264

63-
export default MediaLibComponent;
65+
export default MediaLibComponent;

‎admin/src/config/customTools.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const customTools = {
3636
link: {
3737
class: Link,
3838
config: {
39-
endpoint: `/${PluginId}/link`,
39+
endpoint: `/api/${PluginId}/link`,
4040
},
4141
},
4242
raw: {
@@ -67,4 +67,4 @@ const customTools = {
6767
inlineCode: InlineCode,
6868
}
6969

70-
export default customTools
70+
export default customTools

‎admin/src/index.js

+23-22
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,28 @@ import pluginPkg from '../../package.json';
22
import Wysiwyg from './components/Wysiwyg';
33
import pluginId from './pluginId';
44

5-
export default strapi => {
6-
const pluginDescription = pluginPkg.strapi.description || pluginPkg.description;
5+
export default {
6+
register(app) {
7+
// executes as soon as the plugin is loaded
8+
const pluginDescription = pluginPkg.strapi.description || pluginPkg.description;
79

8-
const plugin = {
9-
blockerComponent: null,
10-
blockerComponentProps: {},
11-
description: pluginDescription,
12-
icon: pluginPkg.strapi.icon,
13-
id: pluginId,
14-
initializer: () => null,
15-
injectedComponents: [],
16-
isReady: true,
17-
isRequired: pluginPkg.strapi.required || false,
18-
mainComponent: null,
19-
name: pluginPkg.strapi.name,
20-
preventComponentRendering: false,
21-
settings: null,
22-
trads: {},
23-
};
24-
25-
strapi.registerField({ type: 'wysiwyg', Component: Wysiwyg });
26-
27-
return strapi.registerPlugin(plugin);
10+
app.registerPlugin({
11+
blockerComponent: null,
12+
blockerComponentProps: {},
13+
description: pluginDescription,
14+
icon: pluginPkg.strapi.icon,
15+
id: pluginId,
16+
initializer: () => null,
17+
injectedComponents: [],
18+
isReady: true,
19+
isRequired: pluginPkg.strapi.required || false,
20+
mainComponent: null,
21+
name: pluginPkg.strapi.name,
22+
preventComponentRendering: false,
23+
settings: null,
24+
trads: {},
25+
});
26+
app.addFields({ type: 'wysiwyg', Component: Wysiwyg });
27+
},
28+
bootstrap() {},
2829
};

‎admin/src/pluginId.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
const pluginPkg = require('../../package.json');
2-
const pluginId = pluginPkg.name.replace(
2+
/*const pluginId = pluginPkg.name.replace(
33
/^strapi-plugin-/i,
44
''
5-
);
5+
);*/
6+
const pluginId = pluginPkg.name;
67

78
module.exports = pluginId;

‎config/routes.json

-28
This file was deleted.

0 commit comments

Comments
 (0)