Fix for: Paste buttons has wrong state in read-only mode

CHANGES.md

@@ -10,6 +10,7 @@ Fixed Issues:
 * [#1479](/~https://github.com/ckeditor/ckeditor-dev/issues/1479): Fixed: [Justification](https://ckeditor.com/cke4/addon/justify) for styled content in BR mode is disabled.
 * [#2816](/~https://github.com/ckeditor/ckeditor-dev/issues/2816): Fixed: [Enhanced Image](https://ckeditor.com/cke4/addon/image2) resize handler is visible in [read-only mode](https://ckeditor.com/docs/ckeditor4/latest/guide/dev_readonly.html).
 * [#2874](/~https://github.com/ckeditor/ckeditor-dev/issues/2874): Fixed: [Enhanced Image](https://ckeditor.com/cke4/addon/image2) resize handler is not added when editor is initialized in [read-only mode](https://ckeditor.com/docs/ckeditor4/latest/guide/dev_readonly.html).
+* [#2775](/~https://github.com/ckeditor/ckeditor-dev/issues/2775): Fixed: [Clipboard](https://ckeditor.com/cke4/addon/clipboard) paste buttons have wrong state when [read-only](https://ckeditor.com/docs/ckeditor4/latest/guide/dev_readonly.html) mode is set by mouse event listener with [Div Editing Area](https://ckeditor.com/cke4/addon/divarea) plugin.
 
 ## CKEditor 4.11.3
 

plugins/clipboard/plugin.js

@@ -421,8 +421,7 @@
 	function initPasteClipboard( editor ) {
 		var clipboard = CKEDITOR.plugins.clipboard,
 			preventBeforePasteEvent = 0,
-			preventPasteEvent = 0,
-			inReadOnly = 0;
+			preventPasteEvent = 0;
 
 		addListeners();
 		addButtonsCommands();
@@ -552,15 +551,11 @@
 			editor.on( 'contentDom', addPasteListenersToEditable );
 
 			// For improved performance, we're checking the readOnly state on selectionChange instead of hooking a key event for that.
-			editor.on( 'selectionChange', function( evt ) {
-				inReadOnly = evt.data.selection.getRanges()[ 0 ].checkReadOnly();
-				setToolbarStates();
-			} );
+			editor.on( 'selectionChange', setToolbarStates );
 
 			// If the "contextmenu" plugin is loaded, register the listeners.
 			if ( editor.contextMenu ) {
-				editor.contextMenu.addListener( function( element, selection ) {
-					inReadOnly = selection.getRanges()[ 0 ].checkReadOnly();
+				editor.contextMenu.addListener( function() {
 					return {
 						cut: stateFromNamedCommand( 'cut' ),
 						copy: stateFromNamedCommand( 'copy' ),
@@ -738,9 +733,7 @@
 			// since editable won't fire the event if selection process started within
 			// iframe and ended out of the editor (https://dev.ckeditor.com/ticket/9851).
 			editable.attachListener( CKEDITOR.env.ie ? editable : editor.document.getDocumentElement(), 'mouseup', function() {
-				mouseupTimeout = setTimeout( function() {
-					setToolbarStates();
-				}, 0 );
+				mouseupTimeout = setTimeout( setToolbarStates, 0 );
 			} );
 
 			// Make sure that deferred mouseup callback isn't executed after editor instance
@@ -1222,11 +1215,18 @@
 		}
 
 		function stateFromNamedCommand( command ) {
-			if ( inReadOnly && command in { paste: 1, cut: 1 } )
+			var selection = editor.getSelection(),
+				range = selection && selection.getRanges()[ 0 ],
+				// We need to correctly update toolbar states on readOnly (#2775).
+				inReadOnly = editor.readOnly || ( range && range.checkReadOnly() );
+
+			if ( inReadOnly && command in { paste: 1, cut: 1 } ) {
 				return CKEDITOR.TRISTATE_DISABLED;
+			}
 
-			if ( command == 'paste' )
+			if ( command == 'paste' ) {
 				return CKEDITOR.TRISTATE_OFF;
+			}
 
 			// Cut, copy - check if the selection is not empty.
 			var sel = editor.getSelection(),

tests/plugins/clipboard/manual/readonlystate.html

@@ -0,0 +1,10 @@
+<textarea id="editor"></textarea>
+<label><input id="readonly" type="checkbox">Readonly</label>
+
+<script>
+	var editor = CKEDITOR.replace( 'editor' );
+
+	CKEDITOR.document.findOne( '#readonly' ).on( 'click', function() {
+		editor.setReadOnly( this.$.checked );
+	} );
+</script>

tests/plugins/clipboard/manual/readonlystate.md

@@ -0,0 +1,13 @@
+@bender-tags: bug, 4.11.4, 2775
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, clipboard, toolbar, divarea, pastetext
+
+Click or touch on checkbox.
+
+## Expected
+
+Paste and Paste as Text buttons are disabled.
+
+## Unexpected
+
+Paste and Paste as Text buttons are enabled.

tests/plugins/clipboard/readonly.js

@@ -1,5 +1,5 @@
 /* bender-tags: editor, clipboard, 13872 */
-/* bender-ckeditor-plugins: toolbar, clipboard */
+/* bender-ckeditor-plugins: toolbar, clipboard, pastetext */
 
 'use strict';
 
@@ -58,4 +58,41 @@ var tests = {
 
 tests = bender.tools.createTestsForEditors( CKEDITOR.tools.objectKeys( bender.editors ), tests );
 
+tests[ 'test paste command state in divarea editor' ] = function() {
+	bender.editorBot.create( {
+		name: 'divarea',
+		creator: 'replace',
+		config: {
+			extraPlugins: 'divarea'
+		}
+	}, function( bot ) {
+		var editor = bot.editor,
+			target = CKEDITOR.env.ie ? editor.editable() : editor.document.getDocumentElement();
+
+		target.fire( 'mouseup', new CKEDITOR.dom.event( {
+			button: CKEDITOR.MOUSE_BUTTON_LEFT,
+			target: null
+		} ) );
+
+		editor.setReadOnly( true );
+
+		// The mouseup listener updates state in timeout, so we need to make test asynchronous.
+		setTimeout( function() {
+			resume( function() {
+				assertCommands( CKEDITOR.TRISTATE_DISABLED, 'state when readOnly="true"' );
+
+				editor.setReadOnly( false );
+				assertCommands( CKEDITOR.TRISTATE_OFF, 'state when readOnly="false"' );
+			} );
+		} );
+
+		wait();
+
+		function assertCommands( expected, msg ) {
+			assert.areSame( expected, editor.getCommand( 'paste' ).state, 'paste ' + msg );
+			assert.areSame( expected, editor.getCommand( 'pastetext' ).state, 'pastetext ' + msg );
+		}
+	} );
+};
+
 bender.test( tests );