jodit 3.8.7 → 3.9.4

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/unwrap-children.ts

@@ -6,39 +6,68 @@
 
 import type { CommitStyle } from '../commit-style';
 import { Dom } from '../../../dom';
-import { isSuitElement } from './is-suit-element';
+import { isSameStyleChild, isSuitElement } from './is-suit-element';
+import { attr, css } from '../../../helpers';
+import type { IDictionary } from '../../../../types';
 
 /**
  * Unwrap all suit elements inside
  */
 export function unwrapChildren(style: CommitStyle, font: HTMLElement): boolean {
 	const needUnwrap: Node[] = [];
+	const needChangeStyle: any[] = [];
 
 	let firstElementSuit: boolean | undefined;
 
+	const cssStyle = style.options.style;
+
 	if (font.firstChild) {
-		Dom.find(
-			font.firstChild,
-			(elm: Node | null) => {
-				if (elm && isSuitElement(style, elm as HTMLElement, true)) {
-					if (firstElementSuit === undefined) {
-						firstElementSuit = true;
+		const gen = Dom.eachGen(font);
+
+		let item = gen.next();
+
+		while (!item.done) {
+			const elm = item.value;
+
+			if (isSuitElement(style, elm as HTMLElement, true)) {
+				if (firstElementSuit === undefined) {
+					firstElementSuit = true;
+				}
+
+				needUnwrap.push(elm);
+			} else if (cssStyle && isSameStyleChild(style, elm)) {
+				if (firstElementSuit === undefined) {
+					firstElementSuit = false;
+				}
+
+				needChangeStyle.push(() => {
+					css(
+						elm,
+						Object.keys(cssStyle).reduce((acc, key) => {
+							acc[key] = null;
+							return acc;
+						}, <IDictionary>{})
+					);
+
+					if (!attr(elm, 'style')) {
+						attr(elm, 'style', null);
 					}
 
-					needUnwrap.push(elm);
-				} else {
-					if (firstElementSuit === undefined) {
-						firstElementSuit = false;
+					if (elm.nodeName.toLowerCase() === style.element) {
+						needUnwrap.push(elm);
 					}
+				});
+			} else if (!Dom.isEmptyTextNode(elm)) {
+				if (firstElementSuit === undefined) {
+					firstElementSuit = false;
 				}
+			}
 
-				return false;
-			},
-			font,
-			true
-		);
+			item = gen.next();
+		}
 	}
 
+	needChangeStyle.forEach(clb => clb());
 	needUnwrap.forEach(Dom.unwrap);
 
 	return Boolean(firstElementSuit);

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

@@ -4,10 +4,9 @@
  * Copyright (c) 2013-2021 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
 
-import type { ICreate, Nullable } from '../../../../types';
+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
@@ -15,35 +14,40 @@ import { postProcessListElement } from './post-process-list-element';
 export function wrapUnwrappedText(
 	style: CommitStyle,
 	elm: Node,
-	root: HTMLElement,
-	ci: ICreate,
+	jodit: IJodit,
 	getRange: () => Range
 ): HTMLElement {
-	const edge = (n: Node, key: keyof Node = 'previousSibling') => {
-		let edgeNode: Node = n,
-			node: Nullable<Node> = n;
+	const root = jodit.editor,
+		ci = jodit.createInside,
+		edge = (n: Node, key: keyof Node = 'previousSibling') => {
+			let edgeNode: Node = n,
+				node: Nullable<Node> = n;
 
-		while (node) {
-			edgeNode = node;
+			while (node) {
+				if (Dom.isTag(node, jodit.o.enter)) {
+					break;
+				}
 
-			if (node[key]) {
-				node = node[key] as Nullable<Node>;
-			} else {
-				node =
-					node.parentNode &&
-					!Dom.isBlock(node.parentNode) &&
-					node.parentNode !== root
-						? node.parentNode
-						: null;
-			}
+				edgeNode = node;
+
+				if (node[key]) {
+					node = node[key] as Nullable<Node>;
+				} else {
+					node =
+						node.parentNode &&
+						!Dom.isBlock(node.parentNode) &&
+						node.parentNode !== root
+							? node.parentNode
+							: null;
+				}
 
-			if (Dom.isBlock(node)) {
-				break;
+				if (Dom.isBlock(node)) {
+					break;
+				}
 			}
-		}
 
-		return edgeNode;
-	};
+			return edgeNode;
+		};
 
 	const start: Node = edge(elm),
 		end: Node = edge(elm, 'nextSibling');
@@ -53,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')