@ckeditor/ckeditor5-core 30.0.0

package/src/editor/editorconfig.jsdoc

@@ -0,0 +1,325 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module core/editor/editorconfig
+ */
+
+/**
+ * CKEditor configuration options.
+ *
+ * An object defining the editor configuration can be passed when initializing the editor:
+ *
+ *		EditorClass
+ *			.create( {
+ * 				toolbar: [ 'bold', 'italic' ],
+ *				image: {
+ *					styles: [
+ *						...
+ *					]
+ *				}
+ * 			} )
+ *			.then( ... )
+ *			.catch( ... );
+ *
+ * Check the {@glink builds/guides/integration/configuration Configuration guide} for more information
+ * about setting configuration options.
+ *
+ * @interface EditorConfig
+ */
+
+/**
+ * The initial editor data to be used instead of the provided element's HTML content.
+ *
+ *		ClassicEditor
+ *			.create( document.querySelector( '#editor' ), {
+ *				initialData: '<h2>Initial data</h2><p>Foo bar.</p>'
+ *			} )
+ *			.then( ... )
+ *			.catch( ... );
+ *
+ * By default, the editor is initialized with the content of the element on which this editor is initialized.
+ * See {@link module:core/editor/editor~Editor.create Editor.create()}.
+ *
+ * This configuration option lets you override initial data if an element is passed to `Editor.create()`.
+ * It is especially useful if it is difficult for your integration to put the data inside the HTML element.
+ *
+ * **Note:** If initial data is passed to `Editor.create()` as a parameter and, at the same time, via this configuration option,
+ * an error will be thrown as those two options exclude themselves.
+ *
+ * @member {String} module:core/editor/editorconfig~EditorConfig#initialData
+ */
+
+/**
+ * The `config.initialData` option cannot be used together with initial data passed as the first parameter of
+ * {@link module:core/editor/editor~Editor.create `Editor.create()`}.
+ *
+ * @error editor-create-initial-data
+ */
+
+/**
+ * The list of plugins to load.
+ *
+ * If you use an {@glink builds/guides/overview editor build} you can define the list of plugins to load
+ * using the names of plugins that are available:
+ *
+ *		const config = {
+ *			plugins: [ 'Bold', 'Italic', 'Typing', 'Enter', ... ]
+ *		};
+ *
+ * You can check the list of plugins available in a build using this snippet:
+ *
+ *		ClassicEditor.builtinPlugins.map( plugin => plugin.pluginName );
+ *
+ * If you use an editor creator directly (imported from a package like `@ckeditor/ckeditor5-editor-classic`) or you
+ * want to load additional plugins which were not included in a build you use, then you need to specify
+ * the plugins using their constructors:
+ *
+ *		// A preset of plugins is a plugin as well.
+ *		import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
+ *		// The bold plugin.
+ *		import Bold from '@ckeditor/ckeditor5-editor-basic-styles/src/bold';
+ *
+ *		const config = {
+ *			plugins: [ Essentials, Bold ]
+ *		};
+ *
+ * **Note:** To load additional plugins, you should use the {@link #extraPlugins `extraPlugins`} configuration.
+ * To narrow the list of loaded plugins, use the {@link #removePlugins `removePlugins`} configuration.
+ *
+ * @member {Array.<String|Function>} module:core/editor/editorconfig~EditorConfig#plugins
+ */
+
+/**
+ * The list of additional plugins to load along those already available in the
+ * {@glink builds/guides/overview editor build}. It extends the {@link #plugins `plugins`} configuration.
+ *
+ *		function MyPlugin( editor ) {
+ *			// ...
+ *		}
+ *
+ *		const config = {
+ *			extraPlugins: [ MyPlugin ]
+ *		};
+ *
+ * **Note:** This configuration works only for simple plugins which utilize the
+ * {@link module:core/plugin~PluginInterface plugin interface} and have no dependencies. To extend a
+ * build with complex features, create a {@glink builds/guides/development/custom-builds custom build}.
+ *
+ * **Note:** Make sure you include the new features in you toolbar configuration. Learn more
+ * about the {@glink features/toolbar/toolbar toolbar setup}.
+ *
+ * @member {Array.<Function>} module:core/editor/editorconfig~EditorConfig#extraPlugins
+ */
+
+/**
+ * The list of plugins which should not be loaded despite being available in an {@glink builds/guides/overview editor build}.
+ *
+ *		const config = {
+ *			removePlugins: [ 'Bold', 'Italic' ]
+ *		};
+ *
+ * **Note:** Be careful when removing plugins using `config.removePlugins` from CKEditor builds.
+ * If removed plugins were providing toolbar buttons, the default toolbar configuration included in a build
+ * will become invalid. In such case you need to provide the updated
+ * {@link module:core/editor/editorconfig~EditorConfig#toolbar toolbar configuration}.
+ *
+ * @member {Array.<String|Function>} module:core/editor/editorconfig~EditorConfig#removePlugins
+ */
+
+/**
+ * The editor toolbar configuration.
+ *
+ * Simple format (specifies only toolbar items):
+ *
+ *		const config = {
+ *			toolbar: [ 'bold', 'italic', '|', 'undo', 'redo' ]
+ *		};
+ *
+ * Extended format:
+ *
+ *		const config = {
+ *			toolbar: {
+ *				items: [ 'bold', 'italic', '|', 'undo', 'redo', '-', 'numberedList', 'bulletedList' ],
+ *
+ *				shouldNotGroupWhenFull: true
+ *			}
+ *		};
+ *
+ * Options which can be set using the extended format:
+ *
+ * * **`toolbar.items`** &ndash; An array of toolbar item names. The components (buttons, dropdowns, etc.) which can be used
+ * as toolbar items are defined in `editor.ui.componentFactory` and can be listed using the following snippet:
+ *
+ *		Array.from( editor.ui.componentFactory.names() );
+ *
+ *	You can also use `'|'` to create a separator between groups of items:
+ *
+ *		toolbar: [ 'bold', 'italic', '|', 'undo', 'redo' ]
+ *
+ *	or `'-'` to make a line break and render items in multiple lines:
+ *
+ *		toolbar: [ 'bold', 'italic', '-', 'undo', 'redo' ]
+ *
+ *	Line break will work only in the extended format when `shouldNotGroupWhenFull` option is set to `true`.
+ *
+ * * **`toolbar.viewportTopOffset` (deprecated)** &ndash; The offset (in pixels) from the top of the viewport used when positioning a sticky toolbar.
+ * Useful when a page with which the editor is being integrated has some other sticky or fixed elements
+ * (e.g. the top menu). Thanks to setting the toolbar offset the toolbar will not be positioned underneath or above the page's UI.
+ *
+ * 	**This property has been deprecated and will be removed in the future versions of CKEditor. Please use `{@link module:core/editor/editorconfig~EditorConfig#ui EditorConfig#ui.viewportOffset}` instead.**
+ *
+ * * **`toolbar.shouldNotGroupWhenFull`** &ndash; When set to `true`, the toolbar will stop grouping items
+ * and let them wrap to the next line if there is not enough space to display them in a single row.
+ *
+ * @member {Array.<String>|Object} module:core/editor/editorconfig~EditorConfig#toolbar
+ */
+
+/**
+ * The configuration of the editor language.
+ *
+ *		ClassicEditor
+ *			.create( document.querySelector( '#editor' ), {
+ *				language: ... // Editor language configuration.
+ *			} )
+ *			.then( editor => {
+ *				console.log( editor );
+ *			} )
+ *			.catch( error => {
+ *				console.error( error );
+ *			} );
+ *
+ * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
+ *
+ * @interface LanguageConfig
+ */
+
+/**
+ * The language of the editor UI and its content.
+ *
+ * Note: You do not have to specify this option if your build is optimized for one UI language or if it is
+ * the default language (English is the default language for CDN builds), unless you want to change
+ * the language of your content.
+ *
+ * Simple usage (change the language of the UI and the content):
+ *
+ *		ClassicEditor
+ *			.create( document.querySelector( '#editor' ), {
+ *				// The UI of the editor as well as its content will be in German.
+ *				language: 'de'
+ *			} )
+ *			.then( editor => {
+ *				console.log( editor );
+ *			} )
+ *			.catch( error => {
+ *				console.error( error );
+ *			} );
+ *
+ * Use different languages for the UI and the content using the {@link module:core/editor/editorconfig~LanguageConfig configuration} syntax:
+ *
+ *		ClassicEditor
+ *			.create( document.querySelector( '#editor' ), {
+ *				language: {
+ *	 				// The UI will be in English.
+ *					ui: 'en',
+ *
+ *					// But the content will be edited in Arabic.
+ *					content: 'ar'
+ * 				}
+ *			} )
+ *			.then( editor => {
+ *				console.log( editor );
+ *			} )
+ *			.catch( error => {
+ *				console.error( error );
+ *			} );
+ *
+ * The language of the content has an impact on the editing experience, for instance it affects screen readers
+ * and spell checkers. It is also particularly useful for typing in certain languages (e.g. right–to–left ones)
+ * because it changes the default alignment of the text.
+ *
+ * The language codes are defined in the [ISO 639-1](https://en.wikipedia.org/wiki/ISO_639-1) standard.
+ *
+ * You need to add the corresponding translation file for the new UI language to work.
+ * Translation files are available on CDN for predefined builds:
+ *
+ *		`<script src="https://cdn.ckeditor.com/ckeditor5/[version.number]/[distribution]/lang/[lang].js"></script>`
+ *
+ * But you can add them manually by coping from the `node_modules/@ckeditor/ckeditor5-build-[name]/build/lang/[lang].js'`.
+ *
+ * Check the {@glink features/ui-language UI language guide} for more information about the localization options and translation process.
+ *
+ * @member {String|module:core/editor/editorconfig~LanguageConfig} module:core/editor/editorconfig~EditorConfig#language
+ */
+
+/**
+ * Allows to use different language for the editor UI.
+ *
+ * The language codes are defined in the [ISO 639-1](https://en.wikipedia.org/wiki/ISO_639-1) standard.
+ *
+ * @member {String} module:core/editor/editorconfig~LanguageConfig#ui
+ */
+
+/**
+ * Allows to use different language of the editor content.
+ *
+ * The language codes are defined in the [ISO 639-1](https://en.wikipedia.org/wiki/ISO_639-1) standard.
+ *
+ * @member {String} module:core/editor/editorconfig~LanguageConfig#content
+ */
+
+/**
+ * Specifies the text displayed in the editor when there is no content (editor is empty). It is intended to
+ * help users locate the editor in the application (form) and prompt them to input the content. Work similarly
+ * as to the native DOM
+ * [`placeholder` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#The_placeholder_attribute)
+ * used by inputs.
+ *
+ *		const config = {
+ *			placeholder: 'Type some text...'
+ *		};
+ *
+ * The placeholder text is displayed as a pseudo–element of an empty paragraph in the editor content.
+ * The paragraph has the `.ck-placeholder` CSS class and the `data-placeholder` attribute.
+ *
+ *		<p data-placeholder="Type some text..." class="ck-placeholder">
+ *			::before
+ *		</p>
+ *
+ * **Note**: Placeholder text can also be set using the `placeholder` attribute if a `<textarea>` is passed to
+ * the `create()` method, e.g. {@link module:editor-classic/classiceditor~ClassicEditor.create `ClassicEditor.create()`}.
+ *
+ * **Note**: This configuration has precedence over the value of the `placeholder` attribute of a `<textarea>`
+ * element passed to the `create()` method.
+ *
+ * See the {@glink features/editor-placeholder "Editor placeholder" guide} for more information and live examples.
+ *
+ * @member {String} module:core/editor/editorconfig~EditorConfig#placeholder
+ */
+
+/**
+ * The editor UI configuration.
+ *
+ *		ClassicEditor
+ *			.create( document.querySelector( '#editor' ), {
+ *				ui: { ... }
+ *			} )
+ *			.then( ... )
+ *			.catch( ... );
+ *
+ * Options which can be set using the UI config:
+ *
+ * * **`ui.viewportOffset`** &ndash; The offset (in pixels) of the viewport from every direction used when positioning a sticky toolbar or other absolutely positioned UI elements.
+ * Useful when a page with which the editor is being integrated has some other sticky or fixed elements
+ * (e.g. the top menu). Thanks to setting the UI viewport offset the toolbar and other contextual balloons will not be positioned underneath or above the page's UI.
+ *
+ *		ui: {
+ *			viewportOffset: { top: 10, right: 10, bottom: 10, left: 10 }
+ *		}
+ *
+ * 	**Note:** If you want to modify the viewport offset in runtime (after editor was created), you can do that by overriding {@link module:core/editor/editorui~EditorUI#viewportOffset `editor.ui.viewportOffset`}.
+ *
+ * @member {Object} module:core/editor/editorconfig~EditorConfig#ui
+ */

package/src/editor/editorui.js

@@ -0,0 +1,275 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module core/editor/editorui
+ */
+
+/* globals console */
+
+import ComponentFactory from '@ckeditor/ckeditor5-ui/src/componentfactory';
+import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
+
+import ObservableMixin from '@ckeditor/ckeditor5-utils/src/observablemixin';
+import mix from '@ckeditor/ckeditor5-utils/src/mix';
+
+/**
+ * A class providing the minimal interface that is required to successfully bootstrap any editor UI.
+ *
+ * @mixes module:utils/emittermixin~EmitterMixin
+ */
+export default class EditorUI {
+	/**
+	 * Creates an instance of the editor UI class.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor The editor instance.
+	 */
+	constructor( editor ) {
+		/**
+		 * The editor that the UI belongs to.
+		 *
+		 * @readonly
+		 * @member {module:core/editor/editor~Editor} #editor
+		 */
+		this.editor = editor;
+
+		/**
+		 * An instance of the {@link module:ui/componentfactory~ComponentFactory}, a registry used by plugins
+		 * to register factories of specific UI components.
+		 *
+		 * @readonly
+		 * @member {module:ui/componentfactory~ComponentFactory} #componentFactory
+		 */
+		this.componentFactory = new ComponentFactory( editor );
+
+		/**
+		 * Stores the information about the editor UI focus and propagates it so various plugins and components
+		 * are unified as a focus group.
+		 *
+		 * @readonly
+		 * @member {module:utils/focustracker~FocusTracker} #focusTracker
+		 */
+		this.focusTracker = new FocusTracker();
+
+		/**
+		 * Stores viewport offsets from every direction.
+		 *
+		 * Viewport offset can be used to constrain balloons or other UI elements into an element smaller than the viewport.
+		 * This can be useful if there are any other absolutely positioned elements that may interfere with editor UI.
+		 *
+		 * Example `editor.ui.viewportOffset` returns:
+		 *
+		 * ```js
+		 * {
+		 * 	top: 50,
+		 * 	right: 50,
+		 * 	bottom: 50,
+		 * 	left: 50
+		 * }
+		 * ```
+		 *
+		 * This property can be overriden after editor already being initialized:
+		 *
+		 * ```js
+		 * editor.ui.viewportOffset = {
+		 * 	top: 100,
+		 * 	right: 0,
+		 * 	bottom: 0,
+		 * 	left: 0
+		 * };
+		 * ```
+		 *
+		 * @observable
+		 * @member {Object} #viewportOffset
+		 */
+		this.set( 'viewportOffset', this._readViewportOffsetFromConfig() );
+
+		/**
+		 * Stores all editable elements used by the editor instance.
+		 *
+		 * @private
+		 * @member {Map.<String,HTMLElement>}
+		 */
+		this._editableElementsMap = new Map();
+
+		// Informs UI components that should be refreshed after layout change.
+		this.listenTo( editor.editing.view.document, 'layoutChanged', () => this.update() );
+	}
+
+	/**
+	 * The main (outermost) DOM element of the editor UI.
+	 *
+	 * For example, in {@link module:editor-classic/classiceditor~ClassicEditor} it is a `<div>` which
+	 * wraps the editable element and the toolbar. In {@link module:editor-inline/inlineeditor~InlineEditor}
+	 * it is the editable element itself (as there is no other wrapper). However, in
+	 * {@link module:editor-decoupled/decouplededitor~DecoupledEditor} it is set to `null` because this editor does not
+	 * come with a single "main" HTML element (its editable element and toolbar are separate).
+	 *
+	 * This property can be understood as a shorthand for retrieving the element that a specific editor integration
+	 * considers to be its main DOM element.
+	 *
+	 * @readonly
+	 * @member {HTMLElement|null} #element
+	 */
+	get element() {
+		return null;
+	}
+
+	/**
+	 * Fires the {@link module:core/editor/editorui~EditorUI#event:update `update`} event.
+	 *
+	 * This method should be called when the editor UI (e.g. positions of its balloons) needs to be updated due to
+	 * some environmental change which CKEditor 5 is not aware of (e.g. resize of a container in which it is used).
+	 */
+	update() {
+		this.fire( 'update' );
+	}
+
+	/**
+	 * Destroys the UI.
+	 */
+	destroy() {
+		this.stopListening();
+
+		this.focusTracker.destroy();
+
+		// Clean–up the references to the CKEditor instance stored in the native editable DOM elements.
+		for ( const domElement of this._editableElementsMap.values() ) {
+			domElement.ckeditorInstance = null;
+		}
+
+		this._editableElementsMap = new Map();
+	}
+
+	/**
+	 * Store the native DOM editable element used by the editor under
+	 * a unique name.
+	 *
+	 * @param {String} rootName The unique name of the editable element.
+	 * @param {HTMLElement} domElement The native DOM editable element.
+	 */
+	setEditableElement( rootName, domElement ) {
+		this._editableElementsMap.set( rootName, domElement );
+
+		// Put a reference to the CKEditor instance in the editable native DOM element.
+		// It helps 3rd–party software (browser extensions, other libraries) access and recognize
+		// CKEditor 5 instances (editing roots) and use their API (there is no global editor
+		// instance registry).
+		if ( !domElement.ckeditorInstance ) {
+			domElement.ckeditorInstance = this.editor;
+		}
+	}
+
+	/**
+	 * Returns the editable editor element with the given name or null if editable does not exist.
+	 *
+	 * @param {String} [rootName=main] The editable name.
+	 * @returns {HTMLElement|undefined}
+	 */
+	getEditableElement( rootName = 'main' ) {
+		return this._editableElementsMap.get( rootName );
+	}
+
+	/**
+	 * Returns array of names of all editor editable elements.
+	 *
+	 * @returns {Iterable.<String>}
+	 */
+	getEditableElementsNames() {
+		return this._editableElementsMap.keys();
+	}
+
+	/**
+	 * Stores all editable elements used by the editor instance.
+	 *
+	 * @protected
+	 * @deprecated
+	 * @member {Map.<String,HTMLElement>}
+	 */
+	get _editableElements() {
+		/**
+		 * The {@link module:core/editor/editorui~EditorUI#_editableElements `EditorUI#_editableElements`} property has been
+		 * deprecated and will be removed in the near future. Please use {@link #setEditableElement `setEditableElement()`} and
+		 * {@link #getEditableElement `getEditableElement()`} methods instead.
+		 *
+		 * @error editor-ui-deprecated-editable-elements
+		 * @param {module:core/editor/editorui~EditorUI} editorUI Editor UI instance the deprecated property belongs to.
+		 */
+		console.warn(
+			'editor-ui-deprecated-editable-elements: ' +
+			'The EditorUI#_editableElements property has been deprecated and will be removed in the near future.',
+			{ editorUI: this } );
+
+		return this._editableElementsMap;
+	}
+
+	/**
+	 * Returns viewport offsets object:
+	 *
+	 * ```js
+	 * {
+	 * 	top: Number,
+	 * 	right: Number,
+	 * 	bottom: Number,
+	 * 	left: Number
+	 * }
+	 * ```
+	 *
+	 * Only top property is currently supported.
+	 *
+	 * @private
+	 * @return {Object}
+	 */
+	_readViewportOffsetFromConfig() {
+		const editor = this.editor;
+		const viewportOffsetConfig = editor.config.get( 'ui.viewportOffset' );
+
+		if ( viewportOffsetConfig ) {
+			return viewportOffsetConfig;
+		}
+
+		const legacyOffsetConfig = editor.config.get( 'toolbar.viewportTopOffset' );
+
+		// Fall back to deprecated toolbar config.
+		if ( legacyOffsetConfig ) {
+			/**
+			 * The {@link module:core/editor/editorconfig~EditorConfig#toolbar `EditorConfig#toolbar.viewportTopOffset`}
+			 * property has been deprecated and will be removed in the near future. Please use
+			 * {@link module:core/editor/editorconfig~EditorConfig#ui `EditorConfig#ui.viewportOffset`} instead.
+			 *
+			 * @error editor-ui-deprecated-viewport-offset-config
+			 */
+			console.warn(
+				'editor-ui-deprecated-viewport-offset-config: ' +
+				'The `toolbar.vieportTopOffset` configuration option is deprecated. ' +
+				'It will be removed from future CKEditor versions. Use `ui.viewportOffset.top` instead.'
+			);
+
+			return { top: legacyOffsetConfig };
+		}
+
+		// More keys to come in the future.
+		return { top: 0 };
+	}
+
+	/**
+	 * Fired when the editor UI is ready.
+	 *
+	 * Fired before {@link module:engine/controller/datacontroller~DataController#event:ready}.
+	 *
+	 * @event ready
+	 */
+
+	/**
+	 * Fired whenever the UI (all related components) should be refreshed.
+	 *
+	 * **Note:**: The event is fired after each {@link module:engine/view/document~Document#event:layoutChanged}.
+	 * It can also be fired manually via the {@link module:core/editor/editorui~EditorUI#update} method.
+	 *
+	 * @event update
+	 */
+}
+
+mix( EditorUI, ObservableMixin );

package/src/editor/editorwithui.jsdoc

@@ -0,0 +1,29 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module core/editor/editorwithui
+ */
+
+/**
+ * Interface defining a type of {@link module:core/editor/editor~Editor editor} which has a UI.
+ *
+ * Most editors (like {@link module:editor-classic/classiceditor~ClassicEditor} or
+ * {@link module:editor-inline/inlineeditor~InlineEditor}) implement this interface, however, it is not required to do so.
+ *
+ * Editors with an external UI (i.e. Bootstrap-based) or a headless editor may not implement this interface.
+ * When developing editor features you can consider this by splitting them into two parts: the "editing" part,
+ * which bases on {@link module:core/editor/editor~Editor} itself, and the UI part which bases on this interface.
+ * This will make your features compatible with more types of editors.
+ *
+ * @interface EditorWithUI
+ */
+
+/**
+ * The editor UI instance.
+ *
+ * @readonly
+ * @member {module:core/editor/editorui~EditorUI} #ui
+ */

package/src/editor/utils/attachtoform.js

@@ -0,0 +1,67 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+import { isFunction } from 'lodash-es';
+import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
+
+/**
+ * @module core/editor/utils/attachtoform
+ */
+
+/**
+ * Checks if the editor is initialized on a `<textarea>` element that belongs to a form. If yes, it updates the editor's element
+ * content before submitting the form.
+ *
+ * This helper requires the {@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.updateSourceElement ) ) {
+		/**
+		 * The editor passed to `attachToForm()` must implement the
+		 * {@link module:core/editor/utils/elementapimixin~ElementApi} interface.
+		 *
+		 * @error attachtoform-missing-elementapi-interface
+		 */
+		throw new CKEditorError(
+			'attachtoform-missing-elementapi-interface',
+			editor
+		);
+	}
+
+	const sourceElement = editor.sourceElement;
+
+	// Only when replacing a textarea which is inside of a form element.
+	if ( sourceElement && sourceElement.tagName.toLowerCase() === 'textarea' && sourceElement.form ) {
+		let originalSubmit;
+		const form = sourceElement.form;
+		const onSubmit = () => editor.updateSourceElement();
+
+		// 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;
+			}
+		} );
+	}
+}