Merge pull request #116 from ckeditor/t/115

Fix: Removed `StandardEditor` class in favor of `DataInterface` and `ElementInterface` mixins. Added `EditorWithUI` interface. Closes #115. Closes #113. Closes ckeditor/ckeditor5#303.

BREAKING CHANGE: `StandardEditor` class is removed. Use `Editor` class with `DataInterface` and `ElementInterface` mixins.

src/editingkeystrokehandler.js

@@ -11,7 +11,7 @@ import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 
 /**
  * A keystroke handler for editor editing. Its instance is available
- * in {@link module:core/editor/standardeditor~StandardEditor#keystrokes} so plugins
+ * in {@link module:core/editor/editor~Editor#keystrokes} so plugins
  * can register their keystrokes.
  *
  * E.g. an undo plugin would do this:

src/editor/editor.js

@@ -20,11 +20,13 @@ import ObservableMixin from '@ckeditor/ckeditor5-utils/src/observablemixin';
 import mix from '@ckeditor/ckeditor5-utils/src/mix';
 
 /**
- * Class representing the base of the editor. It is the API all plugins can expect to get when using editor property.
- * Editors implementation (like Classic Editor or Inline Editor) should extend this class. They can add their own
- * methods and properties.
+ * Class representing the base of the editor. It is the API all plugins can expect to get when using `editor` property.
+ * It should be enough to implement editing part of feature (schema definition, conversion, commands, keystrokes, etc.).
+ * However it does not define editor UI, which is defined in {@link module:core/editor/editorwithui~EditorWithUI}.
  *
- * See also {@link module:core/editor/standardeditor~StandardEditor}.
+ * All editors implementation (like {@link module:editor-classic/classiceditor~ClassicEditor} or
+ * {@link module:editor-inline/inlineeditor~InlineEditor}) should extend this class. They can add their
+ * own methods and properties.
  *
  * @mixes module:utils/observablemixin~ObservableMixin
  */
@@ -98,9 +100,6 @@ export default class Editor {
 		 */
 		this.model = new Model();
 
-		// Creates main root.
-		this.model.document.createRoot();
-
 		/**
 		 * The {@link module:engine/controller/datacontroller~DataController data controller}.
 		 * Used e.g. for setting or retrieving editor data.
@@ -232,12 +231,6 @@ mix( Editor, ObservableMixin );
  * @event pluginsReady
  */
 
-/**
- * Fired when the editor UI is ready. This event won't be fired if the editor has no UI.
- *
- * @event uiReady
- */
-
 /**
  * Fired when the data loaded to the editor is ready. If a specific editor doesn't load
  * any data initially, this event will be fired right before {@link #event:ready}.
@@ -246,7 +239,7 @@ mix( Editor, ObservableMixin );
  */
 
 /**
- * Fired when {@link #event:pluginsReady plugins}, {@link #event:uiReady UI} and {@link #event:dataReady data} and all additional
+ * Fired when {@link #event:pluginsReady plugins}, and {@link #event:dataReady data} and all additional
  * editor components are ready.
  *
  * Note: This event is most useful for plugin developers. When integrating the editor with your website or

src/editor/editorwithui.jsdoc

@@ -0,0 +1,31 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module core/editor/editorwithui
+ */
+
+/**
+ * Interface defining UI part of the editor. Most editor (like {@link module:editor-classic/classiceditor~ClassicEditor} or
+ * {@link module:editor-inline/inlineeditor~InlineEditor}) implements this interface, however it is not required to do so. Editors with external UI (i.e. Bootstrap based) or headless editor may not implement this interface. Keep it in mind when developing features.
+ *
+ * @interface EditorWithUI
+ */
+
+/**
+ * Editor UI instance.
+ *
+ * @readonly
+ * @member {module:core/editor/editorui~EditorUI} #ui
+ */
+
+/**
+ * Fired when the editor UI is ready.
+ *
+ * Fired after {@link module:core/editor/editor~Editor#event:pluginsReady}, before
+ * {@link module:core/editor/editor~Editor#event:dataReady}.
+ *
+ * @event uiReady
+ */

src/editor/utils/attachtoform.js

@@ -0,0 +1,63 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import isFunction from '@ckeditor/ckeditor5-utils/src/lib/lodash/isFunction';
+import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
+
+/**
+ * @module core/editor/utils/attachtoform
+ */
+
+/**
+ * Checks if editor is initialized on textarea element that belongs to a form. If yes - updates editor's element
+ * contents before submitting the form.
+ *
+ * This helper requires {@link module:core/editor/utils/elementapimixin~ElementApi ElementApi interface}.
+ *
+ * @param {module:core/editor/editor~Editor} editor Editor instance.
+ */
+export default function attachToForm( editor ) {
+	if ( !isFunction( editor.updateElement ) ) {
+		/**
+		 * {@link module:core/editor/utils/elementapimixin~ElementApi ElementApi interface} is required.
+		 *
+		 * @error attachtoform-missing-elementapi-interface
+		 */
+		throw new CKEditorError( 'attachtoform-missing-elementapi-interface: ElementApi interface is required.' );
+	}
+
+	const element = editor.element;
+
+	// Only when replacing a textarea which is inside of a form element.
+	if ( element && element.tagName.toLowerCase() === 'textarea' && element.form ) {
+		let originalSubmit;
+		const form = element.form;
+		const onSubmit = () => editor.updateElement();
+
+		// Replace the original form#submit() to call a custom submit function first.
+		// Check if #submit is a function because the form might have an input named "submit".
+		if ( isFunction( form.submit ) ) {
+			originalSubmit = form.submit;
+
+			form.submit = () => {
+				onSubmit();
+				originalSubmit.apply( form );
+			};
+		}
+
+		// Update the replaced textarea with data before each form#submit event.
+		form.addEventListener( 'submit', onSubmit );
+
+		// Remove the submit listener and revert the original submit method on
+		// editor#destroy.
+		editor.on( 'destroy', () => {
+			form.removeEventListener( 'submit', onSubmit );
+
+			if ( originalSubmit ) {
+				form.submit = originalSubmit;
+			}
+		} );
+	}
+}

src/editor/utils/dataapimixin.js

@@ -0,0 +1,53 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module core/editor/utils/dataapimixin
+ */
+
+/**
+ * Implementation of the {@link module:core/editor/utils/dataapimixin~DataApi}.
+ *
+ * @mixin DataApiMixin
+ * @implements module:core/editor/utils/dataapimixin~DataApi
+ */
+const DataApiMixin = {
+	/**
+	 * @inheritDoc
+	 */
+	setData( data ) {
+		this.data.set( data );
+	},
+
+	/**
+	 * @inheritDoc
+	 */
+	getData() {
+		return this.data.get();
+	}
+};
+
+export default DataApiMixin;
+
+/**
+ * Mixin provides methods for setting and getting data to/from editor main root element of the model tree
+ * using {@link module:core/editor/editor~Editor#data data pipeline}.
+ *
+ * @interface DataApi
+ */
+
+/**
+ * Sets the data in the editor's main root.
+ *
+ * @method #setData
+ * @param {String} data Input data.
+ */
+
+/**
+ * Gets the data from the editor's main root.
+ *
+ * @method #getData
+ * @returns {String} Output data.
+ */