jodit 3.8.7 → 3.9.4

package/src/core/request/ajax.ts

@@ -0,0 +1,212 @@
+/*!
+ * 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 {
+	IDictionary,
+	IRequest,
+	IViewBased,
+	AjaxOptions,
+	IAjax,
+	RejectablePromise,
+	IResponse
+} from '../../types';
+
+import { Config } from '../../config';
+
+import {
+	error,
+	isPlainObject,
+	parseQuery,
+	buildQuery,
+	isString,
+	isFunction,
+	ConfigProto
+} from '../helpers';
+import { Response } from './response';
+
+import './config';
+
+export class Ajax<T extends object = any> implements IAjax<T> {
+	static log: IRequest[] = [];
+
+	private readonly xhr!: XMLHttpRequest;
+
+	private __buildParams(
+		obj: string | IDictionary<string | object> | FormData,
+		prefix?: string
+	): string | FormData {
+		if (isFunction(this.o.queryBuild)) {
+			return this.o.queryBuild.call(this, obj, prefix);
+		}
+
+		if (
+			isString(obj) ||
+			((this.j.ow as any).FormData &&
+				obj instanceof (this.j.ow as any).FormData)
+		) {
+			return obj as string | FormData;
+		}
+
+		return buildQuery(obj);
+	}
+
+	options: AjaxOptions;
+	get o(): this['options'] {
+		return this.options;
+	}
+
+	/**
+	 * Alias for this.jodit
+	 */
+	get j(): this['jodit'] {
+		return this.jodit;
+	}
+
+	abort(): Ajax {
+		try {
+			this.xhr.abort();
+		} catch {}
+
+		return this;
+	}
+
+	private resolved = false;
+
+	private activated = false;
+
+	send(): RejectablePromise<IResponse<T>> {
+		this.activated = true;
+
+		const { xhr, o } = this;
+
+		const request = this.prepareRequest();
+
+		return this.j.async.promise((resolve, reject) => {
+			const onReject = () => {
+				reject(error('Connection error'));
+			};
+
+			const onResolve = () => {
+				this.resolved = true;
+
+				resolve(
+					new Response<T>(
+						request,
+						xhr.status,
+						xhr.statusText,
+						xhr.responseText
+					)
+				);
+			};
+
+			xhr.onabort = onReject;
+			xhr.onerror = onReject;
+			xhr.ontimeout = onReject;
+
+			xhr.onload = onResolve;
+
+			xhr.onprogress = (e): void => {
+				let percentComplete = 0;
+
+				if (e.lengthComputable) {
+					percentComplete = (e.loaded / e.total) * 100;
+				}
+
+				this.options.onProgress?.(percentComplete);
+			};
+
+			xhr.onreadystatechange = () => {
+				this.options.onProgress?.(10);
+
+				if (xhr.readyState === XMLHttpRequest.DONE) {
+					if (o.successStatuses.includes(xhr.status)) {
+						onResolve();
+					} else {
+						reject(error(xhr.statusText || 'Connection error'));
+					}
+				}
+			};
+
+			xhr.withCredentials = o.withCredentials ?? false;
+
+			const { url, data, method } = request;
+
+			xhr.open(method, url, true);
+
+			if (o.contentType && xhr.setRequestHeader) {
+				xhr.setRequestHeader('Content-type', o.contentType);
+			}
+
+			const { headers } = o;
+
+			if (headers && xhr.setRequestHeader) {
+				Object.keys(headers).forEach(key => {
+					xhr.setRequestHeader(key, headers[key]);
+				});
+			}
+
+			// IE
+			this.j.async.setTimeout(() => {
+				xhr.send(data ? this.__buildParams(data) : undefined);
+			}, 0);
+		});
+	}
+
+	prepareRequest(): IRequest {
+		if (!this.o.url) {
+			throw error('Need URL for AJAX request');
+		}
+
+		let url: string = this.o.url;
+
+		const data = this.o.data;
+		const method = (this.o.method || 'get').toLowerCase();
+
+		if (method === 'get' && data && isPlainObject(data)) {
+			const qIndex = url.indexOf('?');
+
+			if (qIndex !== -1) {
+				const urlData = parseQuery(url);
+
+				url =
+					url.substr(0, qIndex) +
+					'?' +
+					buildQuery({ ...urlData, ...(data as IDictionary) });
+			} else {
+				url += '?' + buildQuery(this.o.data as IDictionary);
+			}
+		}
+
+		const request = {
+			url,
+			method,
+			data
+		};
+
+		Ajax.log.splice(100);
+		Ajax.log.push(request);
+
+		return request;
+	}
+
+	constructor(readonly jodit: IViewBased, options: Partial<AjaxOptions>) {
+		this.options = ConfigProto(
+			options || {},
+			Config.prototype.defaultAjaxOptions
+		) as AjaxOptions;
+
+		this.xhr = this.o.xhr ? this.o.xhr() : new XMLHttpRequest();
+
+		jodit && jodit.e && jodit.e.on('beforeDestruct', () => this.destruct());
+	}
+
+	destruct(): void {
+		if (this.activated && !this.resolved) {
+			this.abort();
+			this.resolved = true;
+		}
+	}
+}

package/src/core/request/config.ts

@@ -0,0 +1,37 @@
+/*!
+ * 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 { AjaxOptions } from '../../types';
+import { Config } from '../../config';
+
+declare module '../../config' {
+	interface Config {
+		/**
+		 * A set of key/value pairs that configure the Ajax request. All settings are optional
+		 */
+		defaultAjaxOptions: AjaxOptions;
+	}
+}
+
+Config.prototype.defaultAjaxOptions = {
+	successStatuses: [200, 201, 202],
+
+	dataType: 'json',
+	method: 'GET',
+	url: '',
+	data: null,
+	contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
+
+	headers: {
+		'X-REQUESTED-WITH': 'XMLHttpRequest' // compatible with jQuery
+	},
+
+	withCredentials: false,
+
+	xhr(): XMLHttpRequest {
+		return new XMLHttpRequest();
+	}
+} as AjaxOptions;

package/{build-system/minimizer/index.js → src/core/request/index.ts}

@@ -4,4 +4,5 @@
  * Copyright (c) 2013-2021 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
 
-module.exports = [require('./js'), require('./css')];
+export * from './ajax';
+export * from './response';

package/src/core/request/response.ts

@@ -0,0 +1,39 @@
+/*!
+ * 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 { IRequest, IResponse } from '../../types';
+
+export class Response<T> implements IResponse<T> {
+	readonly status: number;
+	readonly statusText: string;
+
+	readonly request: IRequest;
+	get url(): string {
+		return this.request.url;
+	}
+
+	private readonly body: string;
+
+	constructor(
+		request: IRequest,
+		status: number,
+		statusText: string,
+		body: string
+	) {
+		this.request = request;
+		this.status = status;
+		this.statusText = statusText;
+		this.body = body;
+	}
+
+	async json(): Promise<T> {
+		return JSON.parse(this.body);
+	}
+
+	text(): Promise<string> {
+		return Promise.resolve(this.body);
+	}
+}

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();
 
@@ -760,42 +761,74 @@ export class Select implements ISelect {
 		if (sel && sel.rangeCount) {
 			const range = sel.getRangeAt(0);
 
+			let root = range.commonAncestorContainer;
+
+			if (!Dom.isHTMLElement(root)) {
+				root = root.parentElement as HTMLElement;
+			}
+
 			const nodes: Node[] = [],
 				startOffset = range.startOffset,
-				length = this.area.childNodes.length,
-				elementOffset = startOffset < length ? startOffset : length - 1,
-				start: Node =
+				length = root.childNodes.length,
+				elementOffset = startOffset < length ? startOffset : length - 1;
+
+			let start: Node =
 					range.startContainer === this.area
-						? this.area.childNodes[elementOffset]
+						? root.childNodes[elementOffset]
 						: range.startContainer,
 				end: Node =
 					range.endContainer === this.area
-						? this.area.childNodes[range.endOffset - 1]
+						? root.childNodes[range.endOffset - 1]
 						: range.endContainer;
 
-			Dom.find(
-				start,
-				(node: Node | null) => {
-					if (
-						node &&
-						node !== this.area &&
-						!Dom.isEmptyTextNode(node) &&
-						!Select.isMarker(node as HTMLElement)
-					) {
-						nodes.push(node);
-					}
+			if (
+				Dom.isText(start) &&
+				start === range.startContainer &&
+				range.startOffset === start.nodeValue?.length &&
+				start.nextSibling
+			) {
+				start = start.nextSibling;
+			}
 
-					// checks parentElement as well because partial selections are not equal to entire element
-					return (
-						node === end ||
-						(node && node.contains && node.contains(end))
-					);
-				},
-				this.area,
-				true,
-				'nextSibling',
-				false
-			);
+			if (
+				Dom.isText(end) &&
+				end === range.endContainer &&
+				range.endOffset === 0 &&
+				end.previousSibling
+			) {
+				end = end.previousSibling;
+			}
+
+			const checkElm = (node: Nullable<Node>) => {
+				if (
+					node &&
+					node !== root &&
+					!Dom.isEmptyTextNode(node) &&
+					!Select.isMarker(node as HTMLElement)
+				) {
+					nodes.push(node);
+				}
+			};
+
+			checkElm(start);
+
+			if (start !== end) {
+				Dom.find(
+					start,
+					node => {
+						checkElm(node);
+
+						// checks parentElement as well because partial selections are not equal to entire element
+						return (
+							node === end ||
+							(node && node.contains && node.contains(end))
+						);
+					},
+					<HTMLElement>root,
+					true,
+					false
+				);
+			}
 
 			const forEvery = (current: Node): void => {
 				if (!Dom.isOrContains(this.j.editor, current, true)) {

package/src/core/selection/style/api/element-has-same-style.ts

@@ -29,3 +29,16 @@ export function elementHasSameStyle(elm: Node, rules: IStyle): boolean {
 			})
 	);
 }
+
+/**
+ * Element has the similar styles
+ */
+export function elementHasSameStyleKeys(elm: Node, rules: IStyle): boolean {
+	return Boolean(
+		!Dom.isTag(elm, 'font') &&
+			Dom.isHTMLElement(elm) &&
+			Object.keys(rules).every(
+				property => !isVoid(css(elm, property, true))
+			)
+	);
+}

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/get-suit-parent.ts

@@ -25,7 +25,7 @@ export function getSuitParent(
 	const { parentNode } = node;
 
 	if (
-		parentNode &&
+		Dom.isHTMLElement(parentNode) &&
 		!Dom.next(node, isNormalNode, parentNode) &&
 		!Dom.prev(node, isNormalNode, parentNode) &&
 		isSuitElement(style, parentNode, false) &&

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

@@ -6,7 +6,10 @@
 import type { Nullable } from '../../../../types';
 import type { CommitStyle } from '../commit-style';
 import { isNormalNode } from './is-normal-node';
-import { elementHasSameStyle } from './element-has-same-style';
+import {
+	elementHasSameStyle,
+	elementHasSameStyleKeys
+} from './element-has-same-style';
 import { Dom } from '../../../dom';
 
 /**
@@ -33,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) ||
@@ -42,9 +47,35 @@ export function isSuitElement(
 		return true;
 	}
 
-	if (!elmIsSame && !strict && elementIsDefault && Dom.isInlineBlock(elm)) {
-		return true;
+	return Boolean(
+		!elmIsSame && !strict && elementIsDefault && Dom.isInlineBlock(elm)
+	);
+}
+
+/**
+ * Внутри родительского элемента есть блок с теми же стилями
+ * @example
+ * For selection:
+ * ```html
+ * <p>|test<strong>test</strong>|</p>
+ * ```
+ * Apply `{element:'strong'}`
+ */
+export function isSameStyleChild(
+	commitStyle: CommitStyle,
+	elm: Nullable<Node>
+): elm is HTMLElement {
+	const { element, options } = commitStyle;
+
+	if (!elm || !isNormalNode(elm)) {
+		return false;
 	}
 
-	return false;
+	const elmIsSame = elm.nodeName.toLowerCase() === element;
+
+	const elmHasSameStyle = Boolean(
+		options.style && elementHasSameStyleKeys(elm, options.style)
+	);
+
+	return elmIsSame && elmHasSameStyle;
 }