jodit 3.15.2 → 3.16.2

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

@@ -8,7 +8,7 @@
  * @module modules/file-browser
  */
 
-import type { IFileBrowser } from 'jodit/types';
+import type { IDialog, IFileBrowser } from 'jodit/types';
 import { Dialog } from 'jodit/modules/dialog';
 
 import { Dom } from 'jodit/core/dom';
@@ -22,7 +22,7 @@ import { loadTree } from 'jodit/modules/file-browser/fetch/load-tree';
 import { deleteFile } from 'jodit/modules/file-browser/fetch/delete-file';
 
 const CLASS_PREVIEW = 'jodit-filebrowser-preview',
-	preview_tpl_next = (next = 'next', right = 'right') =>
+	preview_tpl_next = (next = 'next', right = 'right'): string =>
 		`<div class="${CLASS_PREVIEW}__navigation ${CLASS_PREVIEW}__navigation_arrow_${next}">` +
 		'' +
 		Icon.get('angle-' + right) +
@@ -45,7 +45,7 @@ export default (self: IFileBrowser): ((e: DragEvent) => boolean | void) => {
 		let item: HTMLElement = a;
 
 		const opt = self.options,
-			ga = (key: string) => attr(item, key) || '';
+			ga = (key: string): string => attr(item, key) || '';
 
 		self.async.setTimeout(() => {
 			const selectedItem = elementToItem(a, elementsMap(self));
@@ -64,15 +64,14 @@ export default (self: IFileBrowser): ((e: DragEvent) => boolean | void) => {
 					? {
 							icon: 'pencil',
 							title: 'Edit',
-							exec: () => {
-								return openImageEditor.call(
+							exec: (): Promise<IDialog> =>
+								openImageEditor.call(
 									self,
 									ga('href'),
 									ga('data-name'),
 									ga('data-path'),
 									ga('data-source')
-								);
-							}
+								)
 					  }
 					: false,
 
@@ -80,7 +79,7 @@ export default (self: IFileBrowser): ((e: DragEvent) => boolean | void) => {
 					? {
 							icon: 'italic',
 							title: 'Rename',
-							exec: async () => {
+							exec: (): void => {
 								self.e.fire(
 									'fileRename.filebrowser',
 									ga('data-name'),
@@ -95,7 +94,7 @@ export default (self: IFileBrowser): ((e: DragEvent) => boolean | void) => {
 					? {
 							icon: 'bin',
 							title: 'Delete',
-							exec: async () => {
+							exec: async (): Promise<void> => {
 								try {
 									await deleteFile(
 										self,
@@ -117,7 +116,7 @@ export default (self: IFileBrowser): ((e: DragEvent) => boolean | void) => {
 					? {
 							icon: 'eye',
 							title: 'Preview',
-							exec: () => {
+							exec: (): void => {
 								const preview = new Dialog({
 										fullsize: self.o.fullsize,
 										language: self.o.language,
@@ -134,12 +133,12 @@ export default (self: IFileBrowser): ((e: DragEvent) => boolean | void) => {
 									prev = self.c.fromHTML(
 										preview_tpl_next('prev', 'left')
 									),
-									addLoadHandler = (src: string) => {
+									addLoadHandler = (src: string): void => {
 										const image = self.c.element('img');
 
 										image.setAttribute('src', src);
 
-										const onload = () => {
+										const onload = (): void => {
 											if (self.isInDestruct) {
 												return;
 											}
@@ -250,7 +249,7 @@ export default (self: IFileBrowser): ((e: DragEvent) => boolean | void) => {
 				{
 					icon: 'upload',
 					title: 'Download',
-					exec: () => {
+					exec: (): void => {
 						const url = ga('href');
 
 						if (url) {

package/src/modules/file-browser/fetch/load-tree.ts

@@ -17,7 +17,7 @@ import { loadItems } from 'jodit/modules/file-browser/fetch/load-items';
  * Loads a list of directories
  */
 export async function loadTree(fb: IFileBrowser): Promise<any> {
-	const errorUni = (e: string | Error) => {
+	const errorUni = (e: string | Error): Error => {
 		throw e instanceof Error ? e : error(e);
 	};
 

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

@@ -28,7 +28,8 @@ import type {
 	IUploaderOptions,
 	IDialog,
 	CanUndef,
-	IViewOptions
+	IViewOptions,
+	CallbackFunction
 } from 'jodit/types';
 
 import { Storage } from 'jodit/core/storage';
@@ -90,8 +91,10 @@ export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 	dataProvider!: IFileBrowserDataProvider;
 
 	// eslint-disable-next-line no-unused-vars
-	private onSelect(callback?: (_: IFileBrowserCallBackData) => void) {
-		return () => {
+	private onSelect(
+		callback?: (_: IFileBrowserCallBackData) => void
+	): CallbackFunction {
+		return (): boolean => {
 			if (this.state.activeElements.length) {
 				const files: string[] = [];
 				const isImages: boolean[] = [];
@@ -124,7 +127,7 @@ export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 		};
 	}
 
-	private errorHandler = (resp: Error | IFileBrowserAnswer) => {
+	private errorHandler = (resp: Error | IFileBrowserAnswer): void => {
 		if (resp instanceof Error) {
 			this.status(this.i18n(resp.message));
 		} else {
@@ -258,7 +261,7 @@ export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 		});
 	}
 
-	private initUploader(editor?: IFileBrowser | IJodit) {
+	private initUploader(editor?: IFileBrowser | IJodit): void {
 		const self = this,
 			options = editor?.options?.uploader,
 			uploaderOptions: IUploaderOptions<IUploader> = ConfigProto(
@@ -266,7 +269,7 @@ export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 				Config.defaultOptions.uploader
 			) as IUploaderOptions<IUploader>;
 
-		const uploadHandler = () => loadItems(this);
+		const uploadHandler = (): Promise<any> => loadItems(this);
 
 		self.uploader = self.getInstance('Uploader', uploaderOptions);
 		self.uploader
@@ -399,7 +402,7 @@ export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 		self.setStatus(STATUSES.ready);
 	}
 
-	private proxyDialogEvents(self: FileBrowser) {
+	private proxyDialogEvents(self: FileBrowser): void {
 		['afterClose', 'beforeOpen'].forEach(proxyEvent => {
 			self.dialog.events.on(self.dialog, proxyEvent, () => {
 				this.e.fire(proxyEvent);

package/src/modules/history/README.md

@@ -0,0 +1,5 @@
+To clear the history, you can call the method:
+
+```js
+editor.history.clear();
+```

package/src/modules/{observer → history}/command.ts

@@ -5,25 +5,25 @@
  */
 
 /**
- * @module modules/observer
+ * @module modules/history
  */
 
 import type { SnapshotType } from 'jodit/types';
-import type { Observer } from './observer';
+import type { History } from './history';
 
 export class Command {
 	undo(): void {
-		this.observer.snapshot.restore(this.oldValue);
+		this.history.snapshot.restore(this.oldValue);
 	}
 
 	redo(): void {
-		this.observer.snapshot.restore(this.newValue);
+		this.history.snapshot.restore(this.newValue);
 	}
 
 	constructor(
 		readonly oldValue: SnapshotType,
 		readonly newValue: SnapshotType,
-		readonly observer: Observer,
+		private readonly history: History,
 		readonly tick: number
 	) {}
 }

package/src/modules/{observer/observer.ts → history/history.ts}

@@ -5,12 +5,19 @@
  */
 
 /**
- * [[include:modules/observer/README.md]]
+ * [[include:modules/history/README.md]]
  * @packageDocumentation
- * @module modules/observer
+ * @module modules/history
  */
 
-import type { IJodit, SnapshotType, IObserver } from 'jodit/types';
+import type {
+	IJodit,
+	SnapshotType,
+	IHistory,
+	ISnapshot,
+	IStack,
+	IDestructible
+} from 'jodit/types';
 import { Config } from 'jodit/config';
 import { ViewComponent } from 'jodit/core/component';
 import { Snapshot } from './snapshot';
@@ -20,7 +27,9 @@ import { debounce } from 'jodit/core/decorators';
 
 declare module 'jodit/config' {
 	interface Config {
-		observer: {
+		history: {
+			enable: boolean;
+
 			/**
 			 * Limit of history length
 			 */
@@ -31,21 +40,29 @@ declare module 'jodit/config' {
 			 */
 			timeout: number;
 		};
+
+		/**
+		 * @deprecated Instead use `history`
+		 */
+		observer: this['history'];
 	}
 }
 
-Config.prototype.observer = {
+Config.prototype.history = {
+	enable: true,
 	maxHistoryLength: Infinity,
-	timeout: 100
+	timeout: 1000
 };
 
+Config.prototype.observer = Config.prototype.history;
+
 /**
  * The module monitors the status of the editor and creates / deletes the required number of Undo / Redo shots .
  */
-export class Observer extends ViewComponent<IJodit> implements IObserver {
+export class History extends ViewComponent<IJodit> implements IHistory {
 	/** @override */
-	className(): string {
-		return 'Observer';
+	override className(): string {
+		return 'History';
 	}
 
 	private __startValue!: SnapshotType;
@@ -58,8 +75,58 @@ export class Observer extends ViewComponent<IJodit> implements IObserver {
 		this.__startValue = value;
 	}
 
-	stack: Stack = new Stack(this.j.o.observer.maxHistoryLength);
-	snapshot: Snapshot = new Snapshot(this.j);
+	private readonly stack: IStack;
+	public snapshot: ISnapshot & IDestructible;
+
+	constructor(
+		editor: IJodit,
+		stack = new Stack(editor.o.history.maxHistoryLength),
+		snapshot = new Snapshot(editor)
+	) {
+		super(editor);
+
+		this.stack = stack;
+		this.snapshot = snapshot;
+
+		if (editor.o.history.enable) {
+			editor.e.on('afterAddPlace.history', () => {
+				if (this.isInDestruct) {
+					return;
+				}
+
+				this.startValue = this.snapshot.make();
+
+				editor.events
+					// save selection
+					.on('internalChange', () => {
+						this.startValue = this.snapshot.make();
+					})
+					.on(
+						editor.editor,
+						[
+							'changeSelection',
+							'selectionstart',
+							'selectionchange',
+							'mousedown',
+							'mouseup',
+							'keydown',
+							'keyup'
+						]
+							.map(f => f + '.history')
+							.join(' '),
+						() => {
+							if (
+								this.startValue.html ===
+								this.j.getNativeEditorValue()
+							) {
+								this.startValue = this.snapshot.make();
+							}
+						}
+					)
+					.on(this, 'change.history', this.onChange);
+			});
+		}
+	}
 
 	private updateTick: number = 0;
 
@@ -72,6 +139,10 @@ export class Observer extends ViewComponent<IJodit> implements IObserver {
 	 */
 	@debounce()
 	private onChange(): void {
+		this.processChanges();
+	}
+
+	processChanges(): void {
 		if (this.snapshot.isBlocked) {
 			return;
 		}
@@ -118,6 +189,10 @@ export class Observer extends ViewComponent<IJodit> implements IObserver {
 		}
 	}
 
+	canRedo(): boolean {
+		return this.stack.canRedo();
+	}
+
 	/**
 	 * Return the state of the WYSIWYG editor to step forward
 	 */
@@ -128,64 +203,31 @@ export class Observer extends ViewComponent<IJodit> implements IObserver {
 		}
 	}
 
+	canUndo(): boolean {
+		return this.stack.canUndo();
+	}
+
 	clear(): void {
 		this.startValue = this.snapshot.make();
 		this.stack.clear();
 		this.fireChangeStack();
 	}
 
-	replaceSnapshot(): void {
-		this.updateStack(true);
+	get length(): number {
+		return this.stack.length;
 	}
 
 	private fireChangeStack(): void {
 		this.j && !this.j.isInDestruct && this.j.events?.fire('changeStack');
 	}
 
-	constructor(editor: IJodit) {
-		super(editor);
-
-		editor.e.on('afterAddPlace.observer', () => {
-			if (this.isInDestruct) {
-				return;
-			}
-
-			this.startValue = this.snapshot.make();
-
-			editor.events
-				// save selection
-				.on('internalChange', () => {
-					this.startValue = this.snapshot.make();
-				})
-				.on(
-					editor.editor,
-					[
-						'changeSelection',
-						'selectionstart',
-						'selectionchange',
-						'mousedown',
-						'mouseup',
-						'keydown',
-						'keyup'
-					]
-						.map(f => f + '.observer')
-						.join(' '),
-					() => {
-						if (
-							this.startValue.html ===
-							this.j.getNativeEditorValue()
-						) {
-							this.startValue = this.snapshot.make();
-						}
-					}
-				)
-				.on(this, 'change.observer', this.onChange);
-		});
-	}
-
 	override destruct(): void {
+		if (this.isInDestruct) {
+			return;
+		}
+
 		if (this.j.events) {
-			this.j.e.off('.observer');
+			this.j.e.off('.history');
 		}
 
 		this.snapshot.destruct();

package/src/modules/{observer → history}/snapshot.ts

@@ -5,20 +5,19 @@
  */
 
 /**
- * @module modules/observer
+ * @module modules/history
  */
 
 import type { IJodit, ISnapshot, SnapshotType } from 'jodit/types';
 import { ViewComponent } from 'jodit/core/component';
 import { Dom } from 'jodit/core/dom';
 
-// declare const isProd: boolean;
 /**
  * Module for creating snapshot of editor which includes html content and the current selection
  */
 export class Snapshot extends ViewComponent<IJodit> implements ISnapshot {
 	/** @override */
-	className(): string {
+	override className(): string {
 		return 'Snapshot';
 	}
 
@@ -186,7 +185,7 @@ export class Snapshot extends ViewComponent<IJodit> implements ISnapshot {
 
 		const value = this.j.getNativeEditorValue();
 		if (value !== snapshot.html) {
-			this.j.setEditorValue(snapshot.html);
+			this.j.value = snapshot.html;
 		}
 
 		this.restoreOnlySelection(snapshot);

package/src/modules/{observer → history}/stack.ts

@@ -5,23 +5,23 @@
  */
 
 /**
- * @module modules/observer
+ * @module modules/history
  */
 
 import type { CanUndef, IStack } from 'jodit/types';
 import type { Command } from './command';
 
 export class Stack implements IStack {
-	private commands: Command[] = [];
+	private readonly commands: Command[] = [];
 	private stackPosition: number = -1;
 
-	constructor(private size: number) {}
+	constructor(private readonly size: number) {}
 
 	get length(): number {
 		return this.commands.length;
 	}
 
-	private clearRedo() {
+	private clearRedo(): void {
 		this.commands.length = this.stackPosition + 1;
 	}
 

package/src/modules/image-editor/image-editor.ts

@@ -147,7 +147,7 @@ export class ImageEditor extends ViewComponent {
 		return valueNbr || 0;
 	};
 
-	private calcCropBox = () => {
+	private calcCropBox = (): void => {
 		const node = this.crop_box.parentNode as HTMLElement,
 			w = node.offsetWidth * 0.8,
 			h = node.offsetHeight * 0.8;
@@ -174,7 +174,7 @@ export class ImageEditor extends ViewComponent {
 		});
 	};
 
-	private showCrop = () => {
+	private showCrop = (): void => {
 		if (!this.cropImage) {
 			return;
 		}
@@ -213,7 +213,7 @@ export class ImageEditor extends ViewComponent {
 		this.j.e.fire(this.cropHandler, 'updatesize');
 	};
 
-	private updateCropBox = () => {
+	private updateCropBox = (): void => {
 		if (!this.cropImage) {
 			return;
 		}
@@ -230,12 +230,12 @@ export class ImageEditor extends ViewComponent {
 			this.cropBox.w.toFixed(0) + 'x' + this.cropBox.h.toFixed(0);
 	};
 
-	private updateResizeBox = () => {
+	private updateResizeBox = (): void => {
 		this.resizeBox.w = this.image.offsetWidth || this.naturalWidth;
 		this.resizeBox.h = this.image.offsetHeight || this.naturalHeight;
 	};
 
-	private setHandlers = () => {
+	private setHandlers = (): void => {
 		const self: ImageEditor = this;
 
 		const { widthInput, heightInput } = refs<HTMLInputElement>(this.editor);
@@ -439,7 +439,7 @@ export class ImageEditor extends ViewComponent {
 
 	@debounce()
 	@autobind
-	private onChangeSizeInput(e: MouseEvent) {
+	private onChangeSizeInput(e: MouseEvent): void {
 		const self = this,
 			input = e.target as HTMLInputElement,
 			{ widthInput, heightInput } = refs<HTMLInputElement>(this.editor),
@@ -615,7 +615,7 @@ export class ImageEditor extends ViewComponent {
 	 * Open image editor
 	 * @example
 	 * ```javascript
-	 * var jodit = new Jodit('.editor', {
+	 * var jodit = Jodit.make('.editor', {
 	 *		 imageeditor: {
 	 *				 crop: false,
 	 *				 closeAfterSave: true,
@@ -674,7 +674,7 @@ export class ImageEditor extends ViewComponent {
 				this.editor
 			);
 
-			const onload = () => {
+			const onload = (): void => {
 				if (this.isDestructed) {
 					return;
 				}

package/src/modules/image-editor/templates/form.ts

@@ -14,7 +14,7 @@ import { Icon } from 'jodit/core/ui';
 const jie = 'jodit-image-editor';
 const gi = Icon.get.bind(Icon);
 
-const act = (el: boolean, className = 'jodti-image-editor_active') =>
+const act = (el: boolean, className = 'jodti-image-editor_active'): string =>
 	el ? className : '';
 
 export const form = (
@@ -27,7 +27,7 @@ export const form = (
 		label: string,
 		ref: string,
 		active: boolean = true
-	) => `<div class="jodit-form__group">
+	): string => `<div class="jodit-form__group">
 			<label>${i(label)}</label>
 
 			<label class='jodit-switcher'>

package/src/modules/index.ts

@@ -16,7 +16,7 @@ export * from '../core/request';
 export { Component, ViewComponent, STATUSES } from '../core/component';
 export { ContextMenu } from './context-menu/context-menu';
 export * from './dialog/';
-export { Dom } from '../core/dom';
+export { Dom, LazyWalker } from '../core/dom';
 export { Plugin } from '../core/plugin';
 export { Create } from '../core/create';
 export {
@@ -40,9 +40,9 @@ export * from './file-browser';
 import * as Helpers from '../core/helpers/';
 export { Helpers };
 export { ImageEditor } from './image-editor/image-editor';
-export { Observer } from './observer/observer';
+export { History } from './history/history';
+export { Snapshot } from './history/snapshot';
 export { Select, CommitStyle } from '../core/selection';
-export { Snapshot } from './observer/snapshot';
 export { StatusBar } from './status-bar/status-bar';
 export { Table } from './table/table';
 export { ToolbarEditorCollection } from './toolbar/collection/editor-collection';

package/src/modules/status-bar/status-bar.ts

@@ -121,6 +121,10 @@ export class StatusBar extends ViewComponent<IJodit> implements IStatusBar {
 	}
 
 	override destruct(): void {
+		if (this.isInDestruct) {
+			return;
+		}
+
 		this.setStatus(STATUSES.beforeDestruct);
 		Dom.safeRemove(this.container);
 		super.destruct();

package/src/modules/table/table.ts

@@ -922,7 +922,7 @@ export class Table extends ViewComponent<IJodit> {
 		key: string,
 		value: string | number | null,
 		marked: HTMLTableCellElement[]
-	) {
+	): void {
 		marked.push(cell);
 
 		const dict = markedValue.get(cell) ?? {};
@@ -930,7 +930,7 @@ export class Table extends ViewComponent<IJodit> {
 		markedValue.set(cell, dict);
 	}
 
-	private static unmark(marked: HTMLTableCellElement[]) {
+	private static unmark(marked: HTMLTableCellElement[]): void {
 		marked.forEach(cell => {
 			const dict = markedValue.get(cell);
 

package/src/modules/toolbar/button/button.ts

@@ -54,7 +54,7 @@ export class ToolbarButton<T extends IViewBased = IViewBased>
 		return 'ToolbarButton';
 	}
 
-	override state = {
+	override readonly state = {
 		...UIButtonState(),
 		theme: 'toolbar',
 		currentValue: '',
@@ -160,7 +160,7 @@ export class ToolbarButton<T extends IViewBased = IViewBased>
 	}
 
 	/** @override */
-	override onChangeTabIndex(): void {
+	protected override onChangeTabIndex(): void {
 		attr(this.button, 'tabindex', this.state.tabIndex);
 	}
 

package/src/modules/toolbar/collection/collection.ts

@@ -112,7 +112,7 @@ export class ToolbarCollection<T extends IViewWithToolbar = IViewWithToolbar>
 		this.initEvents();
 	}
 
-	private initEvents() {
+	private initEvents(): void {
 		this.j.e
 			.on(this.listenEvents, this.update)
 			.on('afterSetMode focus', this.immediateUpdate);

package/src/modules/uploader/helpers/process-old-browser-drag.ts

@@ -34,7 +34,7 @@ export function processOldBrowserDrag(
 		getContainer(self.j, self.constructor).appendChild(div);
 
 		const selection = isJoditObject(self.j) ? self.j.s.save() : null,
-			restore = () =>
+			restore = (): void | null | boolean =>
 				selection && isJoditObject(self.j) && self.j.s.restore();
 
 		div.focus();

package/src/modules/uploader/helpers/send-files.ts

@@ -58,7 +58,7 @@ export function sendFiles(
 					promises.push(
 						uploader.j.async.promise((resolve, reject) => {
 							reader.onerror = reject;
-							reader.onloadend = () => {
+							reader.onloadend = (): void => {
 								const resp = {
 									baseurl: '',
 									files: [reader.result],

package/src/modules/uploader/helpers/send.ts

@@ -25,7 +25,7 @@ export function send(
 		request: FormData | IDictionary<string> | string
 	): Promise<any> => {
 		const ajax = new Ajax<IUploaderAnswer>(uploader.j, {
-			xhr: () => {
+			xhr: (): XMLHttpRequest => {
 				const xhr = new XMLHttpRequest();
 
 				if (