jodit 3.23.3 → 3.24.2

package/src/core/selection/select.ts

@@ -17,6 +17,7 @@ import type {
 	IJodit,
 	ISelect,
 	IStyle,
+	IStyleOptions,
 	MarkerInfo,
 	Nullable
 } from 'jodit/types';
@@ -32,10 +33,9 @@ import {
 import { Dom } from 'jodit/core/dom';
 
 import {
+	size,
 	attr,
 	error,
-	isFunction,
-	isString,
 	$$,
 	css,
 	call,
@@ -45,6 +45,10 @@ import {
 import { CommitStyle } from './style/commit-style';
 import { autobind } from 'jodit/core/decorators';
 import { moveTheNodeAlongTheEdgeOutward } from 'jodit/core/selection/helpers';
+import { assert } from 'jodit/core/helpers/utils/assert';
+import { isMarker, isFunction, isString } from 'jodit/core/helpers/checker';
+
+import './interface';
 
 export class Select implements ISelect {
 	constructor(readonly jodit: IJodit) {
@@ -214,17 +218,6 @@ export class Select implements ISelect {
 		return false;
 	}
 
-	/**
-	 * Define element is selection helper
-	 */
-	static isMarker(elm: Nullable<Node>): elm is HTMLElement {
-		return (
-			Dom.isNode(elm) &&
-			Dom.isTag(elm, 'span') &&
-			elm.hasAttribute('data-' + consts.MARKER_CLASS)
-		);
-	}
-
 	/**
 	 * Check if editor has selection markers
 	 */
@@ -837,7 +830,7 @@ export class Select implements ISelect {
 					node &&
 					node !== root &&
 					!Dom.isEmptyTextNode(node) &&
-					!Select.isMarker(node as HTMLElement)
+					!isMarker(node as HTMLElement)
 				) {
 					nodes.push(node);
 				}
@@ -926,8 +919,17 @@ export class Select implements ISelect {
 		const container = start ? range.startContainer : range.endContainer;
 		const offset = start ? range.startOffset : range.endOffset;
 
-		const check = (elm: Node | null): boolean =>
-			Boolean(elm && !Dom.isTag(elm, 'br') && !Dom.isEmptyTextNode(elm));
+		const isSignificant = (elm: Node | null): boolean =>
+			Boolean(
+				elm &&
+					!Dom.isTag(elm, 'br') &&
+					!Dom.isEmptyTextNode(elm) &&
+					!Dom.isTemporary(elm) &&
+					!(
+						Dom.isElement(elm) &&
+						this.j.e.fire('isInvisibleForCursor', elm) === true
+					)
+			);
 
 		// check right offset
 		if (Dom.isText(container)) {
@@ -949,17 +951,32 @@ export class Select implements ISelect {
 			const children = toArray(container.childNodes);
 
 			if (end) {
-				if (children.slice(offset).some(check)) {
+				if (children.slice(offset).some(isSignificant)) {
 					return false;
 				}
 			} else {
-				if (children.slice(0, offset).some(check)) {
+				if (children.slice(0, offset).some(isSignificant)) {
 					return false;
 				}
 			}
 		}
 
-		return !call(start ? Dom.prev : Dom.next, current, check, parentBlock);
+		let next: Nullable<Node> = current;
+
+		while (next && next !== parentBlock) {
+			const nextOne = Dom.sibling(next, start);
+			if (!nextOne) {
+				next = next.parentNode;
+				continue;
+			}
+			next = nextOne;
+
+			if (next && isSignificant(next)) {
+				return false;
+			}
+		}
+
+		return true;
 	}
 
 	/**
@@ -1221,17 +1238,17 @@ export class Select implements ISelect {
 			if (
 				firstChild &&
 				firstChild === lastChild &&
-				Select.isMarker(firstChild)
+				isMarker(firstChild)
 			) {
 				Dom.unwrap(font);
 				continue;
 			}
 
-			if (firstChild && Select.isMarker(firstChild)) {
+			if (firstChild && isMarker(firstChild)) {
 				Dom.before(font, firstChild);
 			}
 
-			if (lastChild && Select.isMarker(lastChild)) {
+			if (lastChild && isMarker(lastChild)) {
 				Dom.after(font, lastChild);
 			}
 
@@ -1253,7 +1270,7 @@ export class Select implements ISelect {
 				if (
 					font.firstChild &&
 					font.firstChild === font.lastChild &&
-					Select.isMarker(font.firstChild)
+					isMarker(font.firstChild)
 				) {
 					continue;
 				}
@@ -1281,6 +1298,30 @@ export class Select implements ISelect {
 		return result;
 	}
 
+	/**
+	 * Apply some css rules for all selections. It method wraps selections in nodeName tag.
+	 * @example
+	 * ```js
+	 * const editor = Jodit.make('#editor');
+	 * editor.value = 'test';
+	 * editor.execCommand('selectall');
+	 *
+	 * editor.s.commitStyle({
+	 * 	style: {color: 'red'}
+	 * }) // will wrap `text` in `span` and add style `color:red`
+	 * editor.s.commitStyle({
+	 * 	style: {color: 'red'}
+	 * }) // will remove `color:red` from `span`
+	 * ```
+	 */
+	commitStyle(options: IStyleOptions): void {
+		assert(size(options) > 0, 'Need to pass at least one option');
+
+		const styleElm = new CommitStyle(options);
+
+		styleElm.apply(this.j);
+	}
+
 	/**
 	 * Apply some css rules for all selections. It method wraps selections in nodeName tag.
 	 * @example
@@ -1292,6 +1333,7 @@ export class Select implements ISelect {
 	 * editor.s.applyStyle({color: 'red'}) // will wrap `text` in `span` and add style `color:red`
 	 * editor.s.applyStyle({color: 'red'}) // will remove `color:red` from `span`
 	 * ```
+	 * @deprecated
 	 */
 	applyStyle(
 		style: CanUndef<IStyle>,
@@ -1300,21 +1342,19 @@ export class Select implements ISelect {
 			 * equal CSSRule (e.g. strong === font-weight: 700)
 			 */
 			element?: HTMLTagNames;
+			/** @deprecated Instead use attributes.class*/
 			className?: string;
+			attributes?: IDictionary<string | number>;
 			/**
 			 * tag for wrapping and apply styles
 			 */
 			defaultTag?: HTMLTagNames;
 		} = {}
 	): void {
-		const styleElm = new CommitStyle({
+		this.commitStyle({
 			style,
-			element: options.element,
-			className: options.className,
-			defaultTag: options.defaultTag
+			...options
 		});
-
-		styleElm.apply(this.j);
 	}
 
 	/**

package/src/core/selection/selection.test.js

@@ -109,15 +109,8 @@ describe('Selection Module Tests', function () {
 					describe('Cursor in the end of text node', function () {
 						it('Should work correct', function () {
 							const editor = getJodit();
-							editor.value = '<ul><li><p>test</p></li></ul>';
-
-							const range = editor.s.createRange();
-
-							range.setStartAfter(
-								editor.editor.querySelector('p').firstChild
-							);
-							range.collapse(true);
-							editor.s.selectRange(range);
+							editor.value = '<ul><li><p>test|</p></li></ul>';
+							setCursorToChar(editor);
 
 							['li', 'p'].forEach(function (tag) {
 								expect(
@@ -185,13 +178,8 @@ describe('Selection Module Tests', function () {
 			describe('Cursor in the end of text node but after this has image', function () {
 				it('Should return false', function () {
 					const editor = getJodit();
-					editor.value = '<p>test<img/></p>';
-
-					const range = editor.s.createRange();
-
-					range.setStart(editor.editor.firstChild.firstChild, 4);
-					range.collapse(true);
-					editor.s.selectRange(range);
+					editor.value = '<p>test|<img/></p>';
+					setCursorToChar(editor);
 
 					expect(editor.s.cursorOnTheRight(editor.editor.firstChild))
 						.is.false;
@@ -538,7 +526,7 @@ describe('Selection Module Tests', function () {
 			});
 		});
 
-		describe('Curson in the end of span inside P and check cursorInTheEdge(true)', function () {
+		describe('Cursor in the end of span inside P and check cursorInTheEdge(true)', function () {
 			it('Should return false', function () {
 				const editor = getJodit();
 				editor.value = '<p>Some <span>|text|</span></p>';

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

@@ -5,9 +5,10 @@
  */
 
 import type { IJodit } from 'jodit/types';
-import { Select } from '../../select';
-import { call, trim } from 'jodit/core/helpers';
-import { Dom } from 'jodit/core/dom';
+import { call } from 'jodit/core/helpers/utils/utils';
+import { trim } from 'jodit/core/helpers/string/trim';
+import { Dom } from 'jodit/core/dom/dom';
+import { isMarker } from 'jodit/core/helpers/checker/is-marker';
 
 /**
  * If the selection area is inside an element that matches the commit (suitable relative),
@@ -33,7 +34,7 @@ export function extractSelectedPart(
 	const range = jodit.s.createRange();
 
 	// Left part
-	const leftEdge = Select.isMarker(font.previousSibling)
+	const leftEdge = isMarker(font.previousSibling)
 		? font.previousSibling
 		: font;
 
@@ -43,9 +44,7 @@ export function extractSelectedPart(
 	extractAndMove(wrapper, range, true);
 
 	// Right part
-	const rightEdge = Select.isMarker(font.nextSibling)
-		? font.nextSibling
-		: font;
+	const rightEdge = isMarker(font.nextSibling) ? font.nextSibling : font;
 
 	range.setStartAfter(rightEdge);
 	range.setEndAfter(wrapper);

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

@@ -4,28 +4,32 @@
  * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
 
-import type { CanUndef, IDictionary } from 'jodit/types';
+import type { IDictionary } from 'jodit/types';
+import { isString } from 'jodit/core/helpers/checker/is-string';
+import { assert } from 'jodit/src/core/helpers/utils/assert';
 
 /**
  * A state machine implementation for applying styles.
  */
-export class FiniteStateMachine {
-	setState(state: string, subState?: string): void {
-		this.state = state;
+export class FiniteStateMachine<
+	K extends string,
+	V extends object & { next: K },
+	T extends IDictionary<IDictionary<(value: V) => V>, K> = IDictionary<
+		IDictionary<(...attrs: any[]) => any>,
+		K
+	>,
+	A extends keyof T[K] = keyof T[K]
+> {
+	private __state!: K;
+	private setState(state: K): void {
+		assert(!this.__previewsStates.has(state), 'Circled states');
 
-		if (subState != null) {
-			this.subState = subState;
-		}
+		this.__previewsStates.add(state);
+		this.__state = state;
 	}
 
-	private subState: string = '';
-
-	getState(): string {
-		return this.state;
-	}
-
-	getSubState(): string {
-		return this.subState;
+	getState(): K {
+		return this.__state;
 	}
 
 	private silent: boolean = true;
@@ -33,34 +37,35 @@ export class FiniteStateMachine {
 		this.silent = false;
 	}
 
-	constructor(
-		private state: string,
-		private readonly transitions: IDictionary<
-			IDictionary<(this: FiniteStateMachine, ...attrs: any[]) => any>
-		>
-	) {}
+	private __previewsStates: Set<K> = new Set();
+	constructor(state: K, private readonly transitions: T) {
+		this.setState(state);
+	}
 
-	dispatch<T>(actionName: string, ...attrs: any[]): CanUndef<T> {
-		const action = this.transitions[this.state][actionName];
+	dispatch(actionName: A, value: V): V {
+		const action = this.transitions[this.getState()][actionName];
 
 		if (action) {
-			if (!this.silent) {
-				console.log('State: ' + this.state, 'Action: ' + actionName);
-			}
+			const res = action.call(this, value);
 
-			const res = action.call(this, ...attrs);
+			assert(res && res !== value, 'Action should return new value');
+			assert(isString(res.next), 'Value should contains next state');
+			assert(
+				res.next !== this.getState(),
+				'The new state should not be equal to the old one.'
+			);
 
-			if (!this.silent) {
-				console.log('State: ' + this.state);
-			}
+			this.setState(res.next);
 
-			return <T>res;
-		}
+			if (!isProd && !this.silent) {
+				console.log(`State: ${this.getState()}`);
+			}
 
-		if (!this.silent) {
-			throw new Error('invalid action: ' + this.state + '.' + actionName);
+			return res;
 		}
 
-		return;
+		throw new Error(
+			`invalid action: ${this.getState()}.${actionName.toString()}`
+		);
 	}
 }

package/src/core/selection/style/api/get-suit-child.ts

@@ -4,9 +4,8 @@
  * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
 
-import type { Nullable } from 'jodit/types';
-import type { CommitStyle } from '../commit-style';
-import { Dom } from 'jodit/core/dom';
+import type { Nullable, ICommitStyle } from 'jodit/types';
+import { Dom } from 'jodit/core/dom/dom';
 import { isNormalNode } from './is-normal-node';
 import { isSuitElement } from './is-suit-element';
 
@@ -19,7 +18,7 @@ import { isSuitElement } from './is-suit-element';
  * @private
  */
 export function getSuitChild(
-	style: CommitStyle,
+	style: ICommitStyle,
 	font: HTMLElement
 ): Nullable<HTMLElement> {
 	let { firstChild: child } = font;

package/src/core/selection/style/api/get-suit-parent.ts

@@ -4,9 +4,8 @@
  * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
 
-import type { Nullable } from 'jodit/types';
-import type { CommitStyle } from '../commit-style';
-import { Dom } from 'jodit/core/dom';
+import type { Nullable, ICommitStyle } from 'jodit/types';
+import { Dom } from 'jodit/core/dom/dom';
 import { isNormalNode } from './is-normal-node';
 import { isSuitElement } from './is-suit-element';
 
@@ -19,7 +18,7 @@ import { isSuitElement } from './is-suit-element';
  * @private
  */
 export function getSuitParent(
-	style: CommitStyle,
+	style: ICommitStyle,
 	node: Node,
 	root: Node
 ): Nullable<HTMLElement> {

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

@@ -8,19 +8,27 @@ import type { IStyle } from 'jodit/types';
 import { css } from 'jodit/core/helpers/utils/css';
 import { isVoid } from 'jodit/core/helpers/checker/is-void';
 import { normalizeCssValue } from 'jodit/core/helpers/normalize/normalize-css-value';
-import { Dom } from 'jodit/core/dom';
+import { Dom } from 'jodit/core/dom/dom';
+import { assert } from 'jodit/core/helpers/utils/assert';
 
 /**
  * Element has the same styles as in the commit
  * @private
  */
-export function elementHasSameStyle(elm: Node, rules: IStyle): boolean {
+export function hasSameStyle(elm: Node, rules: IStyle): boolean {
 	return Boolean(
 		!Dom.isTag(elm, 'font') &&
 			Dom.isHTMLElement(elm) &&
 			Object.keys(rules).every(property => {
 				const value = css(elm, property, true);
 
+				if (
+					value === '' &&
+					(rules[property] === '' || rules[property] == null)
+				) {
+					return true;
+				}
+
 				return (
 					!isVoid(value) &&
 					value !== '' &&
@@ -33,15 +41,26 @@ export function elementHasSameStyle(elm: Node, rules: IStyle): boolean {
 	);
 }
 
+const elm = document.createElement('div');
+elm.style.color = 'red';
+assert(hasSameStyle(elm, { color: 'red' }), 'Style test');
+assert(hasSameStyle(elm, { fontSize: null }), 'Style test');
+assert(hasSameStyle(elm, { fontSize: '' }), 'Style test');
+
 /**
  * Element has the similar styles
  */
-export function elementHasSameStyleKeys(elm: Node, rules: IStyle): boolean {
+export function hasSameStyleKeys(elm: Node, rules: IStyle): boolean {
 	return Boolean(
 		!Dom.isTag(elm, 'font') &&
 			Dom.isHTMLElement(elm) &&
-			Object.keys(rules).every(
-				property => !isVoid(css(elm, property, true))
-			)
+			Object.keys(rules).every(property => {
+				const value = css(elm, property, true);
+
+				return !isVoid(value);
+			})
 	);
 }
+
+assert(hasSameStyleKeys(elm, { color: 'red' }), 'Style test');
+assert(hasSameStyleKeys(elm, { font: 'Arial', color: 'red' }), 'Style test');

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

@@ -4,18 +4,18 @@
  * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
 
-export * from './toggle/toggle-css';
-export * from './toggle/toggle-ordered-list';
-export * from './element-has-same-style';
+export * from './toggle-attributes';
+export * from './list/toggle-ordered-list';
+export * from './list/wrap-list';
+export * from './has-same-style';
 export * from './extract';
 export * from './finite-state-machine';
 export * from './get-suit-child';
 export * from './get-suit-parent';
 export * from './is-inside-invisible-element';
+export * from './is-same-attributes';
 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';
 export * from './wrap-unwrapped-text';

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

@@ -4,7 +4,7 @@
  * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
 
-import { Dom } from 'jodit/core/dom';
+import { Dom } from 'jodit/core/dom/dom';
 
 /**
  * Check if FONT inside STYLE or SCRIPT element

package/src/core/selection/style/api/is-normal-node.ts

@@ -5,8 +5,8 @@
  */
 
 import type { Nullable } from 'jodit/types';
-import { Dom } from 'jodit/core/dom';
-import { Select } from 'jodit/core/selection';
+import { Dom } from 'jodit/core/dom/dom';
+import { isMarker } from 'jodit/core/helpers/checker/is-marker';
 
 /**
  * Is normal usual element
@@ -17,6 +17,6 @@ export function isNormalNode(elm: Nullable<Node>): boolean {
 		elm &&
 			!Dom.isEmptyTextNode(elm) &&
 			!Dom.isTemporary(elm) &&
-			!Select.isMarker(elm)
+			!isMarker(elm)
 	);
 }

package/src/core/selection/style/api/is-same-attributes.ts

@@ -0,0 +1,56 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * Released under MIT see LICENSE.txt in the project root for license information.
+ * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ */
+
+import type { IDictionary, IStyle } from 'jodit/types';
+import { attr } from 'jodit/core/helpers/utils';
+import { size } from 'jodit/core/helpers/size/object-size';
+import { assert } from 'jodit/core/helpers/utils/assert';
+import { hasSameStyle } from './has-same-style';
+
+/**
+ * Compares whether the given attributes match the element's own attributes
+ * @private
+ */
+export function isSameAttributes(
+	elm: HTMLElement,
+	attrs?: IDictionary
+): elm is HTMLElement {
+	if (!elm.attributes.length && !size(attrs)) {
+		return true;
+	}
+
+	if (!size(attrs)) {
+		return true;
+	}
+
+	assert(attrs, 'Attrs must be a non-empty object');
+
+	return Object.keys(attrs).every(key => {
+		if (key === 'class') {
+			return elm.classList.contains(attrs[key]);
+		}
+
+		if (key === 'style') {
+			return hasSameStyle(elm, attrs[key] as IStyle);
+		}
+
+		return attr(elm, key) === attrs[key];
+	});
+}
+
+export function elementsEqualAttributes(
+	elm1: HTMLElement,
+	elm2: HTMLElement
+): boolean {
+	return (
+		elm1.attributes.length === elm2.attributes.length &&
+		Array.from(elm1.attributes).every(
+			attr =>
+				elm2.hasAttribute(attr.name) &&
+				elm2.getAttribute(attr.name) === attr.value
+		)
+	);
+}

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

@@ -3,14 +3,10 @@
  * Released under MIT see LICENSE.txt in the project root for license information.
  * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
-import type { Nullable } from 'jodit/types';
-import type { CommitStyle } from '../commit-style';
+import type { IStyle, Nullable, ICommitStyle } from 'jodit/types';
+import { Dom } from 'jodit/core/dom/dom';
 import { isNormalNode } from './is-normal-node';
-import {
-	elementHasSameStyle,
-	elementHasSameStyleKeys
-} from './element-has-same-style';
-import { Dom } from 'jodit/core/dom';
+import { hasSameStyle, hasSameStyleKeys } from './has-same-style';
 
 /**
  * Checks if an item is suitable for applying a commit. The element suits us if it
@@ -23,7 +19,7 @@ import { Dom } from 'jodit/core/dom';
  * @private
  */
 export function isSuitElement(
-	commitStyle: CommitStyle,
+	commitStyle: ICommitStyle,
 	elm: Nullable<Node>,
 	strict: boolean
 ): elm is HTMLElement {
@@ -34,7 +30,8 @@ export function isSuitElement(
 	const { element, elementIsDefault, options } = commitStyle;
 
 	const elmHasSameStyle = Boolean(
-		options.style && elementHasSameStyle(elm, options.style)
+		options.attributes?.style &&
+			hasSameStyle(elm, options.attributes.style as IStyle)
 	);
 
 	const elmIsSame =
@@ -43,7 +40,7 @@ export function isSuitElement(
 
 	if (
 		((!elementIsDefault || !strict) && elmIsSame) ||
-		(elmHasSameStyle && isNormalNode(elm))
+		(elmHasSameStyle && isNormalNode(elm) && !commitStyle.elementIsList)
 	) {
 		return true;
 	}
@@ -53,6 +50,18 @@ export function isSuitElement(
 	);
 }
 
+export function findSuitClosest(
+	commitStyle: ICommitStyle,
+	element: HTMLElement,
+	root: HTMLElement
+): Nullable<HTMLElement> {
+	return Dom.closest(
+		element,
+		node => isSuitElement(commitStyle, node, true),
+		root
+	);
+}
+
 /**
  * Inside the parent element there is a block with the same styles
  * @example
@@ -63,7 +72,7 @@ export function isSuitElement(
  * Apply `{element:'strong'}`
  */
 export function isSameStyleChild(
-	commitStyle: CommitStyle,
+	commitStyle: ICommitStyle,
 	elm: Nullable<Node>
 ): elm is HTMLElement {
 	const { element, options } = commitStyle;
@@ -75,7 +84,8 @@ export function isSameStyleChild(
 	const elmIsSame = elm.nodeName.toLowerCase() === element;
 
 	const elmHasSameStyle = Boolean(
-		options.style && elementHasSameStyleKeys(elm, options.style)
+		options.attributes?.style &&
+			hasSameStyleKeys(elm, options.attributes?.style as IStyle)
 	);
 
 	return elmIsSame && elmHasSameStyle;