Merge pull request #130 from ckeditor/t/ckeditor5/2003

Feature: Introduced Title plugin. Closes ckeditor/ckeditor5#2003. Closes ckeditor/ckeditor5#2005.

Author: jodator

docs/_snippets/features/title.html

@@ -0,0 +1,48 @@
+<div id="snippet-title">
+</div>
+
+<h3>Console</h3>
+
+<pre><code class="title-console title-console__title">''</code></pre>
+<pre><code class="title-console title-console__body">''</code></pre>
+<pre><code class="title-console title-console__data">''</code></pre>
+
+<style>
+	#title-console {
+		max-height: 300px;
+		overflow: auto;
+		white-space: normal;
+		background: #2b2c26;
+		margin-top: 20px;
+		transition: background-color 500ms;
+	}
+
+	#title-console.updated {
+		background: green;
+	}
+
+	.title-console__title,
+	.title-console__body {
+		margin-bottom: 10px;
+	}
+
+	.title-console__title::before,
+	.title-console__body::before,
+	.title-console__data::before {
+		display: inline-block;
+		margin-right: 5px;
+		opacity: 0.5;
+	}
+
+	.title-console__title::before {
+		content: 'Title:'
+	}
+
+	.title-console__body::before {
+		content: 'Body:'
+	}
+
+	.title-console__data::before {
+		content: 'Data:';
+	}
+</style>

docs/_snippets/features/title.js

@@ -0,0 +1,64 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals console, window, document, setTimeout */
+
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
+import Title from '@ckeditor/ckeditor5-heading/src/title';
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
+
+ClassicEditor.builtinPlugins.push( Title );
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-title' ), {
+		cloudServices: CS_CONFIG
+	} )
+	.then( editor => {
+		window.editor = editor;
+
+		const titlePlugin = editor.plugins.get( 'Title' );
+		const titleConsole = new Console( document.querySelector( '.title-console__title' ) );
+		const bodyConsole = new Console( document.querySelector( '.title-console__body' ) );
+		const dataConsole = new Console( document.querySelector( '.title-console__data' ) );
+
+		editor.model.document.on( 'change:data', () => {
+			titleConsole.update( titlePlugin.getTitle() );
+			bodyConsole.update( titlePlugin.getBody() );
+			dataConsole.update( editor.getData() );
+		} );
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
+class Console {
+	constructor( element ) {
+		this.element = element;
+		this.consoleUpdates = 0;
+		this.previousData = '';
+	}
+
+	update( data ) {
+		if ( this.previousData == data ) {
+			return;
+		}
+
+		this.previousData = data;
+
+		const element = this.element;
+
+		this.consoleUpdates++;
+
+		element.classList.add( 'updated' );
+		element.textContent = `'${ data }'`;
+
+		setTimeout( () => {
+			if ( --this.consoleUpdates == 0 ) {
+				element.classList.remove( 'updated' );
+			}
+		}, 500 );
+	}
+}

docs/features/title.md

@@ -0,0 +1,45 @@
+---
+category: features
+---
+
+# Title
+
+The {@link module:heading/title~Title title} feature adds support for the title field to your document. It makes sure that there will be always a single title field at the beginning of your document.
+
+## Demo
+
+{@snippet features/title}
+
+## Keyboard navigation
+
+Title plugin lets you navigate between title and body elements using <kbd>Tab</kbd> key and back, using <kbd>Shift</kbd> + <kbd>Tab</kbd> (when the selection is at the beginning of the first body element), providing form-like experience. You can also use <kbd>Enter</kbd> and <kbd>Backspace</kbd> keys to move caret between title and body.
+
+## Placeholder integration
+
+Title plugin is integrated with the {@link features/editor-placeholder placeholder} configuration. If you define it, it will be used as the placeholder for the body element.
+
+## Installation
+
+To add this feature to your editor, install the [`@ckeditor/ckeditor5-heading`](https://www.npmjs.com/package/@ckeditor/ckeditor5-heading) package:
+
+```bash
+npm install --save @ckeditor/ckeditor5-heading
+```
+
+Then add the `Title` plugin to your plugin list:
+
+```js
+import Title from '@ckeditor/ckeditor5-heading/src/title';
+
+ClassicEditor
+    .create( document.querySelector( '#editor' ), {
+        plugins: [ Title, ... ]
+    } )
+    .then( ... )
+    .catch( ... );
+```
+
+<info-box info>
+    Read more about {@link builds/guides/integration/installing-plugins installing plugins}.
+</info-box>
+

package.json

@@ -16,12 +16,17 @@
     "@ckeditor/ckeditor5-utils": "^14.0.0"
   },
   "devDependencies": {
+    "@ckeditor/ckeditor5-alignment": "^11.2.0",
+    "@ckeditor/ckeditor5-basic-styles": "^11.1.4",
+    "@ckeditor/ckeditor5-block-quote": "^11.1.3",
+    "@ckeditor/ckeditor5-clipboard": "^12.0.2",
     "@ckeditor/ckeditor5-editor-classic": "^12.1.4",
     "@ckeditor/ckeditor5-engine": "^14.0.0",
     "@ckeditor/ckeditor5-enter": "^11.1.0",
     "@ckeditor/ckeditor5-image": "^14.0.0",
     "@ckeditor/ckeditor5-typing": "^12.2.0",
     "@ckeditor/ckeditor5-undo": "^11.0.5",
+    "@ckeditor/ckeditor5-upload": "^12.0.0",
     "eslint": "^5.5.0",
     "eslint-config-ckeditor5": "^2.0.0",
     "husky": "^1.3.1",