Răsfoiți Sursa

Merge pull request #82 from ckeditor/t/71

Feature: Added "Enter caption here" placeholders to empty image captions. Closes #71.
Piotrek Koszuliński 8 ani în urmă
părinte
comite
4ba3c0ed13

+ 2 - 1
packages/ckeditor5-image/lang/contexts.json

@@ -3,5 +3,6 @@
 	"Side image": "Label for the Side image option.",
 	"Full size image": "Label for the Full size image option.",
 	"Change image text alternative": "Label for the Change image text alternative button.",
-	"Text alternative": "Label for the image text alternative input."
+	"Text alternative": "Label for the image text alternative input.",
+	"Enter image caption": "Placeholder text for image caption displayed when caption is empty."
 }

+ 3 - 3
packages/ckeditor5-image/src/imagecaption/imagecaptionengine.js

@@ -42,6 +42,8 @@ export default class ImageCaptionEngine extends Plugin {
 		const schema = document.schema;
 		const data = editor.data;
 		const editing = editor.editing;
+		const t = editor.t;
+
 		/**
 		 * Last selected caption editable.
 		 * It is used for hiding editable when is empty and image widget is no longer selected.
@@ -50,15 +52,13 @@ export default class ImageCaptionEngine extends Plugin {
 		 * @member {module:engine/view/editableelement~EditableElement} #_lastSelectedCaption
 		 */
 
-		this._viewCaptionsToUpdate = [];
-
 		/**
 		 * Function used to create editable caption element in the editing view.
 		 *
 		 * @private
 		 * @member {Function}
 		 */
-		this._createCaption = captionElementCreator( viewDocument );
+		this._createCaption = captionElementCreator( viewDocument, t( 'Enter image caption' ) );
 
 		// Schema configuration.
 		schema.registerItem( 'caption' );

+ 4 - 1
packages/ckeditor5-image/src/imagecaption/utils.js

@@ -9,6 +9,7 @@
 
 import ModelElement from '@ckeditor/ckeditor5-engine/src/model/element';
 import ViewEditableElement from '@ckeditor/ckeditor5-engine/src/view/editableelement';
+import { attachPlaceholder } from '@ckeditor/ckeditor5-engine/src/view/placeholder';
 import { toWidgetEditable } from '../widget/utils';
 
 const captionSymbol = Symbol( 'imageCaption' );
@@ -17,13 +18,15 @@ const captionSymbol = Symbol( 'imageCaption' );
  * Returns a function that creates caption editable element for the given {@link module:engine/view/document~Document}.
  *
  * @param {module:engine/view/document~Document} viewDocument
+ * @param {String} placeholderText Text to be displayed when caption is empty.
  * @return {Function}
  */
-export function captionElementCreator( viewDocument ) {
+export function captionElementCreator( viewDocument, placeholderText ) {
 	return () => {
 		const editable = new ViewEditableElement( 'figcaption' );
 		editable.document = viewDocument;
 		editable.setCustomProperty( captionSymbol, true );
+		attachPlaceholder( editable, placeholderText );
 
 		return toWidgetEditable( editable );
 	};

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

@@ -101,7 +101,9 @@ describe( 'ImageCaptionEngine', () => {
 				expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
 					'<figure class="image ck-widget" contenteditable="false">' +
 						'<img src="img.png"></img>' +
-						'<figcaption class="ck-editable" contenteditable="true">Foo bar baz.</figcaption>' +
+						'<figcaption class="ck-editable" contenteditable="true" data-placeholder="Enter image caption">' +
+							'Foo bar baz.' +
+						'</figcaption>' +
 					'</figure>'
 				);
 			} );
@@ -112,7 +114,8 @@ describe( 'ImageCaptionEngine', () => {
 				expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
 					'<figure class="image ck-widget" contenteditable="false">' +
 						'<img src="img.png"></img>' +
-						'<figcaption class="ck-editable ck-hidden" contenteditable="true"></figcaption>' +
+						'<figcaption class="ck-placeholder ck-editable ck-hidden" contenteditable="true" data-placeholder="Enter image caption">' +
+						'</figcaption>' +
 					'</figure>'
 				);
 			} );
@@ -158,7 +161,9 @@ describe( 'ImageCaptionEngine', () => {
 				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>' +
+						'<figcaption class="ck-editable" contenteditable="true" data-placeholder="Enter image caption">' +
+							'foo bar' +
+						'</figcaption>' +
 					'</figure>'
 				);
 			} );
@@ -175,8 +180,9 @@ describe( 'ImageCaptionEngine', () => {
 
 				expect( getViewData( viewDocument ) ).to.equal(
 					'[]<figure class="image ck-widget" contenteditable="false">' +
-					'<img src="img.png"></img>' +
-					'<figcaption class="ck-editable ck-hidden" contenteditable="true"></figcaption>' +
+						'<img src="img.png"></img>' +
+						'<figcaption class="ck-editable ck-hidden ck-placeholder" contenteditable="true" data-placeholder="Enter image caption">' +
+						'</figcaption>' +
 					'</figure>'
 				);
 			} );
@@ -194,7 +200,7 @@ describe( 'ImageCaptionEngine', () => {
 				expect( getViewData( viewDocument ) ).to.equal(
 					'[]<figure class="image ck-widget" contenteditable="false">' +
 					'<img src="img.png"></img>' +
-					'<figcaption class="ck-editable" contenteditable="true">baz</figcaption>' +
+						'<figcaption class="ck-editable" contenteditable="true" data-placeholder="Enter image caption">baz</figcaption>' +
 					'</figure>'
 				);
 			} );
@@ -217,7 +223,8 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'[]<figure class="image ck-widget" contenteditable="false">' +
 					'<img alt="" src=""></img>' +
-					'<figcaption class="ck-editable ck-hidden" contenteditable="true"></figcaption>' +
+					'<figcaption class="ck-placeholder ck-editable ck-hidden" contenteditable="true" data-placeholder="Enter image caption">' +
+					'</figcaption>' +
 				'</figure>'
 			);
 		} );
@@ -238,7 +245,9 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'[]<figure class="image ck-widget" contenteditable="false">' +
 					'<img alt="" src=""></img>' +
-					'<figcaption class="ck-editable" contenteditable="true">foo bar</figcaption>' +
+					'<figcaption class="ck-editable" contenteditable="true" data-placeholder="Enter image caption">' +
+						'foo bar' +
+					'</figcaption>' +
 				'</figure>'
 			);
 		} );
@@ -265,7 +274,8 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'[<figure class="image ck-widget ck-widget_selected" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption class="ck-editable" contenteditable="true"></figcaption>' +
+					'<figcaption class="ck-placeholder ck-editable" contenteditable="true" data-placeholder="Enter image caption">' +
+					'</figcaption>' +
 				'</figure>]'
 			);
 		} );
@@ -276,7 +286,8 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'[]<figure class="image ck-widget" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption class="ck-editable ck-hidden" contenteditable="true"></figcaption>' +
+					'<figcaption class="ck-placeholder ck-editable ck-hidden" contenteditable="true" data-placeholder="Enter image caption">' +
+					'</figcaption>' +
 				'</figure>'
 			);
 		} );
@@ -287,7 +298,7 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'[<figure class="image ck-widget ck-widget_selected" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption class="ck-editable" contenteditable="true">foo bar</figcaption>' +
+					'<figcaption class="ck-editable" contenteditable="true" data-placeholder="Enter image caption">foo bar</figcaption>' +
 				'</figure>]'
 			);
 		} );
@@ -302,7 +313,8 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'[]<figure class="image ck-widget" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption class="ck-editable ck-hidden" contenteditable="true"></figcaption>' +
+					'<figcaption class="ck-placeholder ck-editable ck-hidden" contenteditable="true" data-placeholder="Enter image caption">' +
+					'</figcaption>' +
 				'</figure>'
 			);
 		} );
@@ -317,7 +329,9 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'<figure class="image ck-widget" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption class="ck-editable" contenteditable="true">[]</figcaption>' +
+					'<figcaption class="ck-editable ck-placeholder" contenteditable="true" data-placeholder="Enter image caption">' +
+						'[]' +
+					'</figcaption>' +
 				'</figure>'
 			);
 		} );
@@ -334,7 +348,7 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'[<figure class="image ck-widget ck-widget_selected" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption class="ck-editable" contenteditable="true"></figcaption>' +
+					'<figcaption class="ck-editable ck-placeholder" contenteditable="true" data-placeholder="Enter image caption"></figcaption>' +
 				'</figure>]'
 			);
 		} );
@@ -350,11 +364,11 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'<figure class="image ck-widget" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption class="ck-editable" contenteditable="true">foo bar</figcaption>' +
+					'<figcaption class="ck-editable" contenteditable="true" data-placeholder="Enter image caption">foo bar</figcaption>' +
 				'</figure>' +
 				'[<figure class="image ck-widget ck-widget_selected" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption class="ck-editable" contenteditable="true"></figcaption>' +
+					'<figcaption class="ck-placeholder ck-editable" contenteditable="true" data-placeholder="Enter image caption"></figcaption>' +
 				'</figure>]'
 			);
 		} );
@@ -379,7 +393,8 @@ describe( 'ImageCaptionEngine', () => {
 				expect( getViewData( viewDocument ) ).to.equal(
 					'[]<figure class="image ck-widget" contenteditable="false">' +
 						'<img src=""></img>' +
-						'<figcaption class="ck-editable ck-hidden" contenteditable="true"></figcaption>' +
+						'<figcaption class="ck-editable ck-hidden ck-placeholder" contenteditable="true" data-placeholder="Enter image caption">' +
+						'</figcaption>' +
 					'</figure>'
 				);
 
@@ -389,7 +404,9 @@ describe( 'ImageCaptionEngine', () => {
 				expect( getViewData( viewDocument ) ).to.equal(
 					'<figure class="image ck-widget" contenteditable="false">' +
 						'<img src=""></img>' +
-						'<figcaption class="ck-editable" contenteditable="true">{foo bar baz}</figcaption>' +
+						'<figcaption class="ck-editable" contenteditable="true" data-placeholder="Enter image caption">' +
+							'{foo bar baz}' +
+						'</figcaption>' +
 					'</figure>'
 				);
 			} );

+ 6 - 2
packages/ckeditor5-image/tests/imagecaption/utils.js

@@ -19,16 +19,20 @@ describe( 'image captioning utils', () => {
 
 	beforeEach( () => {
 		document = new ViewDocument();
-		const creator = captionElementCreator( document );
+		const creator = captionElementCreator( document, 'placeholder text' );
 		element = creator();
 	} );
 
-	describe( 'editableCaptionCreator', () => {
+	describe( 'captionElementCreator', () => {
 		it( 'should create figcatpion editable element', () => {
 			expect( element ).to.be.instanceOf( ViewEditableElement );
 			expect( element.name ).to.equal( 'figcaption' );
 			expect( isCaption( element ) ).to.be.true;
 		} );
+
+		it( 'should attach placeholder', () => {
+			expect( element.getAttribute( 'data-placeholder' ) ).to.equal( 'placeholder text' );
+		} );
 	} );
 
 	describe( 'isCaptionEditable', () => {