Merge pull request #326 from ckeditor/editor-integration/vue/add-usag…

…e-data

Feature: Align integration to work with self-service for premium features.

demos/tsconfig.json

@@ -2,7 +2,8 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "types": [
-      "../src/plugin.ts"
+      "../src/plugin.ts",
+      "../vite-env.d.ts"
     ]
   },
   "include": [

package.json

@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "lodash-es": "^4.17.21",
-    "@ckeditor/ckeditor5-integrations-common": "^2.1.0"
+    "@ckeditor/ckeditor5-integrations-common": "^2.2.0"
   },
   "peerDependencies": {
     "ckeditor5": ">=42.0.0 || ^0.0.0-nightly",

src/ckeditor.vue

@@ -21,6 +21,8 @@ import {
 import type { Editor, EditorConfig, EventInfo } from 'ckeditor5';
 import type { Props, ExtractEditorType } from './types.js';
 
+import { appendAllIntegrationPluginsToConfig } from './plugins/appendAllIntegrationPluginsToConfig.js';
+
 type EditorType = ExtractEditorType<TEditor>;
 
 defineOptions( {
@@ -149,7 +151,9 @@ checkVersion();
 onMounted( () => {
 	// Clone the config first so it never gets mutated (across multiple editor instances).
 	// https://github.com/ckeditor/ckeditor5-vue/issues/101
-	const editorConfig: EditorConfig = Object.assign( {}, props.config );
+	const editorConfig: EditorConfig = appendAllIntegrationPluginsToConfig(
+		Object.assign( {}, props.config )
+	);
 
 	if ( model.value ) {
 		editorConfig.initialData = model.value;

src/plugins/VueIntegrationUsageDataPlugin.ts

@@ -0,0 +1,21 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import { version } from 'vue';
+
+import { createIntegrationUsageDataPlugin } from '@ckeditor/ckeditor5-integrations-common';
+
+/**
+ * This part of the code is not executed in open-source implementations using a GPL key.
+ * It only runs when a specific license key is provided. If you are uncertain whether
+ * this applies to your installation, please contact our support team.
+ */
+export const VueIntegrationUsageDataPlugin = createIntegrationUsageDataPlugin(
+	'vue',
+	{
+		version: __VUE_INTEGRATION_VERSION__,
+		frameworkVersion: version
+	}
+);

src/plugins/appendAllIntegrationPluginsToConfig.ts

@@ -0,0 +1,33 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import { appendExtraPluginsToEditorConfig, isCKEditorFreeLicense } from '@ckeditor/ckeditor5-integrations-common';
+import type { EditorConfig } from 'ckeditor5';
+
+import { VueIntegrationUsageDataPlugin } from './VueIntegrationUsageDataPlugin.js';
+
+/**
+ * Appends all integration plugins to the editor configuration.
+ *
+ * @param editorConfig The editor configuration.
+ * @returns The editor configuration with all integration plugins appended.
+ */
+export function appendAllIntegrationPluginsToConfig( editorConfig: EditorConfig ): EditorConfig {
+	/**
+	 * Do not modify the editor configuration if the editor is using a free license.
+	 */
+	if ( isCKEditorFreeLicense( editorConfig.licenseKey ) ) {
+		return editorConfig;
+	}
+
+	return appendExtraPluginsToEditorConfig( editorConfig, [
+		/**
+		 * This part of the code is not executed in open-source implementations using a GPL key.
+		 * It only runs when a specific license key is provided. If you are uncertain whether
+		 * this applies to your installation, please contact our support team.
+		 */
+		VueIntegrationUsageDataPlugin
+	] );
+}

tests/ckeditor.test.ts

@@ -7,6 +7,7 @@ import { nextTick } from 'vue';
 import { describe, beforeEach, afterEach, it, expect, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
 import { Ckeditor } from '../src/plugin.js';
+import { VueIntegrationUsageDataPlugin } from '../src/plugins/VueIntegrationUsageDataPlugin.js';
 import {
 	MockEditor,
 	ModelDocument,
@@ -157,7 +158,9 @@ describe( 'CKEditor component', () => {
 				await nextTick();
 
 				expect( editor ).toHaveBeenCalledOnce();
-				expect( editor ).toHaveBeenCalledWith( expect.any( HTMLElement ), { initialData: 'foo' } );
+				expect( editor ).toHaveBeenCalledWith( expect.any( HTMLElement ), {
+					initialData: 'foo'
+				} );
 
 				component.unmount();
 			} );
@@ -241,7 +244,10 @@ describe( 'CKEditor component', () => {
 
 				await nextTick();
 
-				expect( component.vm.instance!.config ).to.deep.equal( { foo: 'bar' } );
+				expect( component.vm.instance!.config ).to.deep.equal( {
+					foo: 'bar'
+				} );
+
 				component.unmount();
 			} );
 
@@ -274,12 +280,107 @@ describe( 'CKEditor component', () => {
 				await nextTick();
 
 				expect( stub ).toHaveBeenCalledTimes( 3 );
-				expect( stub ).toHaveBeenNthCalledWith( 1, expect.any( HTMLElement ), { foo: 'bar', initialData: 'foo' } );
-				expect( stub ).toHaveBeenNthCalledWith( 2, expect.any( HTMLElement ), { foo: 'bar', initialData: 'bar' } );
-				expect( stub ).toHaveBeenNthCalledWith( 3, expect.any( HTMLElement ), { foo: 'bar', initialData: 'baz' } );
+				expect( stub ).toHaveBeenNthCalledWith( 1, expect.any( HTMLElement ), {
+					foo: 'bar',
+					initialData: 'foo'
+				} );
+
+				expect( stub ).toHaveBeenNthCalledWith( 2, expect.any( HTMLElement ), {
+					foo: 'bar',
+					initialData: 'bar'
+				} );
+
+				expect( stub ).toHaveBeenNthCalledWith( 3, expect.any( HTMLElement ), {
+					foo: 'bar',
+					initialData: 'baz'
+				} );
 
 				component.unmount();
 			} );
+
+			describe( 'license v2', () => {
+				it( 'should add usage data extra plugin if it\'s commercial', async () => {
+					window.CKEDITOR_VERSION = '43.0.0';
+
+					const component = mountComponent( {
+						config: {
+							foo: 'bar',
+							licenseKey: '<YOUR_LICENSE_KEY>'
+						}
+					} );
+
+					await nextTick();
+
+					expect( component.vm.instance!.config ).to.deep.equal( {
+						foo: 'bar',
+						licenseKey: '<YOUR_LICENSE_KEY>',
+						extraPlugins: [ VueIntegrationUsageDataPlugin ]
+					} );
+
+					component.unmount();
+				} );
+
+				it( 'should not add usage data extra plugin if it\'s free', async () => {
+					window.CKEDITOR_VERSION = '43.0.0';
+
+					const component = mountComponent( {
+						config: {
+							foo: 'bar'
+						}
+					} );
+
+					await nextTick();
+
+					expect( component.vm.instance!.config ).to.deep.equal( {
+						foo: 'bar'
+					} );
+
+					component.unmount();
+				} );
+			} );
+
+			describe( 'license v3', () => {
+				it( 'should add usage data extra plugin if it\'s commercial license', async () => {
+					window.CKEDITOR_VERSION = '44.0.0';
+
+					const component = mountComponent( {
+						config: {
+							foo: 'bar',
+							licenseKey: '<YOUR_LICENSE_KEY>'
+						}
+					} );
+
+					await nextTick();
+
+					expect( component.vm.instance!.config ).to.deep.equal( {
+						foo: 'bar',
+						licenseKey: '<YOUR_LICENSE_KEY>',
+						extraPlugins: [ VueIntegrationUsageDataPlugin ]
+					} );
+
+					component.unmount();
+				} );
+
+				it( 'should not add usage data extra plugin if it\'s free license v3', async () => {
+					window.CKEDITOR_VERSION = '44.0.0';
+
+					const component = mountComponent( {
+						config: {
+							foo: 'bar',
+							licenseKey: 'GPL'
+						}
+					} );
+
+					await nextTick();
+
+					expect( component.vm.instance!.config ).to.deep.equal( {
+						foo: 'bar',
+						licenseKey: 'GPL'
+					} );
+
+					component.unmount();
+				} );
+			} );
 		} );
 
 		describe( '#disableTwoWayDataBinding', () => {

tests/tsconfig.json

@@ -2,7 +2,10 @@
 	"extends": "../tsconfig.json",
 	"compilerOptions": {
 		"emitDeclarationOnly": false,
-		"noImplicitAny": false
+		"noImplicitAny": false,
+		"types": [
+			"../vite-env.d.ts"
+		]
 	},
 	"include": [
 		"./",

tsconfig.json

@@ -9,6 +9,9 @@
       "DOM",
       "DOM.Iterable"
     ],
+    "types": [
+        "./vite-env.d.ts"
+    ],
     "skipLibCheck": true,
 
     /* Bundler mode */

vite-env.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+declare const __VUE_INTEGRATION_VERSION__: string;

vite.config.ts

@@ -75,5 +75,9 @@ export default defineConfig( {
 			name: 'chrome',
 			screenshotFailures: false
 		}
+	},
+
+	define: {
+		__VUE_INTEGRATION_VERSION__: JSON.stringify( pkg.version )
 	}
 } );

yarn.lock

@@ -1218,10 +1218,10 @@
     "@ckeditor/ckeditor5-utils" "43.2.0"
     ckeditor5 "43.2.0"
 
-"@ckeditor/ckeditor5-integrations-common@^2.1.0":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-integrations-common/-/ckeditor5-integrations-common-2.1.0.tgz#5e1423ff764c421d8181a35f73677610038f1fb8"
-  integrity sha512-vn6qMb36sl6eSCc27dvThk6xISif59MxnxZmRBC440TyP7S9ZcS0ai4yHd5QyaH70ZIe0lhS7DWdLaiKtBggVQ==
+"@ckeditor/ckeditor5-integrations-common@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-integrations-common/-/ckeditor5-integrations-common-2.2.0.tgz#3eb75e21eddc880c87a675125ec3fcfe0c258847"
+  integrity sha512-qH68tqgyMibuejo+VAJ+iSH3ZmZweqBEzaawv9hZb4zzSMkBityWBjSc2hKXMtmJgCNsbSK84cyHpa5J/MNyLg==
 
 "@ckeditor/[email protected]":
   version "43.2.0"