Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Upgrade ckeditor to version 34.2.0 and postcss to version 8 #6688

Merged
merged 9 commits into from
Jul 11, 2022
Merged

Upgrade ckeditor to version 34.2.0 and postcss to version 8 #6688

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
16632c8
Upgrade ckeditor to version 34.2.0
alexander-schranz Jul 10, 2022
cacc247
Upgrade PostCSS to 8
alexander-schranz Jul 10, 2022
ecef43f
Fix ckeditor readonly mode
alexander-schranz Jul 10, 2022
9e89ac2
Fix ckeditor tests
alexander-schranz Jul 10, 2022
1e2cde9
Add to upgrade
alexander-schranz Jul 10, 2022
0a89741
Update ugprade
alexander-schranz Jul 10, 2022
e35555c
Upgrade autoprefixer
alexander-schranz Jul 10, 2022
9f04c29
Require new version of postcss plugin
alexander-schranz Jul 11, 2022
8a45562
Apply suggestions from code review
alexander-schranz Jul 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions UPGRADE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,27 @@

## 2.5.0

### Updated JavaScript dependencies

The JavaScript dependencies of the Sulu administration interface were updated to the following versions:

- `@ckeditor/ckeditor5-dev-utils`: `^30.3.2`
- `@ckeditor/ckeditor5-theme-lark`: `^34.2.0`
- `@ckeditor/ckeditor5-*`: `34.2.0`
- `postcss`: `^8.4.14`
- `postcss-calc`: `^8.2.4`
- `postcss-hexrgba`: `^2.0.0`
- `postcss-import`: `^14.1.0`
- `postcss-loader`: `^4.0.0`
- `postcss-nested`: `^5.0.6`
- `postcss-simple-vars`: `^6.0.3`
- `autoprefixer`: `^10.4.7`

If you have integrated custom JavaScript components into the administration interface,
you might need to adjust your components to be compatible with the updated dependencies.
If you have not integrated custom JavaScript code, you project is adjusted automatically by the
[update build](https://docs.sulu.io/en/latest/upgrades/upgrade-2.x.html) command.

### Rename labelRef to inputContainerRef

The `labelRef` properties of the js components `Input` and `Number` was
Expand Down
20 changes: 10 additions & 10 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,10 @@
"@babel/plugin-transform-flow-strip-types": "^7.4.4",
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "^7.0.0",
"@ckeditor/ckeditor5-dev-utils": "^26.1.0",
"@ckeditor/ckeditor5-theme-lark": "^31.0.0",
"@ckeditor/ckeditor5-dev-utils": "^30.3.2",
"@ckeditor/ckeditor5-theme-lark": "^34.2.0",
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
"autoprefixer": "^9.8.6",
"autoprefixer": "^10.4.7",
"babel-eslint": "^10.0.2",
"babel-jest": "^26.3.0",
"babel-loader": "^8.0.6",
Expand Down Expand Up @@ -70,13 +70,13 @@
"mobx-react": "^5.0.0",
"moment-timezone": "^0.5.14",
"optimize-css-assets-webpack-plugin": "^6.0.1",
"postcss": "^7.0.35",
"postcss-calc": "^7.0.5",
"postcss-hexrgba": "^2.0.0",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-nested": "^4.2.3",
"postcss-simple-vars": "^5.0.2",
"postcss": "^8.4.14",
"postcss-calc": "^8.2.4",
"postcss-hexrgba": "^2.1.0",
"postcss-import": "^14.1.0",
"postcss-loader": "^4.0.0",
"postcss-nested": "^5.0.6",
"postcss-simple-vars": "^6.0.3",
"raw-loader": "^4.0.0",
"react": "^17.0.0",
"react-dom": "^17.0.0",
Expand Down
5 changes: 3 additions & 2 deletions src/Sulu/Bundle/AdminBundle/Resources/js/containers/CKEditor5/CKEditor5.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,11 +64,12 @@ export default class CKEditor5 extends React.Component<Props> {
if (this.editorInstance) {
const {value, disabled} = this.props;

this.editorInstance.isReadOnly = disabled;
if (disabled) {
this.editorInstance.ui.element.classList.add('disabled');
this.editorInstance.enableReadOnlyMode('disabled');
} else {
this.editorInstance.ui.element.classList.remove('disabled');
this.editorInstance.disableReadOnlyMode('disabled');
}

const editorData = this.getEditorData();
Expand Down Expand Up @@ -197,8 +198,8 @@ export default class CKEditor5 extends React.Component<Props> {
},
} = this.editorInstance;

this.editorInstance.isReadOnly = disabled;
if (disabled) {
this.editorInstance.enableReadOnlyMode('disabled');
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-editor-isreadonly-has-no-setter

this.editorInstance.ui.element.classList.add('disabled');
}

Expand Down
196 changes: 44 additions & 152 deletions src/Sulu/Bundle/AdminBundle/Resources/js/containers/CKEditor5/tests/CKEditor5.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,21 +23,39 @@ jest.mock('../../../utils/Translator', () => ({
translate: jest.fn((key) => key),
}));

test('Create a CKEditor5 instance', () => {
const editor = {
editing: {
view: {
document: {
on: jest.fn(),
},
},
},
model: {
const defaultEditor = {
editing: {
view: {
document: {
on: jest.fn(),
},
},
setData: jest.fn(),
},
model: {
document: {
on: jest.fn(),
},
},
ui: {
element: {
classList: {
add: jest.fn(),
remove: jest.fn(),
},
},
},
getData: jest.fn(),
setData: jest.fn(),
isReadOnly: false,
enableReadOnlyMode: () => {
},
disableReadOnlyMode: () => {
},
};

test('Create a CKEditor5 instance', () => {
const editor = {
...defaultEditor,
};
ClassicEditor.create.mockReturnValue(Promise.resolve(editor));

Expand Down Expand Up @@ -101,19 +119,7 @@ test('Create a CKEditor5 instance with an additional plugin', () => {
configRegistry.configs = [config];

const editor = {
editing: {
view: {
document: {
on: jest.fn(),
},
},
},
model: {
document: {
on: jest.fn(),
},
},
setData: jest.fn(),
...defaultEditor,
};
ClassicEditor.create.mockReturnValue(Promise.resolve(editor));

Expand All @@ -127,19 +133,7 @@ test('Create a CKEditor5 instance with an additional plugin', () => {

test('Create a CKEditor5 instance with given formats', () => {
const editor = {
editing: {
view: {
document: {
on: jest.fn(),
},
},
},
model: {
document: {
on: jest.fn(),
},
},
setData: jest.fn(),
...defaultEditor,
};
ClassicEditor.create.mockReturnValue(Promise.resolve(editor));

Expand Down Expand Up @@ -181,28 +175,7 @@ test('Create a CKEditor5 instance with given formats', () => {

test('Set data on editor when value is updated', () => {
const editor = {
editing: {
view: {
document: {
on: jest.fn(),
},
},
},
model: {
document: {
on: jest.fn(),
},
},
ui: {
element: {
classList: {
add: jest.fn(),
remove: jest.fn(),
},
},
},
getData: jest.fn(),
setData: jest.fn(),
...defaultEditor,
};

const editorPromise = Promise.resolve(editor);
Expand All @@ -219,28 +192,8 @@ test('Set data on editor when value is updated', () => {

test('Do not set data on editor when value is not changed when props change', () => {
const editor = {
editing: {
view: {
document: {
on: jest.fn(),
},
},
},
model: {
document: {
on: jest.fn(),
},
},
ui: {
element: {
classList: {
add: jest.fn(),
remove: jest.fn(),
},
},
},
...defaultEditor,
getData: jest.fn().mockReturnValue('<p>Test</p>'),
setData: jest.fn(),
};

const editorPromise = Promise.resolve(editor);
Expand All @@ -258,28 +211,8 @@ test('Do not set data on editor when value is not changed when props change', ()

test('Do not set data on editor when value and editorData is undefined', () => {
const editor = {
editing: {
view: {
document: {
on: jest.fn(),
},
},
},
model: {
document: {
on: jest.fn(),
},
},
ui: {
element: {
classList: {
add: jest.fn(),
remove: jest.fn(),
},
},
},
...defaultEditor,
getData: jest.fn().mockReturnValue(),
setData: jest.fn(),
};

const editorPromise = Promise.resolve(editor);
Expand All @@ -297,27 +230,14 @@ test('Do not set data on editor when value and editorData is undefined', () => {

test('Set disabled class and isReadOnly property to CKEditor5', () => {
const editor = {
editing: {
view: {
document: {
on: jest.fn(),
},
},
...defaultEditor,
isReadOnly: false,
enableReadOnlyMode: () => {
editor.isReadOnly = true;
},
model: {
document: {
on: jest.fn(),
},
disableReadOnlyMode: () => {
editor.isReadOnly = false;
},
ui: {
element: {
classList: {
add: jest.fn(),
},
},
},
isReadOnly: false,
setData: jest.fn(),
};

const editorPromise = Promise.resolve(editor);
Expand All @@ -335,13 +255,7 @@ test('Set disabled class and isReadOnly property to CKEditor5', () => {
test('Call onChange prop when something changed', () => {
const changeSpy = jest.fn();
const editor = {
editing: {
view: {
document: {
on: jest.fn(),
},
},
},
...defaultEditor,
getData: jest.fn().mockReturnValue('test'),
model: {
document: {
Expand All @@ -351,7 +265,6 @@ test('Call onChange prop when something changed', () => {
},
},
},
setData: jest.fn(),
};

const editorPromise = Promise.resolve(editor);
Expand All @@ -368,13 +281,7 @@ test('Call onChange prop when something changed', () => {
test('Call onChange prop with undefined if editor is empty', () => {
const changeSpy = jest.fn();
const editor = {
editing: {
view: {
document: {
on: jest.fn(),
},
},
},
...defaultEditor,
getData: jest.fn().mockReturnValue(''),
model: {
document: {
Expand All @@ -384,7 +291,6 @@ test('Call onChange prop with undefined if editor is empty', () => {
},
},
},
setData: jest.fn(),
};

const editorPromise = Promise.resolve(editor);
Expand All @@ -401,13 +307,7 @@ test('Call onChange prop with undefined if editor is empty', () => {
test('Do not call onChange prop when nothing changed', () => {
const changeSpy = jest.fn();
const editor = {
editing: {
view: {
document: {
on: jest.fn(),
},
},
},
...defaultEditor,
getData: jest.fn().mockReturnValue('test'),
model: {
document: {
Expand All @@ -417,7 +317,6 @@ test('Do not call onChange prop when nothing changed', () => {
},
},
},
setData: jest.fn(),
};

const editorPromise = Promise.resolve(editor);
Expand All @@ -434,13 +333,7 @@ test('Do not call onChange prop when nothing changed', () => {
test('Call onBlur prop when CKEditor5 fires its blur event', () => {
const blurSpy = jest.fn();
const editor = {
editing: {
view: {
document: {
on: jest.fn(),
},
},
},
...defaultEditor,
getData: jest.fn().mockReturnValue('test'),
model: {
document: {
Expand All @@ -450,7 +343,6 @@ test('Call onBlur prop when CKEditor5 fires its blur event', () => {
},
},
},
setData: jest.fn(),
};

const editorPromise = Promise.resolve(editor);
Expand Down
Loading