fix(deps): update ckeditor to 45 (unified package)

package.json

@@ -15,27 +15,6 @@
     "test:unit:watch": "jest --watch src/tests/unit"
   },
   "dependencies": {
-    "@ckeditor/ckeditor5-alignment": "44.3.0",
-    "@ckeditor/ckeditor5-basic-styles": "44.3.0",
-    "@ckeditor/ckeditor5-block-quote": "44.3.0",
-    "@ckeditor/ckeditor5-build-decoupled-document": "44.3.0",
-    "@ckeditor/ckeditor5-core": "44.3.0",
-    "@ckeditor/ckeditor5-dev-utils": "43.0.1",
-    "@ckeditor/ckeditor5-dev-webpack-plugin": "~31.1.13",
-    "@ckeditor/ckeditor5-editor-balloon": "44.3.0",
-    "@ckeditor/ckeditor5-editor-decoupled": "44.3.0",
-    "@ckeditor/ckeditor5-essentials": "44.3.0",
-    "@ckeditor/ckeditor5-font": "44.3.0",
-    "@ckeditor/ckeditor5-heading": "44.3.0",
-    "@ckeditor/ckeditor5-image": "44.3.0",
-    "@ckeditor/ckeditor5-link": "44.3.0",
-    "@ckeditor/ckeditor5-list": "44.3.0",
-    "@ckeditor/ckeditor5-mention": "44.3.0",
-    "@ckeditor/ckeditor5-paragraph": "44.3.0",
-    "@ckeditor/ckeditor5-remove-format": "44.3.0",
-    "@ckeditor/ckeditor5-theme-lark": "44.3.0",
-    "@ckeditor/ckeditor5-ui": "44.3.0",
-    "@ckeditor/ckeditor5-upload": "44.3.0",
     "@ckeditor/ckeditor5-vue2": "^3.0.1",
     "@iframe-resizer/child": "^5.4.6",
     "@iframe-resizer/parent": "^5.4.6",
@@ -58,6 +37,7 @@
     "@riophae/vue-treeselect": "^0.4.0",
     "@vue/babel-preset-app": "^5.0.8",
     "address-rfc2822": "^2.2.3",
+    "ckeditor5": "^45.0.0",
     "color-convert": "^2.0.1",
     "core-js": "^3.41.0",
     "debounce-promise": "^3.1.2",

renovate.json

@@ -169,32 +169,6 @@
 				"schedule:monthly"
 			]
 		},
-		{
-			"groupName": "CKEditor family",
-			"matchPackageNames": [
-				"@ckeditor/ckeditor5-alignment",
-				"@ckeditor/ckeditor5-basic-styles",
-				"@ckeditor/ckeditor5-block-quote",
-				"@ckeditor/ckeditor5-build-balloon",
-				"@ckeditor/ckeditor5-editor-decoupled",
-				"@ckeditor/ckeditor5-core",
-				"@ckeditor/ckeditor5-dev-utils",
-				"@ckeditor/ckeditor5-editor-balloon",
-				"@ckeditor/ckeditor5-essentials",
-				"@ckeditor/ckeditor5-font",
-				"@ckeditor/ckeditor5-heading",
-				"@ckeditor/ckeditor5-image",
-				"@ckeditor/ckeditor5-link",
-				"@ckeditor/ckeditor5-list",
-				"@ckeditor/ckeditor5-mention",
-				"@ckeditor/ckeditor5-paragraph",
-				"@ckeditor/ckeditor5-remove-format",
-				"@ckeditor/ckeditor5-theme-lark",
-				"@ckeditor/ckeditor5-upload"
-			],
-			"rangeStrategy": "pin",
-			"automerge": false
-		},
 		{
 			"groupName": "Jest family",
 			"matchPackageNames": [

src/ckeditor/mail/MailPlugin.js

@@ -3,8 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin.js'
-import { Paragraph } from '@ckeditor/ckeditor5-paragraph'
+import { Plugin, Paragraph } from 'ckeditor5'
 
 export default class Mail extends Plugin {
 

src/ckeditor/quote/QuotePlugin.js

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin.js'
+import { Plugin } from 'ckeditor5'
 
 export default class Quote extends Plugin {
 

src/ckeditor/signature/InsertSignatureCommand.js

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import Command from '@ckeditor/ckeditor5-core/src/command.js'
+import { Command } from 'ckeditor5'
 
 export const TRIGGER_CHANGE_ALIAS = 'change_alias'
 export const TRIGGER_EDITOR_READY = 'editor_ready'

src/ckeditor/signature/SignaturePlugin.js

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin.js'
+import { Plugin } from 'ckeditor5'
 import InsertSignatureCommand from './InsertSignatureCommand.js'
 
 export default class Signature extends Plugin {

src/ckeditor/smartpicker/InsertItemCommand.js

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import Command from '@ckeditor/ckeditor5-core/src/command.js'
+import { Command } from 'ckeditor5'
 export default class InsertItemCommand extends Command {
 
 	/**

src/ckeditor/smartpicker/PickerPlugin.js

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin.js'
+import { Plugin } from 'ckeditor5'
 import InsertItemCommand from './InsertItemCommand.js'
 export default class PickerPlugin extends Plugin {
 

src/components/TextEditor.vue

@@ -18,9 +18,9 @@
 </template>
 
 <script>
-import CKEditor from '@ckeditor/ckeditor5-vue2'
-import AlignmentPlugin from '@ckeditor/ckeditor5-alignment/src/alignment.js'
+/*
 import { Mention } from '@ckeditor/ckeditor5-mention'
+import AlignmentPlugin from '@ckeditor/ckeditor5-alignment/src/alignment.js'
 import Editor from '@ckeditor/ckeditor5-editor-decoupled/src/decouplededitor.js'
 import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials.js'
 import BlockQuotePlugin from '@ckeditor/ckeditor5-block-quote/src/blockquote.js'
@@ -33,14 +33,38 @@ import LinkPlugin from '@ckeditor/ckeditor5-link/src/link.js'
 import ListPlugin from '@ckeditor/ckeditor5-list/src/list.js'
 import ListProperties from '@ckeditor/ckeditor5-list/src/listproperties.js'
 import RemoveFormat from '@ckeditor/ckeditor5-remove-format/src/removeformat.js'
-import SignaturePlugin from '../ckeditor/signature/SignaturePlugin.js'
 import StrikethroughPlugin from '@ckeditor/ckeditor5-basic-styles/src/strikethrough.js'
-import QuotePlugin from '../ckeditor/quote/QuotePlugin.js'
 import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter.js'
 import ImagePlugin from '@ckeditor/ckeditor5-image/src/image.js'
 import ImageResizePlugin from '@ckeditor/ckeditor5-image/src/imageresize.js'
 import ImageUploadPlugin from '@ckeditor/ckeditor5-image/src/imageupload.js'
 import { DropdownView } from '@ckeditor/ckeditor5-ui'
+*/
+
+import CKEditor from '@ckeditor/ckeditor5-vue2'
+import {
+	Mention,
+	Alignment,
+	DecoupledEditor,
+	Essentials,
+	BlockQuote,
+	Bold,
+	Font,
+	Paragraph,
+	Heading,
+	Italic,
+	Link,
+	List,
+	RemoveFormat,
+	Strikethrough,
+	Image,
+	ImageResize,
+	ImageUpload,
+	DropdownView,
+	Base64UploadAdapter,
+} from 'ckeditor5'
+import SignaturePlugin from '../ckeditor/signature/SignaturePlugin.js'
+import QuotePlugin from '../ckeditor/quote/QuotePlugin.js'
 import MailPlugin from '../ckeditor/mail/MailPlugin.js'
 import { searchProvider, getLinkWithPicker } from '@nextcloud/vue/components/NcRichText'
 import { getLanguage } from '@nextcloud/l10n'
@@ -49,6 +73,8 @@ import PickerPlugin from '../ckeditor/smartpicker/PickerPlugin.js'
 import { autoCompleteByName } from '../service/ContactIntegrationService.js'
 import { emojiSearch, emojiAddRecent } from '@nextcloud/vue'
 
+import 'ckeditor5/ckeditor5.css'
+
 export default {
 	name: 'TextEditor',
 	components: {
@@ -82,32 +108,31 @@ export default {
 	},
 	data() {
 		const plugins = [
-			EssentialsPlugin,
-			ParagraphPlugin,
+			Essentials,
+			Paragraph,
 			SignaturePlugin,
 			QuotePlugin,
 			PickerPlugin,
 			Mention,
-			LinkPlugin,
+			Link,
 		]
 		const toolbar = ['undo', 'redo']
 
 		if (this.html) {
 			plugins.push(...[
-				HeadingPlugin,
-				AlignmentPlugin,
-				BoldPlugin,
-				ItalicPlugin,
-				BlockQuotePlugin,
-				ListPlugin,
-				ListProperties,
-				FontPlugin,
+				Heading,
+				Alignment,
+				Bold,
+				Italic,
+				BlockQuote,
+				List,
+				Font,
 				RemoveFormat,
-				StrikethroughPlugin,
-				ImagePlugin,
-				ImageUploadPlugin,
+				Strikethrough,
+				Image,
+				ImageUpload,
 				Base64UploadAdapter,
-				ImageResizePlugin,
+				ImageResize,
 				MailPlugin,
 			])
 			toolbar.unshift(...[
@@ -134,7 +159,7 @@ export default {
 			emojiTribute: null,
 			textSmiles: [],
 			ready: false,
-			editor: Editor,
+			editor: DecoupledEditor,
 			config: {
 				licenseKey: 'GPL',
 				placeholder: this.placeholder,

webpack.common.js

@@ -4,8 +4,6 @@
  */
 const path = require('path')
 const webpack = require('webpack')
-const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin')
-const { styles } = require('@ckeditor/ckeditor5-dev-utils')
 const { VueLoaderPlugin } = require('vue-loader')
 const BabelLoaderExcludeNodeModulesExcept = require('babel-loader-exclude-node-modules-except')
 const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
@@ -14,19 +12,7 @@ const { IgnorePlugin } = require('webpack')
 const appName = 'mail'
 const appVersion = require('./package.json').version
 
-function getPostCssConfig(ckEditorOpts) {
-	// CKEditor is not compatbile with postcss@8 and postcss-loader@4 despite stating so.
-	// Adapted from https://github.com/ckeditor/ckeditor5/issues/8112#issuecomment-960579351
-	const { plugins, ...rest } = styles.getPostCssConfig(ckEditorOpts);
-	return { postcssOptions: { plugins }, ...rest };
-};
-
 const plugins = [
-	// CKEditor needs its own plugin to be built using webpack.
-	new CKEditorWebpackPlugin({
-		// See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
-		language: 'en',
-	}),
 	new VueLoaderPlugin(),
 
 	// Make sure we auto-inject node polyfills on demand
@@ -110,16 +96,6 @@ module.exports = {
 				test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
 				loader: 'raw-loader',
 			},
-			{
-				test: /ckeditor5-[^/\\]+[/\\].+\.css$/,
-				loader: 'postcss-loader',
-				options: getPostCssConfig({
-					themeImporter: {
-						themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'),
-					},
-					minify: true,
-				}),
-			},
 		],
 	},
 	plugins,