Răsfoiți Sursa

Refactored handling read-only by BlockToolbar mode.

Oskar Wróbel 7 ani în urmă
părinte
comite
42fbc68dde

+ 8 - 20
packages/ckeditor5-ui/src/toolbar/block/blocktoolbar.js

@@ -103,17 +103,17 @@ export default class BlockToolbar extends Plugin {
 			callback: () => this._hidePanel()
 		} );
 
-		// Hide plugin UI when editor switch to read-only.
-		this.listenTo( editor, 'change:isReadOnly', ( evt, name, isReadOnly ) => {
-			if ( isReadOnly ) {
-				this._disable();
-			} else {
-				this._enable();
+		// Try to hide button when editor switch to read-only.
+		// Do not hide when panel was visible to avoid confusing situation when
+		// UI unexpectedly disappears.
+		this.listenTo( editor, 'change:isReadOnly', () => {
+			if ( !this.panelView.isVisible ) {
+				this.buttonView.isVisible = false;
 			}
 		} );
 
 		// Enable as default.
-		this._enable();
+		this._initListeners();
 	}
 
 	/**
@@ -196,7 +196,7 @@ export default class BlockToolbar extends Plugin {
 	 *
 	 * @private
 	 */
-	_enable() {
+	_initListeners() {
 		const editor = this.editor;
 		const model = editor.model;
 		const view = editor.editing.view;
@@ -249,18 +249,6 @@ export default class BlockToolbar extends Plugin {
 		} );
 	}
 
-	/**
-	 * Stops displaying block button.
-	 *
-	 * @private
-	 */
-	_disable() {
-		this.buttonView.isVisible = false;
-		this.stopListening( this.editor.model.document.selection, 'change:range' );
-		this.stopListening( this.editor.editing.view, 'render' );
-		this.stopListening( this.buttonView, 'change:isVisible' );
-	}
-
 	/**
 	 * Attaches #buttonView to the target block of content.
 	 *

+ 1 - 0
packages/ckeditor5-ui/tests/manual/blocktoolbar/blocktoolbar.html

@@ -1,5 +1,6 @@
 <button class="external-type">Start external typing</button>
 <button class="external-delete">Start external deleting</button>
+<button class="read-only">Toggle Read-only</button>
 
 <div class="wrapper">
 	<div id="editor">

+ 4 - 0
packages/ckeditor5-ui/tests/manual/blocktoolbar/blocktoolbar.js

@@ -42,6 +42,10 @@ BalloonEditor
 			externalChanges.wait( 4000 )
 				.then( () => externalChanges.removeElement( [ 1 ] ) );
 		} );
+
+		document.querySelector( '.read-only' ).addEventListener( 'click', () => {
+			editor.isReadOnly = !editor.isReadOnly;
+		} );
 	} )
 	.catch( err => {
 		console.error( err.stack );

+ 10 - 11
packages/ckeditor5-ui/tests/toolbar/block/blocktoolbar.js

@@ -365,29 +365,28 @@ describe( 'BlockToolbar', () => {
 			expect( blockToolbar.panelView.isVisible ).to.true;
 		} );
 
-		it( 'should hide button and stop attaching it when editor switch to readonly', () => {
+		it( 'should hide UI when editor switch to readonly when panel is not visible', () => {
 			setData( editor.model, '<paragraph>foo[]bar</paragraph>' );
 
-			blockToolbar.panelView.isVisible = true;
-
-			expect( blockToolbar.buttonView.isVisible ).to.true;
-			expect( blockToolbar.panelView.isVisible ).to.true;
+			blockToolbar.buttonView.isVisible = true;
+			blockToolbar.panelView.isVisible = false;
 
 			editor.isReadOnly = true;
 
 			expect( blockToolbar.buttonView.isVisible ).to.false;
 			expect( blockToolbar.panelView.isVisible ).to.false;
+		} );
 
-			editor.editing.view.fire( 'render' );
+		it( 'should not hide button when editor switch to readonly when panel is visible', () => {
+			setData( editor.model, '<paragraph>foo[]bar</paragraph>' );
 
-			expect( blockToolbar.buttonView.isVisible ).to.false;
-			expect( blockToolbar.panelView.isVisible ).to.false;
+			blockToolbar.buttonView.isVisible = true;
+			blockToolbar.panelView.isVisible = true;
 
-			editor.isReadOnly = false;
-			editor.editing.view.fire( 'render' );
+			editor.isReadOnly = true;
 
 			expect( blockToolbar.buttonView.isVisible ).to.true;
-			expect( blockToolbar.panelView.isVisible ).to.false;
+			expect( blockToolbar.panelView.isVisible ).to.true;
 		} );
 
 		it( 'should update button position on browser resize only when button is visible', () => {