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

Image captioning: model to view converter inserts figcaption at the end of figure element.

Szymon Kupś 9 лет назад
Родитель
Сommit
e660a1ae39

+ 26 - 2
packages/ckeditor5-image/src/imagecaptioning/imagecaptioningengine.js

@@ -9,14 +9,20 @@
 
 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 { insertElement } from '@ckeditor/ckeditor5-engine/src/conversion/model-to-view-converters';
 import ModelElement from '@ckeditor/ckeditor5-engine/src/model/element';
 import ViewEditableElement from '@ckeditor/ckeditor5-engine/src/view/editableelement';
+import ViewElement from '@ckeditor/ckeditor5-engine/src/view/element';
+import ViewPosition from '@ckeditor/ckeditor5-engine/src/view/position';
+import viewWriter from '@ckeditor/ckeditor5-engine/src/view/writer';
 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';
 import { isImage } from '../utils';
 
+// TODO: move to the ImageCaptioning
+import '../../theme/imagecaptioning/theme.scss';
+
 export default class ImageCaptioningEngine extends Plugin {
 	/**
 	 * @inheritDoc
@@ -62,7 +68,7 @@ export default class ImageCaptioningEngine extends Plugin {
 		// Model to view converter for editing pipeline.
 		editing.modelToView.on(
 			'insert:caption',
-			captionModelToView( new ViewEditableElement( 'figcaption', { contenteditable: true } ), false )
+			captionModelToView( new ViewEditableElement( 'figcaption', { contenteditable: true } ) )
 		);
 	}
 }
@@ -110,3 +116,21 @@ function hasCaption( image ) {
 
 	return false;
 }
+
+function insertElement( elementCreator ) {
+	return ( evt, data, consumable, conversionApi ) => {
+		if ( !consumable.consume( data.item, 'insert' ) ) {
+			return;
+		}
+
+		const imageFigure = conversionApi.mapper.toViewElement( data.range.start.parent );
+		const viewPosition = ViewPosition.createAt( imageFigure, 'end' );
+
+		const viewElement = ( elementCreator instanceof ViewElement ) ?
+			elementCreator.clone( true ) :
+			elementCreator( data, consumable, conversionApi );
+
+		conversionApi.mapper.bindElements( data.item, viewElement );
+		viewWriter.insert( viewPosition, viewElement );
+	};
+}

+ 1 - 1
packages/ckeditor5-image/tests/imagecaptioning/imagecaptioningengine.js

@@ -68,7 +68,7 @@ describe( 'ImageCaptioningEngine', () => {
 			it( 'should convert caption element to figcaption', () => {
 				setModelData( document, '<image src="img.png"><caption>Foo bar baz.</caption></image>' );
 
-				expect( editor.getData() ).to.equal( '<figure class="image"><figcaption>Foo bar baz.</figcaption><img src="img.png"></figure>' );
+				expect( editor.getData() ).to.equal( '<figure class="image"><img src="img.png"><figcaption>Foo bar baz.</figcaption></figure>' );
 			} );
 
 			it( 'should not convert caption if it\'s empty', () => {

+ 5 - 0
packages/ckeditor5-image/theme/imagecaptioning/theme.scss

@@ -0,0 +1,5 @@
+.ck-widget.image {
+	figcaption {
+		border: 1px solid red;
+	}
+}

+ 1 - 0
packages/ckeditor5-image/theme/theme.scss

@@ -23,6 +23,7 @@
 .ck-widget.image {
 	text-align: center;
 	clear: both;
+	position: relative;
 
 	&.image-style-side {
 		display: inline-block;