Support for the lock mechanism

package.json

@@ -20,7 +20,7 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.17.7",
-    "@ckeditor/ckeditor5-build-classic": "^33.0.0",
+    "@ckeditor/ckeditor5-build-classic": "^34.0.0",
     "@ckeditor/ckeditor5-dev-env": "^28.1.1",
     "@ckeditor/ckeditor5-dev-utils": "^28.1.1",
     "@vue/test-utils": "^2.0.0-rc.17",

scripts/utils/getkarmaconfig.js

@@ -8,6 +8,7 @@
 /* eslint-env node */
 
 const path = require( 'path' );
+const webpack = require( 'webpack' );
 
 const options = parseArguments( process.argv.slice( 2 ) );
 
@@ -18,6 +19,13 @@ module.exports = function getKarmaConfig() {
 	const webpackConfig = {
 		mode: 'development',
 
+		plugins: [
+			new webpack.DefinePlugin( {
+				__VUE_OPTIONS_API__: true,
+				__VUE_PROD_DEVTOOLS__: false
+			} )
+		],
+
 		module: {
 			rules: [
 				{

src/ckeditor.js

@@ -3,16 +3,34 @@
  * For licensing, see LICENSE.md.
  */
 
-/* global console */
+/* global window, console */
 
 import { h, markRaw } from 'vue';
 import { debounce } from 'lodash-es';
 
+const SAMPLE_READ_ONLY_LOCK_ID = 'Integration Sample';
 const INPUT_EVENT_DEBOUNCE_WAIT = 300;
 
 export default {
 	name: 'ckeditor',
 
+	created() {
+		const { CKEDITOR_VERSION } = window;
+
+		// Starting from v34.0.0, CKEditor 5 introduces a lock mechanism enabling/disabling the read-only mode.
+		// As it is a breaking change between major releases of the integration, the component requires using
+		// CKEditor 5 in version 34 or higher.
+		if ( CKEDITOR_VERSION ) {
+			const [ major ] = CKEDITOR_VERSION.split( '.' ).map( Number );
+
+			if ( major < 34 ) {
+				console.warn( 'The <CKEditor> component requires using CKEditor 5 in version 34 or higher.' );
+			}
+		} else {
+			console.warn( 'Cannot find the "CKEDITOR_VERSION" in the "window" scope.' );
+		}
+	},
+
 	render() {
 		return h( this.tagName );
 	},
@@ -73,7 +91,9 @@ export default {
 				this.instance = markRaw( editor );
 
 				// Set initial disabled state.
-				editor.isReadOnly = this.disabled;
+				if ( this.disabled ) {
+					editor.enableReadOnlyMode( SAMPLE_READ_ONLY_LOCK_ID );
+				}
 
 				this.setUpEditorEvents();
 
@@ -100,12 +120,12 @@ export default {
 		modelValue( newValue, oldValue ) {
 			// Synchronize changes of #modelValue. There are two sources of changes:
 			//
-			//                External modelValue change      ------\
-			//                                                       -----> +-----------+
-			//                                                              | Component |
-			//                                                       -----> +-----------+
-			//                     Internal data change       ------/
-			//              (typing, commands, collaboration)
+			//                External modelValue change      ──────╮
+			//                                                      ╰─────> ┏━━━━━━━━━━━┓
+			//                                                              ┃ Component ┃
+			//                                                      ╭─────> ┗━━━━━━━━━━━┛
+			//                   Internal data change         ──────╯
+			//             (typing, commands, collaboration)
 			//
 			// Case 1: If the change was external (via props), the editor data must be synced with
 			// the component using instance#setData() and it is OK to destroy the selection.
@@ -126,8 +146,12 @@ export default {
 		},
 
 		// Synchronize changes of #disabled.
-		disabled( val ) {
-			this.instance.isReadOnly = val;
+		disabled( readOnlyMode ) {
+			if ( readOnlyMode ) {
+				this.instance.enableReadOnlyMode( SAMPLE_READ_ONLY_LOCK_ID );
+			} else {
+				this.instance.disableReadOnlyMode( SAMPLE_READ_ONLY_LOCK_ID );
+			}
 		}
 	},
 

src/plugin.js

@@ -3,6 +3,8 @@
  * For licensing, see LICENSE.md.
  */
 
+/* eslint-env browser */
+
 import Vue, { version as vueVersion } from 'vue';
 import CKEditorComponent from './ckeditor.js';
 

tests/_utils/mockeditor.js

@@ -27,6 +27,8 @@ export class MockEditor {
 				document: new ViewDocument()
 			}
 		};
+
+		this._readOnlyLocks = new Set();
 	}
 
 	static create( el, config ) {
@@ -47,5 +49,13 @@ export class MockEditor {
 	getData() {
 		return this.data;
 	}
+
+	enableReadOnlyMode( key ) {
+		this._readOnlyLocks.add( key );
+	}
+
+	disableReadOnlyMode( key ) {
+		this._readOnlyLocks.delete( key );
+	}
 }
 

tests/ckeditor.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-/* global console, setTimeout */
+/* global window, console, setTimeout */
 
 import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
@@ -15,20 +15,68 @@ import {
 } from './_utils/mockeditor';
 
 describe( 'CKEditor Component', () => {
-	let sandbox;
+	let sandbox, CKEDITOR_VERSION;
 
 	beforeEach( () => {
+		CKEDITOR_VERSION = window.CKEDITOR_VERSION;
+
+		window.CKEDITOR_VERSION = '34.0.0';
 		sandbox = sinon.createSandbox();
 	} );
 
 	afterEach( () => {
+		window.CKEDITOR_VERSION = CKEDITOR_VERSION;
 		sandbox.restore();
 	} );
 
 	it( 'should have a name', () => {
 		expect( CKEditorComponent.name ).to.equal( 'ckeditor' );
 	} );
 
+	it( 'should print a warning if the "window.CKEDITOR_VERSION" variable is not available', async () => {
+		const warnStub = sandbox.stub( console, 'warn' );
+
+		delete window.CKEDITOR_VERSION;
+
+		sandbox.stub( MockEditor, 'create' ).resolves( new MockEditor() );
+		const { wrapper } = mountComponent();
+
+		await nextTick();
+		wrapper.unmount();
+
+		expect( warnStub.callCount ).to.equal( 1 );
+		expect( warnStub.firstCall.args[ 0 ] ).to.equal( 'Cannot find the "CKEDITOR_VERSION" in the "window" scope.' );
+	} );
+
+	it( 'should print a warning if using CKEditor 5 in version lower than 34', async () => {
+		const warnStub = sandbox.stub( console, 'warn' );
+
+		window.CKEDITOR_VERSION = '30.0.0';
+
+		sandbox.stub( MockEditor, 'create' ).resolves( new MockEditor() );
+		const { wrapper } = mountComponent();
+
+		await nextTick();
+		wrapper.unmount();
+
+		expect( warnStub.callCount ).to.equal( 1 );
+		expect( warnStub.firstCall.args[ 0 ] ).to.equal( 'The <CKEditor> component requires using CKEditor 5 in version 34 or higher.' );
+	} );
+
+	it( 'should not print any warninig if using CKEditor 5 in version 34 or higher', async () => {
+		const warnStub = sandbox.stub( console, 'warn' );
+
+		window.CKEDITOR_VERSION = '34.0.0';
+
+		sandbox.stub( MockEditor, 'create' ).resolves( new MockEditor() );
+		const { wrapper } = mountComponent();
+
+		await nextTick();
+		wrapper.unmount();
+
+		expect( warnStub.callCount ).to.equal( 0 );
+	} );
+
 	it( 'should call editor#create when initializing', async () => {
 		const stub = sandbox.stub( MockEditor, 'create' ).resolves( new MockEditor() );
 		const { wrapper } = mountComponent();
@@ -132,25 +180,36 @@ describe( 'CKEditor Component', () => {
 			} );
 		} );
 
-		describe( '#disabled', () => {
-			it( 'should be defined', async () => {
+		describe( '_readOnlyLocks', () => {
+			it( 'should be an instance of set', async () => {
 				const { wrapper, vm } = mountComponent();
 
 				await nextTick();
 
-				expect( vm.disabled ).to.be.false;
+				expect( vm.instance._readOnlyLocks ).to.be.instanceOf( Set );
 
 				wrapper.unmount();
 			} );
 
-			it( 'should set the initial editor#isReadOnly', async () => {
+			it( 'should be empty when editor is not set to read only mode', async () => {
+				const { wrapper, vm } = mountComponent();
+
+				await nextTick();
+
+				expect( vm.instance._readOnlyLocks.size ).to.equal( 0 );
+
+				wrapper.unmount();
+			} );
+
+			it( 'should contain one lock when editor is set to read only mode', async () => {
 				const { wrapper, vm } = mountComponent( {
 					disabled: true
 				} );
 
 				await nextTick();
 
-				expect( vm.instance.isReadOnly ).to.be.true;
+				expect( vm.instance._readOnlyLocks.size ).to.equal( 1 );
+
 				wrapper.unmount();
 			} );
 		} );
@@ -235,20 +294,26 @@ describe( 'CKEditor Component', () => {
 	} );
 
 	describe( 'bindings', () => {
-		it( '#disabled should control editor#isReadOnly', async () => {
+		it( '#disabled should control read only mode of the editor', async () => {
 			const { wrapper, vm } = mountComponent( {
 				disabled: true
 			} );
 
 			await nextTick();
 
-			expect( vm.instance.isReadOnly ).to.be.true;
+			expect( vm.instance._readOnlyLocks.size ).to.equal( 1 );
 
 			wrapper.setProps( { disabled: false } );
 
 			await nextTick();
 
-			expect( vm.instance.isReadOnly ).to.be.false;
+			expect( vm.instance._readOnlyLocks.size ).to.equal( 0 );
+
+			wrapper.setProps( { disabled: true } );
+
+			await nextTick();
+
+			expect( vm.instance._readOnlyLocks.size ).to.equal( 1 );
 
 			wrapper.unmount();
 		} );