jodit 3.6.16 → 3.7.2

package/src/plugins/ordered-list.ts

@@ -78,78 +78,81 @@ export function orderedList(editor: IJodit): void {
 		};
 
 	editor.e
-		.on('beforeCommand', (command: string, _, listStyleType: string):
-			| false
-			| void => {
-			if (isOurCommand(command) && listStyleType) {
-				const ul = getListWrapper();
-
-				if (ul && !listStyleTypeEqual(ul, listStyleType)) {
-					if (
-						(Dom.isTag(ul, 'ul') && /unordered/i.test(command)) ||
-						(Dom.isTag(ul, 'ol') && !/unordered/i.test(command))
-					) {
-						setListStyleType(ul, listStyleType);
-						return false;
-					}
-				}
-			}
-		})
-		.on('afterCommand', (command: string, _, listStyleType: string):
-			| false
-			| void => {
-			if (isOurCommand(command)) {
-				const ul = getListWrapper();
-
-				if (ul) {
-					setListStyleType(ul, listStyleType);
-					editor.createInside.applyCreateAttributes(ul);
-
-					ul.querySelectorAll('li').forEach(li => {
-						editor.createInside.applyCreateAttributes(li);
-					});
-				}
+		.on(
+			'beforeCommand',
+			(command: string, _, listStyleType: string): false | void => {
+				if (isOurCommand(command) && listStyleType) {
+					const ul = getListWrapper();
 
-				const unwrapList: Node[] = [],
-					shouldUnwrap = (elm: Nullable<Node>): void => {
+					if (ul && !listStyleTypeEqual(ul, listStyleType)) {
 						if (
-							Dom.isTag(elm, [
-								'p',
-								'h1',
-								'h2',
-								'h3',
-								'h4',
-								'h5',
-								'h6'
-							])
+							(Dom.isTag(ul, 'ul') &&
+								/unordered/i.test(command)) ||
+							(Dom.isTag(ul, 'ol') && !/unordered/i.test(command))
 						) {
-							unwrapList.push(elm);
+							setListStyleType(ul, listStyleType);
+							return false;
 						}
-					};
+					}
+				}
+			}
+		)
+		.on(
+			'afterCommand',
+			(command: string, _, listStyleType: string): false | void => {
+				if (isOurCommand(command)) {
+					const ul = getListWrapper();
+
+					if (ul) {
+						setListStyleType(ul, listStyleType);
+						editor.createInside.applyCreateAttributes(ul);
 
-				if (ul) {
-					shouldUnwrap(ul.parentNode);
+						ul.querySelectorAll('li').forEach(li => {
+							editor.createInside.applyCreateAttributes(li);
+						});
+					}
 
-					ul.querySelectorAll('li').forEach(li =>
-						shouldUnwrap(li.firstChild)
-					);
+					const unwrapList: Node[] = [],
+						shouldUnwrap = (elm: Nullable<Node>): void => {
+							if (
+								Dom.isTag(elm, [
+									'p',
+									'h1',
+									'h2',
+									'h3',
+									'h4',
+									'h5',
+									'h6'
+								])
+							) {
+								unwrapList.push(elm);
+							}
+						};
 
-					if (unwrapList.length) {
-						editor.s.save();
+					if (ul) {
+						shouldUnwrap(ul.parentNode);
 
-						toArray(ul.childNodes).forEach(li => {
-							if (Dom.isTag(li.lastChild, 'br')) {
-								Dom.safeRemove(li.lastChild);
-							}
-						});
+						ul.querySelectorAll('li').forEach(li =>
+							shouldUnwrap(li.firstChild)
+						);
+
+						if (unwrapList.length) {
+							editor.s.save();
 
-						unwrapList.forEach(elm => Dom.unwrap(elm));
+							toArray(ul.childNodes).forEach(li => {
+								if (Dom.isTag(li.lastChild, 'br')) {
+									Dom.safeRemove(li.lastChild);
+								}
+							});
 
-						editor.s.restore();
+							unwrapList.forEach(elm => Dom.unwrap(elm));
+
+							editor.s.restore();
+						}
 					}
-				}
 
-				editor.setEditorValue();
+					editor.setEditorValue();
+				}
 			}
-		});
+		);
 }

package/src/plugins/redo-undo.ts

@@ -26,7 +26,7 @@ Config.prototype.controls.undo = {
  */
 export class redoUndo extends Plugin {
 	/** @override */
-	buttons: IPlugin['buttons'] = [
+	override buttons: IPlugin['buttons'] = [
 		{
 			name: 'undo',
 			group: 'history'
@@ -37,11 +37,11 @@ export class redoUndo extends Plugin {
 		}
 	];
 
-	beforeDestruct(): void {
+	protected override beforeDestruct(): void {
 		// do nothing
 	}
 
-	afterInit(editor: IJodit): void {
+	protected override afterInit(editor: IJodit): void {
 		const callback = (command: string): void | false => {
 			editor.observer[command as 'redo' | 'undo']();
 

package/src/plugins/search/search.ts

@@ -86,7 +86,7 @@ Config.prototype.controls.find = {
  * ```
  */
 export class search extends Plugin {
-	buttons: IPlugin['buttons'] = [
+	override buttons: IPlugin['buttons'] = [
 		{
 			name: 'find',
 			group: 'search'
@@ -520,7 +520,7 @@ export class search extends Plugin {
 		return false;
 	};
 
-	open = (searchAndReplace: boolean = false) => {
+	open = (searchAndReplace: boolean = false): void => {
 		if (!this.isOpened) {
 			this.searchBox.classList.add('jodit-search_active');
 			this.isOpened = true;

package/src/plugins/select.ts

@@ -31,16 +31,17 @@ export class select extends Plugin {
 		'touchend'
 	];
 
+	/** @override */
 	protected afterInit(jodit: IJodit): void {
 		this.proxyEventsList.forEach(eventName => {
-			jodit.e.on(eventName + '.inline-popup', this.onStartSelection);
+			jodit.e.on(eventName + '.select', this.onStartSelection);
 		});
 	}
 
 	/** @override */
 	protected beforeDestruct(jodit: IJodit): void {
 		this.proxyEventsList.forEach(eventName => {
-			jodit.e.on(eventName + '.inline-popup', this.onStartSelection);
+			jodit.e.on(eventName + '.select', this.onStartSelection);
 		});
 	}
 

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

@@ -15,7 +15,7 @@ export class resizeHandler extends Plugin {
 	static requires: string[] = ['size'];
 
 	/** @override **/
-	protected afterInit(editor: IJodit) {
+	protected afterInit(editor: IJodit): void {
 		const { height, width, allowResizeX } = editor.o;
 		let { allowResizeY } = editor.o;
 
@@ -121,7 +121,7 @@ export class resizeHandler extends Plugin {
 	);
 
 	/** @override **/
-	protected beforeDestruct(editor: IJodit) {
+	protected beforeDestruct(editor: IJodit): void {
 		Dom.safeRemove(this.handle);
 
 		this.j.e.off(this.j.ow, 'mouseup touchsend', this.onHandleResizeEnd);

package/src/plugins/size/size.ts

@@ -17,7 +17,7 @@ import { autobind } from '../../core/decorators';
 @autobind
 export class size extends Plugin {
 	/** @override **/
-	protected afterInit(editor: IJodit) {
+	protected afterInit(editor: IJodit): void {
 		editor.e
 			.on('setHeight.size', this.setHeight)
 			.on('setWidth.size', this.setWidth)
@@ -186,7 +186,7 @@ export class size extends Plugin {
 	);
 
 	/** @override **/
-	protected beforeDestruct(jodit: IJodit) {
+	protected beforeDestruct(jodit: IJodit): void {
 		this.j.e
 			.off(this.j.ow, 'load.size', this.resizeWorkspaces)
 			.off('.size');

package/src/plugins/source/editor/engines/ace.ts

@@ -13,7 +13,7 @@ export class AceEditor
 	extends SourceEditor<AceAjax.Editor>
 	implements ISourceEditor
 {
-	className = 'jodit_ace_editor';
+	override className = 'jodit_ace_editor';
 
 	private aceExists() {
 		return (this.j.ow as any).ace !== undefined;
@@ -198,7 +198,7 @@ export class AceEditor
 		this.j?.events?.off('aceInited.source');
 	}
 
-	setValue(value: string) {
+	setValue(value: string): void {
 		if (!this.j.o.editHTMLDocumentMode && this.j.o.beautifyHTML) {
 			const html = this.j.e.fire('beautifyHTML', value);
 
@@ -212,7 +212,7 @@ export class AceEditor
 		this.instance.clearSelection();
 	}
 
-	getValue() {
+	getValue(): string {
 		return this.instance.getValue();
 	}
 
@@ -220,7 +220,7 @@ export class AceEditor
 		this.instance.setReadOnly(isReadOnly);
 	}
 
-	focus() {
+	focus(): void {
 		this.instance.focus();
 	}
 
@@ -236,11 +236,11 @@ export class AceEditor
 		return this.getIndexByRowColumn(range.end.row, range.end.column);
 	}
 
-	selectAll() {
+	selectAll(): void {
 		this.instance.selection.selectAll();
 	}
 
-	insertRaw(html: string) {
+	insertRaw(html: string): void {
 		const start = this.instance.selection.getCursor(),
 			end = this.instance.session.insert(start, html);
 
@@ -253,7 +253,7 @@ export class AceEditor
 		);
 	}
 
-	setSelectionRange(start: number, end: number) {
+	setSelectionRange(start: number, end: number): void {
 		this.setSelectionRangeIndices(start, end);
 	}
 
@@ -261,7 +261,7 @@ export class AceEditor
 		// ACE does not support placeholder
 	}
 
-	replaceUndoManager() {
+	replaceUndoManager(): void {
 		const { observer } = this.jodit;
 
 		this.instance.commands.addCommand({

package/src/plugins/source/editor/engines/area.ts

@@ -113,20 +113,22 @@ export class TextAreaEditor
 	replaceUndoManager(): void {
 		const { observer } = this.jodit;
 
-		this.j.e.on(this.instance, 'keydown', (e: KeyboardEvent):
-			| false
-			| void => {
-			if ((e.ctrlKey || e.metaKey) && e.key === 'z') {
-				if (e.shiftKey) {
-					observer.redo();
-				} else {
-					observer.undo();
+		this.j.e.on(
+			this.instance,
+			'keydown',
+			(e: KeyboardEvent): false | void => {
+				if ((e.ctrlKey || e.metaKey) && e.key === 'z') {
+					if (e.shiftKey) {
+						observer.redo();
+					} else {
+						observer.undo();
+					}
+
+					this.setSelectionRange(this.getValue().length);
+
+					return false;
 				}
-
-				this.setSelectionRange(this.getValue().length);
-
-				return false;
 			}
-		});
+		);
 	}
 }

package/src/plugins/source/source.ts

@@ -22,7 +22,7 @@ import { autobind, watch } from '../../core/decorators';
  */
 export class source extends Plugin {
 	/** @override */
-	buttons: Plugin['buttons'] = [
+	override buttons: Plugin['buttons'] = [
 		{
 			name: 'source',
 			group: 'source'

package/src/plugins/symbols/symbols.ts

@@ -24,7 +24,7 @@ import { attr } from '../../core/helpers/utils';
  */
 export class symbols extends Plugin {
 	/** @override */
-	buttons: Plugin['buttons'] = [
+	override buttons: Plugin['buttons'] = [
 		{
 			name: 'symbol',
 			group: 'insert'
@@ -34,7 +34,7 @@ export class symbols extends Plugin {
 	private countInRow: number = 17;
 
 	/** @override */
-	afterInit(jodit: IJodit): void {
+	override afterInit(jodit: IJodit): void {
 		jodit.e.on('generateSpecialCharactersTable.symbols', () => {
 			const container = jodit.c.fromHTML(
 					'<div class="jodit-symbols__container">' +
@@ -170,7 +170,7 @@ export class symbols extends Plugin {
 	}
 
 	/** @override */
-	protected beforeDestruct(jodit: IJodit) {
+	protected beforeDestruct(jodit: IJodit): void {
 		jodit.e.off('generateSpecialCharactersTable.symbols');
 	}
 }

package/src/plugins/table/config.ts

@@ -12,7 +12,9 @@ import { $$, scrollIntoViewIfNeeded } from '../../core/helpers';
 
 Config.prototype.table = {
 	allowCellSelection: true,
-	selectionCellStyle: 'border: 1px double #1e88e5 !important;',
+	selectionCellStyle:
+		'border: 1px double #1e88e5 !important;' +
+		'background-color: rgba(158, 207, 250, 0.3)!important',
 
 	allowCellResize: true,
 	useExtraClassesOptions: false

package/src/plugins/table/resize-cells.ts

@@ -460,23 +460,28 @@ export class resizeCells extends Plugin {
 			.on(
 				table,
 				'mousemove.resize-cells touchmove.resize-cells',
-				(event: MouseEvent) => {
-					if (this.j.isLocked) {
-						return;
+				this.j.async.throttle(
+					(event: MouseEvent) => {
+						if (this.j.isLocked) {
+							return;
+						}
+
+						const cell = Dom.up(
+							event.target as HTMLElement,
+							elm => Dom.isCell(elm, this.j.ew),
+							table
+						) as HTMLTableCellElement;
+
+						if (!cell) {
+							return;
+						}
+
+						this.calcHandlePosition(table, cell, event.offsetX);
+					},
+					{
+						timeout: this.j.defaultTimeout
 					}
-
-					const cell = Dom.up(
-						event.target as HTMLElement,
-						elm => Dom.isCell(elm, this.j.ew),
-						table
-					) as HTMLTableCellElement;
-
-					if (!cell) {
-						return;
-					}
-
-					this.calcHandlePosition(table, cell, event.offsetX);
-				}
+				)
 			);
 
 		this.createResizeHandle();

package/src/plugins/table/select-cells.ts

@@ -13,10 +13,11 @@ import { KEY_TAB } from '../../core/constants';
 import { autobind, watch } from '../../core/decorators';
 
 const key = 'table_processor_observer';
+const MOUSE_MOVE_LABEL = 'onMoveTableSelectCell';
 
 export class selectCells extends Plugin {
 	/** @override */
-	requires = ['select'];
+	override requires = ['select'];
 
 	/**
 	 * Shortcut for Table module
@@ -41,6 +42,7 @@ export class selectCells extends Plugin {
 			.on('beforeCommand.select-cells', this.onExecCommand)
 			.on('afterCommand.select-cells', this.onAfterCommand)
 
+			// see `plugins/select.ts`
 			.on(
 				[
 					'clickEditor',
@@ -55,8 +57,14 @@ export class selectCells extends Plugin {
 			)
 			// For `clickEditor` correct working. Because `mousedown` on first cell
 			// and mouseup on another cell call `click` only for `TR` element.
-			.on('clickTr', (): void | false => {
-				if (this.module.getAllSelectedCells().length) {
+			.on('clickTr clickTbody', (): void | false => {
+				const cellsCount = this.module.getAllSelectedCells().length;
+
+				if (cellsCount) {
+					if (cellsCount > 1) {
+						this.j.s.sel?.removeAllRanges();
+					}
+
 					return false;
 				}
 			});
@@ -67,6 +75,11 @@ export class selectCells extends Plugin {
 	 */
 	private selectedCell: Nullable<HTMLTableCellElement> = null;
 
+	/**
+	 * User is selecting cells now
+	 */
+	private isSelectionMode: boolean = false;
+
 	/**
 	 * Mouse click inside the table
 	 * @param cell
@@ -97,6 +110,7 @@ export class selectCells extends Plugin {
 			cell.appendChild(this.j.createInside.element('br'));
 		}
 
+		this.isSelectionMode = true;
 		this.selectedCell = cell;
 
 		this.module.addSelection(cell);
@@ -105,7 +119,11 @@ export class selectCells extends Plugin {
 			.on(
 				table,
 				'mousemove.select-cells touchmove.select-cells',
-				this.onMove.bind(this, table)
+				// Don't use decorator because need clear label on mouseup
+				this.j.async.throttle(this.onMove.bind(this, table), {
+					label: MOUSE_MOVE_LABEL,
+					timeout: this.j.defaultTimeout / 2
+				})
 			)
 			.on(
 				table,
@@ -117,8 +135,16 @@ export class selectCells extends Plugin {
 	}
 
 	@watch(':outsideClick')
-	protected onOutsideClick(e: MouseEvent): void {
-		this.unselectCells();
+	protected onOutsideClick(): void {
+		this.selectedCell = null;
+		this.onRemoveSelection();
+	}
+
+	@watch(':change')
+	protected onChange(): void {
+		if (!this.j.isLocked && !this.isSelectionMode) {
+			this.onRemoveSelection();
+		}
 	}
 
 	/**
@@ -163,6 +189,12 @@ export class selectCells extends Plugin {
 			}
 		}
 
+		const cellsCount = this.module.getAllSelectedCells().length;
+
+		if (cellsCount > 1) {
+			this.j.s.sel?.removeAllRanges();
+		}
+
 		this.j.e.fire('hidePopup');
 		e.stopPropagation();
 
@@ -196,6 +228,7 @@ export class selectCells extends Plugin {
 			return;
 		}
 
+		this.isSelectionMode = false;
 		this.selectedCell = null;
 	}
 
@@ -208,6 +241,8 @@ export class selectCells extends Plugin {
 			return;
 		}
 
+		this.isSelectionMode = false;
+
 		this.j.unlock();
 
 		const node = this.j.ed.elementFromPoint(e.clientX, e.clientY);
@@ -223,6 +258,7 @@ export class selectCells extends Plugin {
 		}
 
 		const ownTable = Dom.closest(cell, 'table', table);
+
 		if (ownTable && ownTable !== table) {
 			return; // Nested tables
 		}
@@ -258,6 +294,8 @@ export class selectCells extends Plugin {
 				'mousemove.select-cells touchmove.select-cells mouseup.select-cells touchend.select-cells'
 			);
 		});
+
+		this.j.async.clearTimeout(MOUSE_MOVE_LABEL);
 	}
 
 	/**