@ckeditor/ckeditor5-core 35.2.1 → 35.3.0

package/src/editor/utils/attachtoform.js

@@ -2,14 +2,11 @@
  * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. 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.
@@ -18,50 +15,43 @@ import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
  *
  * @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;
-			}
-		} );
-	}
+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 (isTextArea(sourceElement) && 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;
+            }
+        });
+    }
+}
+function isTextArea(sourceElement) {
+    return !!sourceElement && sourceElement.tagName.toLowerCase() === 'textarea';
 }

package/src/editor/utils/dataapimixin.js

@@ -2,80 +2,29 @@
  * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-
 /**
  * @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( options ) {
-		return this.data.get( options );
-	}
-};
-
-export default DataApiMixin;
-
-/**
- * Interface defining editor methods for setting and getting data to and from the editor's main root element
- * using the {@link module:core/editor/editor~Editor#data data pipeline}.
- *
- * This interface is not a part of the {@link module:core/editor/editor~Editor} class because one may want to implement
- * an editor with multiple root elements, in which case the methods for setting and getting data will need to be implemented
- * differently.
- *
- * @interface DataApi
- */
-
-/**
- * Sets the data in the editor.
- *
- *		editor.setData( '<p>This is editor!</p>' );
- *
- * By default the editor accepts HTML. This can be controlled by injecting a different data processor.
- * See the {@glink features/markdown Markdown output} guide for more details.
- *
- * Note: Not only is the format of the data configurable, but the type of the `setData()`'s parameter does not
- * have to be a string either. You can e.g. accept an object or a DOM `DocumentFragment` if you consider this
- * the right format for you.
- *
- * @method #setData
- * @param {String} data Input data.
- */
-
-/**
- * Gets the data from the editor.
- *
- *		editor.getData(); // -> '<p>This is editor!</p>'
- *
- * By default the editor outputs HTML. This can be controlled by injecting a different data processor.
- * See the {@glink features/markdown Markdown output} guide for more details.
- *
- * Note: Not only is the format of the data configurable, but the type of the `getData()`'s return value does not
- * have to be a string either. You can e.g. return an object or a DOM `DocumentFragment` if you consider this
- * the right format for you.
- *
- * @method #getData
- * @param {Object} [options] Additional configuration for the retrieved data.
- * Editor features may introduce more configuration options that can be set through this parameter.
- * @param {String} [options.rootName='main'] Root name.
- * @param {String} [options.trim='empty'] Whether returned data should be trimmed. This option is set to `'empty'` by default,
- * which means that whenever editor content is considered empty, an empty string is returned. To turn off trimming
- * use `'none'`. In such cases exact content will be returned (for example `'<p>&nbsp;</p>'` for an empty editor).
- * @returns {String} Output data.
- */
+export default function DataApiMixin(base) {
+    class Mixin extends base {
+        setData(data) {
+            this.data.set(data);
+        }
+        getData(options) {
+            return this.data.get(options);
+        }
+    }
+    return Mixin;
+}
+// Backward compatibility with `mix`.
+{
+    const mixin = DataApiMixin(Object);
+    DataApiMixin.setData = mixin.prototype.setData;
+    DataApiMixin.getData = mixin.prototype.getData;
+}

package/src/editor/utils/elementapimixin.js

@@ -2,81 +2,46 @@
  * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-
-/* globals HTMLTextAreaElement */
-
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
 import setDataInElement from '@ckeditor/ckeditor5-utils/src/dom/setdatainelement';
-
 /**
  * @module core/editor/utils/elementapimixin
  */
-
 /**
  * Implementation of the {@link module:core/editor/utils/elementapimixin~ElementApi}.
  *
  * @mixin ElementApiMixin
  * @implements module:core/editor/utils/elementapimixin~ElementApi
  */
-const ElementApiMixin = {
-	/**
-	 * @inheritDoc
-	 */
-	updateSourceElement( data = this.data.get() ) {
-		if ( !this.sourceElement ) {
-			/**
-			 * Cannot update the source element of a detached editor.
-			 *
-			 * The {@link ~ElementApi#updateSourceElement `updateSourceElement()`} method cannot be called if you did not
-			 * pass an element to `Editor.create()`.
-			 *
-			 * @error editor-missing-sourceelement
-			 */
-			throw new CKEditorError(
-				'editor-missing-sourceelement',
-				this
-			);
-		}
-
-		const shouldUpdateSourceElement = this.config.get( 'updateSourceElementOnDestroy' );
-		const isSourceElementTextArea = this.sourceElement instanceof HTMLTextAreaElement;
-
-		// The data returned by the editor might be unsafe, so we want to prevent rendering
-		// unsafe content inside the source element different than <textarea>, which is considered
-		// secure. This behaviour could be changed by setting the `updateSourceElementOnDestroy`
-		// configuration option to `true`.
-		if ( !shouldUpdateSourceElement && !isSourceElementTextArea ) {
-			setDataInElement( this.sourceElement, '' );
-
-			return;
-		}
-
-		setDataInElement( this.sourceElement, data );
-	}
-};
-
-export default ElementApiMixin;
-
-/**
- * Interface describing an editor that replaced a DOM element (was "initialized on an element").
- *
- * Such an editor should provide a method to
- * {@link module:core/editor/utils/elementapimixin~ElementApi#updateSourceElement update the replaced element with the current data}.
- *
- * @interface ElementApi
- */
-
-/**
- * The element on which the editor has been initialized.
- *
- * @readonly
- * @member {HTMLElement} #sourceElement
- */
-
-/**
- * Updates the {@link #sourceElement editor source element}'s content with the data.
- *
- * @method #updateSourceElement
- * @param {String} data The data that should be used to update the source element.
- * By default, it is taken directly from the existing editor instance.
- */
+export default function ElementApiMixin(base) {
+    class Mixin extends base {
+        updateSourceElement(data = this.data.get()) {
+            if (!this.sourceElement) {
+                /**
+                 * Cannot update the source element of a detached editor.
+                 *
+                 * The {@link ~ElementApi#updateSourceElement `updateSourceElement()`} method cannot be called if you did not
+                 * pass an element to `Editor.create()`.
+                 *
+                 * @error editor-missing-sourceelement
+                 */
+                throw new CKEditorError('editor-missing-sourceelement', this);
+            }
+            const shouldUpdateSourceElement = this.config.get('updateSourceElementOnDestroy');
+            const isSourceElementTextArea = this.sourceElement instanceof HTMLTextAreaElement;
+            // The data returned by the editor might be unsafe, so we want to prevent rendering
+            // unsafe content inside the source element different than <textarea>, which is considered
+            // secure. This behaviour could be changed by setting the `updateSourceElementOnDestroy`
+            // configuration option to `true`.
+            if (!shouldUpdateSourceElement && !isSourceElementTextArea) {
+                setDataInElement(this.sourceElement, '');
+                return;
+            }
+            setDataInElement(this.sourceElement, data);
+        }
+    }
+    return Mixin;
+}
+// Backward compatibility with `mix`.
+ElementApiMixin.updateSourceElement = ElementApiMixin(Object).prototype.updateSourceElement;

package/src/editor/utils/securesourceelement.js

@@ -2,13 +2,10 @@
  * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-
 import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
-
 /**
  * @module core/editor/utils/securesourceelement
  */
-
 /**
  * Marks the source element on which the editor was initialized. This prevents other editor instances from using this element.
  *
@@ -17,33 +14,26 @@ import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
  *
  * @param {module:core/editor/editor~Editor} editor Editor instance.
  */
-export default function secureSourceElement( editor ) {
-	const sourceElement = editor.sourceElement;
-
-	// If the editor was initialized without specifying an element, we don't need to secure anything.
-	if ( !sourceElement ) {
-		return;
-	}
-
-	if ( sourceElement.ckeditorInstance ) {
-		/**
-		 * A DOM element used to create the editor (e.g.
-		 * {@link module:editor-inline/inlineeditor~InlineEditor.create `InlineEditor.create()`})
-		 * has already been used to create another editor instance. Make sure each editor is
-		 * created with an unique DOM element.
-		 *
-		 * @error editor-source-element-already-used
-		 * @param {HTMLElement} element DOM element that caused the collision.
-		 */
-		throw new CKEditorError(
-			'editor-source-element-already-used',
-			editor
-		);
-	}
-
-	sourceElement.ckeditorInstance = editor;
-
-	editor.once( 'destroy', () => {
-		delete sourceElement.ckeditorInstance;
-	} );
+export default function secureSourceElement(editor) {
+    const sourceElement = editor.sourceElement;
+    // If the editor was initialized without specifying an element, we don't need to secure anything.
+    if (!sourceElement) {
+        return;
+    }
+    if (sourceElement.ckeditorInstance) {
+        /**
+         * A DOM element used to create the editor (e.g.
+         * {@link module:editor-inline/inlineeditor~InlineEditor.create `InlineEditor.create()`})
+         * has already been used to create another editor instance. Make sure each editor is
+         * created with an unique DOM element.
+         *
+         * @error editor-source-element-already-used
+         * @param {HTMLElement} element DOM element that caused the collision.
+         */
+        throw new CKEditorError('editor-source-element-already-used', editor);
+    }
+    sourceElement.ckeditorInstance = editor;
+    editor.once('destroy', () => {
+        delete sourceElement.ckeditorInstance;
+    });
 }

package/src/index.js

@@ -2,28 +2,21 @@
  * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-
 /**
  * @module core
  */
-
 export { default as Plugin } from './plugin';
 export { default as Command } from './command';
 export { default as MultiCommand } from './multicommand';
-
 export { default as Context } from './context';
 export { default as ContextPlugin } from './contextplugin';
-
 export { default as Editor } from './editor/editor';
 export { default as EditorUI } from './editor/editorui';
-
 export { default as attachToForm } from './editor/utils/attachtoform';
 export { default as DataApiMixin } from './editor/utils/dataapimixin';
 export { default as ElementApiMixin } from './editor/utils/elementapimixin';
 export { default as secureSourceElement } from './editor/utils/securesourceelement';
-
 export { default as PendingActions } from './pendingactions';
-
 import cancel from './../theme/icons/cancel.svg';
 import caption from './../theme/icons/caption.svg';
 import check from './../theme/icons/check.svg';
@@ -31,7 +24,6 @@ import cog from './../theme/icons/cog.svg';
 import eraser from './../theme/icons/eraser.svg';
 import lowVision from './../theme/icons/low-vision.svg';
 import image from './../theme/icons/image.svg';
-
 import alignBottom from './../theme/icons/align-bottom.svg';
 import alignMiddle from './../theme/icons/align-middle.svg';
 import alignTop from './../theme/icons/align-top.svg';
@@ -39,7 +31,6 @@ import alignLeft from './../theme/icons/align-left.svg';
 import alignCenter from './../theme/icons/align-center.svg';
 import alignRight from './../theme/icons/align-right.svg';
 import alignJustify from './../theme/icons/align-justify.svg';
-
 import objectBlockLeft from './../theme/icons/object-left.svg';
 import objectCenter from './../theme/icons/object-center.svg';
 import objectBlockRight from './../theme/icons/object-right.svg';
@@ -47,60 +38,52 @@ import objectFullWidth from './../theme/icons/object-full-width.svg';
 import objectInline from './../theme/icons/object-inline.svg';
 import objectLeft from './../theme/icons/object-inline-left.svg';
 import objectRight from './../theme/icons/object-inline-right.svg';
-
 import objectSizeFull from './../theme/icons/object-size-full.svg';
 import objectSizeLarge from './../theme/icons/object-size-large.svg';
 import objectSizeSmall from './../theme/icons/object-size-small.svg';
 import objectSizeMedium from './../theme/icons/object-size-medium.svg';
-
 import pencil from './../theme/icons/pencil.svg';
 import pilcrow from './../theme/icons/pilcrow.svg';
 import quote from './../theme/icons/quote.svg';
 import threeVerticalDots from './../theme/icons/three-vertical-dots.svg';
-
 import bold from './../theme/icons/bold.svg';
 import paragraph from './../theme/icons/paragraph.svg';
 import plus from './../theme/icons/plus.svg';
 import text from './../theme/icons/text.svg';
 import importExport from './../theme/icons/importexport.svg';
-
 export const icons = {
-	bold,
-	cancel,
-	caption,
-	check,
-	cog,
-	eraser,
-	image,
-	lowVision,
-	importExport,
-	paragraph,
-	plus,
-	text,
-
-	alignBottom,
-	alignMiddle,
-	alignTop,
-	alignLeft,
-	alignCenter,
-	alignRight,
-	alignJustify,
-
-	objectLeft,
-	objectCenter,
-	objectRight,
-	objectFullWidth,
-	objectInline,
-	objectBlockLeft,
-	objectBlockRight,
-
-	objectSizeFull,
-	objectSizeLarge,
-	objectSizeSmall,
-	objectSizeMedium,
-
-	pencil,
-	pilcrow,
-	quote,
-	threeVerticalDots
+    bold,
+    cancel,
+    caption,
+    check,
+    cog,
+    eraser,
+    image,
+    lowVision,
+    importExport,
+    paragraph,
+    plus,
+    text,
+    alignBottom,
+    alignMiddle,
+    alignTop,
+    alignLeft,
+    alignCenter,
+    alignRight,
+    alignJustify,
+    objectLeft,
+    objectCenter,
+    objectRight,
+    objectFullWidth,
+    objectInline,
+    objectBlockLeft,
+    objectBlockRight,
+    objectSizeFull,
+    objectSizeLarge,
+    objectSizeSmall,
+    objectSizeMedium,
+    pencil,
+    pilcrow,
+    quote,
+    threeVerticalDots
 };