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

Introduce configuration option to overwrite title placeholder text.

Piotr Jasiun 6 лет назад
Родитель
Сommit
3f7808990a

+ 14 - 1
packages/ckeditor5-heading/docs/features/title.md

@@ -19,7 +19,20 @@ The title plugin lets you move from the title to the body element using the <kbd
 
 The title plugin is integrated with the {@link features/editor-placeholder placeholder} configuration. If you define it, the placeholder text will be used for the body element.
 
-At the moment the placeholder of the title section is hardcoded. If you would like it to be configurable, add 👍 to the [relevant issue on GitHub](https://github.com/ckeditor/ckeditor5/issues/2020).
+To change the title placeholder use: `title.placeholder` configuration option. For instance:
+
+```js
+ClassicEditor
+    .create( document.querySelector( '#editor' ), {
+        plugins: [ Title, ... ],
+        title: {
+            placeholder: 'My custom placeholder for the title'
+        },
+        placeholder: 'My custom placeholder for the body'
+    } )
+    .then( ... )
+    .catch( ... );
+```
 
 ## Installation
 

+ 37 - 2
packages/ckeditor5-heading/src/title.js

@@ -321,8 +321,8 @@ export default class Title extends Plugin {
 		const view = editor.editing.view;
 		const viewRoot = view.document.getRoot();
 
-		const bodyPlaceholder = editor.config.get( 'placeholder' ) || t( 'Body' );
-		const titlePlaceholder = t( 'Title' );
+		const titlePlaceholder = editor.config.get( 'title.placeholder' ) || t( 'Type your title' );
+		const bodyPlaceholder = editor.config.get( 'placeholder' ) || t( 'Type or paste your content here.' );
 
 		// Attach placeholder to the view title element.
 		editor.editing.downcastDispatcher.on( 'insert:title-content', ( evt, data, conversionApi ) => {
@@ -549,3 +549,38 @@ function shouldRemoveLastParagraph( placeholder, root ) {
 
 	return true;
 }
+
+/**
+ * The configuration of the {@link module:heading/title~Title title feature}.
+ *
+ * Read more in {@link module:heading/title~TitleConfig}.
+ *
+ * @member {module:heading/title~TitleConfig} module:core/editor/editorconfig~EditorConfig#title
+ */
+
+/**
+ * The configuration of the {@link module:heading/title~Title title feature}.
+ *
+ *		ClassicEditor
+ *			.create( document.querySelector( '#editor' ), {
+ *				plugins: [ Title, ... ],
+ *				title: {
+ *					placeholder: 'My custom placeholder for the title'
+ *				},
+ *				placeholder: 'My custom placeholder for the body'
+ *			} )
+ *			.then( ... )
+ *			.catch( ... );
+ *
+ * See {@link module:core/editor/editorconfig~EditorConfig all editor configuration options}.
+ *
+ * @interface TitleConfig
+ */
+
+/**
+ * Use this option to define custom value of the placeholder of the title field.
+ *
+ * Read more in {@link module:heading/title~TitleConfig}.
+ *
+ * @member {String} module:heading/title~TitleConfig#placeholder
+ */

+ 4 - 1
packages/ckeditor5-heading/tests/manual/title.html

@@ -1,2 +1,5 @@
-<div id="editor">
+<div id="editor1">
+</div>
+<hr>
+<div id="editor2">
 </div>

+ 17 - 1
packages/ckeditor5-heading/tests/manual/title.js

@@ -19,7 +19,7 @@ import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
 import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
 
 ClassicEditor
-	.create( document.querySelector( '#editor' ), {
+	.create( document.querySelector( '#editor1' ), {
 		plugins: [ Enter, Typing, Undo, Heading, Title, Clipboard, Image, ImageUpload, Bold, Alignment ],
 		toolbar: [ 'heading', '|', 'undo', 'redo', 'bold', 'imageUpload', 'alignment' ]
 	} )
@@ -31,3 +31,19 @@ ClassicEditor
 	.catch( err => {
 		console.error( err.stack );
 	} );
+
+ClassicEditor
+	.create( document.querySelector( '#editor2' ), {
+		plugins: [ Enter, Typing, Undo, Heading, Title, Clipboard, Image, ImageUpload, Bold, Alignment ],
+		toolbar: [ 'heading', '|', 'undo', 'redo', 'bold', 'imageUpload', 'alignment' ],
+		placeholder: 'Custom body placeholder',
+		title: {
+			placeholder: 'Custom title placeholder'
+		}
+	} )
+	.then( editor => {
+		editor.plugins.get( 'FileRepository' ).createUploadAdapter = loader => new UploadAdapterMock( loader );
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 8 - 1
packages/ckeditor5-heading/tests/manual/title.md

@@ -1,6 +1,13 @@
+Note: use any editor if not specified.
+
+### Placeholder
+
+- make sure that the first editor has default placeholders: `Type your title` and `Type or paste your content here.`
+- make sure that the second editor has custom placeholders: `Custom title placeholder` and `Custom body placeholder`.
+
 ## Title feature
 
-- you should see `Title` and `Body` placeholders when there is no text in any of the sections.
+- you should see placeholders when there is no text in any of the sections.
 - you should be able to put the selection to the both sections and jump between them using `Shift` and `Tab+Shift`.
 
 ### Prevent extra paragraphing (typing)

+ 39 - 19
packages/ckeditor5-heading/tests/title.js

@@ -547,8 +547,8 @@ describe( 'Title', () => {
 			const title = viewRoot.getChild( 0 );
 			const body = viewRoot.getChild( 1 );
 
-			expect( title.getAttribute( 'data-placeholder' ) ).to.equal( 'Title' );
-			expect( body.getAttribute( 'data-placeholder' ) ).to.equal( 'Body' );
+			expect( title.getAttribute( 'data-placeholder' ) ).to.equal( 'Type your title' );
+			expect( body.getAttribute( 'data-placeholder' ) ).to.equal( 'Type or paste your content here.' );
 
 			expect( title.hasClass( 'ck-placeholder' ) ).to.equal( false );
 			expect( body.hasClass( 'ck-placeholder' ) ).to.equal( false );
@@ -563,8 +563,8 @@ describe( 'Title', () => {
 			const title = viewRoot.getChild( 0 );
 			const body = viewRoot.getChild( 1 );
 
-			expect( title.getAttribute( 'data-placeholder' ) ).to.equal( 'Title' );
-			expect( body.getAttribute( 'data-placeholder' ) ).to.equal( 'Body' );
+			expect( title.getAttribute( 'data-placeholder' ) ).to.equal( 'Type your title' );
+			expect( body.getAttribute( 'data-placeholder' ) ).to.equal( 'Type or paste your content here.' );
 
 			expect( title.hasClass( 'ck-placeholder' ) ).to.equal( true );
 			expect( body.hasClass( 'ck-placeholder' ) ).to.equal( true );
@@ -579,7 +579,7 @@ describe( 'Title', () => {
 
 			const body = viewRoot.getChild( 1 );
 
-			expect( body.getAttribute( 'data-placeholder' ) ).to.equal( 'Body' );
+			expect( body.getAttribute( 'data-placeholder' ) ).to.equal( 'Type or paste your content here.' );
 			expect( body.hasClass( 'ck-placeholder' ) ).to.equal( false );
 		} );
 
@@ -639,36 +639,56 @@ describe( 'Title', () => {
 
 			bodyDomElement = domConverter.mapViewToDom( viewRoot.getChild( 1 ) );
 
-			expect( bodyDomElement.dataset.placeholder ).to.equal( 'Body' );
+			expect( bodyDomElement.dataset.placeholder ).to.equal( 'Type or paste your content here.' );
 			expect( bodyDomElement.classList.contains( 'ck-placeholder' ) ).to.equal( true );
 
 			editor.execute( 'undo' );
 
 			bodyDomElement = domConverter.mapViewToDom( viewRoot.getChild( 1 ) );
 
-			expect( bodyDomElement.dataset.placeholder ).to.equal( 'Body' );
+			expect( bodyDomElement.dataset.placeholder ).to.equal( 'Type or paste your content here.' );
 			expect( bodyDomElement.classList.contains( 'ck-placeholder' ) ).to.equal( false );
 		} );
 
-		it( 'should use placeholder defined through EditorConfig as a Body placeholder', () => {
-			const element = document.createElement( 'div' );
-			document.body.appendChild( element );
+		describe( 'custom placeholder', () => {
+			let element, editor, model;
 
-			return ClassicTestEditor.create( element, {
-				plugins: [ Title ],
-				placeholder: 'Custom editor placeholder'
-			} ).then( editor => {
+			beforeEach( () => {
+				element = document.createElement( 'div' );
+				document.body.appendChild( element );
+
+				return ClassicTestEditor.create( element, {
+					plugins: [ Title, Heading, BlockQuote, Clipboard, Image, ImageUpload, Enter, Undo ],
+					title: {
+						placeholder: 'foo'
+					},
+					placeholder: 'bar'
+				} ).then( _editor => {
+					editor = _editor;
+					model = editor.model;
+				} );
+			} );
+
+			afterEach( () => {
+				return editor.destroy().then( () => element.remove() );
+			} );
+
+			it( 'should show custom placeholder in title and body', () => {
 				const viewRoot = editor.editing.view.document.getRoot();
+
+				setData( model,
+					'<title><title-content></title-content></title>' +
+					'<paragraph></paragraph>'
+				);
+
 				const title = viewRoot.getChild( 0 );
 				const body = viewRoot.getChild( 1 );
 
-				expect( title.getAttribute( 'data-placeholder' ) ).to.equal( 'Title' );
-				expect( title.hasClass( 'ck-placeholder' ) ).to.equal( true );
+				expect( title.getAttribute( 'data-placeholder' ) ).to.equal( 'foo' );
+				expect( body.getAttribute( 'data-placeholder' ) ).to.equal( 'bar' );
 
-				expect( body.getAttribute( 'data-placeholder' ) ).to.equal( 'Custom editor placeholder' );
+				expect( title.hasClass( 'ck-placeholder' ) ).to.equal( true );
 				expect( body.hasClass( 'ck-placeholder' ) ).to.equal( true );
-
-				return editor.destroy().then( () => element.remove() );
 			} );
 		} );
 	} );