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 #130 from ckeditor/t/ckeditor5/2003
Browse files Browse the repository at this point in the history
Feature: Introduced Title plugin. Closes ckeditor/ckeditor5#2003. Closes ckeditor/ckeditor5#2005.
  • Loading branch information
jodator authored Sep 5, 2019
2 parents b895460 + fbba254 commit a65c0ac
Show file tree
Hide file tree
Showing 9 changed files with 1,527 additions and 0 deletions.
48 changes: 48 additions & 0 deletions docs/_snippets/features/title.html
Original file line number Diff line number Diff line change
@@ -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>
64 changes: 64 additions & 0 deletions docs/_snippets/features/title.js
Original file line number Diff line number Diff line change
@@ -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 );
}
}
45 changes: 45 additions & 0 deletions docs/features/title.md
Original file line number Diff line number Diff line change
@@ -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>

5 changes: 5 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Loading

0 comments on commit a65c0ac

Please sign in to comment.