Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

Commit

Permalink
Merge pull request #82 from ckeditor/t/71
Browse files Browse the repository at this point in the history 
Feature: Added "Enter caption here" placeholders to empty image captions. Closes #71.
  • Loading branch information
@Reinmar
Reinmar authored Mar 30, 2017
2 parents aae2957 + 92b3b1a commit 3818544
Show file tree
Hide file tree
Showing 5 changed files with 50 additions and 25 deletions.
3 changes: 2 additions & 1 deletion lang/contexts.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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."
}
6 changes: 3 additions & 3 deletions src/imagecaption/imagecaptionengine.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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' );
Expand Down
5 changes: 4 additions & 1 deletion src/imagecaption/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' );
Expand All @@ -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 );
};
Expand Down
53 changes: 35 additions & 18 deletions tests/imagecaption/imagecaptionengine.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>'
);
} );
Expand All @@ -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>'
);
} );
Expand Down Expand Up @@ -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>'
);
} );
Expand All @@ -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>'
);
} );
Expand All @@ -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>'
);
} );
Expand All @@ -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>'
);
} );
Expand All @@ -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>'
);
} );
Expand All @@ -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>]'
);
} );
Expand All @@ -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>'
);
} );
Expand All @@ -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>]'
);
} );
Expand All @@ -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>'
);
} );
Expand All @@ -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>'
);
} );
Expand All @@ -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>]'
);
} );
Expand All @@ -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>]'
);
} );
Expand All @@ -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>'
);

Expand All @@ -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>'
);
} );
Expand Down
8 changes: 6 additions & 2 deletions tests/imagecaption/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down

0 comments on commit 3818544

Please sign in to comment.