IBX-9916: Upgrade frontend dependencies

src/bundle/Resources/encore/ibexa.webpack.custom.config.js

@@ -1,6 +1,5 @@
 const Encore = require('@symfony/webpack-encore');
 const path = require('path');
-const { styles } = require(path.resolve('./public/bundles/ibexaadminuiassets/vendors/@ckeditor/ckeditor5-dev-utils'));
 const ibexaConfigManager = require(path.resolve('./ibexa.webpack.config.manager.js'));
 const configManagers = require(path.resolve('./var/encore/ibexa.richtext.config.manager.js'));
 
@@ -9,11 +8,15 @@ Encore.setOutputPath('public/assets/richtext/build').setPublicPath('/assets/rich
 
 Encore.addEntry('ibexa-richtext-onlineeditor-js', [path.resolve(__dirname, '../public/js/CKEditor/core/base-ckeditor.js')]).addStyleEntry(
     'ibexa-richtext-onlineeditor-css',
-    [path.resolve(__dirname, '../public/scss/ckeditor.scss')],
+    [
+        path.resolve('./public/bundles/ibexaadminuiassets/vendors/ckeditor5/dist/ckeditor5.css'),
+        path.resolve(__dirname, '../public/scss/ckeditor.scss'),
+    ],
 );
 
 Encore.addAliases({
     '@ckeditor': path.resolve('./public/bundles/ibexaadminuiassets/vendors/@ckeditor'),
+    ckeditor5: path.resolve('./public/bundles/ibexaadminuiassets/vendors/ckeditor5'),
     '@fieldtype-richtext': path.resolve('./vendor/ibexa/fieldtype-richtext'),
     '@ibexa-admin-ui': path.resolve('./vendor/ibexa/admin-ui'),
 });
@@ -25,43 +28,6 @@ customConfig.name = 'richtext';
 customConfig.module.rules[4].oneOf[1].use[1].options.url = false;
 customConfig.module.rules[1].oneOf[1].use[1].options.url = false;
 
-customConfig.module.rules.push({
-    test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
-    use: ['raw-loader'],
-});
-
-customConfig.module.rules.push({
-    test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
-    use: [
-        {
-            loader: 'style-loader',
-            options: {
-                injectType: 'singletonStyleTag',
-                attributes: {
-                    'data-cke': true,
-                },
-            },
-        },
-        'css-loader',
-        {
-            loader: 'postcss-loader',
-            options: {
-                postcssOptions: styles.getPostCssConfig({
-                    themeImporter: {
-                        themePath: require.resolve(
-                            path.resolve('./public/bundles/ibexaadminuiassets/vendors/@ckeditor/ckeditor5-theme-lark'),
-                        ),
-                    },
-                    minify: true,
-                }),
-            },
-        },
-    ],
-});
-
-customConfig.module.rules[1] = {};
-customConfig.module.rules[2] = {};
-
 configManagers.forEach((configManagerPath) => {
     const configManager = require(path.resolve(configManagerPath));
 

src/bundle/Resources/public/js/CKEditor/anchor/anchor-editing.js

@@ -1,5 +1,4 @@
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import Widget from '@ckeditor/ckeditor5-widget/src/widget';
+import { Plugin, Widget } from 'ckeditor5';
 
 class IbexaAnchorEditing extends Plugin {
     static get requires() {
@@ -70,13 +69,21 @@ class IbexaAnchorEditing extends Plugin {
         });
 
         this.editor.conversion.for('upcast').add((dispatcher) => {
-            dispatcher.on('element:li', (event, data, conversionApi) => {
-                const listParent = data.viewItem.parent;
-                const listItem = data.modelRange.start.nodeAfter ?? data.modelRange.end.nodeBefore;
+            const anchorUpcastConverter = (event, data, conversionApi) => {
+                if (!data.modelRange) {
+                    Object.assign(data, conversionApi.convertChildren(data.viewItem, data.modelCursor));
+                }
+
+                const listParent = data.viewItem;
                 const id = listParent.getAttribute('id');
 
-                conversionApi.writer.setAttribute('anchor', id, listItem);
-            });
+                for (const listItem of data.modelRange.getItems({ shallow: true })) {
+                    conversionApi.writer.setAttribute('anchor', id, listItem);
+                }
+            };
+
+            dispatcher.on('element:ul', anchorUpcastConverter);
+            dispatcher.on('element:ol', anchorUpcastConverter);
         });
     }
 

src/bundle/Resources/public/js/CKEditor/anchor/anchor-ui.js

@@ -1,5 +1,4 @@
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import clickOutsideHandler from '@ckeditor/ckeditor5-ui/src/bindings/clickoutsidehandler';
+import { Plugin, clickOutsideHandler } from 'ckeditor5';
 
 import IbexaAnchorFormView from './ui/anchor-form-view';
 import IbexaButtonView from '../common/button-view/button-view';

src/bundle/Resources/public/js/CKEditor/anchor/anchor.js

@@ -1,4 +1,4 @@
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import { Plugin } from 'ckeditor5';
 
 import IbexaAnchorUI from './anchor-ui';
 import IbexaAnchorEditing from './anchor-editing';

src/bundle/Resources/public/js/CKEditor/anchor/ui/anchor-form-view.js

@@ -1,7 +1,4 @@
-import View from '@ckeditor/ckeditor5-ui/src/view';
-import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
-import LabeledFieldView from '@ckeditor/ckeditor5-ui/src/labeledfield/labeledfieldview';
-import { createLabeledInputText } from '@ckeditor/ckeditor5-ui/src/labeledfield/utils';
+import { View, ButtonView, LabeledFieldView, createLabeledInputText } from 'ckeditor5';
 
 class IbexaLinkFormView extends View {
     constructor(props) {

src/bundle/Resources/public/js/CKEditor/block-alignment/block-alignment-command.js

@@ -1,4 +1,4 @@
-import Command from '@ckeditor/ckeditor5-core/src/command';
+import { Command } from 'ckeditor5';
 
 class IbexaBlockAlignmentCommand extends Command {
     refresh() {

src/bundle/Resources/public/js/CKEditor/block-alignment/block-alignment-editing.js

@@ -1,5 +1,4 @@
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import Widget from '@ckeditor/ckeditor5-widget/src/widget';
+import { Plugin, Widget } from 'ckeditor5';
 
 import IbexaBlockAlignmentCommand from './block-alignment-command';
 

src/bundle/Resources/public/js/CKEditor/block-alignment/block-alignment-ui.js

@@ -1,5 +1,4 @@
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import ClickObserver from '@ckeditor/ckeditor5-engine/src/view/observer/clickobserver';
+import { Plugin, ClickObserver } from 'ckeditor5';
 
 import IbexaButtonView from '../common/button-view/button-view';
 

src/bundle/Resources/public/js/CKEditor/block-alignment/block-alignment.js

@@ -1,4 +1,4 @@
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import { Plugin } from 'ckeditor5';
 
 import IbexaBlockAlignmentUI from './block-alignment-ui';
 import IbexaBlockAlignmentEditing from './block-alignment-editing';

src/bundle/Resources/public/js/CKEditor/common/button-view/button-view.js

@@ -1,4 +1,4 @@
-import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import { ButtonView } from 'ckeditor5';
 
 import IbexaIconView from '../icon-view/icon-view';
 
@@ -7,5 +7,7 @@ export default class IbexaButtonView extends ButtonView {
         super(locale);
 
         this.iconView = new IbexaIconView();
+
+        this.iconView.bind('content').to(this, 'icon');
     }
 }

src/bundle/Resources/public/js/CKEditor/common/chips-button-view/chips-button-view.js

@@ -1,4 +1,4 @@
-import View from '@ckeditor/ckeditor5-ui/src/view';
+import { View } from 'ckeditor5';
 
 export default class IbexaChipsButtonView extends View {
     constructor() {

src/bundle/Resources/public/js/CKEditor/common/icon-view/icon-view.js

@@ -1,4 +1,4 @@
-import IconView from '@ckeditor/ckeditor5-ui/src/icon/iconview';
+import { IconView } from 'ckeditor5';
 
 export default class IbexaIconView extends IconView {
     render() {

src/bundle/Resources/public/js/CKEditor/common/input-number/input-number-view.js

@@ -1,4 +1,4 @@
-import InputTextView from '@ckeditor/ckeditor5-ui/src/inputtext/inputtextview';
+import { InputTextView } from 'ckeditor5';
 
 export default class InputNumberView extends InputTextView {
     constructor(locale) {

src/bundle/Resources/public/js/CKEditor/common/multivalue-dropdown/utils.js

@@ -1,5 +1,4 @@
-import View from '@ckeditor/ckeditor5-ui/src/view';
-import ListView from '@ckeditor/ckeditor5-ui/src/list/listview';
+import { View, ListView } from 'ckeditor5';
 
 import ChipsButtonView from '../../common/chips-button-view/chips-button-view';
 

src/bundle/Resources/public/js/CKEditor/common/switch-button/utils.js

@@ -1,4 +1,4 @@
-import SwitchButtonView from '@ckeditor/ckeditor5-ui/src/button/switchbuttonview';
+import { SwitchButtonView } from 'ckeditor5';
 
 export function createLabeledSwitchButton(labeledFieldView, viewUid, statusUid) {
     const switchButtonView = new SwitchButtonView(labeledFieldView.locale);

src/bundle/Resources/public/js/CKEditor/core/base-ckeditor.js

@@ -14,21 +14,23 @@ import IbexaRemoveElement from '../remove-element/remove-element';
 import IbexaBlockAlignment from '../block-alignment/block-alignment';
 import IbexaUploadImage from '../upload-image/upload-image';
 
-import CKEditor from '@ckeditor/ckeditor5-editor-inline/src/inlineeditor';
-import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
-import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
-import Heading from '@ckeditor/ckeditor5-heading/src/heading';
-import ListProperties from '@ckeditor/ckeditor5-list/src/listproperties';
-import Table from '@ckeditor/ckeditor5-table/src/table';
-import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
-import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
-import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
-import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
-import Subscript from '@ckeditor/ckeditor5-basic-styles/src/subscript';
-import Superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript';
-import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
-import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
-import ContextualBalloon from '@ckeditor/ckeditor5-ui/src/panel/balloon/contextualballoon';
+import {
+    InlineEditor,
+    Essentials,
+    Alignment,
+    Heading,
+    ListProperties,
+    Table,
+    TableToolbar,
+    Bold,
+    Italic,
+    Underline,
+    Subscript,
+    Superscript,
+    Strikethrough,
+    BlockQuote,
+    ContextualBalloon,
+} from 'ckeditor5';
 
 const VIEWPORT_TOP_OFFSET = 102;
 const VIEWPORT_TOP_OFFSET_DISTRACTION_FREE_MODE = 0;
@@ -156,6 +158,7 @@ const VIEWPORT_TOP_OFFSET_DISTRACTION_FREE_MODE = 0;
             }
 
             const config = {
+                licenseKey: 'GPL',
                 initialData: section.innerHTML,
                 plugins: [
                     Essentials,
@@ -242,7 +245,7 @@ const VIEWPORT_TOP_OFFSET_DISTRACTION_FREE_MODE = 0;
 
             doc.body.dispatchEvent(customEvent);
 
-            CKEditor.create(container, config).then((editor) => {
+            InlineEditor.create(container, config).then((editor) => {
                 this.editor = editor;
 
                 const editableElement = this.editor.editing.view.getDomRoot();

src/bundle/Resources/public/js/CKEditor/custom-attributes/custom-attributes-command.js

@@ -1,4 +1,4 @@
-import Command from '@ckeditor/ckeditor5-core/src/command';
+import { Command } from 'ckeditor5';
 
 import {
     getCustomAttributesConfig,

src/bundle/Resources/public/js/CKEditor/custom-attributes/custom-attributes-editing.js

@@ -1,5 +1,4 @@
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import Widget from '@ckeditor/ckeditor5-widget/src/widget';
+import { Plugin, Widget } from 'ckeditor5';
 
 import IbexaCustomAttributesCommand from './custom-attributes-command';
 import { getCustomAttributesConfig, getCustomClassesConfig } from './helpers/config-helper';
@@ -58,13 +57,21 @@ class IbexaCustomAttributesEditing extends Plugin {
                     });
 
                     this.editor.conversion.for('upcast').add((dispatcher) => {
-                        dispatcher.on('element:li', (event, data, conversionApi) => {
-                            const listParent = data.viewItem.parent;
-                            const listItem = data.modelRange.start.nodeAfter || data.modelRange.end.nodeBefore;
+                        const customAttributeUpcastConverter = (event, data, conversionApi) => {
+                            if (!data.modelRange) {
+                                Object.assign(data, conversionApi.convertChildren(data.viewItem, data.modelCursor));
+                            }
+
+                            const listParent = data.viewItem;
                             const attributeValue = listParent.getAttribute(`data-ezattribute-${customAttributeName}`);
 
-                            conversionApi.writer.setAttribute(`list-${customAttributeName}`, attributeValue, listItem);
-                        });
+                            for (const listItem of data.modelRange.getItems({ shallow: true })) {
+                                conversionApi.writer.setAttribute(`list-${customAttributeName}`, attributeValue, listItem);
+                            }
+                        };
+
+                        dispatcher.on('element:ul', customAttributeUpcastConverter);
+                        dispatcher.on('element:ol', customAttributeUpcastConverter);
                     });
 
                     return;
@@ -121,13 +128,21 @@ class IbexaCustomAttributesEditing extends Plugin {
         });
 
         this.editor.conversion.for('upcast').add((dispatcher) => {
-            dispatcher.on('element:li', (event, data, conversionApi) => {
-                const listParent = data.viewItem.parent;
-                const listItem = data.modelRange.start.nodeAfter || data.modelRange.end.nodeBefore;
+            const customClassesUpcastConverter = (event, data, conversionApi) => {
+                if (!data.modelRange) {
+                    Object.assign(data, conversionApi.convertChildren(data.viewItem, data.modelCursor));
+                }
+
+                const listParent = data.viewItem;
                 const classes = listParent.getAttribute('class');
 
-                conversionApi.writer.setAttribute('list-custom-classes', classes, listItem);
-            });
+                for (const listItem of data.modelRange.getItems({ shallow: true })) {
+                    conversionApi.writer.setAttribute('list-custom-classes', classes, listItem);
+                }
+            };
+
+            dispatcher.on('element:ul', customClassesUpcastConverter);
+            dispatcher.on('element:ol', customClassesUpcastConverter);
         });
     }
 

src/bundle/Resources/public/js/CKEditor/custom-attributes/custom-attributes-ui.js

@@ -1,5 +1,4 @@
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import clickOutsideHandler from '@ckeditor/ckeditor5-ui/src/bindings/clickoutsidehandler';
+import { Plugin, clickOutsideHandler } from 'ckeditor5';
 
 import IbexaCustomAttributesFormView from './ui/custom-attributes-form-view';
 import IbexaButtonView from '../common/button-view/button-view';

src/bundle/Resources/public/js/CKEditor/custom-attributes/custom-attributes.js

@@ -1,4 +1,4 @@
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import { Plugin } from 'ckeditor5';
 
 import IbexaCustomAttributesUI from './custom-attributes-ui';
 import IbexaCustomAttributesEditing from './custom-attributes-editing';

src/bundle/Resources/public/js/CKEditor/custom-attributes/ui/custom-attributes-form-view.js

@@ -1,11 +1,13 @@
-import View from '@ckeditor/ckeditor5-ui/src/view';
-import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
-import LabeledFieldView from '@ckeditor/ckeditor5-ui/src/labeledfield/labeledfieldview';
-
-import Model from '@ckeditor/ckeditor5-ui/src/model';
-import Collection from '@ckeditor/ckeditor5-utils/src/collection';
-import { createLabeledInputText, createLabeledDropdown } from '@ckeditor/ckeditor5-ui/src/labeledfield/utils';
-import { addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
+import {
+    View,
+    ButtonView,
+    LabeledFieldView,
+    ViewModel,
+    Collection,
+    createLabeledInputText,
+    createLabeledDropdown,
+    addListToDropdown,
+} from 'ckeditor5';
 
 import { getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper';
 
@@ -203,7 +205,7 @@ class IbexaCustomAttributesFormView extends View {
         if (!config.multiple && !config.required) {
             itemsList.add({
                 type: 'button',
-                model: new Model({
+                model: new ViewModel({
                     withText: true,
                     label: Translator.trans(/*@Desc("None")*/ 'dropdown.none.label', {}, 'ck_editor'),
                     value: null,
@@ -214,7 +216,7 @@ class IbexaCustomAttributesFormView extends View {
         config.choices.forEach((choice) => {
             itemsList.add({
                 type: config.multiple ? 'switchbutton' : 'button',
-                model: new Model({
+                model: new ViewModel({
                     withText: true,
                     label: choice,
                     value: choice,

src/bundle/Resources/public/js/CKEditor/custom-styles/inline/custom-style-inline-command.js

@@ -1,4 +1,4 @@
-import Command from '@ckeditor/ckeditor5-core/src/command';
+import { Command } from 'ckeditor5';
 
 const { ibexa } = window;
 

src/bundle/Resources/public/js/CKEditor/custom-styles/inline/custom-style-inline-editing.js

@@ -1,7 +1,5 @@
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import Widget from '@ckeditor/ckeditor5-widget/src/widget';
+import { Plugin, Widget, AttributeCommand } from 'ckeditor5';
 
-import AttributeCommand from '@ckeditor/ckeditor5-basic-styles/src/attributecommand';
 import IbexaCustomStyleInlineCommand from './custom-style-inline-command';
 
 class IbexaCustomStyleInlineEditing extends Plugin {