jodit 3.9.3 → 3.10.2

package/src/core/selection/style/api/toggle/toggle-css.ts

@@ -0,0 +1,134 @@
+/*!
+ * 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 { CommitMode, IJodit } from '../../../../../types';
+import type { CommitStyle } from '../../commit-style';
+import {
+	attr,
+	css,
+	dataBind,
+	kebabCase,
+	normalizeCssValue,
+	size
+} from '../../../../helpers';
+import { Dom } from '../../../../dom';
+import { CHANGE, UNSET, UNWRAP } from '../../commit-style';
+import { getContainer } from '../../../../global';
+
+/**
+ * Toggles css and classname
+ */
+export function toggleCSS(
+	commitStyle: CommitStyle,
+	elm: HTMLElement,
+	jodit: IJodit,
+	mode: CommitMode,
+	dry: boolean = false
+): CommitMode {
+	const { style, className } = commitStyle.options;
+
+	if (style && size(style) > 0) {
+		Object.keys(style).forEach((rule: string) => {
+			const inlineValue = elm.style.getPropertyValue(kebabCase(rule));
+
+			if (inlineValue === '' && style[rule] == null) {
+				return;
+			}
+
+			if (
+				getNativeCSSValue(jodit, elm, rule) ===
+				normalizeCssValue(rule, style[rule] as string)
+			) {
+				!dry && css(elm, rule, null);
+				mode = UNSET;
+				mode = removeExtraCSS(commitStyle, elm, mode);
+				return;
+			}
+
+			mode = CHANGE;
+			!dry && css(elm, rule, style[rule]);
+		});
+	}
+
+	if (className) {
+		if (elm.classList.contains(className)) {
+			elm.classList.remove(className);
+			mode = UNSET;
+		} else {
+			elm.classList.add(className);
+			mode = CHANGE;
+		}
+	}
+
+	return mode;
+}
+
+/**
+ * If the element has an empty style attribute, it removes the attribute,
+ * and if it is default, it removes the element itself
+ */
+function removeExtraCSS(
+	commitStyle: CommitStyle,
+	elm: HTMLElement,
+	mode: CommitMode
+): CommitMode {
+	if (!attr(elm, 'style')) {
+		attr(elm, 'style', null);
+
+		if (elm.tagName.toLowerCase() === commitStyle.defaultTag) {
+			Dom.unwrap(elm);
+			mode = UNWRAP;
+		}
+	}
+
+	return mode;
+}
+
+/**
+ * Creates an iframe into which elements will be inserted to test their default styles in the browser
+ */
+function getShadowRoot(jodit: IJodit): HTMLElement {
+	if (dataBind(jodit, 'shadowRoot') !== undefined) {
+		return dataBind(jodit, 'shadowRoot');
+	}
+
+	const container = getContainer(jodit, function Utils() {});
+
+	const iframe = document.createElement('iframe');
+	css(iframe, {
+		width: 0,
+		height: 0,
+		position: 'absolute',
+		border: 0
+	});
+
+	iframe.src = 'about:blank';
+	container.appendChild(iframe);
+
+	const doc = iframe.contentWindow?.document;
+
+	const shadowRoot = !doc ? jodit.od.body : doc.body;
+	dataBind(jodit, 'shadowRoot', shadowRoot);
+
+	return shadowRoot;
+}
+
+/**
+ * `strong -> fontWeight 700`
+ */
+function getNativeCSSValue(
+	jodit: IJodit,
+	elm: HTMLElement,
+	key: string
+): ReturnType<typeof css> {
+	const newElm = jodit.create.element(elm.tagName.toLowerCase());
+	newElm.style.cssText = elm.style.cssText;
+	const root = getShadowRoot(jodit);
+	root.appendChild(newElm);
+	const result = css(newElm, key);
+	Dom.safeRemove(newElm);
+	return result;
+}

package/src/core/selection/style/api/toggle/toggle-ordered-list.ts

@@ -0,0 +1,49 @@
+/*!
+ * 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 { IJodit, CommitMode } from '../../../../../types';
+import type { CommitStyle } from '../../commit-style';
+import { Dom } from '../../../../dom';
+import { extractSelectedPart } from '../extract';
+import { CHANGE, INITIAL, REPLACE } from '../../commit-style';
+import { toggleCSS } from './toggle-css';
+
+/**
+ * Replaces `ul->ol` or `ol->ul`, apply styles to the list, or remove a list item from it
+ */
+export function toggleOrderedList(
+	style: CommitStyle,
+	li: HTMLElement,
+	jodit: IJodit,
+	mode: CommitMode
+): CommitMode {
+	if (!li) {
+		return mode;
+	}
+
+	const list = li.parentElement;
+
+	if (!list) {
+		return mode;
+	}
+
+	// ul => ol, ol => ul
+	if (list.tagName.toLowerCase() !== style.element) {
+		const newList = Dom.replace(list, style.element, jodit.createInside);
+		toggleCSS(style, newList, jodit, mode);
+		return REPLACE;
+	}
+
+	if (toggleCSS(style, li.parentElement, jodit, INITIAL, true) === CHANGE) {
+		return toggleCSS(style, li.parentElement, jodit, mode);
+	}
+
+	extractSelectedPart(list, li, jodit);
+	Dom.unwrap(li.parentElement);
+	Dom.replace(li, jodit.o.enter, jodit.createInside);
+
+	return mode;
+}

package/src/core/selection/style/api/toggle-commit-styles.ts

@@ -0,0 +1,27 @@
+/*!
+ * 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 { CommitStyle } from '../commit-style';
+import { Dom } from '../../../dom';
+
+/**
+ * Add or remove styles to element
+ * @param elm - The element to switch styles
+ */
+export function toggleCommitStyles(
+	commitStyle: CommitStyle,
+	elm: HTMLElement
+): boolean {
+	if (
+		commitStyle.elementIsBlock ||
+		(Dom.isTag(elm, commitStyle.element) && !commitStyle.elementIsDefault)
+	) {
+		Dom.unwrap(elm);
+		return true;
+	}
+
+	return false;
+}

package/src/core/selection/style/api/wrap-and-commit-style.ts

@@ -0,0 +1,68 @@
+/*!
+ * 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 { IJodit } from '../../../../types';
+import type { CommitStyle } from '../commit-style';
+import { Dom } from '../../../dom';
+import { wrapUnwrappedText } from './wrap-unwrapped-text';
+import { attr } from '../../../helpers';
+import { wrapOrderedList } from './wrap-ordered-list';
+
+/**
+ * Replaces the parent tag with the applicable one, or wraps the text and also replaces the tag
+ */
+export function wrapAndCommitStyle(
+	commitStyle: CommitStyle,
+	font: HTMLElement,
+	jodit: IJodit
+): HTMLElement {
+	const wrapper = findOrCreateWrapper(commitStyle, font, jodit);
+
+	return commitStyle.elementIsList
+		? wrapOrderedList(commitStyle, wrapper, jodit)
+		: Dom.replace(wrapper, commitStyle.element, jodit.createInside, true);
+}
+
+/**
+ * If we apply a block element, then it finds the closest block parent (exclude table cell etc.),
+ * otherwise it wraps free text in an element.
+ */
+function findOrCreateWrapper(
+	commitStyle: CommitStyle,
+	font: HTMLElement,
+	jodit: IJodit
+): HTMLElement {
+	if (commitStyle.elementIsBlock) {
+		const box = Dom.up(
+			font,
+			node =>
+				Dom.isBlock(node) &&
+				!Dom.isTag(node, [
+					'td',
+					'th',
+					'tr',
+					'tbody',
+					'table',
+					'li',
+					'ul',
+					'ol'
+				]),
+			jodit.editor
+		);
+
+		if (box) {
+			return box;
+		}
+	}
+
+	if (commitStyle.elementIsBlock) {
+		return wrapUnwrappedText(commitStyle, font, jodit, jodit.s.createRange);
+	}
+
+	attr(font, 'size', null);
+
+	return font;
+}

package/src/core/selection/style/api/wrap-ordered-list.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 { IJodit } from '../../../../types';
+import { Dom } from '../../../dom';
+import type { CommitStyle } from '../commit-style';
+
+/**
+ * Replaces non-leaf items with leaf items and either creates a new list or
+ * adds a new item to the nearest old list
+ */
+export function wrapOrderedList(
+	commitStyle: CommitStyle,
+	wrapper: HTMLElement,
+	jodit: IJodit
+): HTMLElement {
+	const newWrapper = Dom.replace(wrapper, 'li', jodit.createInside);
+
+	let list =
+		newWrapper.previousElementSibling || newWrapper.nextElementSibling;
+
+	if (!Dom.isTag(list, ['ul', 'ol'])) {
+		list = jodit.createInside.element(commitStyle.element);
+		Dom.before(newWrapper, list);
+	}
+
+	if (newWrapper.previousElementSibling === list) {
+		Dom.append(list, newWrapper);
+	} else {
+		Dom.prepend(list, newWrapper);
+	}
+
+	return <HTMLElement>list;
+}

package/src/core/selection/style/api/wrap-unwrapped-text.ts

@@ -7,7 +7,6 @@
 import type { IJodit, Nullable } from '../../../../types';
 import type { CommitStyle } from '../commit-style';
 import { Dom } from '../../../dom';
-import { postProcessListElement } from './post-process-list-element';
 
 /**
  * Wrap text or inline elements inside Block element
@@ -58,13 +57,11 @@ export function wrapUnwrappedText(
 	range.setEndAfter(end);
 	const fragment = range.extractContents();
 
-	let wrapper = ci.element(style.element);
+	const wrapper = ci.element(style.element);
 	wrapper.appendChild(fragment);
 	range.insertNode(wrapper);
 
 	if (style.elementIsBlock) {
-		wrapper = postProcessListElement(style, wrapper, ci);
-
 		if (
 			Dom.isEmpty(wrapper) &&
 			!Dom.isTag(wrapper.firstElementChild, 'br')

package/src/core/selection/style/apply-style.ts

@@ -4,132 +4,196 @@
  * Copyright (c) 2013-2021 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
 
-import type { IJodit, Nullable } from '../../../types';
+import type { IJodit, Nullable, CanUndef, CommitMode } from '../../../types';
 import type { CommitStyle } from './commit-style';
-import { Dom } from '../../dom';
-import { attr, css, normalizeNode } from '../../helpers';
+import { normalizeNode } from '../../helpers';
 import {
 	getSuitParent,
 	getSuitChild,
-	checkSpecialElements,
-	getClosestWrapper,
-	unwrapChildren,
-	wrapUnwrappedText,
-	postProcessListElement,
-	toggleStyles
+	isInsideInvisibleElement,
+	toggleCommitStyles,
+	unwrapChildren
+} from './api';
+import { CHANGE, INITIAL, REPLACE, UNWRAP, WRAP } from './commit-style';
+import { Dom } from '../../dom';
+import {
+	toggleOrderedList,
+	wrapAndCommitStyle,
+	isSuitElement,
+	extractSelectedPart,
+	toggleCSS,
+	FiniteStateMachine
 } from './api';
 
-/**
- * Apply options to selection
- */
-export function ApplyStyle(jodit: IJodit, style: CommitStyle): void {
-	const { s: sel } = jodit,
-		rng = () => sel.createRange();
+export function ApplyStyle(jodit: IJodit, cs: CommitStyle): void {
+	const { s: sel, editor } = jodit;
+
+	const fsm = new FiniteStateMachine('start', {
+		start: {
+			start() {
+				sel.save();
+				normalizeNode(editor.firstChild); // FF fix for test "commandsTest - Exec command "bold"
+				this.setState('generator');
+			}
+		},
+
+		generator: {
+			initGenerator() {
+				return jodit.s.wrapInTagGen();
+			},
 
-	let wrap: Nullable<boolean> = null;
+			nextFont(gen: Generator<HTMLElement>): CanUndef<HTMLElement> {
+				const font = gen.next();
 
-	sel.save();
+				if (font.done) {
+					this.setState('end');
+					return;
+				}
 
-	normalizeNode(sel.area.firstChild); // FF fix for test "commandsTest - Exec command "bold"
+				if (
+					isInsideInvisibleElement(font.value, editor) ||
+					Dom.isEmptyContent(font.value)
+				) {
+					return;
+				}
 
-	const gen = jodit.s.wrapInTagGen();
-	let font = gen.next();
+				this.setState('check');
 
-	while (!font.done) {
-		wrap = applyToElement(style, font.value, rng, jodit, wrap);
-		font = gen.next();
-	}
+				return font.value;
+			}
+		},
 
-	sel.restore();
-}
+		check: {
+			work(font: HTMLElement): Nullable<HTMLElement> {
+				let elm =
+					getSuitParent(cs, font, jodit.editor) ||
+					getSuitChild(cs, font);
 
-/**
- * Apply options to all selected fragment
- * @param font - a fake element that wraps all parts of the selection
- */
-function applyToElement(
-	style: CommitStyle,
-	font: HTMLElement,
-	range: () => Range,
-	jodit: IJodit,
-	wrap: Nullable<boolean>
-): Nullable<boolean> {
-	const root = jodit.editor;
-
-	if (checkSpecialElements(font, root)) {
-		return wrap;
-	}
+				if (elm) {
+					this.setState('wholeElement');
+					return elm;
+				}
 
-	const toggleNode =
-		getSuitParent(style, font, root) ||
-		getSuitChild(style, font) ||
-		getClosestWrapper(style, font, root, range);
+				elm = Dom.closest(
+					font,
+					node => isSuitElement(cs, node, true),
+					jodit.editor
+				);
 
-	if (toggleNode) {
-		return toggleStyles(style, toggleNode, wrap);
-	}
+				if (elm) {
+					if (!cs.elementIsBlock) {
+						extractSelectedPart(elm, font, jodit);
+					}
+				}
 
-	if (unwrapChildren(style, font)) {
-		return wrap;
-	}
+				if (cs.elementIsList && Dom.isTag(elm, ['ul', 'ol'])) {
+					this.setState('orderList');
+					return font;
+				}
 
-	if (wrap == null) {
-		wrap = true;
-	}
+				if (elm) {
+					this.setState('wholeElement');
+					return elm;
+				}
 
-	if (!wrap) {
-		return wrap;
-	}
+				if (unwrapChildren(cs, font)) {
+					this.setState('endProcess');
+					return null;
+				}
 
-	let wrapper = font;
+				this.setState('wrap');
+				return font;
+			}
+		},
 
-	if (style.elementIsBlock) {
-		const ulReg = /^(ul|ol|li|td|th|tr|tbody|table)$/i;
+		wholeElement: {
+			toggleStyles(toggleElm: HTMLElement): void {
+				let mode: CommitMode = INITIAL;
 
-		const box = Dom.up(
-			font,
-			node => {
-				if (Dom.isBlock(node)) {
-					if (
-						ulReg.test(style.element) ||
-						!ulReg.test(node.nodeName)
-					) {
-						return true;
-					}
+				if (toggleCommitStyles(cs, toggleElm)) {
+					mode = UNWRAP;
+				} else {
+					mode = toggleCSS(cs, toggleElm, jodit, mode);
 				}
 
-				return false;
-			},
-			root
-		);
+				this.setState('generator', mode);
+			}
+		},
 
-		if (box) {
-			wrapper = box;
-		} else {
-			wrapper = wrapUnwrappedText(style, font, jodit, range);
-		}
-	}
+		orderList: {
+			toggleStyles(font: HTMLElement): void {
+				let mode: CommitMode = INITIAL;
+				const li = Dom.closest(font, 'li', jodit.editor);
 
-	const newWrapper = Dom.replace(
-		wrapper,
-		style.element,
-		jodit.createInside,
-		true
-	);
+				if (!li) {
+					this.setState('generator');
+					return;
+				}
 
-	attr(newWrapper, 'size', null);
+				const ul = Dom.closest(font, ['ul', 'ol'], jodit.editor);
 
-	if (style.elementIsBlock) {
-		postProcessListElement(style, newWrapper, jodit.createInside);
-	}
+				if (!ul) {
+					this.setState('generator');
+					return;
+				}
 
-	if (style.options.style && style.elementIsDefault) {
-		css(newWrapper, style.options.style);
-	}
+				mode = toggleOrderedList(cs, li, jodit, mode);
+
+				if (mode === REPLACE || mode === UNWRAP || mode === CHANGE) {
+					this.setState('endWhile');
+					return;
+				}
+
+				this.setState('generator');
+			}
+		},
 
-	if (style.options.className) {
-		newWrapper.classList.toggle(style.options.className);
+		wrap: {
+			toggleStyles(font: HTMLElement): void {
+				if (this.getSubState() !== 'unwrap') {
+					const toggleElm = wrapAndCommitStyle(cs, font, jodit);
+					toggleCSS(cs, toggleElm, jodit, WRAP);
+				}
+
+				this.setState('generator');
+			}
+		},
+
+		endWhile: {
+			nextFont(gen: Generator<HTMLElement>): void {
+				const font = gen.next();
+
+				if (font.done) {
+					this.setState('end');
+				}
+			}
+		},
+
+		endProcess: {
+			toggleStyles() {
+				this.setState('generator');
+			}
+		},
+
+		end: {
+			finalize() {
+				sel.restore();
+			}
+		}
+	});
+
+	fsm.dispatch('start');
+
+	const gen = fsm.dispatch('initGenerator');
+
+	while (fsm.getState() !== 'end') {
+		const font = fsm.dispatch<HTMLElement>('nextFont', gen);
+
+		if (font) {
+			const wrapper = fsm.dispatch<HTMLElement>('work', font);
+			fsm.dispatch('toggleStyles', wrapper);
+		}
 	}
 
-	return wrap;
+	fsm.dispatch('finalize', gen);
 }

package/src/core/selection/style/commit-style.ts

@@ -8,7 +8,20 @@ import type { HTMLTagNames, IJodit, IStyleOptions } from '../../../types';
 import { IS_BLOCK } from '../../constants';
 import { ApplyStyle } from './apply-style';
 
+export const WRAP = 'wrap';
+export const UNWRAP = 'unwrap';
+export const CHANGE = 'change';
+export const UNSET = 'unset';
+export const INITIAL = 'initial';
+export const REPLACE = 'replace';
+
 export class CommitStyle {
+	get elementIsList(): boolean {
+		return Boolean(
+			this.options.element && ['ul', 'ol'].includes(this.options.element)
+		);
+	}
+
 	get element(): HTMLTagNames {
 		return this.options.element || this.defaultTag;
 	}

package/src/core/storage/engines/local-storage-provider.ts

@@ -43,7 +43,7 @@ export const canUsePersistentStorage: BooleanFunction = (() => {
  * Persistent storage in localStorage
  */
 export class LocalStorageProvider<T = StorageValueType> implements IStorage<T> {
-	set(key: string, value: T): void {
+	set(key: string, value: T): IStorage<T> {
 		try {
 			const buffer = localStorage.getItem(this.rootKey);
 
@@ -53,12 +53,16 @@ export class LocalStorageProvider<T = StorageValueType> implements IStorage<T> {
 
 			localStorage.setItem(this.rootKey, JSON.stringify(json));
 		} catch {}
+
+		return this;
 	}
 
-	delete(key: string): void {
+	delete(key: string): IStorage<T> {
 		try {
 			localStorage.removeItem(this.rootKey);
 		} catch {}
+
+		return this;
 	}
 
 	get<R = T>(key: string): R | void {
@@ -77,9 +81,11 @@ export class LocalStorageProvider<T = StorageValueType> implements IStorage<T> {
 
 	constructor(readonly rootKey: string) {}
 
-	clear(): void {
+	clear(): IStorage<T> {
 		try {
 			localStorage.removeItem(this.rootKey);
 		} catch {}
+
+		return this;
 	}
 }