Преглед изворни кода

Image captioning converters.

Szymon Kupś пре 9 година
родитељ
комит
ddbc269ee8

+ 0 - 3
packages/ckeditor5-image/src/imagealternatetext/ui/alternatetextformview.js

@@ -50,9 +50,6 @@ export default class AlternateTextFormView extends View {
 		 */
 		this.cancelButtonView = this._createButton( t( 'Cancel' ), 'cancel' );
 
-		// Register child views.
-		this.addChildren( [ this.saveButtonView ] );
-
 		Template.extend( this.saveButtonView.template, {
 			attributes: {
 				class: [

+ 35 - 18
packages/ckeditor5-image/src/imagecaptioning/imagecaptioningengine.js

@@ -9,10 +9,14 @@
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import ModelTreeWalker from '@ckeditor/ckeditor5-engine/src/model/treewalker';
+import { insertElement } from '@ckeditor/ckeditor5-engine/src/conversion/model-to-view-converters';
 import ModelElement from '@ckeditor/ckeditor5-engine/src/model/element';
+import ViewContainerElement from '@ckeditor/ckeditor5-engine/src/view/containerelement';
 import ModelPosition from '@ckeditor/ckeditor5-engine/src/model/position';
 import buildViewConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildviewconverter';
+import buildModelConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildmodelconverter';
 import ViewMatcher from '@ckeditor/ckeditor5-engine/src/view/matcher';
+import { isImage } from '../utils';
 
 export default class ImageCaptioningEngine extends Plugin {
 	/**
@@ -23,30 +27,42 @@ export default class ImageCaptioningEngine extends Plugin {
 		const document = editor.document;
 		const schema = document.schema;
 		const data = editor.data;
+		const editing = editor.editing;
 
 		// Schema configuration.
 		schema.registerItem( 'caption' );
 		schema.allow( { name: '$inline', inside: 'caption' } );
 		schema.allow( { name: 'caption', inside: 'image' } );
 
-		// Add caption element to each image without it.
-		// document.on( 'change', insertCaptionElement );
+		// Add caption element to each image inserted without it.
+		document.on( 'change', insertCaptionElement );
 
 		// View to model converter for data pipeline.
-		// const matcher = new ViewMatcher( ( element ) => {
-		// 	const parent = element.parent;
-		//
-		// 	if ( element.name == 'figcaption' && parent && parent.name == 'figure' && parent.hasClass( 'image' ) ) {
-		// 		return { name: true };
-		// 	}
-		//
-		// 	return null;
-		// } );
-
-		// buildViewConverter()
-		// 	.for( data.viewToModel )
-		// 	.fromElement( 'figcaption' )
-		// 	.toElement( 'caption' );
+		const matcher = new ViewMatcher( ( element ) => {
+			const parent = element.parent;
+
+			// Convert only captions for images.
+			if ( element.name == 'figcaption' && parent && parent.name == 'figure' && parent.hasClass( 'image' ) ) {
+				return { name: true };
+			}
+
+			return null;
+		} );
+
+		buildViewConverter()
+			.for( data.viewToModel )
+			.from( matcher )
+			.toElement( 'caption' );
+
+		// Model to view converter for editing pipeline.
+		const insertConverter = insertElement( new ViewContainerElement( 'figcaption', { contenteditable: true } ) );
+		editing.modelToView.on( 'insert:caption', ( evt, data, consumable, conversionApi ) => {
+			const captionElement = data.item;
+
+			if ( isImage( captionElement.parent ) ) {
+				insertConverter( evt, data, consumable, conversionApi );
+			}
+		} );
 	}
 }
 
@@ -65,8 +81,9 @@ function insertCaptionElement( evt, changeType, data, batch ) {
 
 		if ( value.type == 'elementStart' && item.name == 'image' && !hasCaption( item ) ) {
 			// Using batch of insertion.
-			// TODO: Should I use enqChanges?
-			batch.insert( ModelPosition.createAt( item, 'end' ), new ModelElement( 'caption' ) );
+			batch.document.enqueueChanges( () => {
+				batch.insert( ModelPosition.createAt( item, 'end' ), new ModelElement( 'caption' ) );
+			} );
 		}
 	}
 }

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

@@ -38,7 +38,7 @@ export default class Widget extends Plugin {
 
 		// If mouse down is pressed on widget - create selection over whole widget.
 		viewDocument.addObserver( MouseObserver );
-		this.listenTo( viewDocument, 'mousedown', ( ...args ) => this._onMousedown( ...args ) );
+		// this.listenTo( viewDocument, 'mousedown', ( ...args ) => this._onMousedown( ...args ) );
 
 		// Handle custom keydown behaviour.
 		this.listenTo( viewDocument, 'keydown', ( ...args ) => this._onKeydown( ...args ), { priority: 'high' } );

+ 6 - 3
packages/ckeditor5-image/tests/manual/captioning.html

@@ -1,8 +1,11 @@
 <div id="editor">
-	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
+	<p>Paragraph</p>
+	<figure class="image">
+		<img src="logo.png" alt="White clip on blue background" />
+		<figcaption>CKEditor logo - caption</figcaption>
+	</figure>
+	<p>Paragraph</p>
 	<figure class="image">
 		<img src="logo.png" alt="White clip on blue background" />
-		<figcaption>CKEditor logo</figcaption>
 	</figure>
-	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
 </div>