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() {

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';

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 {

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

@@ -1,7 +1,4 @@
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import { createDropdown, addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
-import Model from '@ckeditor/ckeditor5-ui/src/model';
-import Collection from '@ckeditor/ckeditor5-utils/src/collection';
+import { Plugin, createDropdown, addListToDropdown, ViewModel, Collection } from 'ckeditor5';
 
 const { Translator, ibexa } = window;
 
@@ -17,7 +14,7 @@ class IbexaCustomStyleInlineUI extends Plugin {
         const customStyleInlineCommand = editor.commands.get('ibexaCustomStyleInline');
         const buttonDef = {
             type: 'button',
-            model: new Model({
+            model: new ViewModel({
                 label: config.label,
                 tooltip: true,
                 isToggleable: true,

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

@@ -1,4 +1,4 @@
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import { Plugin } from 'ckeditor5';
 
 import IbexaCustomStylesInlineUI from './custom-style-inline-ui';
 import IbexaCustomStylesInlineEditing from './custom-style-inline-editing';

src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-command.js

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

src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-editing.js

@@ -1,6 +1,4 @@
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import Widget from '@ckeditor/ckeditor5-widget/src/widget';
-import { toWidget, toWidgetEditable } from '@ckeditor/ckeditor5-widget/src/utils';
+import { Plugin, Widget, toWidget, toWidgetEditable } from 'ckeditor5';
 
 import IbexaCustomTagCommand from './custom-tag-command';
 

src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-settings-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-tags/block-custom-tag/custom-tag-settings-ui.js

@@ -1,4 +1,5 @@
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import { Plugin } from 'ckeditor5';
+
 import IbexaButtonView from '../../common/button-view/button-view';
 
 import IbexaCustomTagSettingsCommand from './custom-tag-settings-command';

src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-toolbar.js

@@ -1,5 +1,4 @@
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import WidgetToolbarRepository from '@ckeditor/ckeditor5-widget/src/widgettoolbarrepository';
+import { Plugin, WidgetToolbarRepository } from 'ckeditor5';
 
 const { Translator } = window;
 

src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-ui.js

@@ -1,6 +1,4 @@
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import clickOutsideHandler from '@ckeditor/ckeditor5-ui/src/bindings/clickoutsidehandler';
-import ClickObserver from '@ckeditor/ckeditor5-engine/src/view/observer/clickobserver';
+import { Plugin, clickOutsideHandler, ClickObserver } from 'ckeditor5';
 
 import { setPanelContentMaxHeight } from '../../helpers/custom-panel-helper';
 import IbexaCustomTagFormView from '../ui/custom-tag-form-view';

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

@@ -1,4 +1,4 @@
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import { Plugin } from 'ckeditor5';
 
 import IbexaCustomTagsUI from './block-custom-tag/custom-tag-ui';
 import IbexaInlineCustomTagsUI from './inline-custom-tag/inline-custom-tag-ui';

src/bundle/Resources/public/js/CKEditor/custom-tags/inline-custom-tag/inline-custom-tag-command.js

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

src/bundle/Resources/public/js/CKEditor/custom-tags/inline-custom-tag/inline-custom-tag-editing.js

@@ -1,7 +1,4 @@
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import Widget from '@ckeditor/ckeditor5-widget/src/widget';
-import { toWidget } from '@ckeditor/ckeditor5-widget/src/utils';
-import Element from '@ckeditor/ckeditor5-engine/src/view/element';
+import { Plugin, Widget, toWidget, Element } from 'ckeditor5';
 
 import IbexaInlineCustomTagCommand from './inline-custom-tag-command';
 

src/bundle/Resources/public/js/CKEditor/custom-tags/inline-custom-tag/inline-custom-tag-ui.js

@@ -1,6 +1,4 @@
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import clickOutsideHandler from '@ckeditor/ckeditor5-ui/src/bindings/clickoutsidehandler';
-import ClickObserver from '@ckeditor/ckeditor5-engine/src/view/observer/clickobserver';
+import { Plugin, clickOutsideHandler, ClickObserver } from 'ckeditor5';
 
 import IbexaCustomTagFormView from '../ui/custom-tag-form-view';
 import IbexaButtonView from '../../common/button-view/button-view';