Skip to content

Commit 89aeee9

Browse files
purfectliteratureadi-herwana-nus
purfectliterature
authored and
adi-herwana-nus
committed
perf(CKEditorRichText): optimise build, upgrade to v45
1 parent 756a12d commit 89aeee9

File tree

6 files changed

+1371
-170
lines changed

6 files changed

+1371
-170
lines changed

‎client/app/lib/components/core/fields/CKEditor.css‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
/* Below are needed to ensure ckeditor popup (eg link)
22
is rendered properly in MUI dialog */
3-
43
.ck-body-wrapper {
54
position: absolute;
65
z-index: 1500;
76
.ck-powered-by {
87
display: none;
98
}
109
}
10+
11+
.ck-editor__editable {
12+
max-height: 35rem;
13+
}

‎client/app/lib/components/core/fields/CKEditorField.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { CKEditor } from '@ckeditor/ckeditor5-react';
2+
import type { FileLoader, UploadAdapter, UploadResponse } from 'ckeditor5';
3+
import ClassicEditor from 'coursemology-ckeditor';
4+
5+
import attachmentsAPI from 'api/Attachments';
6+
7+
import 'coursemology-ckeditor/build/index.css';
8+
import './CKEditor.css';
9+
10+
class SimpleUploadAdapter implements UploadAdapter {
11+
private loader: FileLoader;
12+
13+
constructor(loader: FileLoader) {
14+
this.loader = loader;
15+
}
16+
17+
async upload(): Promise<UploadResponse> {
18+
const file = await this.loader.file;
19+
if (file === null) return {};
20+
21+
const data = (await attachmentsAPI.create(file)).data;
22+
if (!data.success) return {};
23+
24+
return { default: `/attachments/${data.id}` };
25+
}
26+
}
27+
28+
const CKEditorField = ({
29+
placeholder,
30+
disabled,
31+
value,
32+
autoFocus,
33+
onChange,
34+
onBlur,
35+
onFocus,
36+
}: {
37+
placeholder?: string;
38+
disabled?: boolean;
39+
value?: string;
40+
autoFocus?: boolean;
41+
onChange?: (value: string) => void;
42+
onBlur?: () => void;
43+
onFocus?: () => void;
44+
}): JSX.Element => (
45+
<CKEditor
46+
config={{ placeholder }}
47+
data={value}
48+
disabled={disabled}
49+
editor={ClassicEditor}
50+
onBlur={onBlur}
51+
onChange={(_, editor) => onChange?.(editor.getData())}
52+
onFocus={onFocus}
53+
onReady={(editor) => {
54+
editor.plugins.get('FileRepository').createUploadAdapter = (
55+
loader,
56+
): UploadAdapter => new SimpleUploadAdapter(loader);
57+
58+
if (autoFocus) editor.focus();
59+
}}
60+
/>
61+
);
62+
63+
export default CKEditorField;

‎client/app/lib/components/core/fields/CKEditorRichText.tsx‎

Lines changed: 46 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,25 @@
1-
/* eslint-disable @typescript-eslint/explicit-function-return-type */
2-
import { useState } from 'react';
3-
import CustomEditor from '@ckeditor/ckeditor5-build-custom';
4-
import { CKEditor } from '@ckeditor/ckeditor5-react';
5-
import { FormHelperText, InputLabel } from '@mui/material';
1+
import { lazy, Suspense, useState } from 'react';
2+
import { FormHelperText, InputLabel, Skeleton } from '@mui/material';
63
import { cyan } from '@mui/material/colors';
74

8-
import attachmentsAPI from 'api/Attachments';
5+
const CKEditorField = lazy(
6+
() => import(/* webpackChunkName: "CKEditorField" */ './CKEditorField'),
7+
);
98

10-
import './CKEditor.css';
11-
12-
interface Props {
9+
const CKEditorRichText = ({
10+
label,
11+
value,
12+
onChange,
13+
disabled,
14+
error,
15+
field,
16+
required,
17+
name,
18+
inputId,
19+
disableMargins,
20+
placeholder,
21+
autofocus,
22+
}: {
1323
name: string;
1424
onChange: (text: string) => void;
1525
value: string;
@@ -22,160 +32,71 @@ interface Props {
2232
label?: string;
2333
placeholder?: string;
2434
required?: boolean | undefined;
25-
}
26-
27-
const uploadAdapter = (loader) => {
28-
return {
29-
upload: () =>
30-
new Promise((resolve, reject) => {
31-
loader.file.then((file: File) => {
32-
attachmentsAPI
33-
.create(file)
34-
.then((response) => response.data)
35-
.then((data) => {
36-
if (data.success) {
37-
resolve({ default: `/attachments/${data.id}` });
38-
}
39-
})
40-
.catch((err) => {
41-
reject(err);
42-
});
43-
});
44-
}),
45-
abort: () => {},
46-
};
47-
};
48-
49-
const CKEditorRichText = (props: Props) => {
50-
const {
51-
label,
52-
value,
53-
onChange,
54-
disabled,
55-
error,
56-
field,
57-
required,
58-
name,
59-
inputId,
60-
disableMargins,
61-
placeholder,
62-
autofocus,
63-
} = props;
64-
35+
}): JSX.Element => {
6536
const [isFocused, setIsFocused] = useState(false);
6637
const textFieldLabelColor = isFocused ? cyan[500] : undefined;
6738

6839
return (
6940
<div
41+
className="w-full inline-block bg-transparent relative"
7042
style={{
7143
fontSize: 16,
72-
width: '100%',
73-
display: 'inline-block',
74-
position: 'relative',
75-
backgroundColor: 'transparent',
7644
fontFamily: 'Roboto, sans-serif',
7745
paddingTop: !disableMargins && label ? '1em' : 0,
7846
paddingBottom: !disableMargins ? '1em' : 0,
7947
}}
8048
>
8149
{label && (
8250
<InputLabel
51+
className="pointer-events-none"
8352
disabled={disabled}
8453
error={!!error}
8554
htmlFor={field}
8655
required={required}
8756
shrink
8857
style={{
89-
pointerEvents: 'none',
9058
color: disabled ? 'rgba(0, 0, 0, 0.3)' : textFieldLabelColor,
9159
}}
9260
>
9361
{label}
9462
</InputLabel>
9563
)}
64+
9665
<textarea
66+
aria-hidden
67+
className="hidden"
9768
disabled={disabled}
9869
id={inputId}
9970
name={name}
100-
onChange={(event) => {
101-
onChange(event.target.value);
102-
}}
71+
onChange={(e) => onChange(e.target.value)}
10372
required={required}
104-
style={{ display: 'none' }}
10573
value={value || ''}
10674
/>
75+
10776
<div className="react-ck">
108-
<CKEditor
109-
config={{
110-
// To format <pre> properly (summernote compatability).
111-
// CKEditor will change it to <pre><code> but on edit it will render properly
112-
heading: {
113-
options: [
114-
{ model: 'formatted', view: 'pre', title: 'Formatted' },
115-
],
116-
},
117-
// To add the default https protocol and
118-
// an option to open the link in a new tab.
119-
link: {
120-
defaultProtocol: 'https://',
121-
decorators: {
122-
openInNewTab: {
123-
mode: 'manual',
124-
label: 'Open in a new tab',
125-
attributes: {
126-
target: '_blank',
127-
rel: 'noopener noreferrer',
128-
},
129-
},
130-
},
131-
},
132-
placeholder,
133-
mediaEmbed: {
134-
removeProviders: [
135-
'spotify',
136-
'instagram',
137-
'twitter',
138-
'googleMaps',
139-
'flickr',
140-
'facebook',
141-
],
142-
},
143-
}}
144-
data={value}
145-
disabled={disabled}
146-
editor={CustomEditor}
147-
onBlur={(_event, _editor) => {
148-
setIsFocused(false);
149-
}}
150-
onChange={(_event, editor) => {
151-
onChange(editor.getData());
152-
}}
153-
onFocus={(_event, _editor) => {
154-
setIsFocused(true);
155-
}}
156-
onReady={(editor) => {
157-
// Enable the following to set a max height for ckeditor
158-
editor.editing.view.change((writer) => {
159-
writer.setStyle(
160-
'max-height',
161-
'350px',
162-
editor.editing.view.document.getRoot(),
163-
);
164-
});
165-
editor.plugins.get('FileRepository').createUploadAdapter = (
166-
loader,
167-
) => {
168-
return uploadAdapter(loader);
169-
};
170-
if (autofocus) editor.focus();
171-
}}
172-
/>
77+
<Suspense
78+
fallback={
79+
<Skeleton
80+
className="min-h-[94.2px] max-h-[35rem] w-full"
81+
variant="rounded"
82+
/>
83+
}
84+
>
85+
<CKEditorField
86+
autoFocus={autofocus}
87+
disabled={disabled}
88+
onBlur={() => setIsFocused(false)}
89+
onChange={onChange}
90+
onFocus={() => setIsFocused(true)}
91+
placeholder={placeholder}
92+
value={value}
93+
/>
94+
</Suspense>
17395
</div>
96+
17497
{error && <FormHelperText error={!!error}>{error}</FormHelperText>}
17598
</div>
17699
);
177100
};
178101

179-
CKEditorRichText.displayName = 'CKEditor';
180-
181102
export default CKEditorRichText;

‎client/css-includes.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"node_modules/rc-slider/assets",
44
"node_modules/react-image-crop/dist/ReactCrop.css",
55
"node_modules/react-tooltip/dist/react-tooltip.min.css",
6+
"node_modules/coursemology-ckeditor/build/index.css",
67
"app/lib/components/core/fields/CKEditor.css",
78
"app/lib/components/core/fields/AceEditor.css"
89
]

‎client/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,7 @@
3030
"extends": "react-app"
3131
},
3232
"dependencies": {
33-
"@babel/polyfill": "^7.12.1",
34-
"@babel/runtime": "^7.26.10",
35-
"@ckeditor/ckeditor5-build-custom": "github:Coursemology/CKEditor5-build-coursemology#0.3.0",
36-
"@ckeditor/ckeditor5-react": "^6.2.0",
33+
"@ckeditor/ckeditor5-react": "^9.5.0",
3734
"@emotion/react": "^11.11.4",
3835
"@emotion/styled": "^11.11.5",
3936
"@hello-pangea/dnd": "^16.6.0",
@@ -54,6 +51,7 @@
5451
"chart.js": "^3.8.2",
5552
"chartjs-adapter-moment": "^1.0.1",
5653
"chartjs-plugin-zoom": "^2.0.1",
54+
"coursemology-ckeditor": "github:Coursemology/CKEditor5-build-coursemology#v1.0.0",
5755
"fabric": "^5.3.0",
5856
"fast-deep-equal": "^3.1.3",
5957
"history": "^5.2.0",
@@ -149,6 +147,8 @@
149147
"babel-plugin-react-remove-properties": "^0.3.0",
150148
"babel-plugin-transform-import-meta": "^2.2.1",
151149
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
150+
"ckeditor5": "^45.0.0",
151+
"compression-webpack-plugin": "^11.1.0",
152152
"css-loader": "^6.11.0",
153153
"cssnano": "^6.1.2",
154154
"dotenv-webpack": "^8.0.1",

0 commit comments

Comments
 (0)