Merge branch 'master' into i/41

CHANGELOG.md

@@ -1,6 +1,17 @@
 Changelog
 =========
 
+## [4.0.0](https://github.com/ckeditor/ckeditor5-inspector/compare/v3.1.1...v4.0.0) (2022-04-12)
+
+### BREAKING CHANGES
+
+* Due to introducing the lock mechanism for the `Editor#isReadOnly` property, the inspector uses the new way of enabling the read-only mode in the editor. It requires an instance of CKEditor 5 in version 34 or higher. See [ckeditor/ckeditor5#10496](https://github.com/ckeditor/ckeditor5/issues/10496).
+
+### Other changes
+
+* Aligned the CKEditor 5 Inspector API to use the new lock mechanism when enabling/disabling the read-only mode. ([commit](https://github.com/ckeditor/ckeditor5-inspector/commit/55d72a3a8f708554d22341ce26a31f4448c39fc5))
+
+
 ## [3.1.1](https://github.com/ckeditor/ckeditor5-inspector/compare/v3.1.0...v3.1.1) (2022-03-29)
 
 ### Bug fixes

package.json

@@ -6,7 +6,7 @@
   ],
   "description": "The official CKEditor 5 instance inspector.",
   "license": "GPL-2.0-or-later",
-  "version": "3.1.1",
+  "version": "4.0.0",
   "engines": {
     "node": ">=14.0.0",
     "npm": ">=5.7.1"
@@ -34,26 +34,26 @@
     "@babel/cli": "^7.16.0",
     "@babel/core": "^7.16.0",
     "@babel/preset-react": "^7.16.0",
-    "@ckeditor/ckeditor5-autoformat": "^33.0.0",
-    "@ckeditor/ckeditor5-basic-styles": "^33.0.0",
-    "@ckeditor/ckeditor5-block-quote": "^33.0.0",
+    "@ckeditor/ckeditor5-autoformat": "^34.0.0",
+    "@ckeditor/ckeditor5-basic-styles": "^34.0.0",
+    "@ckeditor/ckeditor5-block-quote": "^34.0.0",
     "@ckeditor/ckeditor5-dev-env": "^30.0.0",
-    "@ckeditor/ckeditor5-editor-decoupled": "^33.0.0",
-    "@ckeditor/ckeditor5-essentials": "^33.0.0",
-    "@ckeditor/ckeditor5-heading": "^33.0.0",
-    "@ckeditor/ckeditor5-html-support": "^33.0.0",
-    "@ckeditor/ckeditor5-image": "^33.0.0",
-    "@ckeditor/ckeditor5-indent": "^33.0.0",
-    "@ckeditor/ckeditor5-link": "^33.0.0",
-    "@ckeditor/ckeditor5-list": "^33.0.0",
-    "@ckeditor/ckeditor5-media-embed": "^33.0.0",
-    "@ckeditor/ckeditor5-paste-from-office": "^33.0.0",
-    "@ckeditor/ckeditor5-table": "^33.0.0",
+    "@ckeditor/ckeditor5-editor-decoupled": "^34.0.0",
+    "@ckeditor/ckeditor5-essentials": "^34.0.0",
+    "@ckeditor/ckeditor5-heading": "^34.0.0",
+    "@ckeditor/ckeditor5-html-support": "^34.0.0",
+    "@ckeditor/ckeditor5-image": "^34.0.0",
+    "@ckeditor/ckeditor5-indent": "^34.0.0",
+    "@ckeditor/ckeditor5-link": "^34.0.0",
+    "@ckeditor/ckeditor5-list": "^34.0.0",
+    "@ckeditor/ckeditor5-media-embed": "^34.0.0",
+    "@ckeditor/ckeditor5-paste-from-office": "^34.0.0",
+    "@ckeditor/ckeditor5-table": "^34.0.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.3",
     "chai": "^4.3.4",
     "chai-enzyme": "^1.0.0-beta.1",
-    "ckeditor5": "^33.0.0",
+    "ckeditor5": "^34.0.0",
     "copy-to-clipboard": "^3.3.1",
     "css-loader": "^2.1.1",
     "cssnano": "^4.1.11",

src/ckeditorinspector.js

@@ -77,6 +77,23 @@ export default class CKEditorInspector {
 	 * with generated editor names.
 	 */
 	static attach( ...args ) {
+		const { CKEDITOR_VERSION } = window;
+
+		if ( CKEDITOR_VERSION ) {
+			const [ major ] = CKEDITOR_VERSION.split( '.' ).map( Number );
+
+			if ( major < 34 ) {
+				Logger.warn(
+					'[CKEditorInspector] The inspector requires using CKEditor 5 in version 34 or higher. ' +
+					'If you cannot update CKEditor 5, consider downgrading the major version of the inspector to version 3.'
+				);
+			}
+		} else {
+			Logger.warn(
+				'[CKEditorInspector] Could not determine a version of CKEditor 5. Some of the functionalities may not work as expected.'
+			);
+		}
+
 		const { editors, options } = normalizeArguments( args );
 
 		for ( const editorName in editors ) {

src/components/seteditordatabutton.css

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md.
  */
 

src/editorquickactions.js

@@ -21,6 +21,8 @@ import CheckmarkIcon from './assets/img/checkmark.svg';
 
 import './editorquickactions.css';
 
+const INSPECTOR_READ_ONLY_LOCK_ID = 'Lock from Inspector (@ckeditor/ckeditor5-inspector)';
+
 class EditorQuickActions extends Component {
 	constructor( props ) {
 		super( props );
@@ -32,6 +34,7 @@ class EditorQuickActions extends Component {
 
 		this._keyDownHandler = this._handleKeyDown.bind( this );
 		this._keyUpHandler = this._handleKeyUp.bind( this );
+		this._readOnlyHandler = this._handleReadOnly.bind( this );
 		this._editorDataJustCopiedTimeout = null;
 	}
 
@@ -50,7 +53,7 @@ class EditorQuickActions extends Component {
 				icon={<ReadOnlyIcon />}
 				isOn={this.props.isReadOnly}
 				isEnabled={!!this.props.editor}
-				onClick={() => { this.props.editor.isReadOnly = !this.props.editor.isReadOnly; }}
+				onClick={this._readOnlyHandler}
 			/>
 			<Button
 				text="Destroy editor"
@@ -126,6 +129,14 @@ class EditorQuickActions extends Component {
 			isShiftKeyPressed: false
 		} );
 	}
+
+	_handleReadOnly() {
+		if ( this.props.editor.isReadOnly ) {
+			this.props.editor.disableReadOnlyMode( INSPECTOR_READ_ONLY_LOCK_ID );
+		} else {
+			this.props.editor.enableReadOnlyMode( INSPECTOR_READ_ONLY_LOCK_ID );
+		}
+	}
 }
 
 const mapStateToProps = ( { editors, currentEditorName, currentEditorGlobals: { isReadOnly } } ) => {

tests/inspector/ckeditorinspector.js

@@ -67,11 +67,53 @@ describe( 'CKEditorInspector', () => {
 		// eslint-disable-next-line no-unused-vars
 		const inspector = new CKEditorInspector();
 
-		sinon.assert.calledOnce( warnStub );
-		sinon.assert.calledWithMatch( warnStub, /^\[CKEditorInspector\]/ );
+		sinon.assert.calledWithMatch(
+			warnStub,
+			/\[CKEditorInspector\] Whoops! Looks like you tried to create an instance of the CKEditorInspector class\./
+		);
 	} );
 
 	describe( '#attach()', () => {
+		let CKEDITOR_VERSION;
+
+		beforeEach( () => {
+			CKEDITOR_VERSION = window.CKEDITOR_VERSION;
+		} );
+
+		afterEach( () => {
+			window.CKEDITOR_VERSION = CKEDITOR_VERSION;
+		} );
+
+		it( 'should warn if using CKEditor 5 in lower versions than 34', () => {
+			window.CKEDITOR_VERSION = '33.0.0';
+
+			CKEditorInspector.attach( { foo: editor } );
+
+			sinon.assert.calledWithMatch(
+				warnStub,
+				/^\[CKEditorInspector\] The inspector requires using CKEditor 5 in version 34 or higher\./
+			);
+		} );
+
+		it( 'should not warn if using CKEditor 5 in version 34', () => {
+			window.CKEDITOR_VERSION = '34.0.0';
+
+			CKEditorInspector.attach( { foo: editor } );
+
+			expect( warnStub.called ).to.equal( false );
+		} );
+
+		it( 'should warn if cannot determine a version of CKEditor 5', () => {
+			delete window.CKEDITOR_VERSION;
+
+			CKEditorInspector.attach( { foo: editor } );
+
+			sinon.assert.calledWithMatch(
+				warnStub,
+				/^\[CKEditorInspector\] Could not determine a version of CKEditor 5. Some of the functionalities may not work as expected\./
+			);
+		} );
+
 		it( 'should add the inspector to DOM', () => {
 			expect( document.querySelector( '.ck-inspector-wrapper' ) ).to.be.null;
 			expect( CKEditorInspector._wrapper ).to.be.null;
@@ -238,14 +280,14 @@ describe( 'CKEditorInspector', () => {
 
 					const spy = sinon.stub( CKEditorInspector._store, 'dispatch' );
 
-					editor.isReadOnly = true;
+					editor.enableReadOnlyMode( 'Custom Lock' );
 
 					// FYI: Changing read only triggers view#render in the editor.
 					sinon.assert.callCount( spy, 2 );
 					sinon.assert.calledWithExactly( spy.firstCall, { type: UPDATE_VIEW_STATE } );
 					sinon.assert.calledWithExactly( spy.secondCall, { type: UPDATE_CURRENT_EDITOR_IS_READ_ONLY } );
 
-					editor.isReadOnly = false;
+					editor.disableReadOnlyMode( 'Custom Lock' );
 
 					sinon.assert.callCount( spy, 4 );
 					sinon.assert.calledWithExactly( spy.thirdCall, { type: UPDATE_VIEW_STATE } );
@@ -260,7 +302,7 @@ describe( 'CKEditorInspector', () => {
 
 					const spy = sinon.stub( CKEditorInspector._store, 'dispatch' );
 
-					editor.isReadOnly = true;
+					editor.enableReadOnlyMode( 'Custom Lock' );
 					sinon.assert.calledOnce( spy );
 					// FYI: UPDATE_VIEW_STATE will not happen when the inspector is collapsed.
 					sinon.assert.calledWithExactly( spy.firstCall, { type: UPDATE_CURRENT_EDITOR_IS_READ_ONLY } );
@@ -273,12 +315,12 @@ describe( 'CKEditorInspector', () => {
 
 					const spy = sinon.spy( CKEditorInspector._store, 'dispatch' );
 
-					editor.isReadOnly = true;
+					editor.enableReadOnlyMode( 'Custom Lock' );
 					sinon.assert.calledTwice( spy );
 
 					CKEditorInspector.detach( 'foo' );
 
-					editor.isReadOnly = false;
+					editor.disableReadOnlyMode( 'Custom Lock' );
 
 					sinon.assert.callCount( spy, 3 );
 					sinon.assert.calledWithExactly( spy.getCall( 2 ), { type: SET_EDITORS, editors: sinon.match.map } );
@@ -289,12 +331,12 @@ describe( 'CKEditorInspector', () => {
 
 					const spy = sinon.spy( CKEditorInspector._store, 'dispatch' );
 
-					editor.isReadOnly = true;
+					editor.enableReadOnlyMode( 'Custom Lock' );
 					sinon.assert.calledTwice( spy );
 
 					CKEditorInspector.destroy();
 
-					editor.isReadOnly = false;
+					editor.disableReadOnlyMode( 'Custom Lock' );
 					sinon.assert.calledTwice( spy );
 				} );
 			} );
@@ -377,8 +419,7 @@ describe( 'CKEditorInspector', () => {
 			const editors = getStoreState().editors;
 
 			expect( editors.get( 'foo' ) ).to.equal( editor );
-			sinon.assert.calledOnce( warnStub );
-			sinon.assert.calledWithMatch( warnStub, /^\[CKEditorInspector\]/ );
+			sinon.assert.calledWithMatch( warnStub, /^\[CKEditorInspector\] The CKEditorInspector\.attach/ );
 		} );
 
 		it( 'should detach when the editor is destroyed', () => {

tests/inspector/data/reducer.js

@@ -123,7 +123,7 @@ describe( 'global data store reducer', () => {
 				foo: 'bar'
 			};
 
-			editorA.isReadOnly = true;
+			editorA.enableReadOnlyMode( 'Custom Lock' );
 
 			state = reducer( state, setEditors( new Map( [ [ 'a', editorA ] ] ) ) );