8
0
Просмотр исходного кода

Showing image caption when content is inserted inside model.

Szymon Kupś 8 лет назад
Родитель
Сommit
8611a79a34

+ 33 - 1
packages/ckeditor5-image/src/imagecaption/imagecaptionengine.js

@@ -42,7 +42,6 @@ export default class ImageCaptionEngine extends Plugin {
 		const schema = document.schema;
 		const data = editor.data;
 		const editing = editor.editing;
-
 		/**
 		 * Last selected caption editable.
 		 * It is used for hiding editable when is empty and image widget is no longer selected.
@@ -80,6 +79,9 @@ export default class ImageCaptionEngine extends Plugin {
 		// Model to view converter for the editing pipeline.
 		editing.modelToView.on( 'insert:caption', captionModelToView( this._createCaption ) );
 
+		// Always show when something is inserted into caption.
+		editing.modelToView.on( 'insert', ( evt, data  ) => this._showCaptionOnInsert( data.item ), { priority: 'high' } );
+
 		// Update view before each rendering.
 		this.listenTo( viewDocument, 'render', () => this._updateCaptionVisibility(), { priority: 'high' } );
 	}
@@ -118,6 +120,25 @@ export default class ImageCaptionEngine extends Plugin {
 			this._lastSelectedCaption = viewCaption;
 		}
 	}
+
+	/**
+	 * Model's insert callback. Checks if inserted node is placed inside image's caption and shows it in the view.
+	 *
+	 * @private
+	 * @param {module:engine/model/node~Node} node
+	 */
+	_showCaptionOnInsert( node ) {
+		const modelCaption = getParentCaption( node );
+		const mapper = this.editor.editing.mapper;
+
+		if ( modelCaption ) {
+			const viewCaption = mapper.toViewElement( modelCaption );
+
+			if ( viewCaption ) {
+				viewCaption.removeClass( 'ck-hidden' );
+			}
+		}
+	}
 }
 
 // Checks whether data inserted to the model document have image element that has no caption element inside it.
@@ -192,3 +213,14 @@ function insertViewCaptionAndBind( viewCaption, modelCaption, viewImage, mapper
 	viewWriter.insert( viewPosition, viewCaption );
 	mapper.bindElements( modelCaption, viewCaption );
 }
+
+function getParentCaption( node ) {
+	const ancestors = node.getAncestors();
+	const image = ancestors.find( ancestor => ancestor.name == 'image' );
+
+	if ( image ) {
+		return getCaptionFromImage( image );
+	}
+
+	return null;
+}

+ 18 - 0
packages/ckeditor5-image/tests/imagecaption/imagecaptionengine.js

@@ -144,6 +144,24 @@ describe( 'ImageCaptionEngine', () => {
 					'<figure class="image ck-widget" contenteditable="false"><img src="img.png"></img><span></span>Foo bar baz.</figure>'
 				);
 			} );
+
+			it.only( 'should show caption when something is inserted inside', () => {
+				setModelData( document, '<image src="img.png"><caption></caption></image>' );
+				const image = document.getRoot().getChild( 0 );
+				const caption = image.getChild( 0 );
+
+				document.enqueueChanges( () => {
+					const batch = document.batch();
+					batch.insert( ModelPosition.createAt( caption ), 'foo bar' );
+				} );
+
+				expect( getViewData( viewDocument ) ).to.equal(
+					'[]<figure class="image ck-widget" contenteditable="false">' +
+						'<img src="img.png"></img>' +
+						'<figcaption class="ck-editable" contenteditable="true">foo bar</figcaption>' +
+					'</figure>'
+				);
+			} );
 		} );
 	} );