Merge pull request #2 from ckeditor/t/1

Feature: Introduced Inline Editor. Closes: #1.

package.json

@@ -4,9 +4,16 @@
   "description": "Inline editor for CKEditor 5.",
   "keywords": [],
   "dependencies": {
+    "@ckeditor/ckeditor5-core": "*",
+    "@ckeditor/ckeditor5-engine": "*",
+    "@ckeditor/ckeditor5-ui": "*",
+    "@ckeditor/ckeditor5-utils": "*"
   },
   "devDependencies": {
+    "@ckeditor/ckeditor5-basic-styles": "*",
     "@ckeditor/ckeditor5-dev-lint": "^2.0.0",
+    "@ckeditor/ckeditor5-paragraph": "*",
+    "@ckeditor/ckeditor5-presets": "*",
     "gulp": "^3.9.0",
     "guppy-pre-commit": "^0.4.0"
   },

src/inline.js

@@ -0,0 +1,87 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module editor-inline/inline
+ */
+
+import StandardEditor from '@ckeditor/ckeditor5-core/src/editor/standardeditor';
+import HtmlDataProcessor from '@ckeditor/ckeditor5-engine/src/dataprocessor/htmldataprocessor';
+import InlineEditorUI from './inlineeditorui';
+import InlineEditorUIView from './inlineeditoruiview';
+
+import '../theme/theme.scss';
+
+/**
+ * Inline editor. Uses an inline editable and a floating toolbar.
+ *
+ * @extends module:core/editor/standardeditor~StandardEditor
+ */
+export default class InlineEditor extends StandardEditor {
+	/**
+	 * Creates an instance of the inline editor.
+	 *
+	 * @param {HTMLElement} element The DOM element that will be the source for the created editor.
+	 * @param {Object} config The editor configuration.
+	 */
+	constructor( element, config ) {
+		super( element, config );
+
+		this.document.createRoot();
+		this.data.processor = new HtmlDataProcessor();
+		this.ui = new InlineEditorUI( this, new InlineEditorUIView( this.locale, element ) );
+	}
+
+	/**
+	 * Destroys the editor instance, releasing all resources used by it.
+	 *
+	 * Updates the original editor element with the data.
+	 *
+	 * @returns {Promise}
+	 */
+	destroy() {
+		this.updateEditorElement();
+
+		return this.ui.destroy()
+			.then( () => super.destroy() );
+	}
+
+	/**
+	 * Creates an inline editor instance.
+	 *
+	 *		InlineEditor.create( document.querySelector( '#editor' ), {
+	 *			plugins: [ Delete, Enter, Typing, Paragraph, Undo, Bold, Italic ],
+	 *			toolbar: [ 'bold', 'italic', 'undo', 'redo' ]
+	 *		} )
+	 *		.then( editor => {
+	 *			console.log( 'Editor was initialized', editor );
+	 *		} )
+	 *		.catch( err => {
+	 *			console.error( err.stack );
+	 *		} );
+	 *
+	 * @param {HTMLElement} element See {@link module:editor-inline/inline~InlineEditor#constructor}'s parameters.
+	 * @param {Object} config See {@link module:editor-inline/inline~InlineEditor#constructor}'s parameters.
+	 * @returns {Promise} A promise resolved once the editor is ready.
+	 * @returns {module:core/editor/standardeditor~StandardEditor} return.editor The editor instance.
+	 */
+	static create( element, config ) {
+		return new Promise( ( resolve ) => {
+			const editor = new InlineEditor( element, config );
+
+			resolve(
+				editor.initPlugins()
+					.then( () => editor.ui.init() )
+					.then( () => editor.fire( 'uiReady' ) )
+					.then( () => editor.loadDataFromEditorElement() )
+					.then( () => {
+						editor.fire( 'dataReady' );
+						editor.fire( 'ready' );
+					} )
+					.then( () => editor )
+			);
+		} );
+	}
+}

src/inlineeditorui.js

@@ -0,0 +1,93 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module editor-inline/inlineeditorui
+ */
+
+import ComponentFactory from '@ckeditor/ckeditor5-ui/src/componentfactory';
+import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
+import enableToolbarKeyboardFocus from '@ckeditor/ckeditor5-ui/src/toolbar/enabletoolbarkeyboardfocus';
+
+/**
+ * The inline editor UI class.
+ *
+ * @implements module:core/editor/editorui~EditorUI
+ */
+export default class InlineEditorUI {
+	/**
+	 * Creates an instance of the editor UI class.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor The editor instance.
+	 * @param {module:ui/editorui/editoruiview~EditorUIView} view View of the ui.
+	 */
+	constructor( editor, view ) {
+		/**
+		 * @inheritDoc
+		 */
+		this.editor = editor;
+
+		/**
+		 * @inheritDoc
+		 */
+		this.view = view;
+
+		/**
+		 * @inheritDoc
+		 */
+		this.componentFactory = new ComponentFactory( editor );
+
+		/**
+		 * @inheritDoc
+		 */
+		this.focusTracker = new FocusTracker();
+
+		// Set–up the view#panel.
+		view.panel.bind( 'isActive' ).to( this.focusTracker, 'isFocused' );
+		view.panel.targetElement = view.editableElement;
+
+		// Setup the editable.
+		const editingRoot = editor.editing.createRoot( view.editableElement );
+		view.editable.bind( 'isReadOnly' ).to( editingRoot );
+
+		// Bind to focusTracker instead of editor.editing.view because otherwise
+		// focused editable styles disappear when view#toolbar is focused.
+		view.editable.bind( 'isFocused' ).to( this.focusTracker );
+		view.editable.name = editingRoot.rootName;
+
+		this.focusTracker.add( view.editableElement );
+	}
+
+	/**
+	 * Initializes the UI.
+	 *
+	 * @returns {Promise} A Promise resolved when the initialization process is finished.
+	 */
+	init() {
+		const editor = this.editor;
+
+		return this.view.init()
+			.then( () => {
+				return this.view.toolbar.fillFromConfig( editor.config.get( 'toolbar' ), this.componentFactory );
+			} )
+			.then( () => {
+				enableToolbarKeyboardFocus( {
+					origin: editor.editing.view,
+					originFocusTracker: this.focusTracker,
+					originKeystrokeHandler: editor.keystrokes,
+					toolbar: this.view.toolbar
+				} );
+			} );
+	}
+
+	/**
+	 * Destroys the UI.
+	 *
+	 * @returns {Promise} A Promise resolved when the destruction process is finished.
+	 */
+	destroy() {
+		return this.view.destroy();
+	}
+}

src/inlineeditoruiview.js

@@ -0,0 +1,78 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module editor-inline/inlineeditoruiview
+ */
+
+import EditorUIView from '@ckeditor/ckeditor5-ui/src/editorui/editoruiview';
+import InlineEditableUIView from '@ckeditor/ckeditor5-ui/src/editableui/inline/inlineeditableuiview';
+import FloatingPanelView from '@ckeditor/ckeditor5-ui/src/panel/floating/floatingpanelview';
+import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
+import Template from '@ckeditor/ckeditor5-ui/src/template';
+
+/**
+ * Inline editor UI view. Uses inline editable and floating toolbar.
+ *
+ * @extends module:ui/editorui/editoruiview~EditorUIView
+ */
+export default class InlineEditorUIView extends EditorUIView {
+	/**
+	 * Creates an instance of the inline editor UI view.
+	 *
+	 * @param {module:utils/locale~Locale} locale The {@link module:core/editor/editor~Editor#locale} instance.
+	 */
+	constructor( locale, editableElement ) {
+		super( locale );
+
+		/**
+		 * A floating toolbar view instance.
+		 *
+		 * @readonly
+		 * @member {module:ui/toolbar/toolbarview~ToolbarView}
+		 */
+		this.toolbar = new ToolbarView( locale );
+
+		/**
+		 * A floating panel view instance.
+		 *
+		 * @readonly
+		 * @member {module:ui/panel/floating/floatingpanelview~FloatingPanelView}
+		 */
+		this.panel = new FloatingPanelView( locale );
+
+		Template.extend( this.panel.template, {
+			attributes: {
+				class: 'ck-toolbar__container'
+			}
+		} );
+
+		/**
+		 * Editable UI view.
+		 *
+		 * @readonly
+		 * @member {module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView}
+		 */
+		this.editable = new InlineEditableUIView( locale, editableElement );
+
+		this.body.add( this.panel );
+		this.addChildren( this.editable );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		return super.init()
+			.then( () => this.panel.content.add( this.toolbar ) );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	get editableElement() {
+		return this.editable.element;
+	}
+}

tests/.jshintrc

@@ -0,0 +1,22 @@
+{
+  "esnext": true,
+  "expr": true,
+  "immed": true,
+  "loopfunc": true,
+  "noarg": true,
+  "nonbsp": true,
+  "strict": "implied",
+  "undef": true,
+  "unused": true,
+  "varstmt": true,
+  "globals": {
+    "after": false,
+    "afterEach": false,
+    "before": false,
+    "beforeEach": false,
+    "describe": false,
+    "expect": false,
+    "it": false,
+    "sinon": false
+  }
+}