IBX-9916: Upgrade frontend dependencies (#229)

Author: dew326

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