Merge pull request #21 from ckeditor/t/6

Fix: <kbd>Backspace</kbd> and <kbd>Delete</kbd> should not delete a widget when the editor is in the read-only mode. Closes #6.

src/widget.js

@@ -153,6 +153,11 @@ export default class Widget extends Plugin {
 	 * @returns {Boolean|undefined} Returns `true` if keys were handled correctly.
 	 */
 	_handleDelete( isForward ) {
+		// Do nothing when the read only mode is enabled.
+		if ( this.editor.isReadOnly ) {
+			return;
+		}
+
 		const modelDocument = this.editor.document;
 		const modelSelection = modelDocument.selection;
 

tests/widget.js

@@ -606,6 +606,54 @@ describe( 'Widget', () => {
 				'</blockQuote>' +
 				'<paragraph>foo</paragraph>'
 			);
+
+			it( 'does nothing when editor when read only mode is enabled (delete)', () => {
+				setModelData( doc,
+					'<paragraph>foo</paragraph>' +
+					'<image></image>' +
+					'<blockQuote><paragraph>[]</paragraph></blockQuote>' +
+					'<paragraph>foo</paragraph>'
+				);
+
+				editor.isReadOnly = true;
+
+				viewDocument.fire( 'keydown', new DomEventData(
+					viewDocument,
+					{ target: document.createElement( 'div' ), preventDefault: () => {} },
+					{ keyCode: keyCodes.backspace }
+				) );
+
+				expect( getModelData( doc ) ).to.equal(
+					'<paragraph>foo</paragraph>' +
+					'<image></image>' +
+					'<blockQuote><paragraph>[]</paragraph></blockQuote>' +
+					'<paragraph>foo</paragraph>'
+				);
+			} );
+
+			it( 'does nothing when editor when read only mode is enabled (forward delete)', () => {
+				setModelData( doc,
+					'<paragraph>foo</paragraph>' +
+					'<blockQuote><paragraph>[]</paragraph></blockQuote>' +
+					'<image></image>' +
+					'<paragraph>foo</paragraph>'
+				);
+
+				editor.isReadOnly = true;
+
+				viewDocument.fire( 'keydown', new DomEventData(
+					viewDocument,
+					{ target: document.createElement( 'div' ), preventDefault: () => {} },
+					{ keyCode: keyCodes.delete }
+				) );
+
+				expect( getModelData( doc ) ).to.equal(
+					'<paragraph>foo</paragraph>' +
+					'<blockQuote><paragraph>[]</paragraph></blockQuote>' +
+					'<image></image>' +
+					'<paragraph>foo</paragraph>'
+				);
+			} );
 		} );
 
 		describe( 'arrows', () => {