jodit 3.8.5 → 3.9.2

package/src/modules/table.ts

@@ -46,6 +46,7 @@ export class Table extends ViewComponent<IJodit> {
 	@debounce()
 	private recalculateStyles(): void {
 		const style = getContainer(this.j, Table, 'style', true);
+
 		const selectors: string[] = [];
 
 		this.selected.forEach(td => {
@@ -125,9 +126,11 @@ export class Table extends ViewComponent<IJodit> {
 	 */
 	static getColumnsCount(table: HTMLTableElement): number {
 		const matrix = Table.formalMatrix(table);
-		return matrix.reduce((max_count, cells) => {
-			return Math.max(max_count, cells.length);
-		}, 0);
+
+		return matrix.reduce(
+			(max_count, cells) => Math.max(max_count, cells.length),
+			0
+		);
 	}
 
 	/**
@@ -182,6 +185,7 @@ export class Table extends ViewComponent<IJodit> {
 					) {
 						return false;
 					}
+
 					matrix[i + row][currentColumn + column] = cell;
 				}
 			}
@@ -257,7 +261,7 @@ export class Table extends ViewComponent<IJodit> {
 		let row: HTMLTableRowElement;
 
 		if (!line) {
-			const columnsCount: number = Table.getColumnsCount(table);
+			const columnsCount = Table.getColumnsCount(table);
 
 			row = create.element('tr');
 
@@ -287,7 +291,9 @@ export class Table extends ViewComponent<IJodit> {
 		} else if (!after && line) {
 			line.parentNode && line.parentNode.insertBefore(row, line);
 		} else {
-			($$(':scope>tbody', table)[0] || table).appendChild(row);
+			(table.getElementsByTagName('tbody')?.[0] || table).appendChild(
+				row
+			);
 		}
 	}
 
@@ -296,6 +302,7 @@ export class Table extends ViewComponent<IJodit> {
 	 */
 	static removeRow(table: HTMLTableElement, rowIndex: number): void {
 		const box = Table.formalMatrix(table);
+
 		let dec: boolean;
 		const row = table.rows[rowIndex];
 
@@ -312,23 +319,26 @@ export class Table extends ViewComponent<IJodit> {
 					) {
 						dec = true;
 						let nextCell = j + 1;
+
 						while (box[rowIndex + 1][nextCell] === cell) {
 							nextCell += 1;
 						}
 
-						const nextRow: HTMLTableRowElement = Dom.next(
+						const nextRow = Dom.next<HTMLTableRowElement>(
 							cell.parentNode,
-							(elm: Node | null) => Dom.isTag(elm, 'tr'),
+							elm => Dom.isTag(elm, 'tr'),
 							table
-						) as HTMLTableRowElement;
+						);
 
-						if (box[rowIndex + 1][nextCell]) {
-							nextRow.insertBefore(
-								cell,
-								box[rowIndex + 1][nextCell]
-							);
-						} else {
-							nextRow.appendChild(cell);
+						if (nextRow) {
+							if (box[rowIndex + 1][nextCell]) {
+								nextRow.insertBefore(
+									cell,
+									box[rowIndex + 1][nextCell]
+								);
+							} else {
+								nextRow.appendChild(cell);
+							}
 						}
 					}
 				} else {
@@ -338,13 +348,9 @@ export class Table extends ViewComponent<IJodit> {
 					dec &&
 					(cell.parentNode === row || cell !== box[rowIndex][j - 1])
 				) {
-					const rowSpan: number = cell.rowSpan;
+					const rowSpan = cell.rowSpan;
 
-					attr(
-						cell,
-						'rowspan',
-						rowSpan - 1 > 1 ? (rowSpan - 1).toString() : null
-					);
+					attr(cell, 'rowspan', rowSpan - 1 > 1 ? rowSpan - 1 : null);
 				}
 			}
 		);
@@ -361,7 +367,8 @@ export class Table extends ViewComponent<IJodit> {
 		after: boolean,
 		create: ICreate
 	): void {
-		const box: HTMLTableCellElement[][] = Table.formalMatrix(table);
+		const box = Table.formalMatrix(table);
+
 		let i: number;
 
 		if (j === undefined || j < 0) {
@@ -370,16 +377,17 @@ export class Table extends ViewComponent<IJodit> {
 
 		for (i = 0; i < box.length; i += 1) {
 			const cell = create.element('td');
-			const td: HTMLTableCellElement = box[i][j];
+			const td = box[i][j];
+
 			let added: boolean = false;
+
 			if (after) {
 				if (
 					(box[i] && td && j + 1 >= box[i].length) ||
 					td !== box[i][j + 1]
 				) {
 					if (td.nextSibling) {
-						td.parentNode &&
-							td.parentNode.insertBefore(cell, td.nextSibling);
+						Dom.before(td.nextSibling, cell);
 					} else {
 						td.parentNode && td.parentNode.appendChild(cell);
 					}
@@ -390,17 +398,16 @@ export class Table extends ViewComponent<IJodit> {
 					j - 1 < 0 ||
 					(box[i][j] !== box[i][j - 1] && box[i][j].parentNode)
 				) {
-					td.parentNode &&
-						td.parentNode.insertBefore(cell, box[i][j]);
+					Dom.before(box[i][j], cell);
 					added = true;
 				}
 			}
+
 			if (!added) {
-				box[i][j].setAttribute(
+				attr(
+					box[i][j],
 					'colspan',
-					(
-						parseInt(attr(box[i][j], 'colspan') || '1', 10) + 1
-					).toString()
+					parseInt(attr(box[i][j], 'colspan') || '1', 10) + 1
 				);
 			}
 		}
@@ -410,12 +417,14 @@ export class Table extends ViewComponent<IJodit> {
 	 * Remove column by index
 	 */
 	static removeColumn(table: HTMLTableElement, j: number): void {
-		const box: HTMLTableCellElement[][] = Table.formalMatrix(table);
+		const box = Table.formalMatrix(table);
 
 		let dec: boolean;
 		each(box, (i: number, cells: HTMLTableCellElement[]) => {
-			const td: HTMLTableCellElement = cells[j];
+			const td = cells[j];
+
 			dec = false;
+
 			if (j - 1 >= 0 && box[i][j - 1] === td) {
 				dec = true;
 			} else if (j + 1 < cells.length && box[i][j + 1] === td) {
@@ -423,8 +432,9 @@ export class Table extends ViewComponent<IJodit> {
 			} else {
 				Dom.safeRemove(td);
 			}
+
 			if (dec && (i - 1 < 0 || td !== box[i - 1][j])) {
-				const colSpan: number = td.colSpan;
+				const colSpan = td.colSpan;
 
 				attr(
 					td,
@@ -446,6 +456,7 @@ export class Table extends ViewComponent<IJodit> {
 			[Infinity, Infinity],
 			[0, 0]
 		];
+
 		const box = Table.formalMatrix(table);
 		let i: number, j: number, k: number;
 
@@ -501,20 +512,23 @@ export class Table extends ViewComponent<IJodit> {
 		let i: number, j: number, min: number, not: boolean;
 
 		const __marked: HTMLTableCellElement[] = [],
-			box: HTMLTableCellElement[][] = Table.formalMatrix(table);
+			box = Table.formalMatrix(table);
 
 		// remove extra colspans
 		for (j = 0; j < box[0].length; j += 1) {
 			min = 1000000;
 			not = false;
+
 			for (i = 0; i < box.length; i += 1) {
 				if (box[i][j] === undefined) {
 					continue; // broken table
 				}
+
 				if (box[i][j].colSpan < 2) {
 					not = true;
 					break;
 				}
+
 				min = Math.min(min, box[i][j].colSpan);
 			}
 			if (!not) {
@@ -522,6 +536,7 @@ export class Table extends ViewComponent<IJodit> {
 					if (box[i][j] === undefined) {
 						continue; // broken table
 					}
+
 					Table.__mark(
 						box[i][j],
 						'colspan',
@@ -575,21 +590,21 @@ export class Table extends ViewComponent<IJodit> {
 					box[i][j].hasAttribute('rowspan') &&
 					box[i][j].rowSpan === 1
 				) {
-					box[i][j].removeAttribute('rowspan');
+					attr(box[i][j], 'rowspan', null);
 				}
 
 				if (
 					box[i][j].hasAttribute('colspan') &&
 					box[i][j].colSpan === 1
 				) {
-					box[i][j].removeAttribute('colspan');
+					attr(box[i][j], 'colspan', null);
 				}
 
 				if (
 					box[i][j].hasAttribute('class') &&
 					!attr(box[i][j], 'class')
 				) {
-					box[i][j].removeAttribute('class');
+					attr(box[i][j], 'class', null);
 				}
 			}
 		}
@@ -602,7 +617,7 @@ export class Table extends ViewComponent<IJodit> {
 	 */
 	static mergeSelected(table: HTMLTableElement, jodit: IJodit): void {
 		const html: string[] = [],
-			bound: number[][] = Table.getSelectedBound(
+			bound = Table.getSelectedBound(
 				table,
 				Table.getSelectedCellsByTable(table)
 			);
@@ -753,13 +768,16 @@ export class Table extends ViewComponent<IJodit> {
 							);
 						}
 					});
+
 					Dom.after(
 						Dom.closest(cell, 'tr', table) as HTMLTableRowElement,
 						tr
 					);
+
 					tr.appendChild(td);
 				} else {
 					Table.__mark(cell, 'rowspan', cell.rowSpan - 1, __marked);
+
 					Table.formalMatrix(
 						table,
 						(tdElm: HTMLTableCellElement, i: number, j: number) => {
@@ -777,6 +795,7 @@ export class Table extends ViewComponent<IJodit> {
 							}
 						}
 					);
+
 					if (after) {
 						Dom.after(after, td);
 					} else {
@@ -792,6 +811,7 @@ export class Table extends ViewComponent<IJodit> {
 				instance(jodit).removeSelection(cell);
 			}
 		);
+
 		this.normalizeTable(table);
 	}
 
@@ -803,60 +823,55 @@ export class Table extends ViewComponent<IJodit> {
 
 		const __marked: HTMLTableCellElement[] = [];
 
-		Table.getSelectedCellsByTable(table).forEach(
-			(cell: HTMLTableCellElement) => {
-				coord = Table.formalCoordinate(table, cell);
-				if (cell.colSpan < 2) {
-					Table.formalMatrix(table, (tdElm, i, j) => {
-						if (
-							coord[1] === j &&
-							coord[0] !== i &&
-							tdElm !== cell
-						) {
-							Table.__mark(
-								tdElm,
-								'colspan',
-								tdElm.colSpan + 1,
-								__marked
-							);
-						}
-					});
-				} else {
-					Table.__mark(cell, 'colspan', cell.colSpan - 1, __marked);
-				}
+		Table.getSelectedCellsByTable(table).forEach(cell => {
+			coord = Table.formalCoordinate(table, cell);
 
-				td = jodit.createInside.element('td');
-				td.appendChild(jodit.createInside.element('br'));
+			if (cell.colSpan < 2) {
+				Table.formalMatrix(table, (tdElm, i, j) => {
+					if (coord[1] === j && coord[0] !== i && tdElm !== cell) {
+						Table.__mark(
+							tdElm,
+							'colspan',
+							tdElm.colSpan + 1,
+							__marked
+						);
+					}
+				});
+			} else {
+				Table.__mark(cell, 'colspan', cell.colSpan - 1, __marked);
+			}
 
-				if (cell.rowSpan > 1) {
-					Table.__mark(td, 'rowspan', cell.rowSpan, __marked);
-				}
+			td = jodit.createInside.element('td');
+			td.appendChild(jodit.createInside.element('br'));
 
-				const oldWidth = cell.offsetWidth; // get old width
+			if (cell.rowSpan > 1) {
+				Table.__mark(td, 'rowspan', cell.rowSpan, __marked);
+			}
 
-				Dom.after(cell, td);
+			const oldWidth = cell.offsetWidth; // get old width
 
-				percentage = oldWidth / table.offsetWidth / 2;
+			Dom.after(cell, td);
 
-				Table.__mark(
-					cell,
-					'width',
-					(percentage * 100).toFixed(consts.ACCURACY) + '%',
-					__marked
-				);
+			percentage = oldWidth / table.offsetWidth / 2;
 
-				Table.__mark(
-					td,
-					'width',
-					(percentage * 100).toFixed(consts.ACCURACY) + '%',
-					__marked
-				);
+			Table.__mark(
+				cell,
+				'width',
+				(percentage * 100).toFixed(consts.ACCURACY) + '%',
+				__marked
+			);
 
-				Table.__unmark(__marked);
+			Table.__mark(
+				td,
+				'width',
+				(percentage * 100).toFixed(consts.ACCURACY) + '%',
+				__marked
+			);
 
-				instance(jodit).removeSelection(cell);
-			}
-		);
+			Table.__unmark(__marked);
+
+			instance(jodit).removeSelection(cell);
+		});
 
 		Table.normalizeTable(table);
 	}
@@ -866,23 +881,31 @@ export class Table extends ViewComponent<IJodit> {
 	 */
 	static setColumnWidthByDelta(
 		table: HTMLTableElement,
-		j: number,
+		column: number,
 		delta: number,
 		noUnmark: boolean,
 		marked: HTMLTableCellElement[]
 	): void {
 		const box = Table.formalMatrix(table);
-		let i: number, w: number, percent: number;
 
-		for (i = 0; i < box.length; i += 1) {
-			w = box[i][j].offsetWidth;
-			percent = ((w + delta) / table.offsetWidth) * 100;
+		for (let i = 0; i < box.length; i += 1) {
+			const cell = box[i][column];
+
+			if (cell.colSpan > 1 && box.length > 1) {
+				continue;
+			}
+
+			const w = cell.offsetWidth;
+			const percent = ((w + delta) / table.offsetWidth) * 100;
+
 			Table.__mark(
-				box[i][j],
+				cell,
 				'width',
 				percent.toFixed(consts.ACCURACY) + '%',
 				marked
 			);
+
+			break;
 		}
 
 		if (!noUnmark) {
@@ -897,9 +920,11 @@ export class Table extends ViewComponent<IJodit> {
 		marked: HTMLTableCellElement[]
 	) {
 		marked.push(cell);
+
 		if (!(cell as any).__marked_value) {
 			(cell as any).__marked_value = {};
 		}
+
 		(cell as any).__marked_value[key] = value === undefined ? 1 : value;
 	}
 
@@ -913,33 +938,24 @@ export class Table extends ViewComponent<IJodit> {
 							case 'remove':
 								Dom.safeRemove(cell);
 								break;
+
 							case 'rowspan':
-								if (value > 1) {
-									cell.setAttribute(
-										'rowspan',
-										value.toString()
-									);
-								} else {
-									cell.removeAttribute('rowspan');
-								}
+								attr(cell, 'rowspan', value > 1 ? value : null);
 								break;
+
 							case 'colspan':
-								if (value > 1) {
-									cell.setAttribute(
-										'colspan',
-										value.toString()
-									);
-								} else {
-									cell.removeAttribute('colspan');
-								}
+								attr(cell, 'colspan', value > 1 ? value : null);
 								break;
+
 							case 'width':
 								cell.style.width = value.toString();
 								break;
 						}
+
 						delete (cell as any).__marked_value[key];
 					}
 				);
+
 				delete (cell as any).__marked_value;
 			}
 		});

package/src/modules/toolbar/button/button.less

@@ -17,13 +17,12 @@
 }
 
 .jodit-toolbar-button {
-	border: 1px solid transparent;
-	border-radius: var(--border-radius-default);
-	overflow: hidden;
-
 	display: flex;
-	justify-content: center;
+	overflow: hidden;
 	align-items: center;
+	justify-content: center;
+	border: 1px solid transparent;
+	border-radius: var(--border-radius-default);
 
 	.jodit-ui-button-icon-text();
 
@@ -41,12 +40,12 @@
 
 	&__trigger {
 		display: flex;
+		height: 100%;
 		align-items: center;
 		justify-content: center;
 		border-radius: 0 var(--border-radius-default)
 			var(--border-radius-default) 0;
 		opacity: 0.4;
-		height: 100%;
 
 		.jodit-ui-button-interaction();
 		.trigger-size(@icon-middle-size);

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

@@ -112,7 +112,7 @@ export class ToolbarButton<T extends IViewBased = IViewBased>
 
 	/** @override */
 	override onChangeTabIndex(): void {
-		attr(this.button, 'tabIndex', this.state.tabIndex);
+		attr(this.button, 'tabindex', this.state.tabIndex);
 	}
 
 	@watch('state.tooltip')

package/src/modules/toolbar/button/content.less

@@ -11,12 +11,12 @@
 .jodit-toolbar-content {
 	.jodit-ui-button();
 
-	border: 1px solid transparent;
 	padding: 0;
+	border: 1px solid transparent;
 
 	&:hover:not([disabled]) {
 		background-color: transparent;
-		outline: 0;
 		opacity: 1;
+		outline: 0;
 	}
 }

package/src/modules/uploader/uploader.ts

@@ -22,7 +22,7 @@ import type {
 } from '../../types';
 import { Config } from '../../config';
 import { IS_IE, TEXT_PLAIN } from '../../core/constants';
-import { Ajax } from '../../core/ajax';
+import { Ajax } from '../../core/request';
 import {
 	attr,
 	error,
@@ -211,7 +211,7 @@ export class Uploader extends ViewComponent implements IUploader {
 		return data;
 	}
 
-	private ajaxInstances: IAjax[] = [];
+	private ajaxInstances: IAjax<IUploaderAnswer>[] = [];
 
 	private send(
 		data: FormData | IDictionary<string>,
@@ -221,7 +221,7 @@ export class Uploader extends ViewComponent implements IUploader {
 			sendData = (
 				request: FormData | IDictionary<string> | string
 			): Promise<any> => {
-				const ajax = new Ajax(this.j, {
+				const ajax = new Ajax<IUploaderAnswer>(this.j, {
 					xhr: () => {
 						const xhr = new XMLHttpRequest();
 
@@ -286,6 +286,7 @@ export class Uploader extends ViewComponent implements IUploader {
 
 				return ajax
 					.send()
+					.then(resp => resp.json())
 					.then(resp => {
 						removeAjaxInstanceFromList();
 						success.call(this, resp);

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

@@ -7,17 +7,18 @@
 @import (reference) '../../../styles/variables';
 @import (reference) '../../../styles/mixins';
 
-.jodit-color-picker {
-	--color-cell-size: 24px;
-	--color-cell-icon-size: 12px;
+:root {
+	--color-picker-cell-size: 24px;
+}
 
+.jodit-color-picker {
 	margin: 0;
 	text-align: left;
 	user-select: none;
 
 	&__group {
 		display: flex;
-		max-width: calc(var(--color-cell-size) * 10);
+		max-width: calc(var(--color-picker-cell-size) * 10);
 		flex-wrap: wrap;
 		margin-bottom: calc(var(--padding-default) / 2);
 		white-space: normal;
@@ -26,8 +27,8 @@
 	&__color-item {
 		display: block;
 
-		width: var(--color-cell-size);
-		height: var(--color-cell-size);
+		width: var(--color-picker-cell-size);
+		height: var(--color-picker-cell-size);
 
 		border: 1px solid transparent;
 		text-align: center;

package/src/modules/widget/tabs/tabs.less

@@ -11,11 +11,11 @@
 	.font();
 
 	.jodit-tabs__buttons {
-		line-height: 18px;
-		margin-bottom: calc(var(--padding-default) / 2);
-		margin-top: 4px;
 		display: flex;
 		justify-content: center;
+		margin-top: 4px;
+		margin-bottom: calc(var(--padding-default) / 2);
+		line-height: 18px;
 
 		> * {
 			margin-left: calc(var(--padding-default) / 2);

package/src/plugins/about/about.less

@@ -16,8 +16,8 @@
 		&:focus,
 		&:hover {
 			color: #23527c;
-			text-decoration: underline;
 			outline: 0;
+			text-decoration: underline;
 		}
 	}
 

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

@@ -13,24 +13,26 @@
 }
 
 .jodit-add-new-line {
+	position: fixed;
+	z-index: 1;
+	top: 0;
+
+	display: block;
+	height: 1px;
+
 	box-sizing: border-box;
+	outline: none;
 
 	* {
 		box-sizing: border-box;
 	}
 
-	z-index: 1;
-	position: fixed;
-	height: 1px;
-	top: 0;
-	outline: none;
-
 	&::after {
-		content: '';
-		background-color: var(--color-new-line);
-		height: 1px;
 		display: block;
 		width: calc(100% - var(--width-icon));
+		height: 1px;
+		background-color: var(--color-new-line);
+		content: '';
 	}
 
 	span {
@@ -38,14 +40,13 @@
 		right: 0;
 
 		display: flex;
-		justify-content: center;
-		align-items: center;
-
 		width: var(--width-icon);
 		height: var(--height-icon);
+		align-items: center;
+		justify-content: center;
 
-		background: var(--color-background-button-hover-opacity30);
 		border: 1px solid var(--color-new-line);
+		background: var(--color-background-button-hover-opacity30);
 		cursor: pointer;
 
 		&:hover {
@@ -61,8 +62,6 @@
 		width: 16px;
 		fill: var(--color-new-line);
 	}
-
-	display: block;
 }
 
 .jodit-source__mode {