jodit 3.9.3 → 3.10.2

package/index.d.ts

@@ -24,6 +24,16 @@ declare global {
 		offset: number;
 	}
 
+	interface IdleDeadline {
+		readonly didTimeout: boolean;
+		timeRemaining(): DOMHighResTimeStamp;
+	}
+
+	// https://github.com/xdan/jodit/issues/743
+	interface IdleRequestCallback {
+		(deadline: IdleDeadline): void;
+	}
+
 	interface Document {
 		caretPositionFromPoint?(x: number, y: number): CaretPosition;
 		caretRangeFromPoint(x: number, y: number): Range;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "jodit",
-	"version": "3.9.3",
+	"version": "3.10.2",
 	"description": "Jodit is awesome and usefully wysiwyg editor with filebrowser",
 	"main": "build/jodit.min.js",
 	"types": "./types/index.d.ts",
@@ -11,18 +11,18 @@
 		"start": "node server.js --port=2000",
 		"clean": "rm -rf build/*",
 		"build": "npm run clean && npm run types && npm run build-es5 && npm run build-es2018 && npm run build-es2018-en && npm run build-no-uglify-es5 && npm run build-no-uglify-es2018 && npm run build-no-uglify-es2018-en",
-		"build-es5": "node ./build-system/build.js --progress --mode production --es es5 --uglify true",
-		"build-es2018": "node ./build-system/build.js --progress --mode production --es es2018 --uglify true",
-		"build-es2018-en": "node ./build-system/build.js --progress --mode production --es es2018 --excludeLangs true --uglify true",
-		"build-no-uglify-es5": "node ./build-system/build.js --progress --mode production --es es5 --uglify false",
-		"build-no-uglify-es2018": "node ./build-system/build.js --progress --mode production --es es2018 --uglify false",
-		"build-no-uglify-es2018-en": "node ./build-system/build.js --progress --mode production --es es2018 --excludeLangs true --uglify false",
-		"test": "npm run clean && node ./build-system/build.js --progress --mode production --es es2018 --uglify false --isTest true && npm run test-only-run",
+		"build-es5": "webpack --progress --mode production --env es=es5 --env uglify=true",
+		"build-es2018": "webpack --progress --mode production --env es=es2018 --env uglify=true",
+		"build-es2018-en": "webpack --progress --mode production --env es=es2018 --env excludeLangs=true --env uglify=true",
+		"build-no-uglify-es5": "webpack --progress --mode production --env es=es5 --env uglify=false",
+		"build-no-uglify-es2018": "webpack --progress --mode production --env es=es2018 --env uglify=false",
+		"build-no-uglify-es2018-en": "webpack --progress --mode production --env es=es2018 --env excludeLangs=true --env uglify=false",
+		"test": "npm run clean && webpack --progress --mode production --env es=es2018 --env uglify=false --env isTest=true && npm run test-only-run",
 		"test-debug": "karma start --browsers Chrome karma.conf.js  --single-run false",
 		"test-chrome": "karma start --browsers Chrome karma.conf.js",
 		"test-only-run": "karma start --browsers FirefoxHeadless karma.conf.js",
 		"jodit": "cd ../jodit-react/ && npm update && npm run newversion && cd ../jodit-pro && npm run newversion && cd ../jodit-joomla && npm run newversion && cd ../jodit-master && npm run newversion",
-		"types": "rm -rf types/* && cp -r ./src/types ./types/types && tsc --project . --declaration --declarationDir types --outDir types --emitDeclarationOnly --removeComments false",
+		"types": "rm -rf types/* && mkdir -p ./types/types && cp -r ./src/types ./types/types && tsc --project . --declaration --declarationDir types --outDir types --emitDeclarationOnly --removeComments false",
 		"pretty": "npx prettier --write ./src/*.{ts,less} ./src/**/*.{ts,less} ./src/**/**/*.{ts,less} ./src/**/**/**/*.{ts,less} ./src/**/**/**/**/*.{ts,less}",
 		"fix": "npx eslint ./src/ ./test/ --fix && npm run pretty",
 		"lint": "npx eslint ./src/ ./test/ && stylelint ./src/**/**.less"
@@ -98,7 +98,7 @@
 		"ts-loader": "^9.2.6",
 		"ts-private-uglifier": "^1.0.2",
 		"tslib": "^2.3.1",
-		"typescript": "^4.4.4",
+		"typescript": "^4.5.2",
 		"url-loader": "^4.1.1",
 		"webpack": "^5.59.1",
 		"webpack-cli": "^4.9.1",

package/src/config.ts

@@ -627,13 +627,9 @@ export class Config implements IViewOptions {
 			group: 'font-style',
 			buttons: []
 		},
-		{
-			group: 'script',
-			buttons: []
-		},
 		{
 			group: 'list',
-			buttons: ['ul', 'ol']
+			buttons: []
 		},
 		{
 			group: 'indent',
@@ -647,6 +643,11 @@ export class Config implements IViewOptions {
 			group: 'color',
 			buttons: []
 		},
+		'---',
+		{
+			group: 'script',
+			buttons: []
+		},
 		{
 			group: 'media',
 			buttons: []
@@ -668,6 +669,7 @@ export class Config implements IViewOptions {
 			group: 'form',
 			buttons: []
 		},
+		'---',
 		{
 			group: 'history',
 			buttons: []
@@ -694,8 +696,6 @@ export class Config implements IViewOptions {
 	 * The list of buttons that appear in the editor's toolbar on medium places (≥ options.sizeMD).
 	 */
 	buttonsMD: ButtonsOption = [
-		'source',
-		'|',
 		'bold',
 		'italic',
 		'|',
@@ -707,19 +707,20 @@ export class Config implements IViewOptions {
 		'fontsize',
 		'brush',
 		'paragraph',
-		'|',
+		'align',
+		'---',
 		'image',
 		'table',
-		'link',
 		'|',
-		'align',
+		'link',
 		'\n',
-		'undo',
-		'redo',
-		'|',
 		'hr',
 		'copyformat',
 		'fullsize',
+		'---',
+		'undo',
+		'redo',
+		'|',
 		'dots'
 	];
 
@@ -727,8 +728,6 @@ export class Config implements IViewOptions {
 	 * The list of buttons that appear in the editor's toolbar on small places (≥ options.sizeSM).
 	 */
 	buttonsSM: ButtonsOption = [
-		'source',
-		'|',
 		'bold',
 		'italic',
 		'|',
@@ -739,7 +738,7 @@ export class Config implements IViewOptions {
 		'fontsize',
 		'brush',
 		'paragraph',
-		'|',
+		'---',
 		'image',
 		'table',
 		'\n',
@@ -752,6 +751,7 @@ export class Config implements IViewOptions {
 		'|',
 		'copyformat',
 		'fullsize',
+		'---',
 		'dots'
 	];
 
@@ -760,17 +760,16 @@ export class Config implements IViewOptions {
 	 */
 	buttonsXS: ButtonsOption = [
 		'bold',
-		'image',
-		'|',
 		'brush',
 		'paragraph',
 		'eraser',
+		'---',
+		'image',
 		'\n',
 		'align',
-		'|',
 		'undo',
 		'redo',
-		'|',
+		'---',
 		'dots'
 	];
 

package/src/core/component/component.ts

@@ -8,7 +8,6 @@ import type {
 	ComponentStatus,
 	IComponent,
 	IDictionary,
-	IViewBased,
 	Nullable
 } from '../../types';
 
@@ -27,7 +26,17 @@ const StatusListHandlers: Map<
 export abstract class Component implements IComponent {
 	static STATUSES = STATUSES;
 
-	readonly componentName: string;
+	private __componentName!: string;
+
+	get componentName(): string {
+		if (!this.__componentName) {
+			this.__componentName =
+				'jodit-' + kebabCase(this.className() || getClassName(this));
+		}
+
+		return this.__componentName;
+	}
+
 	readonly uid: string;
 
 	/**
@@ -139,16 +148,11 @@ export abstract class Component implements IComponent {
 	/**
 	 * Bind destructor to come View
 	 */
-	bindDestruct(jodit: IViewBased): this {
-		const destructMe = () => {
-			!this.isInDestruct && this.destruct();
-		};
-
-		jodit.e && jodit.e.on(STATUSES.beforeDestruct, destructMe);
-
-		this.hookStatus(STATUSES.beforeDestruct, () => {
-			jodit.e && jodit.e.off(STATUSES.beforeDestruct, destructMe);
-		});
+	bindDestruct(component: IComponent): this {
+		component.hookStatus(
+			STATUSES.beforeDestruct,
+			() => !this.isInDestruct && this.destruct()
+		);
 
 		return this;
 	}
@@ -156,9 +160,6 @@ export abstract class Component implements IComponent {
 	abstract className(): string;
 
 	protected constructor() {
-		this.componentName =
-			'jodit-' + kebabCase(this.className() || getClassName(this));
-
 		this.uid = 'jodit-uid-' + uniqueUid();
 	}
 

package/src/core/component/statuses.ts

@@ -4,9 +4,9 @@
  * Copyright (c) 2013-2021 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
 
-export enum STATUSES {
-	beforeInit = 'beforeInit',
-	ready = 'ready',
-	beforeDestruct = 'beforeDestruct',
-	destructed = 'destructed'
-}
+export const STATUSES = {
+	beforeInit: 'beforeInit',
+	ready: 'ready',
+	beforeDestruct: 'beforeDestruct',
+	destructed: 'destructed'
+} as const;

package/src/core/dom.ts

@@ -24,6 +24,7 @@ import {
 	get,
 	isArray,
 	isFunction,
+	isHTML,
 	isString,
 	isVoid,
 	toArray,
@@ -191,11 +192,15 @@ export class Dom {
 	 */
 	static replace(
 		elm: HTMLElement,
-		newTagName: HTMLTagNames | HTMLElement,
+		newTagName: HTMLTagNames | HTMLElement | string,
 		create: ICreate,
 		withAttributes = false,
 		notMoveContent = false
 	): HTMLElement {
+		if (isHTML(newTagName)) {
+			newTagName = create.fromHTML(newTagName);
+		}
+
 		const tag = isString(newTagName)
 			? create.element(newTagName)
 			: newTagName;
@@ -225,12 +230,19 @@ export class Dom {
 	 *
 	 * @param node - The element of wood to be checked
 	 */
-	static isEmptyTextNode(node: Node): boolean {
+	static isEmptyTextNode(node: Nullable<Node>): boolean {
 		return (
 			Dom.isText(node) &&
 			(!node.nodeValue ||
-				node.nodeValue.replace(consts.INVISIBLE_SPACE_REG_EXP(), '')
-					.length === 0)
+				node.nodeValue
+					.replace(consts.INVISIBLE_SPACE_REG_EXP(), '')
+					.trim().length === 0)
+		);
+	}
+
+	static isEmptyContent(node: Node): boolean {
+		return Dom.each(node as HTMLElement, (elm: Node | null): boolean =>
+			Dom.isEmptyTextNode(elm)
 		);
 	}
 

package/src/core/events/event-emitter.ts

@@ -264,7 +264,9 @@ export class EventEmitter implements IEventEmitter {
 			return this;
 		}
 
-		const isDOMElement = isFunction((subject as any).addEventListener),
+		const isDOMElement = isFunction(
+				(subject as HTMLElement).addEventListener
+			),
 			self: EventEmitter = this;
 
 		let syntheticCallback: CallbackFunction = function (
@@ -360,7 +362,7 @@ export class EventEmitter implements IEventEmitter {
 
 		const newCallback = (...args: any) => {
 			this.off(subject, events, newCallback);
-			callback(...args);
+			return callback(...args);
 		};
 
 		this.on(subject, events, newCallback, onTop);

package/src/core/global.ts

@@ -30,12 +30,23 @@ export const instances: IDictionary<IJodit> = {};
 
 let counter = 1;
 
+const uuids = new Set();
 /**
  * Generate global unique uid
  */
 export function uniqueUid(): string {
-	counter += 10 * (Math.random() + 1);
-	return Math.round(counter).toString(16);
+	function gen(): string {
+		counter += 10 * (Math.random() + 1);
+		return Math.round(counter).toString(16);
+	}
+
+	let uid = gen();
+	while (uuids.has(uid)) {
+		uid = gen();
+	}
+	uuids.add(uid);
+
+	return uid;
 }
 
 export const pluginSystem = new PluginSystem();

package/src/core/helpers/append-script.ts

@@ -113,3 +113,17 @@ export const loadNext = (
 		loadNext(jodit, urls, i + 1)
 	);
 };
+
+export const loadNextStyle = (
+	jodit: IViewBased,
+	urls: string[],
+	i: number = 0
+): Promise<void> => {
+	if (!isString(urls[i])) {
+		return Promise.resolve();
+	}
+
+	return appendStyleAsync(jodit, urls[i]).then(() =>
+		loadNextStyle(jodit, urls, i + 1)
+	);
+};

package/src/core/helpers/selector.ts

@@ -4,7 +4,12 @@
  * Copyright (c) 2013-2021 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
 
-import type { HTMLTagNames, IDictionary, Nullable } from '../../types/';
+import type {
+	HTMLTagNames,
+	IDictionary,
+	IUIElement,
+	Nullable
+} from '../../types/';
 import { IS_IE } from '../constants';
 import { isString } from './checker';
 import { attr } from './utils';
@@ -116,13 +121,13 @@ export const getXPathByElement = (
  * Find all `ref` or `data-ref` elements inside HTMLElement
  */
 export const refs = <T extends HTMLElement>(
-	root: HTMLElement | UIElement
+	root: HTMLElement | IUIElement
 ): IDictionary<T> => {
 	if (root instanceof UIElement) {
 		root = root.container;
 	}
 
-	return $$('[ref],[data-ref]', root).reduce((def, child) => {
+	return $$('[ref],[data-ref]', <HTMLElement>root).reduce((def, child) => {
 		const key = attr(child, '-ref');
 
 		if (key && isString(key)) {

package/src/core/helpers/size/index.ts

@@ -9,3 +9,4 @@ export * from './get-scroll-parent';
 export * from './inner-width';
 export * from './offset';
 export * from './position';
+export * from './object-size';

package/src/core/helpers/size/object-size.ts

@@ -0,0 +1,22 @@
+/*!
+ * 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 { isArray, isPlainObject, isString } from '../checker';
+import type { CanUndef } from '../../../types';
+
+export function size(
+	subject: CanUndef<object | string | Array<unknown>>
+): number {
+	if (isString(subject) || isArray(subject)) {
+		return subject.length;
+	}
+
+	if (isPlainObject(subject)) {
+		return Object.keys(subject).length;
+	}
+
+	return 0;
+}

package/src/core/selection/select.ts

@@ -110,6 +110,7 @@ export class Select implements ISelect {
 	 * Return current selection object
 	 * @param select - Immediately add in selection
 	 */
+	@autobind
 	createRange(select: boolean = false): Range {
 		const range = this.doc.createRange();
 

package/src/core/selection/style/api/{get-closest-wrapper.ts → extract.ts}

@@ -4,69 +4,52 @@
  * Copyright (c) 2013-2021 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
 
-import type { CommitStyle } from '../commit-style';
-import { Dom } from '../../../dom';
-import { isSuitElement } from './is-suit-element';
-import { call, trim } from '../../../helpers';
-import type { Nullable } from '../../../../types';
+import type { IJodit } from '../../../../types';
 import { Select } from '../../select';
+import { call, trim } from '../../../helpers';
+import { Dom } from '../../../dom';
 
 /**
  * If the selection area is inside an element that matches the commit (suitable relative),
  * but does not completely fill it.
  * Then the method cuts the parent and leaves itself in a copy of the parent (suitable relative) in the middle.
- * And returns it copy.
  *
  * @example
+ * Apply strong to
  * ```html
  * 	<strong><span>some<font>SELECTED</font>text</span></strong>
- * 	to
+ * ```
+ * Should extract selection from parent `strong`
+ * ```html
  * `<strong><span>some</span></strong><strong><span><font>SELECTED</font></span></strong><strong><span>test</span></strong>
  * ```
  */
-export function getClosestWrapper(
-	style: CommitStyle,
+export function extractSelectedPart(
+	wrapper: HTMLElement,
 	font: HTMLElement,
-	root: HTMLElement,
-	getRange: () => Range
-): Nullable<HTMLElement> {
-	const wrapper = Dom.closest(
-		font,
-		node => isSuitElement(style, node, true),
-		root
-	);
-
-	if (wrapper) {
-		if (style.elementIsBlock) {
-			return wrapper;
-		}
-
-		const range = getRange();
-
-		// Left part
-		const leftEdge = Select.isMarker(font.previousSibling)
-			? font.previousSibling
-			: font;
-
-		range.setStartBefore(wrapper);
-		range.setEndBefore(leftEdge);
+	jodit: IJodit
+): void {
+	const range = jodit.s.createRange();
 
-		extractAndMove(wrapper, range, true);
+	// Left part
+	const leftEdge = Select.isMarker(font.previousSibling)
+		? font.previousSibling
+		: font;
 
-		// Right part
-		const rightEdge = Select.isMarker(font.nextSibling)
-			? font.nextSibling
-			: font;
+	range.setStartBefore(wrapper);
+	range.setEndBefore(leftEdge);
 
-		range.setStartAfter(rightEdge);
-		range.setEndAfter(wrapper);
+	extractAndMove(wrapper, range, true);
 
-		extractAndMove(wrapper, range, false);
+	// Right part
+	const rightEdge = Select.isMarker(font.nextSibling)
+		? font.nextSibling
+		: font;
 
-		return wrapper;
-	}
+	range.setStartAfter(rightEdge);
+	range.setEndAfter(wrapper);
 
-	return null;
+	extractAndMove(wrapper, range, false);
 }
 
 /**

package/src/core/selection/style/api/finite-state-machine.ts

@@ -0,0 +1,66 @@
+/*!
+ * 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 { CanUndef, IDictionary } from '../../../../types';
+
+/**
+ * A state machine implementation for applying styles.
+ */
+export class FiniteStateMachine {
+	setState(state: string, subState?: string): void {
+		this.state = state;
+
+		if (subState != null) {
+			this.subState = subState;
+		}
+	}
+
+	private subState: string = '';
+
+	getState(): string {
+		return this.state;
+	}
+
+	getSubState(): string {
+		return this.subState;
+	}
+
+	private silent: boolean = true;
+	disableSilent(): void {
+		this.silent = false;
+	}
+
+	constructor(
+		private state: string,
+		private readonly transitions: IDictionary<
+			IDictionary<(this: FiniteStateMachine, ...attrs: any[]) => any>
+		>
+	) {}
+
+	dispatch<T>(actionName: string, ...attrs: any[]): CanUndef<T> {
+		const action = this.transitions[this.state][actionName];
+
+		if (action) {
+			if (!this.silent) {
+				console.log('State: ' + this.state, 'Action: ' + actionName);
+			}
+
+			const res = action.call(this, ...attrs);
+
+			if (!this.silent) {
+				console.log('State: ' + this.state);
+			}
+
+			return <T>res;
+		}
+
+		if (!this.silent) {
+			throw new Error('invalid action: ' + this.state + '.' + actionName);
+		}
+
+		return;
+	}
+}

package/src/core/selection/style/api/index.ts

@@ -4,11 +4,18 @@
  * Copyright (c) 2013-2021 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
 
-export * from './get-suit-parent';
+export * from './toggle/toggle-css';
+export * from './toggle/toggle-ordered-list';
+export * from './element-has-same-style';
+export * from './extract';
+export * from './finite-state-machine';
 export * from './get-suit-child';
-export * from './check-special-elements';
-export * from './get-closest-wrapper';
+export * from './get-suit-parent';
+export * from './is-inside-invisible-element';
+export * from './is-normal-node';
+export * from './is-suit-element';
+export * from './toggle-commit-styles';
 export * from './unwrap-children';
+export * from './wrap-and-commit-style';
+export * from './wrap-ordered-list';
 export * from './wrap-unwrapped-text';
-export * from './post-process-list-element';
-export * from './toggle-styles';

package/src/core/selection/style/api/{check-special-elements.ts → is-inside-invisible-element.ts}

@@ -9,7 +9,7 @@ import { Dom } from '../../../dom';
 /**
  * Check if FONT inside STYLE or SCRIPT element
  */
-export function checkSpecialElements(
+export function isInsideInvisibleElement(
 	font: HTMLElement,
 	root: HTMLElement
 ): boolean {

package/src/core/selection/style/api/is-suit-element.ts

@@ -36,7 +36,9 @@ export function isSuitElement(
 		options.style && elementHasSameStyle(elm, options.style)
 	);
 
-	const elmIsSame = elm.nodeName.toLowerCase() === element;
+	const elmIsSame =
+		elm.nodeName.toLowerCase() === element ||
+		(Dom.isTag(elm, ['ul', 'ol']) && commitStyle.elementIsList);
 
 	if (
 		((!elementIsDefault || !strict) && elmIsSame) ||
@@ -50,6 +52,15 @@ export function isSuitElement(
 	);
 }
 
+/**
+ * Внутри родительского элемента есть блок с теми же стилями
+ * @example
+ * For selection:
+ * ```html
+ * <p>|test<strong>test</strong>|</p>
+ * ```
+ * Apply `{element:'strong'}`
+ */
 export function isSameStyleChild(
 	commitStyle: CommitStyle,
 	elm: Nullable<Node>