jodit 3.6.16 → 3.7.2

package/src/plugins/table/table-keyboard-navigation.ts

@@ -16,160 +16,163 @@ import { Table } from '../../modules';
 export function tableKeyboardNavigation(editor: IJodit): void {
 	editor.e
 		.off('.tableKeyboardNavigation')
-		.on('keydown.tableKeyboardNavigation', (event: KeyboardEvent):
-			| false
-			| void => {
-			let current: Element, block: HTMLElement;
+		.on(
+			'keydown.tableKeyboardNavigation',
+			(event: KeyboardEvent): false | void => {
+				let current: Element, block: HTMLElement;
 
-			if (
-				event.key === consts.KEY_TAB ||
-				event.key === consts.KEY_LEFT ||
-				event.key === consts.KEY_RIGHT ||
-				event.key === consts.KEY_UP ||
-				event.key === consts.KEY_DOWN
-			) {
-				current = editor.s.current() as Element;
+				if (
+					event.key === consts.KEY_TAB ||
+					event.key === consts.KEY_LEFT ||
+					event.key === consts.KEY_RIGHT ||
+					event.key === consts.KEY_UP ||
+					event.key === consts.KEY_DOWN
+				) {
+					current = editor.s.current() as Element;
 
-				block = Dom.up(
-					current,
-					(elm: Node | null) =>
-						elm && elm.nodeName && /^td|th$/i.test(elm.nodeName),
-					editor.editor
-				) as HTMLTableCellElement;
+					block = Dom.up(
+						current,
+						(elm: Node | null) =>
+							elm &&
+							elm.nodeName &&
+							/^td|th$/i.test(elm.nodeName),
+						editor.editor
+					) as HTMLTableCellElement;
 
-				if (!block) {
-					return;
-				}
+					if (!block) {
+						return;
+					}
 
-				const range = editor.s.range;
+					const range = editor.s.range;
 
-				if (event.key !== consts.KEY_TAB && current !== block) {
-					if (
-						((event.key === consts.KEY_LEFT ||
-							event.key === consts.KEY_UP) &&
-							(Dom.prev(
-								current,
-								(elm: Node | null) =>
-									event.key === consts.KEY_UP
-										? Dom.isTag(elm, 'br')
-										: Boolean(elm),
-								block
-							) ||
-								(event.key !== consts.KEY_UP &&
-									Dom.isText(current) &&
-									range.startOffset !== 0))) ||
-						((event.key === consts.KEY_RIGHT ||
-							event.key === consts.KEY_DOWN) &&
-							(Dom.next(
-								current,
-								(elm: Node | null) =>
-									event.key === consts.KEY_DOWN
-										? Dom.isTag(elm, 'br')
-										: Boolean(elm),
-								block
-							) ||
-								(event.key !== consts.KEY_DOWN &&
-									Dom.isText(current) &&
-									current.nodeValue &&
-									range.startOffset !==
-										current.nodeValue.length)))
-					) {
-						return;
+					if (event.key !== consts.KEY_TAB && current !== block) {
+						if (
+							((event.key === consts.KEY_LEFT ||
+								event.key === consts.KEY_UP) &&
+								(Dom.prev(
+									current,
+									(elm: Node | null) =>
+										event.key === consts.KEY_UP
+											? Dom.isTag(elm, 'br')
+											: Boolean(elm),
+									block
+								) ||
+									(event.key !== consts.KEY_UP &&
+										Dom.isText(current) &&
+										range.startOffset !== 0))) ||
+							((event.key === consts.KEY_RIGHT ||
+								event.key === consts.KEY_DOWN) &&
+								(Dom.next(
+									current,
+									(elm: Node | null) =>
+										event.key === consts.KEY_DOWN
+											? Dom.isTag(elm, 'br')
+											: Boolean(elm),
+									block
+								) ||
+									(event.key !== consts.KEY_DOWN &&
+										Dom.isText(current) &&
+										current.nodeValue &&
+										range.startOffset !==
+											current.nodeValue.length)))
+						) {
+							return;
+						}
 					}
+				} else {
+					return;
 				}
-			} else {
-				return;
-			}
 
-			const table = Dom.up(
-				block,
-				(elm: Node | null) => elm && /^table$/i.test(elm.nodeName),
-				editor.editor
-			) as HTMLTableElement;
-			let next: HTMLTableCellElement | null = null;
+				const table = Dom.up(
+					block,
+					(elm: Node | null) => elm && /^table$/i.test(elm.nodeName),
+					editor.editor
+				) as HTMLTableElement;
+				let next: HTMLTableCellElement | null = null;
 
-			switch (event.key) {
-				case consts.KEY_TAB:
-				// case consts.KEY_RIGHT:
-				case consts.KEY_LEFT: {
-					const sibling: string =
-						event.key === consts.KEY_LEFT || event.shiftKey
-							? 'prev'
-							: 'next';
+				switch (event.key) {
+					case consts.KEY_TAB:
+					// case consts.KEY_RIGHT:
+					case consts.KEY_LEFT: {
+						const sibling: string =
+							event.key === consts.KEY_LEFT || event.shiftKey
+								? 'prev'
+								: 'next';
 
-					next = (Dom as any)[sibling](
-						block,
-						(elm: Node | null) =>
-							elm &&
-							/^td|th$/i.test((elm as HTMLElement).tagName),
-						table
-					) as HTMLTableCellElement;
-
-					if (!next) {
-						Table.appendRow(
-							table,
-							sibling === 'next'
-								? false
-								: (table.querySelector(
-										'tr'
-								  ) as HTMLTableRowElement),
-							sibling === 'next',
-							editor.createInside
-						);
 						next = (Dom as any)[sibling](
 							block,
 							(elm: Node | null) =>
-								elm && Dom.isCell(elm, editor.ew),
+								elm &&
+								/^td|th$/i.test((elm as HTMLElement).tagName),
 							table
 						) as HTMLTableCellElement;
+
+						if (!next) {
+							Table.appendRow(
+								table,
+								sibling === 'next'
+									? false
+									: (table.querySelector(
+											'tr'
+									  ) as HTMLTableRowElement),
+								sibling === 'next',
+								editor.createInside
+							);
+							next = (Dom as any)[sibling](
+								block,
+								(elm: Node | null) =>
+									elm && Dom.isCell(elm, editor.ew),
+								table
+							) as HTMLTableCellElement;
+						}
+						break;
 					}
-					break;
-				}
-				case consts.KEY_UP:
-				case consts.KEY_DOWN:
-					{
-						let i = 0,
-							j = 0;
+					case consts.KEY_UP:
+					case consts.KEY_DOWN:
+						{
+							let i = 0,
+								j = 0;
 
-						const matrix = Table.formalMatrix(
-							table,
-							(elm, _i, _j) => {
-								if (elm === block) {
-									i = _i;
-									j = _j;
+							const matrix = Table.formalMatrix(
+								table,
+								(elm, _i, _j) => {
+									if (elm === block) {
+										i = _i;
+										j = _j;
+									}
+								}
+							);
+							if (event.key === consts.KEY_UP) {
+								if (matrix[i - 1] !== undefined) {
+									next = matrix[i - 1][j];
+								}
+							} else {
+								if (matrix[i + 1] !== undefined) {
+									next = matrix[i + 1][j];
 								}
-							}
-						);
-						if (event.key === consts.KEY_UP) {
-							if (matrix[i - 1] !== undefined) {
-								next = matrix[i - 1][j];
-							}
-						} else {
-							if (matrix[i + 1] !== undefined) {
-								next = matrix[i + 1][j];
 							}
 						}
-					}
-					break;
-			}
+						break;
+				}
 
-			if (next) {
-				if (!next.firstChild) {
-					const first = editor.createInside.element('br');
-					next.appendChild(first);
-					editor.s.setCursorBefore(first);
-				} else {
-					if (event.key === consts.KEY_TAB) {
-						editor.s.select(next, true);
+				if (next) {
+					if (!next.firstChild) {
+						const first = editor.createInside.element('br');
+						next.appendChild(first);
+						editor.s.setCursorBefore(first);
 					} else {
-						editor.s.setCursorIn(
-							next,
-							event.key === consts.KEY_RIGHT ||
-								event.key === consts.KEY_DOWN
-						);
+						if (event.key === consts.KEY_TAB) {
+							editor.s.select(next, true);
+						} else {
+							editor.s.setCursorIn(
+								next,
+								event.key === consts.KEY_RIGHT ||
+									event.key === consts.KEY_DOWN
+							);
+						}
 					}
+					return false;
 				}
-				return false;
 			}
-		});
+		);
 }

package/src/plugins/table/table.less

@@ -8,24 +8,24 @@
 @import (reference) '../../styles/variables';
 
 .jodit-table-resizer {
-	cursor: col-resize;
 	position: absolute;
 	z-index: 3;
-	padding-left: calc(var(--padding-default) / 2);
 	padding-right: calc(var(--padding-default) / 2);
+	padding-left: calc(var(--padding-default) / 2);
 	margin-left: calc(var(--padding-default) / -2);
+	cursor: col-resize;
 
 	&::after {
-		content: '';
 		display: block;
-		height: 100%;
 		width: 0;
+		height: 100%;
 		border: 0;
+		content: '';
 	}
 
 	&_moved {
-		background-color: var(--color-background-selection);
 		z-index: 2;
+		background-color: var(--color-background-selection);
 
 		&::after {
 			border-right: 1px solid var(--color-border)-moved;
@@ -35,20 +35,26 @@
 
 .jodit-wysiwyg {
 	table {
+		max-width: 100%;
 		border: none;
+
+		margin-top: 1em;
+		margin-bottom: 1em;
+
 		border-collapse: collapse;
-		table-layout: fixed;
 		empty-cells: show;
-		max-width: 100%;
+		table-layout: fixed;
 
 		tr {
 			user-select: none;
 
 			th,
 			td {
-				border: 1px solid #ddd;
-				vertical-align: middle;
+				min-width: 2em;
+				padding: 0.4em;
+				border: 1px solid #bfbfbf;
 				user-select: text;
+				vertical-align: middle;
 			}
 		}
 	}
@@ -63,30 +69,31 @@
 		}
 
 		.jodit-form__container {
+			min-width: 180px;
 			padding: 0;
 			margin: 0;
-			min-width: 180px;
 			font-size: 0;
 
 			& > div {
 				& > span {
+					display: inline-block;
+
 					width: var(--width_element_default);
 					height: var(--height_element_default);
 
-					display: inline-block;
-					vertical-align: top;
 					box-sizing: border-box;
 					border: 1px solid var(--color-border);
-					margin-left: 2px;
 					margin-bottom: 2px;
+					margin-left: 2px;
+					vertical-align: top;
 
 					&:first-child {
 						margin-left: 0;
 					}
 
 					&.jodit_hovered {
-						background: var(--color-background-hover);
 						border-color: var(--color-background-hover);
+						background: var(--color-background-hover);
 					}
 				}
 			}
@@ -96,8 +103,8 @@
 			font-size: var(--font-size-default);
 
 			label {
-				text-align: left;
 				padding-top: 0;
+				text-align: left;
 
 				input {
 					margin-right: var(--padding-default);
@@ -107,9 +114,9 @@
 	}
 
 	label {
-		text-align: center;
-		font-size: 14px;
 		padding: 8px;
 		margin: 0;
+		font-size: 14px;
+		text-align: center;
 	}
 }

package/src/types/async.d.ts

@@ -26,6 +26,8 @@ export interface IAsync extends IDestructible {
 	): number;
 
 	clearTimeout(timer: number): void;
+	clearTimeout(label: string): void;
+	clearTimeout(timerOrLabel: number | string): void;
 
 	clear(): void;
 

package/src/types/core.ts

@@ -0,0 +1,13 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * Released under MIT see LICENSE.txt in the project root for license information.
+ * Copyright (c) 2013-2021 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ */
+
+import type { Component } from '../core/component';
+import type { IDictionary } from './types';
+
+export type DecoratorHandler = <T extends Component & IDictionary>(
+	target: T,
+	propertyKey: string
+) => void;

package/src/types/index.d.ts

@@ -7,6 +7,7 @@
 export * from './ajax';
 export * from './async';
 export * from './context';
+export * from './core';
 export * from './create';
 export * from './dialog';
 export * from './events';

package/src/types/jodit.d.ts

@@ -49,6 +49,8 @@ interface IJodit extends IViewWithToolbar {
 
 	editorDocument: HTMLDocument;
 
+	waitForReady(): Promise<IJodit>;
+
 	/**
 	 * Alias for this.ed
 	 */

package/test/tests/acceptance/editorTest.js

@@ -815,4 +815,41 @@ describe('Jodit Editor Tests', function () {
 			});
 		});
 	});
+
+	describe('Readiness', () => {
+		describe('Method waitForReady', () => {
+			describe('Sync init', () => {
+				it('Should return resolved promise', done => {
+					const jodit = getJodit();
+
+					expect(jodit.isReady).is.true;
+
+					jodit.waitForReady().then(j => {
+						expect(jodit).eq(j);
+						expect(jodit.isReady).is.true;
+						done();
+					});
+				});
+			});
+
+			describe('Async init', () => {
+				it('Should return resolved promise', done => {
+					unmockPromise();
+					const jodit = getJodit({
+						events: {
+							createEditor: () => delay(100)
+						}
+					});
+
+					expect(jodit.isReady).is.false;
+
+					jodit.waitForReady().then(j => {
+						expect(jodit).eq(j);
+						expect(jodit.isReady).is.true;
+						done();
+					});
+				});
+			});
+		});
+	});
 });

package/test/tests/acceptance/tableTest.js

@@ -3,6 +3,7 @@
  * Released under MIT see LICENSE.txt in the project root for license information.
  * Copyright (c) 2013-2021 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
+
 describe('Tables Jodit Editor Tests', function () {
 	describe('Methods', function () {
 		it('After init container must has one element .jodit-table-resizer', function () {
@@ -1180,15 +1181,16 @@ describe('Tables Jodit Editor Tests', function () {
 		});
 
 		describe('Select cells', function () {
-			it('When we press mouse button over cell and move mouse to another cell, it should select all cells in bound', function () {
+			it('When we press mouse button over cell and move mouse to another cell, it should select all cells in bound', function (done) {
 				const editor = getJodit();
 
-				editor.value =
-					'<table>' +
-					'<tr><td>1</td><td>2</td></tr>' +
-					'<tr><td>3</td><td>4</td></tr>' +
-					'<tr><td>5</td><td>6</td></tr>' +
-					'</table>';
+				editor.value = `<table>
+					<tbody>
+						<tr><td>1</td><td>2</td></tr>
+						<tr><td>3</td><td>4</td></tr>
+						<tr><td>5</td><td>6</td></tr>
+					</tbody>
+				</table>`;
 
 				let td = editor.editor.querySelector('td');
 
@@ -1196,11 +1198,14 @@ describe('Tables Jodit Editor Tests', function () {
 
 				td = editor.editor.querySelectorAll('td')[3];
 
-				simulateEvent(['mousemove', 'mouseup'], td);
+				simulateEvent(['mousemove', 'mouseup', 'click'], td);
 
-				expect(
-					editor.getInstance('Table', editor.o).selected.size
-				).equals(4);
+				editor.async.requestIdleCallback(() => {
+					expect(
+						editor.getInstance('Table', editor.o).selected.size
+					).equals(4);
+					done();
+				});
 			});
 
 			describe('Set custom selected border color', function () {
@@ -1325,6 +1330,8 @@ describe('Tables Jodit Editor Tests', function () {
 					'</tbody>' +
 					'</table>';
 
+				editor.editor.scrollIntoView();
+
 				let td = editor.editor.querySelector('td');
 
 				simulateEvent('mousedown', td);
@@ -1442,10 +1449,12 @@ describe('Tables Jodit Editor Tests', function () {
 					'<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>' +
 					'</table>';
 
+				editor.editor.scrollIntoView();
+
 				const td = editor.editor.querySelectorAll('td')[1],
 					box = td.getBoundingClientRect();
 
-				simulateEvent('mousemove', 1, td, function (options) {
+				simulateEvent('mousemove', td, function (options) {
 					options.clientX = box.left;
 					options.offsetX = 0;
 					options.pageX = 0;
@@ -1454,7 +1463,6 @@ describe('Tables Jodit Editor Tests', function () {
 
 				simulateEvent(
 					'mousedown',
-					1,
 					editor.container.querySelector('.jodit-table-resizer'),
 					function (options) {
 						options.clientX = box.left;
@@ -1463,7 +1471,7 @@ describe('Tables Jodit Editor Tests', function () {
 					}
 				);
 
-				simulateEvent('mousemove', 1, editor.ew, function (options) {
+				simulateEvent('mousemove', editor.ew, function (options) {
 					options.clientX = box.left + 500; // can move only on 5 pixels
 					options.pageX = 0;
 					options.pageY = 0;
@@ -1476,6 +1484,7 @@ describe('Tables Jodit Editor Tests', function () {
 						10
 					) < 55
 				).is.true;
+
 				done();
 			});
 

package/tsconfig.json

@@ -20,6 +20,7 @@
 		"noImplicitAny": true,
 		"noImplicitReturns": true,
 		"noUnusedLocals": true,
+		"noImplicitOverride": true,
 		"noImplicitThis": true,
 		"resolveJsonModule": true,
 

package/webpack.config.js

@@ -84,6 +84,7 @@ module.exports = (env, argv, dir = __dirname, onlyTS = false) => {
 			isESNext: ESNext,
 			isTest: isTest,
 			'process.env': {
+				HOMEPAGE: JSON.stringify(pkg.homepage),
 				TARGET_ES: JSON.stringify(ES),
 				NODE_ENV: JSON.stringify(mode),
 				EXCLUDE_LANGS: JSON.stringify(excludeLangs)