jodit 3.15.2 → 3.16.2

package/src/modules/uploader/uploader.ts

@@ -95,7 +95,7 @@ export class Uploader extends ViewComponent implements IUploader {
 		handlerSuccess?: HandlerSuccess,
 		handlerError?: HandlerError
 	): void {
-		const onFinally = () => {
+		const onFinally = (): void => {
 			form.classList.remove('jodit_drag_hover');
 		};
 
@@ -105,7 +105,7 @@ export class Uploader extends ViewComponent implements IUploader {
 
 				const cData = e.clipboardData;
 
-				const process = (formdata: FormData) => {
+				const process = (formdata: FormData): void => {
 					if (file) {
 						formdata.append('extension', extension);
 						formdata.append('mimetype', file.type);
@@ -182,7 +182,7 @@ export class Uploader extends ViewComponent implements IUploader {
 		handlerSuccess?: HandlerSuccess,
 		handlerError?: HandlerError,
 		onFinally?: () => void
-	) {
+	): void {
 		const self = this;
 
 		self.j.e

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

@@ -53,7 +53,7 @@ export const ColorPickerWidget = (
 		iconPalette: string = editor.o.textIcons
 			? `<span>${editor.i18n('palette')}</span>`
 			: Icon.get('palette'),
-		eachColor = (colors: string[] | IDictionary<string[]>) => {
+		eachColor = (colors: string[] | IDictionary<string[]>): string => {
 			const stack: string[] = [];
 
 			if (isPlainObject(colors)) {
@@ -119,6 +119,7 @@ export const ColorPickerWidget = (
 
 	editor.e.on(form, 'mousedown touchend', (e: MouseEvent) => {
 		e.stopPropagation();
+		e.preventDefault();
 
 		let target = e.target as HTMLElement;
 
@@ -148,8 +149,6 @@ export const ColorPickerWidget = (
 		if (callback && isFunction(callback)) {
 			callback(color);
 		}
-
-		e.preventDefault();
 	});
 
 	editor.e.fire('afterGenerateColorPicker', form, extra, callback, valueHex);

package/src/modules/widget/tabs/tabs.ts

@@ -40,13 +40,13 @@ export interface TabOption {
  * ```
  */
 export const TabsWidget = (
-	editor: IJodit,
+	jodit: IJodit,
 	tabs: TabOption[],
 	state?: { __activeTab: string }
 ): HTMLDivElement => {
-	const box: HTMLDivElement = editor.c.div('jodit-tabs'),
-		tabBox: HTMLDivElement = editor.c.div('jodit-tabs__wrapper'),
-		buttons: HTMLDivElement = editor.c.div('jodit-tabs__buttons'),
+	const box: HTMLDivElement = jodit.c.div('jodit-tabs'),
+		tabBox: HTMLDivElement = jodit.c.div('jodit-tabs__wrapper'),
+		buttons: HTMLDivElement = jodit.c.div('jodit-tabs__buttons'),
 		nameToTab: IDictionary<{
 			button: IUIButton;
 			tab: HTMLElement;
@@ -54,7 +54,7 @@ export const TabsWidget = (
 		buttonList: IUIButton[] = [];
 
 	let firstTab: string = '',
-		tabcount: number = 0;
+		tabCount: number = 0;
 
 	box.appendChild(buttons);
 	box.appendChild(tabBox);
@@ -77,8 +77,13 @@ export const TabsWidget = (
 	};
 
 	tabs.forEach(({ icon, name, content }) => {
-		const tab = editor.c.div('jodit-tab'),
-			button = Button(editor, icon || name, name);
+		const tab = jodit.c.div('jodit-tab'),
+			button = Button(jodit, icon || name, name);
+
+		// Stop lose the focus
+		jodit.e.on(button.container, 'mousedown', (e: MouseEvent) =>
+			e.preventDefault()
+		);
 
 		if (!firstTab) {
 			firstTab = name;
@@ -97,7 +102,7 @@ export const TabsWidget = (
 				content instanceof UIElement ? content.container : content
 			);
 		} else {
-			tab.appendChild(editor.c.div('jodit-tab_empty'));
+			tab.appendChild(jodit.c.div('jodit-tab_empty'));
 		}
 
 		tabBox.appendChild(tab);
@@ -106,7 +111,7 @@ export const TabsWidget = (
 			setActive(name);
 
 			if (isFunction(content)) {
-				content.call(editor);
+				content.call(jodit);
 			}
 
 			if (state) {
@@ -121,15 +126,15 @@ export const TabsWidget = (
 			tab
 		};
 
-		tabcount += 1;
+		tabCount += 1;
 	});
 
-	if (!tabcount) {
+	if (!tabCount) {
 		return box;
 	}
 
 	$$('a', buttons).forEach(a => {
-		a.style.width = (100 / tabcount).toFixed(10) + '%';
+		a.style.width = (100 / tabCount).toFixed(10) + '%';
 	});
 
 	const tab =

package/src/plugins/add-new-line/add-new-line.ts

@@ -91,7 +91,7 @@ export class addNewLine extends Plugin {
 	private lineInFocus: boolean = false;
 	private isShown: boolean = false;
 
-	private show() {
+	private show(): void {
 		if (this.isShown || this.j.o.readonly || this.j.isLocked) {
 			return;
 		}
@@ -104,7 +104,7 @@ export class addNewLine extends Plugin {
 		this.line.style.width = this.j.editor.clientWidth + 'px';
 	}
 
-	private hideForce = () => {
+	private hideForce = (): void => {
 		if (!this.isShown) {
 			return;
 		}
@@ -115,7 +115,7 @@ export class addNewLine extends Plugin {
 		Dom.safeRemove(this.line);
 	};
 
-	private hide = () => {
+	private hide = (): void => {
 		if (!this.isShown || this.lineInFocus) {
 			return;
 		}
@@ -157,7 +157,7 @@ export class addNewLine extends Plugin {
 		this.addEventListeners();
 	}
 
-	private addEventListeners() {
+	private addEventListeners(): void {
 		const editor = this.j;
 
 		editor.e
@@ -181,7 +181,7 @@ export class addNewLine extends Plugin {
 			);
 	}
 
-	private onClickLine = (e: MouseEvent) => {
+	private onClickLine = (e: MouseEvent): void => {
 		const editor = this.j;
 		const p = editor.createInside.element(editor.o.enter);
 
@@ -200,7 +200,7 @@ export class addNewLine extends Plugin {
 		e.preventDefault();
 	};
 
-	private onDblClickEditor = (e: MouseEvent) => {
+	private onDblClickEditor = (e: MouseEvent): void => {
 		const editor = this.j;
 
 		if (
@@ -230,14 +230,14 @@ export class addNewLine extends Plugin {
 			}
 
 			editor.s.setCursorIn(p);
-			editor.setEditorValue();
+			editor.synchronizeValues();
 
 			this.hideForce();
 			e.preventDefault();
 		}
 	};
 
-	private onMouseMove = (e: MouseEvent) => {
+	private onMouseMove = (e: MouseEvent): void => {
 		const editor = this.j;
 
 		let currentElement: HTMLElement | null = editor.ed.elementFromPoint(

package/src/plugins/class-span/class-span.ts

@@ -93,7 +93,7 @@ Config.prototype.controls.classSpan = {
  * Applying some className to selected text.
  * @example
  * ```js
- * const editor = new Jodit('#editor', {
+ * const editor = Jodit.make('#editor', {
  *	controls: {
  *		classSpan: {
  *			list: {

package/src/plugins/clipboard/copy-format.ts

@@ -114,7 +114,7 @@ Config.prototype.controls.copyformat = {
 
 			const format = getStyles(editor, box, defaultStyles);
 
-			const onMouseUp = () => {
+			const onMouseUp = (): void => {
 				editor.buffer.delete(pluginKey);
 
 				const currentNode = editor.s.current();

package/src/plugins/clipboard/drag-and-drop-element.ts

@@ -74,8 +74,10 @@ export class DragAndDropElement extends Plugin {
 			return;
 		}
 
-		const matched = (node: Nullable<Node>) =>
-			node && this.dragList.includes(node.nodeName.toLowerCase());
+		const matched = (node: Nullable<Node>): boolean =>
+			Boolean(
+				node && this.dragList.includes(node.nodeName.toLowerCase())
+			);
 
 		let lastTarget: Nullable<HTMLElement> =
 			(Dom.furthest(target, matched, this.j.editor) as HTMLElement) ||

package/src/plugins/clipboard/paste/config.ts

@@ -8,13 +8,18 @@
  * @module plugins/clipboard/paste
  */
 
-import { INSERT_AS_HTML, TEXT_PLAIN } from 'jodit/core/constants';
+import type { IControlType, IJodit, IUIOption } from 'jodit/types';
+import type { InsertMode } from 'jodit/plugins/clipboard/paste/interface';
+import {
+	INSERT_AS_HTML,
+	INSERT_AS_TEXT,
+	INSERT_ONLY_TEXT,
+	TEXT_PLAIN
+} from 'jodit/core/constants';
 import { Config } from 'jodit/config';
-import type { IControlType, IJodit } from 'jodit/types';
 import { pluginKey as clipboardPluginKey } from '../clipboard';
 import { pasteInsertHtml } from './helpers';
 import { Alert } from 'jodit/modules/dialog/alert';
-import type { InsertMode } from 'jodit/plugins/clipboard/paste/interface';
 
 declare module 'jodit/config' {
 	interface Config {
@@ -49,12 +54,23 @@ declare module 'jodit/config' {
 		 * Draggable elements
 		 */
 		draggableTags: string | string[];
+
+		/**
+		 * Options when inserting HTML string
+		 */
+		pasteHTMLActionList: IUIOption[];
 	}
 }
 
 Config.prototype.askBeforePasteHTML = true;
 Config.prototype.processPasteHTML = true;
 
+Config.prototype.pasteHTMLActionList = [
+	{ value: INSERT_AS_HTML, text: 'Keep' },
+	{ value: INSERT_AS_TEXT, text: 'Insert as Text' },
+	{ value: INSERT_ONLY_TEXT, text: 'Insert only Text' }
+];
+
 Config.prototype.memorizeChoiceWhenPasteFragment = false;
 
 Config.prototype.nl2brInPlainText = true;

package/src/plugins/clipboard/paste/helpers.ts

@@ -8,7 +8,7 @@
  * @module plugins/clipboard/paste
  */
 
-import type { IJodit, Nullable } from 'jodit/types';
+import type { IJodit, IUIOption, Nullable } from 'jodit/types';
 import type {
 	PasteEvent,
 	InsertMode
@@ -21,12 +21,7 @@ import {
 } from 'jodit/core/helpers/checker';
 
 import { Dom } from 'jodit/core/dom';
-import {
-	INSERT_AS_HTML,
-	INSERT_AS_TEXT,
-	INSERT_ONLY_TEXT,
-	TEXT_PLAIN
-} from 'jodit/core/constants';
+import { TEXT_PLAIN } from 'jodit/core/constants';
 
 import { Confirm, Dialog } from 'jodit/modules';
 import { Button } from 'jodit/core/ui';
@@ -136,8 +131,7 @@ export function askInsertTypeDialog(
 	msg: string,
 	title: string,
 	callback: (yes: InsertMode) => void,
-	clearButton: string = 'Clean',
-	insertText: string = 'Insert only Text'
+	buttonList: IUIOption[]
 ): Dialog | void {
 	if (
 		jodit.e.fire(
@@ -145,8 +139,7 @@ export function askInsertTypeDialog(
 			msg,
 			title,
 			callback,
-			clearButton,
-			insertText
+			buttonList
 		) === false
 	) {
 		return;
@@ -163,50 +156,25 @@ export function askInsertTypeDialog(
 
 	markOwner(jodit, dialog.container);
 
-	const keep = Button(jodit, {
-		text: 'Keep',
-		name: 'keep',
-		variant: 'primary',
-		tabIndex: 0
-	});
-
-	const clear = Button(jodit, {
-		text: clearButton,
-		tabIndex: 0
-	});
-
-	const clear2 = Button(jodit, {
-		text: insertText,
-		tabIndex: 0
-	});
+	const buttons = buttonList.map(({ text, value }) =>
+		Button(jodit, {
+			text,
+			name: text.toLowerCase(),
+			tabIndex: 0
+		}).onAction(() => callback(value as InsertMode))
+	);
 
 	const cancel = Button(jodit, {
 		text: 'Cancel',
 		tabIndex: 0
 	});
 
-	keep.onAction(() => {
-		dialog.close();
-		callback(INSERT_AS_HTML);
-	});
-
-	clear.onAction(() => {
-		dialog.close();
-		callback(INSERT_AS_TEXT);
-	});
-
-	clear2.onAction(() => {
-		dialog.close();
-		callback(INSERT_ONLY_TEXT);
-	});
-
-	cancel.onAction(() => {
-		dialog.close();
-	});
-
-	dialog.setFooter([keep, clear, insertText ? clear2 : '', cancel]);
+	dialog.setFooter(
+		[...buttons, cancel].map(btn => btn.onAction(() => dialog.close()))
+	);
 
-	keep.focus();
+	buttons[0].focus();
+	buttons[0].state.variant = 'primary';
 
 	jodit.e.fire(
 		'afterOpenPasteDialog',
@@ -214,8 +182,7 @@ export function askInsertTypeDialog(
 		msg,
 		title,
 		callback,
-		clearButton,
-		insertText
+		buttonList
 	);
 
 	return dialog;

package/src/plugins/clipboard/paste/interface.ts

@@ -27,3 +27,9 @@ export type PastedValue = {
 	html: string | Node;
 	action?: InsertMode;
 };
+
+export interface PastedData {
+	html?: string;
+	plain?: string;
+	rtf?: string;
+}

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

@@ -11,7 +11,12 @@
  */
 
 import type { IJodit } from 'jodit/types';
-import type { InsertMode, PastedValue, PasteEvent } from './interface';
+import type {
+	InsertMode,
+	PastedData,
+	PastedValue,
+	PasteEvent
+} from './interface';
 import { Plugin } from 'jodit/core/plugin';
 import {
 	askInsertTypeDialog,
@@ -27,7 +32,8 @@ import {
 	INSERT_CLEAR_HTML,
 	INSERT_ONLY_TEXT,
 	TEXT_HTML,
-	TEXT_PLAIN
+	TEXT_PLAIN,
+	TEXT_RTF
 } from 'jodit/core/constants';
 
 import {
@@ -93,13 +99,21 @@ export class paste extends Plugin {
 		}
 
 		const dt = getDataTransfer(e),
-			texts = [dt?.getData(TEXT_HTML), dt?.getData(TEXT_PLAIN)];
+			texts: PastedData = {
+				html: dt?.getData(TEXT_HTML),
+				plain: dt?.getData(TEXT_PLAIN),
+				rtf: dt?.getData(TEXT_RTF)
+			};
+
+		let key: keyof PastedData;
+
+		for (key in texts) {
+			const value = texts[key];
 
-		for (const text of texts) {
 			if (
-				isHTML(text) &&
-				(this.j.e.fire('processHTML', e, text) ||
-					this.processHTML(e, text))
+				isHTML(value) &&
+				(this.j.e.fire('processHTML', e, value, texts) ||
+					this.processHTML(e, value))
 			) {
 				return false;
 			}
@@ -161,7 +175,7 @@ export class paste extends Plugin {
 				insertType => {
 					this.insertByType(e, html, insertType);
 				},
-				'Insert as Text'
+				this.j.o.pasteHTMLActionList
 			);
 
 			return true;

package/src/plugins/clipboard/paste-from-word/config.ts

@@ -10,6 +10,12 @@
 
 import type { InsertMode } from 'jodit/plugins/clipboard/paste/interface';
 import { Config } from 'jodit/config';
+import type { IUIOption } from 'jodit/types';
+import {
+	INSERT_AS_HTML,
+	INSERT_AS_TEXT,
+	INSERT_ONLY_TEXT
+} from 'jodit/core/constants';
 
 declare module 'jodit/config' {
 	interface Config {
@@ -33,9 +39,20 @@ declare module 'jodit/config' {
 		 * ```
 		 */
 		defaultActionOnPasteFromWord: InsertMode | null;
+
+		/**
+		 * Options when inserting data from Word
+		 */
+		pasteFromWordActionList: IUIOption[];
 	}
 }
 
 Config.prototype.askBeforePasteFromWord = true;
 Config.prototype.processPasteFromWord = true;
 Config.prototype.defaultActionOnPasteFromWord = null;
+
+Config.prototype.pasteFromWordActionList = [
+	{ value: INSERT_AS_HTML, text: 'Keep' },
+	{ value: INSERT_AS_TEXT, text: 'Clean' },
+	{ value: INSERT_ONLY_TEXT, text: 'Insert only Text' }
+];

package/src/plugins/clipboard/paste-from-word/paste-from-word.ts

@@ -33,6 +33,7 @@ import {
 	askInsertTypeDialog,
 	pasteInsertHtml
 } from 'jodit/plugins/clipboard/paste/helpers';
+import type { PastedData } from 'jodit/plugins/clipboard/paste/interface';
 import { watch } from 'jodit/src/core/decorators';
 
 import './config';
@@ -45,13 +46,18 @@ export class PasteFromWord extends Plugin {
 	 * Try if text is Word's document fragment and try process this
 	 */
 	@watch(':processHTML')
-	protected processWordHTML(e: PasteEvent, text: string): boolean {
+	protected processWordHTML(
+		e: PasteEvent,
+		text: string,
+		texts: PastedData
+	): boolean {
 		const { j } = this,
 			{
 				processPasteFromWord,
 				askBeforePasteFromWord,
 				defaultActionOnPasteFromWord,
-				defaultActionOnPaste
+				defaultActionOnPaste,
+				pasteFromWordActionList
 			} = j.o;
 
 		if (processPasteFromWord && isHtmlFromWord(text)) {
@@ -62,14 +68,16 @@ export class PasteFromWord extends Plugin {
 						'Do you want to keep the format or clean it up?',
 					'Word Paste Detected',
 					insertType => {
-						this.insertFromWordByType(e, text, insertType);
-					}
+						this.insertFromWordByType(e, text, insertType, texts);
+					},
+					pasteFromWordActionList
 				);
 			} else {
 				this.insertFromWordByType(
 					e,
 					text,
-					defaultActionOnPasteFromWord || defaultActionOnPaste
+					defaultActionOnPasteFromWord || defaultActionOnPaste,
+					texts
 				);
 			}
 
@@ -85,7 +93,8 @@ export class PasteFromWord extends Plugin {
 	protected insertFromWordByType(
 		e: PasteEvent,
 		html: string,
-		insertType: InsertMode
+		insertType: InsertMode,
+		texts: PastedData
 	): void {
 		switch (insertType) {
 			case INSERT_AS_HTML: {

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

@@ -36,7 +36,7 @@ export class pasteStorage extends Plugin {
 
 	private dialog: Dialog | null = null;
 
-	private paste = () => {
+	private paste = (): void => {
 		this.j.s.focus();
 		this.j.s.insertHTML(this.list[this.currentIndex]);
 
@@ -48,12 +48,12 @@ export class pasteStorage extends Plugin {
 		}
 
 		this.dialog && this.dialog.close();
-		this.j.setEditorValue();
+		this.j.synchronizeValues();
 
 		this.j.e.fire('afterPaste');
 	};
 
-	private onKeyDown = (e: KeyboardEvent) => {
+	private onKeyDown = (e: KeyboardEvent): void => {
 		let index: number = this.currentIndex;
 		if ([KEY_UP, KEY_DOWN, KEY_ENTER].indexOf(e.key) === -1) {
 			return;
@@ -87,7 +87,7 @@ export class pasteStorage extends Plugin {
 		e.preventDefault();
 	};
 
-	private selectIndex = (index: number) => {
+	private selectIndex = (index: number): void => {
 		if (this.listBox) {
 			toArray(
 				this.listBox.childNodes as NodeListOf<HTMLAnchorElement>
@@ -104,7 +104,7 @@ export class pasteStorage extends Plugin {
 		this.currentIndex = index;
 	};
 
-	private showDialog = () => {
+	private showDialog = (): void => {
 		if (this.list.length < 2) {
 			return;
 		}
@@ -140,7 +140,7 @@ export class pasteStorage extends Plugin {
 		}, 100);
 	};
 
-	private createDialog() {
+	private createDialog(): void {
 		this.dialog = new Dialog({
 			language: this.j.o.language
 		});

package/src/plugins/color/color.ts

@@ -19,7 +19,7 @@ Config.prototype.controls.brush = {
 		const color = dataBind(button, 'color');
 		const editor = button.j as IJodit;
 
-		const update = (key: string, value: string) => {
+		const update = (key: string, value: string): void => {
 			if (value && value !== css(editor.editor, key).toString()) {
 				button.state.icon.fill = value;
 				return;
@@ -209,7 +209,7 @@ export function color(editor: IJodit): void {
 				break;
 		}
 
-		editor.setEditorValue();
+		editor.synchronizeValues();
 		return false;
 	};
 

package/src/plugins/error-messages/error-messages.ts

@@ -44,7 +44,7 @@ export function errorMessages(editor: IJodit): void {
 	if (editor.o.showMessageErrors) {
 		const activeClass = editor.getFullElName(ELM_NAME, 'active', true),
 			messagesBox = editor.c.div(editor.getFullElName(ELM_NAME)),
-			calcOffsets = () => {
+			calcOffsets = (): void => {
 				let height = 5;
 
 				toArray(
@@ -65,7 +65,7 @@ export function errorMessages(editor: IJodit): void {
 		 * options.showMessageErrorTime = 2000
 		 * @example
 		 * ```javascript
-		 * const editor = new Jodit('#editors');
+		 * const editor = Jodit.make('#editors');
 		 * editor.e.fire('errorMessage', 'Error 123. File has not been upload');
 		 * editor.e.fire('errorMessage', 'You can upload file', 'info', 4000);
 		 * editor.e.fire('errorMessage', 'File was uploaded', 'success', 4000);

package/src/plugins/fix/clean-html/README.md

@@ -0,0 +1,26 @@
+The plugin allows you to ensure that the document does not contain unwanted tags, xxs scripts and the like.
+
+For example, you can explicitly specify which tags or attributes are allowed and which are not.:
+
+```javascript
+Jodit.make('#editor', {
+	cleanHTML: {
+		allowTags: {
+			p: true,
+			a: {
+				href: true
+			},
+			table: true,
+			tbody: true,
+			tr: true,
+			td: true,
+			th: false,
+			img: {
+				src: '1.png'
+			}
+		}
+	}
+});
+```
+
+Plugin settings are under the namespace [[Config.cleanHTML]]