瀏覽代碼

Image captioning engine and manual test.

Szymon Kupś 9 年之前
父節點
當前提交
6bd270eb65

+ 57 - 0
packages/ckeditor5-image/src/imagecaptioning/imagecaptioningengine.js

@@ -8,6 +8,11 @@
  */
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import ModelTreeWalker from '@ckeditor/ckeditor5-engine/src/model/treewalker';
+import ModelElement from '@ckeditor/ckeditor5-engine/src/model/element';
+import ModelPosition from '@ckeditor/ckeditor5-engine/src/model/position';
+import buildViewConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildviewconverter';
+import ViewMatcher from '@ckeditor/ckeditor5-engine/src/view/matcher';
 
 export default class ImageCaptioningEngine extends Plugin {
 	/**
@@ -17,9 +22,61 @@ export default class ImageCaptioningEngine extends Plugin {
 		const editor = this.editor;
 		const document = editor.document;
 		const schema = document.schema;
+		const data = editor.data;
 
+		// 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 );
+
+		// 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' );
+	}
+}
+
+function insertCaptionElement( evt, changeType, data, batch ) {
+	if ( changeType !== 'insert' ) {
+		return;
+	}
+
+	const walker = new ModelTreeWalker( {
+		boundaries: data.range,
+		ignoreElementEnd: true
+	} );
+
+	for ( let value of walker ) {
+		const item = value.item;
+
+		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' ) );
+		}
 	}
 }
+
+function hasCaption( image ) {
+	for ( let node of image.getChildren() ) {
+		if ( node instanceof ModelElement && node.name == 'caption' ) {
+			return true;
+		}
+	}
+
+	return false;
+}

+ 2 - 2
packages/ckeditor5-image/tests/manual/captioning.html

@@ -1,8 +1,8 @@
 <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>
 	<figure class="image">
-		<img src="logo.png" alt="CKEditor logo" />
+		<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>
-	<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>
 </div>