8
0
Szymon Kupś 8 лет назад
Родитель
Сommit
4308d7e676

+ 34 - 25
packages/ckeditor5-image/src/imagecaption/imagecaptionengine.js

@@ -70,17 +70,17 @@ export default class ImageCaptionEngine extends Plugin {
 		editing.downcastDispatcher.on( 'insert:caption', captionModelToView( createCaptionForEditing ) );
 
 		// Always show caption in view when something is inserted in model.
-		editing.downcastDispatcher.on( 'insert', ( evt, data ) => this._fixCaptionVisibility( data.item ), { priority: 'high' } );
-
-		// Hide caption when everything is removed from it.
 		editing.downcastDispatcher.on(
-			'remove',
-			( evt, data ) => this._fixCaptionVisibility( data.position.parent ),
+			'insert',
+			this._fixCaptionVisibility( data => data.item ),
 			{ priority: 'high' }
 		);
 
+		// Hide caption when everything is removed from it.
+		editing.downcastDispatcher.on( 'remove', this._fixCaptionVisibility( data => data.position.parent ), { priority: 'high' } );
+
 		// Update view before each rendering.
-		this.listenTo( view.renderer, 'render', () => this._updateCaptionVisibility(), { priority: 'high' } );
+		this.listenTo( view, 'render', () => this._updateCaptionVisibility( view ) );
 	}
 
 	/**
@@ -89,13 +89,13 @@ export default class ImageCaptionEngine extends Plugin {
 	 *
 	 * @private
 	 */
-	_updateCaptionVisibility() {
+	_updateCaptionVisibility( view ) {
 		const mapper = this.editor.editing.mapper;
 		let viewCaption;
 
 		// Hide last selected caption if have no child elements.
 		if ( this._lastSelectedCaption && !this._lastSelectedCaption.childCount ) {
-			this._lastSelectedCaption.addClass( 'ck-hidden' );
+			view.change( writer => writer.addClass( 'ck-hidden', this._lastSelectedCaption ) );
 		}
 
 		// If whole image is selected.
@@ -116,33 +116,41 @@ export default class ImageCaptionEngine extends Plugin {
 		}
 
 		if ( viewCaption ) {
-			viewCaption.removeClass( 'ck-hidden' );
+			view.change( writer => writer.removeClass( 'ck-hidden', viewCaption ) );
 			this._lastSelectedCaption = viewCaption;
 		}
 	}
 
 	/**
-	 * Fixes caption visibility during the model-to-view conversion.
+	 * Returns converter that fixes caption visibility during the model-to-view conversion.
 	 * Checks if the changed node is placed inside the caption element and fixes its visibility in the view.
 	 *
 	 * @private
-	 * @param {module:engine/model/node~Node} node
+	 * @param {Function} nodeFinder
+	 * @returns {Function}
 	 */
-	_fixCaptionVisibility( node ) {
-		const modelCaption = getParentCaption( node );
-		const mapper = this.editor.editing.mapper;
-
-		if ( modelCaption ) {
-			const viewCaption = mapper.toViewElement( modelCaption );
-
-			if ( viewCaption ) {
-				if ( modelCaption.childCount ) {
-					viewCaption.removeClass( 'ck-hidden' );
-				} else {
-					viewCaption.addClass( 'ck-hidden' );
+	_fixCaptionVisibility( nodeFinder ) {
+		return ( evt, data, consumable, conversionApi ) => {
+			// There is no consumable on 'remove' event.
+			conversionApi = conversionApi ? conversionApi : consumable;
+
+			const node = nodeFinder( data );
+			const modelCaption = getParentCaption( node );
+			const mapper = this.editor.editing.mapper;
+			const viewWriter = conversionApi.writer;
+
+			if ( modelCaption ) {
+				const viewCaption = mapper.toViewElement( modelCaption );
+
+				if ( viewCaption ) {
+					if ( modelCaption.childCount ) {
+						viewWriter.removeClass( 'ck-hidden', viewCaption );
+					} else {
+						viewWriter.addClass( 'ck-hidden', viewCaption );
+					}
 				}
 			}
-		}
+		};
 	}
 
 	/**
@@ -193,10 +201,11 @@ function captionModelToView( elementCreator, hide = true ) {
 
 			const viewImage = conversionApi.mapper.toViewElement( data.range.start.parent );
 			const viewCaption = elementCreator( conversionApi.writer );
+			const viewWriter = conversionApi.writer;
 
 			// Hide if empty.
 			if ( !captionElement.childCount ) {
-				viewCaption.addClass( 'ck-hidden' );
+				viewWriter.addClass( 'ck-hidden', viewCaption );
 			}
 
 			insertViewCaptionAndBind( viewCaption, data.item, viewImage, conversionApi );

+ 2 - 2
packages/ckeditor5-image/src/imagecaption/utils.js

@@ -23,10 +23,10 @@ const captionSymbol = Symbol( 'imageCaption' );
 export function captionElementCreator( view, placeholderText ) {
 	return writer => {
 		const editable = writer.createEditableElement( 'figcaption' );
-		editable.setCustomProperty( captionSymbol, true );
+		writer.setCustomProperty( captionSymbol, true, editable );
 		attachPlaceholder( view, editable, placeholderText );
 
-		return toWidgetEditable( editable );
+		return toWidgetEditable( editable, writer );
 	};
 }
 

+ 3 - 2
packages/ckeditor5-image/src/imagestyle/converters.js

@@ -27,13 +27,14 @@ export function modelToViewStyleAttribute( styles ) {
 		const oldStyle = getStyleByName( data.attributeOldValue, styles );
 
 		const viewElement = conversionApi.mapper.toViewElement( data.item );
+		const viewWriter = conversionApi.writer;
 
 		if ( oldStyle ) {
-			viewElement.removeClass( oldStyle.className );
+			viewWriter.removeClass( oldStyle.className, viewElement );
 		}
 
 		if ( newStyle ) {
-			viewElement.addClass( newStyle.className );
+			viewWriter.addClass( newStyle.className, viewElement );
 		}
 	};
 }

+ 2 - 2
packages/ckeditor5-image/src/imagetextalternative.js

@@ -123,13 +123,13 @@ export default class ImageTextAlternative extends Plugin {
 		} );
 
 		// Reposition the balloon or hide the form if an image widget is no longer selected.
-		this.listenTo( viewDocument, 'change', () => {
+		this.listenTo( view, 'render', () => {
 			if ( !isImageWidgetSelected( viewDocument.selection ) ) {
 				this._hideForm( true );
 			} else if ( this._isVisible ) {
 				repositionContextualBalloon( editor );
 			}
-		}, { priority: 'low' } );
+		} );
 
 		// Close on click outside of balloon panel element.
 		clickOutsideHandler( {

+ 1 - 1
packages/ckeditor5-image/src/imagetoolbar.js

@@ -80,7 +80,7 @@ export default class ImageToolbar extends Plugin {
 		this._toolbar.fillFromConfig( toolbarConfig, editor.ui.componentFactory );
 
 		// Show balloon panel each time image widget is selected.
-		this.listenTo( editor.editing.view.document, 'change', () => {
+		this.listenTo( editor.editing.view, 'render', () => {
 			this._checkIsVisible();
 		}, { priority: 'low' } );
 

+ 1 - 1
packages/ckeditor5-image/tests/imagecaption/utils.js

@@ -46,7 +46,7 @@ describe( 'image captioning utils', () => {
 
 		it( 'should return false for other elements', () => {
 			const editable = new ViewEditableElement( 'figcaption', { contenteditable: true } );
-			editable.document = document;
+			editable._document = document;
 
 			expect( isCaption( editable ) ).to.be.false;
 		} );

+ 5 - 6
packages/ckeditor5-image/tests/imagetextalternative.js

@@ -16,7 +16,7 @@ import { setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
 
 describe( 'ImageTextAlternative', () => {
-	let editor, viewDocument, model, view, doc, plugin, command, form, balloon, editorElement, button;
+	let editor, model, view, doc, plugin, command, form, balloon, editorElement, button;
 
 	beforeEach( () => {
 		editorElement = global.document.createElement( 'div' );
@@ -30,7 +30,6 @@ describe( 'ImageTextAlternative', () => {
 				editor = newEditor;
 				model = editor.model;
 				view = editor.editing.view;
-				viewDocument = view.document;
 				doc = model.document;
 				newEditor.editing.view.attachDomRoot( editorElement );
 				plugin = editor.plugins.get( ImageTextAlternative );
@@ -160,14 +159,14 @@ describe( 'ImageTextAlternative', () => {
 			expect( balloon.visibleView ).to.equal( lastView );
 		} );
 
-		describe( 'integration with the editor selection (#change event)', () => {
+		describe( 'integration with the editor selection (#render event)', () => {
 			it( 'should re-position the form', () => {
 				setData( model, '[<image src=""></image>]' );
 				button.fire( 'execute' );
 
 				const spy = sinon.spy( balloon, 'updatePosition' );
 
-				viewDocument.fire( 'change' );
+				view.fire( 'render' );
 				sinon.assert.calledOnce( spy );
 			} );
 
@@ -175,7 +174,7 @@ describe( 'ImageTextAlternative', () => {
 				setData( model, '[<image src=""></image>]' );
 				button.fire( 'execute' );
 
-				const remveSpy = sinon.spy( balloon, 'remove' );
+				const removeSpy = sinon.spy( balloon, 'remove' );
 				const focusSpy = sinon.spy( editor.editing.view, 'focus' );
 
 				// EnqueueChange automatically fires #render event.
@@ -183,7 +182,7 @@ describe( 'ImageTextAlternative', () => {
 					writer.remove( doc.selection.getFirstRange() );
 				} );
 
-				sinon.assert.calledWithExactly( remveSpy, form );
+				sinon.assert.calledWithExactly( removeSpy, form );
 				sinon.assert.calledOnce( focusSpy );
 			} );
 		} );