jodit 3.15.2 → 3.16.2

package/src/plugins/fix/{clean-html.ts → clean-html/clean-html.ts}

@@ -5,7 +5,9 @@
  */
 
 /**
- * @module plugins/fix
+ * [[include:src/plugins/fix/clean-html/README.md]]
+ * @packageDocumentation
+ * @module plugins/fix/clean-html
  */
 
 import type {
@@ -15,7 +17,6 @@ import type {
 	Nullable,
 	IPlugin
 } from 'jodit/types';
-import { Config } from 'jodit/config';
 import {
 	INVISIBLE_SPACE_REG_EXP as INV_REG,
 	IS_INLINE,
@@ -24,102 +25,11 @@ import {
 import { Dom } from 'jodit/modules';
 import { attr, isString, keys, safeHTML, trim } from 'jodit/core/helpers';
 import { Plugin } from 'jodit/core/plugin';
-import { watch, autobind, debounce } from 'jodit/core/decorators';
+import { watch, autobind, debounce, hook } from 'jodit/core/decorators';
 import { findNotEmptySibling } from 'jodit/plugins/keyboard/helpers';
+import { LazyWalker } from 'jodit/core/dom/lazy-walker';
 
-declare module 'jodit/config' {
-	interface Config {
-		cleanHTML: {
-			timeout: number;
-
-			/**
-			 * Replace   to plain space
-			 */
-			replaceNBSP: boolean;
-			fillEmptyParagraph: boolean;
-			removeEmptyElements: boolean;
-			replaceOldTags: IDictionary<HTMLTagNames> | false;
-
-			/**
-			 * Remove onError attributes
-			 */
-			removeOnError: boolean;
-
-			/**
-			 * Safe href="javascript:" links
-			 */
-			safeJavaScriptLink: boolean;
-
-			/**
-			 * The allowTags option defines which elements will remain in the
-			 * edited text when the editor saves. You can use this limit the returned HTML.
-			 * @example
-			 * ```javascript
-			 * var jodit = new Jodit('#editor', {
-			 *    cleanHTML: {
-			 *       cleanOnPaste: false
-			 *    }
-			 * });
-			 * ```
-			 * @example
-			 * ```javascript
-			 * var editor = Jodit('#editor', {
-			 *     cleanHTML: {
-			 *         allowTags: 'p,a[href],table,tr,td, img[src=1.png]' // allow only <p>,<a>,<table>,<tr>,<td>,<img> tags and
-			 *         for <a> allow only `href` attribute and <img> allow only `src` attribute == '1.png'
-			 *     }
-			 * });
-			 * editor.value = 'Sorry! <strong>Goodby</strong>\
-			 * <span>mr.</span> <a style="color:red" href="http://xdsoft.net">Freeman</a>';
-			 * console.log(editor.value); //Sorry! <a href="http://xdsoft.net">Freeman</a>
-			 * ```
-			 *
-			 * @example
-			 * ```javascript
-			 * var editor = Jodit('#editor', {
-			 *     cleanHTML: {
-			 *         allowTags: {
-			 *             p: true,
-			 *             a: {
-			 *                 href: true
-			 *             },
-			 *             table: true,
-			 *             tr: true,
-			 *             td: true,
-			 *             img: {
-			 *                 src: '1.png'
-			 *             }
-			 *         }
-			 *     }
-			 * });
-			 * ```
-			 */
-			allowTags: false | string | IDictionary<string>;
-			denyTags: false | string | IDictionary<string>;
-		};
-	}
-}
-
-Config.prototype.cleanHTML = {
-	timeout: 300,
-	removeEmptyElements: true,
-	fillEmptyParagraph: true,
-	replaceNBSP: true,
-	replaceOldTags: {
-		i: 'em',
-		b: 'strong'
-	},
-	allowTags: false,
-	denyTags: false,
-
-	removeOnError: true,
-	safeJavaScriptLink: true
-};
-
-Config.prototype.controls.eraser = {
-	command: 'removeFormat',
-	tooltip: 'Clear Formatting'
-};
+import './config';
 
 /**
  * Clean HTML after removeFormat and insertHorizontalRule command
@@ -203,46 +113,42 @@ export class cleanHtml extends Plugin {
 			}
 		}
 
-		let node: Node | null = null;
-
-		if (editor.editor.firstChild) {
-			node = editor.editor.firstChild as Element;
-		}
-
-		const remove: Node[] = [];
-		const work = this.visitNode(node, current, remove);
-
-		remove.forEach(Dom.safeRemove);
-
-		if (remove.length || work) {
-			editor.events && editor.e.fire('synchro');
-		}
+		this.walker.setWork(editor.editor);
+		this.currentSelectionNode = current;
 	}
 
-	private allowEdit(): boolean {
-		return !(
-			this.j.isInDestruct ||
-			!this.j.isEditorMode() ||
-			this.j.getReadOnly()
-		);
+	private currentSelectionNode: Nullable<Node> = null;
+
+	private walker: LazyWalker = new LazyWalker(this.j.async, {
+		timeout: this.j.o.cleanHTML.timeout
+	});
+
+	@hook('ready')
+	protected startWalker(): void {
+		this.walker
+			.on('visit', this.visitNode)
+			.on('end', (affected: boolean): void => {
+				this.j.e.fire(
+					affected
+						? 'internalChange finishedCleanHTMLWorker'
+						: 'finishedCleanHTMLWorker'
+				);
+			});
 	}
 
-	private visitNode = (
-		nodeElm: Nullable<Element | Node>,
-		current: Nullable<Node>,
-		remove: Node[]
-	): boolean => {
-		let work = false;
+	@autobind
+	private visitNode(nodeElm: Node): boolean {
+		let hasChanges = false;
 
-		if (!nodeElm) {
-			return work;
+		const newNodeElm = this.replaceIfMatched(nodeElm);
+		if (nodeElm !== newNodeElm) {
+			nodeElm = newNodeElm;
+			hasChanges = true;
 		}
 
-		nodeElm = this.replaceIfMatched(nodeElm);
-
-		if (this.isRemovableNode(nodeElm, current)) {
-			remove.push(nodeElm);
-			return this.visitNode(nodeElm.nextSibling, current, remove);
+		if (this.isRemovableNode(nodeElm, this.currentSelectionNode)) {
+			Dom.safeRemove(nodeElm);
+			return true;
 		}
 
 		if (
@@ -251,14 +157,17 @@ export class cleanHtml extends Plugin {
 			Dom.isEmpty(nodeElm, /^(img|svg|canvas|input|textarea|form|br)$/)
 		) {
 			const br = this.j.createInside.element('br');
-
 			nodeElm.appendChild(br);
-			work = true;
+			hasChanges = true;
 		}
 
 		const allow = this.allowTagsHash;
 
-		if (allow && allow[nodeElm.nodeName] !== true) {
+		if (
+			allow &&
+			Dom.isElement(nodeElm) &&
+			allow[nodeElm.nodeName] !== true
+		) {
 			const attrs: NamedNodeMap = (nodeElm as Element).attributes;
 
 			if (attrs && attrs.length) {
@@ -273,7 +182,7 @@ export class cleanHtml extends Plugin {
 				}
 
 				if (removeAttrs.length) {
-					work = true;
+					hasChanges = true;
 				}
 
 				removeAttrs.forEach(attr => {
@@ -282,26 +191,32 @@ export class cleanHtml extends Plugin {
 			}
 		}
 
-		work = this.visitNode(nodeElm.firstChild, current, remove) || work;
-		work = this.visitNode(nodeElm.nextSibling, current, remove) || work;
+		return hasChanges;
+	}
 
-		return work;
-	};
+	private allowEdit(): boolean {
+		return !(
+			this.j.isInDestruct ||
+			!this.j.isEditorMode() ||
+			this.j.getReadOnly()
+		);
+	}
 
 	private static getHash(
 		tags: false | string | IDictionary<string>
 	): IDictionary | false {
 		const attributesReg = /([^[]*)\[([^\]]+)]/;
-		const seperator = /[\s]*,[\s]*/,
+		const separator = /[\s]*,[\s]*/,
 			attrReg = /^(.*)[\s]*=[\s]*(.*)$/;
+
 		const tagsHash: IDictionary = {};
 
 		if (isString(tags)) {
-			tags.split(seperator).map((elm: string) => {
+			tags.split(separator).map((elm: string) => {
 				elm = trim(elm);
 				const attr: RegExpExecArray | null = attributesReg.exec(elm),
 					allowAttributes: IDictionary<string | boolean> = {},
-					attributeMap = (attrName: string) => {
+					attributeMap = (attrName: string): void => {
 						attrName = trim(attrName);
 
 						const val: string[] | null = attrReg.exec(attrName);
@@ -314,7 +229,8 @@ export class cleanHtml extends Plugin {
 					};
 
 				if (attr) {
-					const attr2: string[] = attr[2].split(seperator);
+					const attr2: string[] = attr[2].split(separator);
+
 					if (attr[1]) {
 						attr2.forEach(attributeMap);
 						tagsHash[attr[1].toUpperCase()] = allowAttributes;
@@ -349,7 +265,7 @@ export class cleanHtml extends Plugin {
 	/**
 	 * Remove invisible chars if node has another chars
 	 */
-	private onKeyUpCleanUp = () => {
+	private onKeyUpCleanUp = (): void => {
 		const editor = this.j;
 
 		if (!this.allowEdit()) {
@@ -589,5 +505,6 @@ export class cleanHtml extends Plugin {
 	/** @override */
 	protected override beforeDestruct(): void {
 		this.j.e.off('.cleanHtml');
+		this.walker.destruct();
 	}
 }

package/src/plugins/fix/clean-html/config.ts

@@ -0,0 +1,106 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * Released under MIT see LICENSE.txt in the project root for license information.
+ * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ */
+
+/**
+ * @module plugins/fix/clean-html
+ */
+
+import type { HTMLTagNames, IDictionary } from 'jodit/types';
+import { Config } from 'jodit/config';
+
+declare module 'jodit/config' {
+	interface Config {
+		cleanHTML: {
+			timeout: number;
+
+			/**
+			 * Replace   to plain space
+			 */
+			replaceNBSP: boolean;
+			fillEmptyParagraph: boolean;
+			removeEmptyElements: boolean;
+			replaceOldTags: IDictionary<HTMLTagNames> | false;
+
+			/**
+			 * Remove onError attributes
+			 */
+			removeOnError: boolean;
+
+			/**
+			 * Safe href="javascript:" links
+			 */
+			safeJavaScriptLink: boolean;
+
+			/**
+			 * The allowTags option defines which elements will remain in the
+			 * edited text when the editor saves. You can use this limit the returned HTML.
+			 * @example
+			 * ```javascript
+			 * var jodit = new Jodit('#editor', {
+			 *    cleanHTML: {
+			 *       cleanOnPaste: false
+			 *    }
+			 * });
+			 * ```
+			 * @example
+			 * ```javascript
+			 * var editor = Jodit('#editor', {
+			 *     cleanHTML: {
+			 *         allowTags: 'p,a[href],table,tr,td, img[src=1.png]' // allow only <p>,<a>,<table>,<tr>,<td>,<img> tags and
+			 *         for <a> allow only `href` attribute and <img> allow only `src` attribute == '1.png'
+			 *     }
+			 * });
+			 * editor.value = 'Sorry! <strong>Goodby</strong>\
+			 * <span>mr.</span> <a style="color:red" href="http://xdsoft.net">Freeman</a>';
+			 * console.log(editor.value); //Sorry! <a href="http://xdsoft.net">Freeman</a>
+			 * ```
+			 *
+			 * @example
+			 * ```javascript
+			 * var editor = Jodit('#editor', {
+			 *     cleanHTML: {
+			 *         allowTags: {
+			 *             p: true,
+			 *             a: {
+			 *                 href: true
+			 *             },
+			 *             table: true,
+			 *             tr: true,
+			 *             td: true,
+			 *             img: {
+			 *                 src: '1.png'
+			 *             }
+			 *         }
+			 *     }
+			 * });
+			 * ```
+			 */
+			allowTags: false | string | IDictionary<string>;
+			denyTags: false | string | IDictionary<string>;
+		};
+	}
+}
+
+Config.prototype.cleanHTML = {
+	timeout: 300,
+	removeEmptyElements: true,
+	fillEmptyParagraph: true,
+	replaceNBSP: true,
+	replaceOldTags: {
+		i: 'em',
+		b: 'strong'
+	},
+	allowTags: false,
+	denyTags: false,
+
+	removeOnError: true,
+	safeJavaScriptLink: true
+};
+
+Config.prototype.controls.eraser = {
+	command: 'removeFormat',
+	tooltip: 'Clear Formatting'
+};

package/src/plugins/fix/index.ts

@@ -0,0 +1,12 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * Released under MIT see LICENSE.txt in the project root for license information.
+ * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ */
+
+/**
+ * @module plugins/fix
+ */
+
+export * from './clean-html/clean-html';
+export * from './wrap-nodes/wrap-nodes';

package/src/plugins/fix/wrap-nodes/README.md

@@ -0,0 +1,27 @@
+A plugin that ensures that there are no elements in the document that are not surrounded by a block element.
+
+For example, the plugin will result in HTML:
+
+```html
+test <img src="./test.png" />
+```
+
+Depending on the [[Config.enter]] setting to this view:
+
+```html
+<p>test <img src="./test.png" /></p>
+```
+
+You may encounter a situation where your custom tags will be treated as inline by the plugin.
+And he will also surround them in a block element.
+To prevent this from happening, you can explicitly set in the settings which tags to avoid.
+
+```js
+Jodit.make('#editor', {
+	wrapNodes: {
+		exclude: ['hr', 'style', 'my-component']
+	}
+});
+```
+
+Plugin settings are under the namespace [[Config.wrapNodes]]

package/src/plugins/fix/wrap-nodes/config.ts

@@ -0,0 +1,24 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * Released under MIT see LICENSE.txt in the project root for license information.
+ * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ */
+
+/**
+ * @module plugins/fix/wrap-nodes
+ */
+
+import type { HTMLTagNames } from 'jodit/types';
+import { Config } from 'jodit/config';
+
+declare module 'jodit/config' {
+	interface Config {
+		wrapNodes: {
+			exclude: HTMLTagNames[];
+		};
+	}
+}
+
+Config.prototype.wrapNodes = {
+	exclude: ['hr', 'style']
+};

package/src/plugins/fix/{wrap-text-nodes.ts → wrap-nodes/wrap-nodes.ts}

@@ -5,7 +5,9 @@
  */
 
 /**
- * @module plugins/fix
+ * [[include:plugins/fix/wrap-nodes/README.md]]
+ * @packageDocumentation
+ * @module plugins/fix/wrap-nodes
  */
 
 import type { IJodit, Nullable } from 'jodit/types';
@@ -14,10 +16,12 @@ import { Dom } from 'jodit/core/dom';
 import { isString } from 'jodit/core/helpers/checker';
 import { autobind } from 'jodit/core/decorators';
 
+import './config';
+
 /**
  * Wrap single text nodes in block wrapper
  */
-export class WrapTextNodes extends Plugin {
+export class WrapNodes extends Plugin {
 	/** @override **/
 	protected afterInit(jodit: IJodit): void {
 		if (jodit.o.enter.toLowerCase() === 'br') {
@@ -39,7 +43,7 @@ export class WrapTextNodes extends Plugin {
 	 * Process changed value
 	 */
 	@autobind
-	private postProcessSetEditorValue() {
+	private postProcessSetEditorValue(): void {
 		const { jodit } = this;
 
 		if (!jodit.isEditorMode()) {
@@ -113,5 +117,6 @@ export class WrapTextNodes extends Plugin {
 	 * Some element which need append in block
 	 */
 	private isNotClosed = (n: Nullable<Node>): n is Element =>
-		Dom.isElement(n) && !(Dom.isBlock(n) || Dom.isTag(n, ['hr', 'style']));
+		Dom.isElement(n) &&
+		!(Dom.isBlock(n) || Dom.isTag(n, this.j.o.wrapNodes.exclude));
 }

package/src/plugins/focus/focus.ts

@@ -50,7 +50,7 @@ export function focus(editor: IJodit): void {
 			});
 	}
 
-	const focus = () => {
+	const focus = (): void => {
 		editor.s.focus();
 
 		if (editor.o.cursorAfterAutofocus === 'end') {

package/src/plugins/format-block/format-block.ts

@@ -131,7 +131,7 @@ export function formatBlock(editor: IJodit): void {
 				element: third as HTMLTagNames
 			});
 
-			editor.setEditorValue();
+			editor.synchronizeValues();
 
 			return false;
 		}

package/src/plugins/fullsize/fullsize.ts

@@ -21,13 +21,13 @@ declare module 'jodit/config' {
 		 * Open WYSIWYG in full screen
 		 * @example
 		 * ```javascript
-		 * var editor = new jodit({
+		 * var editor = Jodit.make({
 		 *     fullsize: true // fullsize editor
 		 * });
 		 * ```
 		 * @example
 		 * ```javascript
-		 * var editor = new Jodit();
+		 * var editor = Jodit.make();
 		 * editor.e.fire('toggleFullSize');
 		 * editor.e.fire('toggleFullSize', true); // fullsize
 		 * editor.e.fire('toggleFullSize', false); // usual mode
@@ -81,7 +81,7 @@ export function fullsize(editor: IViewWithToolbar): void {
 		oldWidth: number = 0,
 		wasToggled = false;
 
-	const resize = () => {
+	const resize = (): void => {
 			const { container, events } = editor;
 
 			if (events) {
@@ -105,7 +105,7 @@ export function fullsize(editor: IViewWithToolbar): void {
 		/**
 		 * Change editor's state between FullSize and normal
 		 */
-		toggle = (enable?: boolean) => {
+		toggle = (enable?: boolean): void => {
 			const { container, events } = editor;
 
 			if (!container) {

package/src/plugins/iframe/iframe.ts

@@ -100,9 +100,9 @@ export function iframe(editor: IJodit): void {
 				editor
 			);
 
-			const init = () => {
+			const init = (): boolean => {
 				if (!editor.iframe) {
-					return;
+					return false;
 				}
 
 				const doc = (editor.iframe.contentWindow as Window).document;
@@ -110,7 +110,7 @@ export function iframe(editor: IJodit): void {
 
 				const docMode = opt.editHTMLDocumentMode;
 
-				const toggleEditable = () => {
+				const toggleEditable = (): void => {
 					attr(
 						doc.body,
 						'contenteditable',

package/src/plugins/image/image-properties/image-properties.ts

@@ -327,11 +327,11 @@ export class imageProperties extends Plugin {
 			lockSize
 		} = refs<HTMLInputElement>(this.form);
 
-		const updateLock = () => {
+		const updateLock = (): void => {
 				lockMargin.checked = this.state.marginIsLocked;
 				lockSize.checked = this.state.sizeIsLocked;
 			},
-			updateAlign = () => {
+			updateAlign = (): void => {
 				if (
 					image.style.cssFloat &&
 					['left', 'right'].indexOf(
@@ -349,24 +349,24 @@ export class imageProperties extends Plugin {
 					}
 				}
 			},
-			updateBorderRadius = () => {
+			updateBorderRadius = (): void => {
 				borderRadius.value = (
 					parseInt(image.style.borderRadius || '0', 10) || '0'
 				).toString();
 			},
-			updateId = () => {
+			updateId = (): void => {
 				id.value = attr(image, 'id') || '';
 			},
-			updateStyle = () => {
+			updateStyle = (): void => {
 				style.value = attr(image, 'style') || '';
 			},
-			updateClasses = () => {
+			updateClasses = (): void => {
 				classes.value = (attr(image, 'class') || '').replace(
 					/jodit_focused_image[\s]*/,
 					''
 				);
 			},
-			updateMargins = () => {
+			updateMargins = (): void => {
 				if (!opt.image.editMargins) {
 					return;
 				}
@@ -406,7 +406,7 @@ export class imageProperties extends Plugin {
 
 				this.state.marginIsLocked = equal;
 			},
-			updateSizes = () => {
+			updateSizes = (): void => {
 				const width =
 						attr(image, 'width') ||
 						css(image, 'width', true) ||
@@ -440,7 +440,7 @@ export class imageProperties extends Plugin {
 					return Math.abs(w - h * this.state.ratio) < 1;
 				})();
 			},
-			updateText = () => {
+			updateText = (): void => {
 				imageTitle.value = attr(image, 'title') || '';
 
 				imageAlt.value = attr(image, 'alt') || '';
@@ -457,7 +457,7 @@ export class imageProperties extends Plugin {
 					imageLinkOpenInNewTab.checked = false;
 				}
 			},
-			updateSrc = () => {
+			updateSrc = (): void => {
 				imageSrc.value = attr(image, 'src') || '';
 
 				if (imageViewSrc) {
@@ -601,8 +601,7 @@ export class imageProperties extends Plugin {
 			);
 		}
 
-		this.j.setEditorValue();
-
+		this.j.synchronizeValues();
 		this.dialog.close();
 	}
 
@@ -613,7 +612,7 @@ export class imageProperties extends Plugin {
 	private openImageEditor(): void {
 		const url: string = attr(this.state.image, 'src') || '',
 			a = this.j.c.element('a'),
-			loadExternal = () => {
+			loadExternal = (): void => {
 				if (a.host !== location.host) {
 					Confirm(
 						this.j.i18n(

package/src/plugins/indent/indent.ts

@@ -124,7 +124,7 @@ export function indent(editor: IJodit): void {
 			editor.s.restore();
 		});
 
-		editor.setEditorValue();
+		editor.synchronizeValues();
 
 		return false;
 	};