Merge 13e1658 into 76066e6

CHANGELOG.md

@@ -0,0 +1,3 @@
+Changelog
+=========
+

CONTRIBUTING.md

@@ -0,0 +1,4 @@
+Contributing
+========================================
+
+Information about contributing can be found on the following page: <https://github.com/ckeditor/ckeditor5/blob/master/CONTRIBUTING.md>.

LICENSE.md

@@ -0,0 +1,23 @@
+Software License Agreement
+==========================
+
+**Decoupled Editor** – https://github.com/ckeditor/ckeditor5-editor-decoupled <br>
+Copyright (c) 2003-2018, [CKSource](http://cksource.com) Frederico Knabben. All rights reserved.
+
+Licensed under the terms of any of the following licenses at your choice:
+
+* [GNU General Public License Version 2 or later (the "GPL")](http://www.gnu.org/licenses/gpl.html)
+* [GNU Lesser General Public License Version 2.1 or later (the "LGPL")](http://www.gnu.org/licenses/lgpl.html)
+* [Mozilla Public License Version 1.1 or later (the "MPL")](http://www.mozilla.org/MPL/MPL-1.1.html)
+
+You are not required to, but if you want to explicitly declare the license you have chosen to be bound to when using, reproducing, modifying and distributing this software, just include a text file titled "legal.txt" in your version of this software, indicating your license choice. In any case, your choice will not restrict any recipient of your version of this software to use, reproduce, modify and distribute this software under any of the above licenses.
+
+Sources of Intellectual Property Included in CKEditor
+-----------------------------------------------------
+
+Where not otherwise indicated, all CKEditor content is authored by CKSource engineers and consists of CKSource-owned intellectual property. In some specific instances, CKEditor will incorporate work done by developers outside of CKSource with their express permission.
+
+Trademarks
+----------
+
+**CKEditor** is a trademark of [CKSource](http://cksource.com) Frederico Knabben. All other brand and product names are trademarks, registered trademarks or service marks of their respective holders.

README.md

@@ -0,0 +1,25 @@
+CKEditor 5 decoupled editor implementation
+========================================
+
+[![Join the chat at https://gitter.im/ckeditor/ckeditor5](https://badges.gitter.im/ckeditor/ckeditor5.svg)](https://gitter.im/ckeditor/ckeditor5?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+[![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-editor-decoupled.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-editor-decoupled)
+[![Build Status](https://travis-ci.org/ckeditor/ckeditor5-editor-decoupled.svg?branch=master)](https://travis-ci.org/ckeditor/ckeditor5-editor-decoupled)
+[![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=d3hvenZqQVZERFQ5d09FWXdyT0ozVXhLaVltRFRjTTUyZGpvQWNmWVhUUT0tLUZqNlJ1YWRUd0RvdEVOaEptM1B2Q0E9PQ==--c9d3dee40b9b4471ff3fb516d9ecf8d09292c7e0)](https://www.browserstack.com/automate/public-build/d3hvenZqQVZERFQ5d09FWXdyT0ozVXhLaVltRFRjTTUyZGpvQWNmWVhUUT0tLUZqNlJ1YWRUd0RvdEVOaEptM1B2Q0E9PQ==--c9d3dee40b9b4471ff3fb516d9ecf8d09292c7e0)
+[![Coverage Status](https://coveralls.io/repos/github/ckeditor/ckeditor5-editor-decoupled/badge.svg?branch=master)](https://coveralls.io/github/ckeditor/ckeditor5-editor-decoupled?branch=master)
+<br>
+[![Dependency Status](https://david-dm.org/ckeditor/ckeditor5-editor-decoupled/status.svg)](https://david-dm.org/ckeditor/ckeditor5-editor-decoupled)
+[![devDependency Status](https://david-dm.org/ckeditor/ckeditor5-editor-decoupled/dev-status.svg)](https://david-dm.org/ckeditor/ckeditor5-editor-decoupled?type=dev)
+
+The decoupled editor implementation for CKEditor 5.
+
+This package contains the [`DecoupledEditor`](https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/api/module_editor-decoupled_decouplededitor-DecoupledEditor.html) class. Follow there to learn more about this type of editor and how to initialize it.
+
+This package contains the source version of the decoupled editor. This editor implementation is also available in the [TODO build](https://www.npmjs.com/package/@ckeditor/TODO). Read more about [CKEditor 5 Builds](https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/builds/index.html).
+
+## Documentation
+
+See the [`@ckeditor/ckeditor5-editor-decoupled` package](https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/api/editor-decoupled.html) page in [CKEditor 5 documentation](https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/).
+
+## License
+
+Licensed under the GPL, LGPL and MPL licenses, at your choice. For full details about the license, please check the `LICENSE.md` file.

package.json

@@ -0,0 +1,58 @@
+{
+	"name": "@ckeditor/ckeditor5-editor-decoupled",
+	"version": "0.0.1",
+	"description": "Decoupled editor implementation for CKEditor 5.",
+	"keywords": [
+		"ckeditor5",
+		"ckeditor5-editor"
+	],
+	"dependencies": {
+		"@ckeditor/ckeditor5-core": "^1.0.0-alpha.2",
+		"@ckeditor/ckeditor5-engine": "^1.0.0-alpha.2",
+		"@ckeditor/ckeditor5-theme-lark": "^1.0.0-alpha.2",
+		"@ckeditor/ckeditor5-ui": "^1.0.0-alpha.2",
+		"@ckeditor/ckeditor5-utils": "^1.0.0-alpha.2"
+	},
+	"devDependencies": {
+		"@ckeditor/ckeditor5-basic-styles": "^1.0.0-alpha.2",
+		"@ckeditor/ckeditor5-enter": "^1.0.0-alpha.2",
+		"@ckeditor/ckeditor5-heading": "^1.0.0-alpha.2",
+		"@ckeditor/ckeditor5-paragraph": "^1.0.0-alpha.2",
+		"@ckeditor/ckeditor5-typing": "^1.0.0-alpha.2",
+		"@ckeditor/ckeditor5-undo": "^1.0.0-alpha.2",
+		"eslint": "^4.15.0",
+		"eslint-config-ckeditor5": "^1.0.7",
+		"husky": "^0.14.3",
+		"lint-staged": "^6.0.0"
+	},
+	"engines": {
+		"node": ">=6.0.0",
+		"npm": ">=3.0.0"
+	},
+	"author": "CKSource (http://cksource.com/)",
+	"license": "(GPL-2.0 OR LGPL-2.1 OR MPL-1.1)",
+	"homepage": "https://ckeditor5.github.io",
+	"bugs": "https://github.com/ckeditor/ckeditor5-editor-decoupled/issues",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/ckeditor/ckeditor5-editor-decoupled.git"
+	},
+	"files": [
+		"lang",
+		"src",
+		"theme"
+	],
+	"scripts": {
+		"lint": "eslint --quiet '**/*.js'",
+		"precommit": "lint-staged"
+	},
+	"lint-staged": {
+		"**/*.js": [
+			"eslint --quiet"
+		]
+	},
+	"eslintIgnore": [
+		"src/lib/**",
+		"packages/**"
+	]
+}

src/decouplededitor.js

@@ -0,0 +1,246 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module editor-decoupled/decouplededitor
+ */
+
+import Editor from '@ckeditor/ckeditor5-core/src/editor/editor';
+import DataApiMixin from '@ckeditor/ckeditor5-core/src/editor/utils/dataapimixin';
+import HtmlDataProcessor from '@ckeditor/ckeditor5-engine/src/dataprocessor/htmldataprocessor';
+import DecoupledEditorUI from './decouplededitorui';
+import DecoupledEditorUIView from './decouplededitoruiview';
+import mix from '@ckeditor/ckeditor5-utils/src/mix';
+
+/**
+ * The {@glink builds/guides/overview#decoupled-editor decoupled editor} implementation.
+ * It provides an inline editable and a toolbar. However, unlike other editors,
+ * it does not render these components anywhere in DOM unless configured.
+ *
+ * This type of an editor is dedicated for integrations which require a customized UI with an open
+ * structure, allowing developers to specify the exact location of the interface.
+ *
+ * See the document editor {@glink TODO demo} to learn about possible use cases for the decoupled editor.
+ *
+ * In order to create a decoupled editor instance, use the static
+ * {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledEditor.create()`} method.
+ *
+ * The decoupled editor can be used directly from source (if you installed the
+ * [`@ckeditor/ckeditor5-editor-decoupled`](https://www.npmjs.com/package/@ckeditor/ckeditor5-editor-decoupled) package)
+ * but it is also available in the {@glink builds/guides/overview#TODO TODO}.
+ *
+ * {@glink builds/guides/overview Builds} are ready-to-use editors with plugins bundled in. When using the editor from
+ * source you need to take care of loading all plugins by yourself
+ * (through the {@link module:core/editor/editorconfig~EditorConfig#plugins `config.plugins`} option).
+ * Using the editor from source gives much better flexibility and allows easier customization.
+ *
+ * Read more about initializing the editor from source or as a build in
+ * {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledEditor.create()`}.
+ *
+ * @mixes module:core/editor/utils/dataapimixin~DataApiMixin
+ * @implements module:core/editor/editorwithui~EditorWithUI
+ * @extends module:core/editor/editor~Editor
+ */
+export default class DecoupledEditor extends Editor {
+	/**
+	 * Creates an instance of the decoupled editor.
+	 *
+	 * **Note:** do not use the constructor to create editor instances. Use the static
+	 * {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledEditor.create()`} method instead.
+	 *
+	 * @protected
+	 * @param {String} data The data to be loaded into the editor.
+	 * @param {module:core/editor/editorconfig~EditorConfig} config The editor configuration.
+	 */
+	constructor( config ) {
+		super( config );
+
+		this.data.processor = new HtmlDataProcessor();
+
+		this.model.document.createRoot();
+
+		this.ui = new DecoupledEditorUI( this, new DecoupledEditorUIView( this.locale ) );
+	}
+
+	/**
+	 * Destroys the editor instance, releasing all resources used by it.
+	 *
+	 * @returns {Promise}
+	 */
+	destroy() {
+		this.ui.destroy();
+
+		return super.destroy();
+	}
+
+	/**
+	 * Creates a decoupled editor instance.
+	 *
+	 * Creating instance when using the {@glink builds/index CKEditor build}:
+	 *
+	 *		DecoupledEditor
+	 *			.create( '<p>Editor data</p>', {
+	 *				// The location of the toolbar in DOM.
+	 *				toolbarContainer: 'body div.toolbar-container',
+	 *
+	 *				// The location of the editable in DOM.
+	 *				editableContainer: 'body div.editable-container'
+	 *			} )
+	 *			.then( editor => {
+	 *				console.log( 'Editor was initialized', editor );
+	 *			} )
+	 *			.catch( err => {
+	 *				console.error( err.stack );
+	 *			} );
+	 *
+	 * Creating instance when using CKEditor from source (make sure to specify the list of plugins to load and the toolbar):
+	 *
+	 *		import DecoupledEditor from '@ckeditor/ckeditor5-editor-decoupled/src/decouplededitor';
+	 *		import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
+	 *		import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
+	 *		import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
+	 *		import ...
+	 *
+	 *		DecoupledEditor
+	 *			.create( '<p>Editor data</p>', {
+	 *				plugins: [ Essentials, Bold, Italic, ... ],
+	 *				toolbar: [ 'bold', 'italic', ... ],
+	 *
+	 *				// The location of the toolbar in DOM.
+	 *				toolbarContainer: 'div.toolbar-container',
+	 *
+	 *				// The location of the editable in DOM.
+	 *				editableContainer: 'div.editable-container'
+	 *			} )
+	 *			.then( editor => {
+	 *				console.log( 'Editor was initialized', editor );
+	 *			} )
+	 *			.catch( err => {
+	 *				console.error( err.stack );
+	 *			} );
+	 *
+	 * **Note**: {@link module:core/editor/editorconfig~EditorConfig#toolbarContainer `config.toolbarContainer`} and
+	 * {@link module:core/editor/editorconfig~EditorConfig#editableContainer `config.editableContainer`} are optional. It is
+	 * possible to define the location of the UI elements manually once the editor is up and running:
+	 *
+	 *		DecoupledEditor
+	 *			.create( '<p>Editor data</p>' )
+	 *			.then( editor => {
+	 *				console.log( 'Editor was initialized', editor );
+	 *
+	 *				// Append the toolbar and editable straight into the <body> element.
+	 *				document.body.appendChild( editor.ui.view.toolbar.element );
+	 *				document.body.appendChild( editor.ui.view.editable.element );
+	 *			} )
+	 *			.catch( err => {
+	 *				console.error( err.stack );
+	 *			} );
+	 *
+	 * @param {String} data The data to be loaded into the editor.
+	 * @param {module:core/editor/editorconfig~EditorConfig} config The editor configuration.
+	 * @returns {Promise} A promise resolved once the editor is ready.
+	 * The promise returns the created {@link module:editor-decoupled/decouplededitor~DecoupledEditor} instance.
+	 */
+	static create( data, config ) {
+		return new Promise( resolve => {
+			const editor = new this( config );
+
+			resolve(
+				editor.initPlugins()
+					.then( () => {
+						editor.ui.init();
+						editor.fire( 'uiReady' );
+					} )
+					.then( () => editor.editing.view.attachDomRoot( editor.ui.view.editableElement ) )
+					.then( () => editor.data.set( data ) )
+					.then( () => {
+						editor.fire( 'dataReady' );
+						editor.fire( 'ready' );
+					} )
+					.then( () => editor )
+			);
+		} );
+	}
+}
+
+mix( DecoupledEditor, DataApiMixin );
+
+/**
+ * A configuration of the {@link module:editor-decoupled/decouplededitor~DecoupledEditor}.
+ *
+ * When specified, it controls the location of the {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#toolbar}.
+ * It can be defined as a DOM element:
+ *
+ *		DecoupledEditor
+ *			.create( '<p>Hello world!</p>', {
+ *				// Append the toolbar to the <body> element.
+ *				toolbarContainer: document.body
+ *			} )
+ *			.then( editor => {
+ *				console.log( editor );
+ *			} )
+ *			.catch( error => {
+ *				console.error( error );
+ *			} );
+ *
+ * or a selector string corresponding to the CSS selector:
+ *
+ *		DecoupledEditor
+ *			.create( '<p>Hello world!</p>', {
+ *				// Append the toolbar to the <div class="container">...</div>
+ *				toolbarContainer: 'div.container'
+ *			} )
+ *			.then( editor => {
+ *				console.log( editor );
+ *			} )
+ *			.catch( error => {
+ *				console.error( error );
+ *			} );
+ *
+ * **Note**: If not specified, the toolbar must be manually injected into DOM. See
+ * {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledEditor.create()`}
+ * to learn more.
+ *
+ * @member {String|HTMLElement} module:core/editor/editorconfig~EditorConfig#toolbarContainer
+ */
+
+/**
+ * A configuration of the {@link module:editor-decoupled/decouplededitor~DecoupledEditor}.
+ *
+ * When specified, it controls the location of the {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#editable}.
+ * It can be defined as a DOM element:
+ *
+ *		DecoupledEditor
+ *			.create( '<p>Hello world!</p>', {
+ *				// Append the editable to the <body> element.
+ *				editableContainer: document.body
+ *			} )
+ *			.then( editor => {
+ *				console.log( editor );
+ *			} )
+ *			.catch( error => {
+ *				console.error( error );
+ *			} );
+ *
+ * or a selector string corresponding to the CSS selector:
+ *
+ *		DecoupledEditor
+ *			.create( '<p>Hello world!</p>', {
+ *				// Append the editable to the <div class="container">...</div>.
+ *				editableContainer: 'div.container'
+ *			} )
+ *			.then( editor => {
+ *				console.log( editor );
+ *			} )
+ *			.catch( error => {
+ *				console.error( error );
+ *			} );
+ *
+ * **Note**: If not specified, the editable must be manually injected into DOM. See
+ * {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledEditor.create()`}
+ * to learn more.
+ *
+ * @member {String|HTMLElement} module:core/editor/editorconfig~EditorConfig#editableContainer
+ */