Skip to content

Commit 291708c

Browse files
melishevmelishev
authored
Merge pull request melishev#19 from jaskipper/beta-v4
feat!: updates to allow Strapi v4 functionality
2 parents be17579 + 7e5c235 commit 291708c

File tree

18 files changed

+228
-144
lines changed

18 files changed

+228
-144
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -80,4 +80,4 @@ npm run build
8080

8181
## ⭐️ Show your support
8282

83-
Give a star if this project helped you.
83+
Give a star if this project helped you.

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

+34-30
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
};

‎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/editorjs/requiredTools.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,15 @@ const requiredTools = {
1515
"Authorization": `Bearer ${JSON.parse(sessionStorage.getItem("jwtToken"))}`
1616
},
1717
endpoints: {
18-
byUrl: `/${PluginId}/image/byUrl`,
18+
byUrl: `/api/${PluginId}/image/byUrl`,
1919
},
2020
uploader: {
2121
async uploadByFile(file) {
2222
const formData = new FormData();
2323
formData.append("data", JSON.stringify({}));
2424
formData.append("files.image", file);
2525

26-
const {data} = await axios.post(`/${PluginId}/image/byFile`, formData, {
26+
const {data} = await axios.post(`/api/${PluginId}/image/byFile`, formData, {
2727
headers: {
2828
"Authorization": `Bearer ${JSON.parse(sessionStorage.getItem("jwtToken"))}`
2929
}

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

+5-8
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
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 {
7-
strapi: {
8-
componentApi: {getComponent},
9-
},
10-
} = useStrapi();
6+
7+
const { components } = useLibrary();
118
const [data, setData] = useState(null);
129
const [isDisplayed, setIsDisplayed] = useState(false);
1310

@@ -17,7 +14,7 @@ const MediaLibComponent = ({isOpen, onChange, toggle}) => {
1714
}
1815
}, [isOpen]);
1916

20-
const Component = getComponent('media-library').Component;
17+
const Component = components['media-library'];
2118

2219
const handleInputChange = data => {
2320
if (data) {
@@ -60,4 +57,4 @@ MediaLibComponent.propTypes = {
6057
toggle: PropTypes.func,
6158
};
6259

63-
export default MediaLibComponent;
60+
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)