jodit 3.8.2 → 3.8.3

package/src/core/ui/popup/popup.ts

@@ -29,7 +29,7 @@ import {
 } from '../../helpers';
 import { eventEmitter, getContainer } from '../../global';
 import { UIElement } from '../element';
-import { autobind } from '../../decorators';
+import { autobind, throttle } from '../../decorators';
 
 type getBoundFunc = () => IBound;
 
@@ -106,9 +106,6 @@ export class Popup extends UIElement implements IPopup {
 
 	/**
 	 * Open popup near with some bound
-	 *
-	 * @param getBound
-	 * @param keepPosition
 	 */
 	open(getBound: getBoundFunc, keepPosition: boolean = false): this {
 		markOwner(this.jodit, this.container);
@@ -135,7 +132,6 @@ export class Popup extends UIElement implements IPopup {
 
 	/**
 	 * Calculate static bound for point
-	 * @param getBound
 	 */
 	protected getKeepBound(getBound: getBoundFunc): getBoundFunc {
 		const oldBound = getBound();
@@ -193,6 +189,12 @@ export class Popup extends UIElement implements IPopup {
 		return this;
 	}
 
+	@throttle(10)
+	@autobind
+	throttleUpdatePosition(): void {
+		this.updatePosition();
+	}
+
 	/**
 	 * Calculate start point
 	 *
@@ -333,7 +335,7 @@ export class Popup extends UIElement implements IPopup {
 	}
 
 	private addGlobalListeners(): void {
-		const up = this.updatePosition,
+		const up = this.throttleUpdatePosition,
 			ow = this.ow;
 
 		eventEmitter.on('closeAllPopups', this.close);
@@ -351,10 +353,14 @@ export class Popup extends UIElement implements IPopup {
 			.on(this.container, 'scroll mousewheel', up)
 			.on(ow, 'scroll', up)
 			.on(ow, 'resize', up);
+
+		Dom.up(this.j.container, box => {
+			box && this.j.e.on(box, 'scroll mousewheel', up);
+		});
 	}
 
 	private removeGlobalListeners(): void {
-		const up = this.updatePosition,
+		const up = this.throttleUpdatePosition,
 			ow = this.ow;
 
 		eventEmitter.off('closeAllPopups', this.close);
@@ -373,6 +379,10 @@ export class Popup extends UIElement implements IPopup {
 			.off(this.container, 'scroll mousewheel', up)
 			.off(ow, 'scroll', up)
 			.off(ow, 'resize', up);
+
+		Dom.up(this.j.container, box => {
+			box && this.j.e.off(box, 'scroll mousewheel', up);
+		});
 	}
 
 	/**

package/src/core/view/view-with-toolbar.less

@@ -10,11 +10,12 @@
 	&__box {
 		&:not(:empty) {
 			--color-background-default: var(--color-panel);
-			background-color: var(--color-panel);
+
 			overflow: hidden;
+			border-bottom: 1px solid var(--color-border);
+			background-color: var(--color-panel);
 			border-radius: var(--border-radius-default)
 				var(--border-radius-default) 0 0;
-			border-bottom: 1px solid var(--color-border);
 		}
 	}
 }

package/src/jodit.ts

@@ -402,15 +402,18 @@ export class Jodit extends ViewWithToolbar implements IJodit {
 
 	/**
 	 * Set value to native editor
-	 * @param value
 	 */
 	setNativeEditorValue(value: string): void {
-		if (this.e.fire('beforeSetNativeEditorValue', value)) {
+		const data = {
+			value
+		};
+
+		if (this.e.fire('beforeSetNativeEditorValue', data)) {
 			return;
 		}
 
 		if (this.editor) {
-			this.editor.innerHTML = value;
+			this.editor.innerHTML = data.value;
 		}
 	}
 

package/src/modules/dialog/dialog.ts

@@ -660,7 +660,7 @@ export class Dialog extends ViewWithToolbar implements IDialog {
 	 * //You can close dialog two ways
 	 * var dialog = new Jodit.modules.Dialog();
 	 * dialog.open('Hello world!', 'Title');
-	 * var $close = Jodit.modules.helper.dom('<a href="javascript:void(0)" style="float:left;" class="jodit-button">
+	 * var $close = dialog.create.fromHTML('<a href="#" style="float:left;" class="jodit-button">
 	 *     <i class="icon icon-check"></i>&nbsp;' + Jodit.prototype.i18n('Ok') + '</a>');
 	 * $close.addEventListener('click', function () {
 	 *     dialog.close();
@@ -690,7 +690,6 @@ export class Dialog extends ViewWithToolbar implements IDialog {
 		 * Called up to close the window
 		 *
 		 * @event beforeClose
-		 * @this {Dialog} current dialog
 		 */
 		if (this.e) {
 			this.e.fire('beforeClose', this);

package/src/modules/file-browser/builders/context-menu.ts

@@ -17,7 +17,7 @@ import { openImageEditor } from '../../image-editor/image-editor';
 
 const CLASS_PREVIEW = F_CLASS + '_preview_',
 	preview_tpl_next = (next = 'next', right = 'right') =>
-		`<a href="javascript:void(0)" class="${CLASS_PREVIEW}navigation ${CLASS_PREVIEW}navigation-${next}">` +
+		`<div class="${CLASS_PREVIEW}navigation ${CLASS_PREVIEW}navigation-${next}">` +
 		'' +
 		Icon.get('angle-' + right) +
 		'</a>';

package/src/modules/file-browser/listeners/state-listeners.ts

@@ -123,7 +123,7 @@ export function stateListeners(this: FileBrowser): void {
 							F_CLASS + '__tree-item',
 							{
 								draggable: 'draggable',
-								href: 'javascript:void(0)',
+								href: '#',
 								'data-path': normalizePath(
 									source.path,
 									name + '/'
@@ -144,6 +144,7 @@ export function stateListeners(this: FileBrowser): void {
 								});
 
 								e.stopPropagation();
+								e.preventDefault();
 							};
 
 						this.e.on(folderElm, 'click', action('openFolder'));

package/src/modules/file-browser/styles/preview.less

@@ -7,50 +7,53 @@
 @import (reference) '../../../styles/variables';
 
 .jodit-filebrowser_preview {
-	text-align: center;
+	position: relative;
+	display: flex;
+
 	min-width: 600px;
 	max-width: 1000px;
 	min-height: 700px;
 	max-height: 100%;
-	position: relative;
-	display: flex;
-	justify-content: center;
+
 	align-items: center;
+	justify-content: center;
+
+	text-align: center;
 
 	@media (max-width: @screen-sm) {
-		max-width: 100%;
-		max-height: 100%;
 		min-width: auto;
-		min-height: auto;
+		max-width: 100%;
 		height: 100%;
+		min-height: auto;
+		max-height: 100%;
 	}
 
 	&_box {
-		flex-grow: 1;
 		display: flex;
-		justify-content: center;
+		flex-grow: 1;
 		align-items: center;
+		justify-content: center;
 	}
 
 	&_navigation {
 		position: absolute;
 		top: 0;
-		height: 100%;
 		left: 0;
+		height: 100%;
 
 		&-next {
-			left: auto;
 			right: 0;
+			left: auto;
 		}
 
 		svg {
-			width: 45px;
-			height: 45px;
 			position: relative;
 			top: 50%;
+			width: 45px;
+			height: 45px;
 			margin-top: -22px;
-			transition: fill 0.3s linear;
 			fill: #9e9ba7;
+			transition: fill 0.3s linear;
 		}
 
 		&:hover svg {

package/src/modules/widget/color-picker/color-picker.less

@@ -11,33 +11,34 @@
 	--color-cell-size: 24px;
 	--color-cell-icon-size: 12px;
 
-	text-align: left;
 	margin: 0;
+	text-align: left;
 	user-select: none;
 
-	.jodit-color-picker__group {
-		margin-bottom: calc(var(--padding-default) / 2);
-		white-space: normal;
-		max-width: calc(var(--color-cell-size) * 10);
+	&__group {
 		display: flex;
+		max-width: calc(var(--color-cell-size) * 10);
 		flex-wrap: wrap;
+		margin-bottom: calc(var(--padding-default) / 2);
+		white-space: normal;
 	}
 
-	a {
+	&__color-item {
+		display: block;
+
 		width: var(--color-cell-size);
 		height: var(--color-cell-size);
 
-		display: block;
+		border: 1px solid transparent;
+		text-align: center;
 		text-decoration: none;
 		vertical-align: middle;
-		text-align: center;
-		border: 1px solid transparent;
 
 		&:hover {
 			border-color: #000;
 		}
 
-		&.jodit_active,
+		&_active_true,
 		&:active {
 			border: 2px solid var(--color-border-selected);
 		}
@@ -45,9 +46,9 @@
 
 	&__native {
 		svg {
+			display: inline-block;
 			width: 16px;
 			height: 16px;
-			display: inline-block;
 			margin-right: 4px;
 		}
 

package/src/modules/widget/color-picker/color-picker.ts

@@ -41,8 +41,9 @@ export const ColorPickerWidget = (
 	callback: (newColor: string) => void,
 	coldColor: string
 ): HTMLDivElement => {
-	const valueHex = normalizeColor(coldColor),
-		form = editor.c.div('jodit-color-picker'),
+	const cn = 'jodit-color-picker',
+		valueHex = normalizeColor(coldColor),
+		form = editor.c.div(cn),
 		iconPalette: string = editor.o.textIcons
 			? `<span>${editor.i18n('palette')}</span>`
 			: Icon.get('palette'),
@@ -52,9 +53,7 @@ export const ColorPickerWidget = (
 			if (isPlainObject(colors)) {
 				Object.keys(colors).forEach(key => {
 					stack.push(
-						'<div class="jodit-color-picker__group jodit-color-picker__group-' +
-							key +
-							'">'
+						`<div class="${cn}__group ${cn}__group-${key}">`
 					);
 					stack.push(eachColor((colors as any)[key]));
 					stack.push('</div>');
@@ -62,35 +61,26 @@ export const ColorPickerWidget = (
 			} else if (isArray(colors)) {
 				colors.forEach(color => {
 					stack.push(
-						'<a ' +
-							(valueHex === color
-								? ' class="jodit_active" '
-								: '') +
-							' title="' +
-							color +
-							'" style="background-color:' +
-							color +
-							'" data-color="' +
-							color +
-							'" href="javascript:void(0)"></a>'
+						`<span class='${cn}__color-item ${
+							valueHex === color
+								? cn + '__color-item_active_true'
+								: ''
+						}' title="${color}" style="background-color:${color}" data-color="${color}"></span>`
 					);
 				});
 			}
+
 			return stack.join('');
 		};
 
 	form.appendChild(
 		editor.c.fromHTML(
-			'<div class="jodit-color-picker__groups">' +
-				eachColor(editor.o.colors) +
-				'</div>'
+			`<div class="${cn}__groups">${eachColor(editor.o.colors)}</div>`
 		)
 	);
 
 	form.appendChild(
-		editor.c.fromHTML(
-			'<div data-ref="extra" class="jodit-color-picker__extra"></div>'
-		)
+		editor.c.fromHTML(`<div data-ref="extra" class="${cn}__extra"></div>`)
 	);
 
 	const { extra } = refs(form);
@@ -98,17 +88,14 @@ export const ColorPickerWidget = (
 	if (editor.o.showBrowserColorPicker && hasBrowserColorPicker()) {
 		extra.appendChild(
 			editor.c.fromHTML(
-				'<div class="jodit-color-picker__native">' +
-					iconPalette +
-					'<input type="color" value="#ffffff"/>' +
-					'</div>'
+				`<div class="${cn}__native">${iconPalette}<input type="color" value="#ffffff"/></div>`
 			)
 		);
 
 		editor.e.on(form, 'change', (e: MouseEvent) => {
 			e.stopPropagation();
 
-			const target: HTMLInputElement = e.target as HTMLInputElement;
+			const target = e.target as HTMLInputElement;
 
 			if (!target || !target.tagName || !Dom.isTag(target, 'input')) {
 				return;
@@ -138,18 +125,21 @@ export const ColorPickerWidget = (
 		) {
 			target = Dom.closest(
 				target.parentNode,
-				'a',
+				'span',
 				editor.editor
 			) as HTMLElement;
 		}
 
-		if (!Dom.isTag(target, 'a')) {
+		if (
+			!Dom.isTag(target, 'span') ||
+			!target.classList.contains(cn + '__color-item')
+		) {
 			return;
 		}
 
 		const color: string = attr(target, '-color') || '';
 
-		if (callback && typeof callback === 'function') {
+		if (callback && isFunction(callback)) {
 			callback(color);
 		}
 

package/src/plugins/clipboard/paste-storage/paste-storage.ts

@@ -16,6 +16,7 @@ import { Dialog } from '../../../modules/dialog';
 import { Plugin } from '../../../core/plugin';
 import { Dom } from '../../../core/dom';
 import { attr, toArray } from '../../../core/helpers';
+import { Button } from '../../../core/ui';
 
 /**
  * Show dialog choose content to paste
@@ -121,7 +122,7 @@ export class pasteStorage extends Plugin {
 
 			this.j.e.on(a, 'keydown', this.onKeyDown);
 
-			attr(a, 'href', 'javascript:void(0)');
+			attr(a, 'href', '#');
 			attr(a, 'data-index', index.toString());
 			attr(a, 'tab-index', '-1');
 
@@ -140,25 +141,13 @@ export class pasteStorage extends Plugin {
 			language: this.j.o.language
 		});
 
-		const pasteButton: HTMLAnchorElement = this.j.c.fromHTML(
-			'<a href="javascript:void(0)" style="float:right;" class="jodit-button">' +
-				'<span>' +
-				this.j.i18n('Paste') +
-				'</span>' +
-				'</a>'
-		) as HTMLAnchorElement;
-
-		this.j.e.on(pasteButton, 'click', this.paste);
-
-		const cancelButton: HTMLAnchorElement = this.j.c.fromHTML(
-			'<a href="javascript:void(0)" style="float:right; margin-right: 10px;" class="jodit-button">' +
-				'<span>' +
-				this.j.i18n('Cancel') +
-				'</span>' +
-				'</a>'
-		) as HTMLAnchorElement;
-
-		this.j.e.on(cancelButton, 'click', this.dialog.close);
+		const pasteButton = Button(this.j, 'paste', 'Paste', 'primary');
+
+		pasteButton.onAction(this.paste);
+
+		const cancelButton = Button(this.j, '', 'Cancel');
+
+		cancelButton.onAction(this.dialog.close);
 
 		this.container = this.j.c.div();
 		this.container.classList.add('jodit-paste-storage');

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

@@ -18,9 +18,9 @@ import {
 	INSEPARABLE_TAGS
 } from '../../core/constants';
 import { Dom, Select } from '../../modules';
-import { isString, keys, trim } from '../../core/helpers';
+import { isString, keys, safeHTML, trim } from '../../core/helpers';
 import { Plugin } from '../../core/plugin';
-import { autobind, debounce } from '../../core/decorators';
+import { watch, autobind, debounce } from '../../core/decorators';
 import { findNotEmptySibling } from '../keyboard/helpers';
 
 declare module '../../config' {
@@ -36,6 +36,16 @@ declare module '../../config' {
 			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.
@@ -96,7 +106,10 @@ Config.prototype.cleanHTML = {
 		b: 'strong'
 	},
 	allowTags: false,
-	denyTags: false
+	denyTags: false,
+
+	removeOnError: true,
+	safeJavaScriptLink: true
 };
 
 Config.prototype.controls.eraser = {
@@ -139,6 +152,8 @@ export class cleanHtml extends Plugin {
 
 		const editor = this.j;
 
+		this.onSafeHTML(editor.editor);
+
 		const current = editor.s.current();
 
 		const replaceOldTags = editor.o.cleanHTML.replaceOldTags;
@@ -528,6 +543,24 @@ export class cleanHtml extends Plugin {
 		return false;
 	}
 
+	/**
+	 * Event handler when manually assigning a value to the HTML editor.
+	 */
+	@watch(':beforeSetNativeEditorValue')
+	protected onBeforeSetNativeEditorValue(data: { value: string }): boolean {
+		const sandBox = this.j.createInside.div();
+		sandBox.innerHTML = data.value;
+		this.onSafeHTML(sandBox);
+		data.value = sandBox.innerHTML;
+
+		return false;
+	}
+
+	@watch(':safeHTML')
+	protected onSafeHTML(sandBox: HTMLElement): void {
+		safeHTML(sandBox, this.j.o.cleanHTML);
+	}
+
 	/** @override */
 	protected override beforeDestruct(): void {
 		this.j.e.off('.cleanHtml');

package/src/plugins/iframe.ts

@@ -321,7 +321,7 @@ export function iframe(editor: IJodit): void {
 						)
 						.on(
 							'beforeSetNativeEditorValue',
-							(value: string): boolean => {
+							({ value }: { value: string }): boolean => {
 								if (editor.isLocked) {
 									return false;
 								}
@@ -340,16 +340,26 @@ export function iframe(editor: IJodit): void {
 										);
 										doc.close();
 										editor.editor = doc.body;
+										editor.e.fire(
+											'safeHTML',
+											editor.editor
+										);
 
 										toggleEditable();
 										editor.e.fire('prepareWYSIWYGEditor');
+
+										editor.e.stopPropagation(
+											'beforeSetNativeEditorValue'
+										);
 									}
 								} else {
 									doc.body.innerHTML = value;
 								}
 
 								return true;
-							}
+							},
+							undefined,
+							true
 						);
 				}
 

package/src/plugins/link/link.ts

@@ -360,6 +360,7 @@ export class link extends Plugin {
 
 		if (unlink) {
 			jodit.e.on(unlink, 'click', (e: MouseEvent) => {
+				jodit.s.restore();
 				jodit.observer.snapshot.restore(snapshot);
 
 				if (link) {
@@ -382,6 +383,7 @@ export class link extends Plugin {
 
 			let links: HTMLAnchorElement[];
 
+			jodit.s.restore();
 			jodit.s.removeMarkers();
 			jodit.editor.normalize();
 			jodit.observer.snapshot.restore(snapshot);
@@ -405,6 +407,8 @@ export class link extends Plugin {
 					jodit.s.insertNode(a, false, false);
 					links = [a];
 				}
+
+				links.forEach(link => jodit.s.select(link));
 			} else {
 				links = [link];
 			}
@@ -445,12 +449,20 @@ export class link extends Plugin {
 				}
 
 				if (!isImageContent) {
+					let newContent = a.textContent;
+
 					if (content_input.value.trim().length) {
 						if (textWasChanged) {
-							a.textContent = content_input.value;
+							newContent = content_input.value;
 						}
 					} else {
-						a.textContent = url_input.value;
+						newContent = url_input.value;
+					}
+
+					const content = a.textContent;
+
+					if (newContent !== content) {
+						a.textContent = newContent;
 					}
 				}
 

package/src/plugins/resizer/resizer.ts

@@ -42,6 +42,11 @@ declare module '../../config' {
 			showSize: boolean;
 			hideSizeTimeout: number;
 
+			/**
+			 * When resizing images, change not the styles but the width and height attributes
+			 */
+			forImageChangeAttributes: boolean;
+
 			/**
 			 * The minimum width for the editable element
 			 */
@@ -60,6 +65,7 @@ Config.prototype.allowResizeTags = ['img', 'iframe', 'table', 'jodit'];
 Config.prototype.resizer = {
 	showSize: true,
 	hideSizeTimeout: 1000,
+	forImageChangeAttributes: true,
 	min_width: 10,
 	min_height: 10
 };
@@ -119,7 +125,7 @@ export class resizer extends Plugin {
 				'afterGetValueFromEditor.resizer',
 				(data: { value: string }) => {
 					const rgx =
-						/<jodit[^>]+data-jodit_iframe_wrapper[^>]+>(.*?<iframe[^>]+>.*?<\/iframe>.*?)<\/jodit>/gi;
+						/<jodit[^>]+data-jodit_iframe_wrapper[^>]+>(.*?<iframe[^>]*>.*?<\/iframe>.*?)<\/jodit>/gi;
 
 					if (rgx.test(data.value)) {
 						data.value = data.value.replace(rgx, '$1');
@@ -276,14 +282,14 @@ export class resizer extends Plugin {
 
 			if (new_w > this.j.o.resizer.min_width) {
 				if (new_w < (this.rect.parentNode as HTMLElement).offsetWidth) {
-					css(this.element, 'width', new_w);
+					this.applySize(this.element, 'width', new_w);
 				} else {
-					css(this.element, 'width', '100%');
+					this.applySize(this.element, 'width', '100%');
 				}
 			}
 
 			if (new_h > this.j.o.resizer.min_height) {
-				css(this.element, 'height', new_h);
+				this.applySize(this.element, 'height', new_h);
 			}
 
 			this.updateSize();
@@ -297,6 +303,18 @@ export class resizer extends Plugin {
 		}
 	};
 
+	private applySize(
+		element: HTMLElement,
+		key: 'width' | 'height',
+		value: number | string
+	): void {
+		if (Dom.isImage(element) && this.j.o.resizer.forImageChangeAttributes) {
+			attr(element, key, value);
+		} else {
+			css(element, key, value);
+		}
+	}
+
 	private onClickOutside = (e: MouseEvent) => {
 		if (this.isShown) {
 			if (this.isResized) {

package/src/plugins/size/resize-handler.ts

@@ -114,7 +114,7 @@ export class resizeHandler extends Plugin {
 	 */
 	private handle = this.j.c.div(
 		'jodit-editor__resize',
-		'<a tabindex="-1" href="javascript:void(0)"></a>'
+		'<span tabindex="-1"></span>'
 	);
 
 	/** @override **/