jodit 3.8.7 → 3.9.4

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

@@ -4,126 +4,196 @@
  * Copyright (c) 2013-2021 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
 
-import type { ICreate, 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, editor: root, createInside: ci } = 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, root, rng, ci, 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,
-	root: HTMLElement,
-	range: () => Range,
-	ci: ICreate,
-	wrap: Nullable<boolean>
-): Nullable<boolean> {
-	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, root, ci, 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, ci, 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, ci);
-	}
+				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/traits/elms.ts

@@ -9,6 +9,7 @@ import { toArray } from '../helpers/array/to-array';
 
 export abstract class Elms implements IElms {
 	abstract getElm(elementName: string): HTMLElement;
+
 	abstract getElms(elementName: string): HTMLElement[];
 
 	/**

package/src/core/ui/button/button/button.less

@@ -31,6 +31,8 @@
 }
 
 .jodit-ui-button-interaction() {
+	cursor: pointer;
+
 	&:hover:not([disabled]) {
 		background-color: var(--color-button-background-hover);
 		opacity: 1;

package/src/core/ui/helpers/buttons.ts

@@ -8,7 +8,8 @@ import type {
 	Buttons,
 	ButtonsGroup,
 	ButtonsGroups,
-	IControlType
+	IControlType,
+	IJodit
 } from '../../../types';
 import { isArray } from '../../helpers/checker';
 
@@ -18,14 +19,20 @@ export const isButtonGroup = (
 	return isArray((<ButtonsGroup>item).buttons);
 };
 
-export const flatButtonsSet = (
-	buttons: ButtonsGroups
-): Set<string | IControlType> =>
-	new Set(
+export function flatButtonsSet(
+	buttons: ButtonsGroups,
+	jodit: IJodit
+): Set<string | IControlType> {
+	const groups = jodit.getRegisteredButtonGroups();
+
+	return new Set(
 		buttons.reduce(
 			(acc: Buttons, item: ButtonsGroup | string | IControlType) => {
 				if (isButtonGroup(item)) {
-					acc.push(...(<ButtonsGroup>item).buttons);
+					acc = acc.concat([
+						...(<ButtonsGroup>item).buttons,
+						...(groups[item.group] ?? [])
+					]);
 				} else {
 					acc.push(item);
 				}
@@ -35,3 +42,4 @@ export const flatButtonsSet = (
 			[] as Buttons
 		)
 	);
+}

package/src/core/ui/helpers/get-control-type.ts

@@ -23,7 +23,9 @@ export function getControlType(
 ): IControlTypeStrong {
 	let buttonControl: IControlTypeStrong;
 
-	if (!controls) controls = Config.defaultOptions.controls;
+	if (!controls) {
+		controls = Config.defaultOptions.controls;
+	}
 
 	if (!isString(button)) {
 		buttonControl = { name: 'empty', ...ConfigFlatten(button) };

package/src/core/ui/list/list.less

@@ -25,6 +25,7 @@
 				width: 100%;
 				height: auto;
 				min-height: var(--button-size);
+				cursor: pointer;
 			}
 
 			&__text:not(:empty) {

package/src/core/ui/popup/popup.less

@@ -7,16 +7,18 @@
 @import (reference) '../../../styles/variables';
 @import (reference) '../../../styles/mixins';
 
-.jodit-popup {
-	--box-shadow: 0 4px 1px -2px rgba(76, 76, 76, 0.2),
+:root {
+	--popup-box-shadow: 0 4px 1px -2px rgba(76, 76, 76, 0.2),
 		0 3px 3px 0 rgba(76, 76, 76, 0.15), 0 1px 4px 0 rgba(76, 76, 76, 0.13);
+}
 
+.jodit-popup {
 	.jodit-box();
 
 	position: fixed;
 	z-index: var(--z-index-popup);
 	display: inline-block;
-	box-shadow: var(--box-shadow);
+	box-shadow: var(--popup-box-shadow);
 	transform: translate3d(0, 0, 0);
 
 	&__content {

package/src/core/view/view-with-toolbar.ts

@@ -75,6 +75,10 @@ export abstract class ViewWithToolbar extends View implements IViewWithToolbar {
 	registeredButtons: Set<IPluginButton> = new Set();
 	private groupToButtons: IDictionary<string[]> = {};
 
+	getRegisteredButtonGroups(): IDictionary<string[]> {
+		return this.groupToButtons;
+	}
+
 	/**
 	 * Register button for group
 	 */

package/src/core/view/view.ts

@@ -29,7 +29,7 @@ import { BASE_PATH } from '../constants';
 import {
 	Component,
 	STATUSES,
-	EventsNative,
+	EventEmitter,
 	ProgressBar,
 	Create,
 	Dom,
@@ -124,7 +124,7 @@ export abstract class View extends Component implements IViewBased, Mods, Elms {
 		this.__container = container;
 	}
 
-	events!: EventsNative;
+	events!: EventEmitter;
 	get e(): this['events'] {
 		return this.events;
 	}
@@ -269,7 +269,7 @@ export abstract class View extends Component implements IViewBased, Mods, Elms {
 		this.initOptions(options);
 		this.initOwners();
 
-		this.events = new EventsNative(this.od);
+		this.events = new EventEmitter(this.od);
 		this.create = new Create(this.od);
 
 		this.container = this.c.div();

package/src/modules/context-menu/context-menu.ts

@@ -37,7 +37,7 @@ export class ContextMenu extends Popup implements IContextMenu {
 		actions: Array<false | IContextMenuAction>
 	): void {
 		const self = this,
-			content = this.j.c.div('jodit-context-menu__actions');
+			content = this.j.c.div(this.getFullElName('actions'));
 
 		if (!isArray(actions)) {
 			return;

package/src/modules/file-browser/README.MD

@@ -97,7 +97,7 @@ Jodit.make('#editor', {
 -   filebrowser.ajax.headers={} An object of additional header key/value pairs toWYSIWYG
     send along with requests using the `XMLHttpRequest` transport. The header `X-Requested-With: XMLHttpRequest`
     is always added, but its default `XMLHttpRequest` value can be changed here.
-    @property {object} filebrowser.resize Settings for AJAX connections toWYSIWYG the server toWYSIWYG resize
+    @property {object} `filebrowser.resize` Settings for AJAX connections toWYSIWYG the server toWYSIWYG resize
     image. By default, the uses {@link Jodit.defaultOptions.filebrowser.ajax|filebrowser.ajax} with argument
     action=create
 -   filebrowser.crop Settings for AJAX connections toWYSIWYG the server toWYSIWYG crop image.

package/src/modules/file-browser/data-provider.ts

@@ -29,7 +29,7 @@ import {
 	normalizeRelativePath,
 	set
 } from '../../core/helpers';
-import { Ajax } from '../../core/ajax';
+import { Ajax } from '../../core/request';
 import { autobind } from '../../core/decorators';
 import { FileBrowserItem } from './builders/item';
 
@@ -66,12 +66,10 @@ export default class DataProvider implements IFileBrowserDataProvider {
 		return this.options;
 	}
 
-	private ajaxInstances: Map<string, IAjax> = new Map();
+	private ajaxInstances: Map<string, IAjax<IFileBrowserAnswer>> = new Map();
 
-	protected get<T = IFileBrowserAnswer>(
-		name: keyof IFileBrowserOptions,
-		success?: (resp: IFileBrowserAnswer) => void,
-		error?: (error: Error) => void
+	protected get<T extends IFileBrowserAnswer = IFileBrowserAnswer>(
+		name: keyof IFileBrowserOptions
 	): Promise<T> {
 		const ai = this.ajaxInstances;
 
@@ -98,33 +96,27 @@ export default class DataProvider implements IFileBrowserDataProvider {
 			opts.data = opts.prepareData.call(this, opts.data as IDictionary);
 		}
 
-		const ajax = new Ajax(this.parent, opts);
-
-		let promise = ajax.send();
-
+		const ajax = new Ajax<T>(this.parent, opts);
 		ai.set(name, ajax);
 
-		promise = promise.then(resp => {
-			if (!this.isSuccess(resp)) {
-				throw new Error(this.getMessage(resp));
-			}
-
-			return resp;
-		});
-
-		if (success) {
-			promise = promise.then(success);
-		}
-
-		if (error) {
-			promise = promise.catch(error);
-		}
+		const promise = ajax.send();
 
-		return promise.finally(() => {
+		promise.finally(() => {
 			ajax.destruct();
 			ai.delete(name);
+
 			this.progressHandler(100);
 		});
+
+		return promise
+			.then(resp => resp.json())
+			.then(resp => {
+				if (resp && !this.isSuccess(resp)) {
+					throw new Error(this.getMessage(resp));
+				}
+
+				return resp;
+			});
 	}
 
 	private progressHandler = (ignore: number): void => {};
@@ -297,7 +289,7 @@ export default class DataProvider implements IFileBrowserDataProvider {
 	getPathByUrl(url: string): Promise<any> {
 		set('options.getLocalFileByUrl.data.url', url, this);
 
-		return this.get('getLocalFileByUrl', resp => {
+		return this.get('getLocalFileByUrl').then(resp => {
 			if (this.isSuccess(resp)) {
 				return resp.data;
 			}
@@ -396,10 +388,6 @@ export default class DataProvider implements IFileBrowserDataProvider {
 				resp = fr.process.call(this, resp);
 			}
 
-			if (!this.isSuccess(resp)) {
-				throw error(this.getMessage(resp));
-			}
-
 			return this.getMessage(resp);
 		});
 	}
@@ -457,10 +445,6 @@ export default class DataProvider implements IFileBrowserDataProvider {
 				resp = fr.process.call(self, resp);
 			}
 
-			if (!this.isSuccess(resp)) {
-				throw error(this.getMessage(resp));
-			}
-
 			return this.getMessage(resp);
 		});
 	}
@@ -496,7 +480,7 @@ export default class DataProvider implements IFileBrowserDataProvider {
 		name: string,
 		newname: string | void,
 		box: ImageBox | void
-	): Promise<boolean> {
+	): Promise<true> {
 		if (!this.o[type]) {
 			this.o[type] = {
 				data: {}
@@ -522,12 +506,8 @@ export default class DataProvider implements IFileBrowserDataProvider {
 		query.data.name = name;
 		query.data.source = source;
 
-		return this.get(type).then(resp => {
-			if (this.isSuccess(resp)) {
-				return true;
-			}
-
-			throw error(this.getMessage(resp));
+		return this.get(type).then(() => {
+			return true;
 		});
 	}
 

package/src/modules/file-browser/file-browser.ts

@@ -102,8 +102,11 @@ export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 		}
 
 		this.tree.classList.add('jodit-filebrowser_active');
+
 		Dom.detach(this.tree);
+
 		this.tree.appendChild(this.loader.cloneNode(true));
+
 		const items = this.loadItems();
 
 		if (this.o.showFoldersPanel) {

package/src/modules/index.ts

@@ -6,7 +6,7 @@
 
 export * from '../core/events';
 export { Async } from '../core/async';
-export { Ajax } from '../core/ajax';
+export * from '../core/request';
 export { Component, ViewComponent, STATUSES } from '../core/component';
 export { ContextMenu } from './context-menu/context-menu';
 export { Alert, Confirm, Prompt, Dialog } from './dialog/';

package/src/modules/status-bar/status-bar.less

@@ -10,12 +10,24 @@
 .jodit-status-bar {
 	display: flex;
 	overflow: hidden;
+	height: 20px;
+
 	align-items: center;
 	justify-content: flex-start;
+
 	padding: 0 calc(var(--padding-default) / 2);
+
+	&_resize-handle_true {
+		padding-right: 14px;
+	}
+
 	background-color: var(--color-panel);
 	border-radius: 0 0 var(--border-radius-default) var(--border-radius-default);
+
+	color: var(--color-text-icons);
+
 	font-size: var(--font-size-small);
+	text-transform: uppercase;
 
 	&::before {
 		flex: auto;
@@ -48,11 +60,25 @@
 
 			&:hover {
 				background-color: var(--color-background-gray);
-				color: var(--color-text);
 				text-decoration: none;
 			}
 		}
 	}
+
+	a.jodit-status-bar-link {
+		cursor: pointer;
+
+		&,
+		&:hover,
+		&:visited {
+			background-color: transparent;
+			color: var(--color-text-icons);
+		}
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
 }
 
 .jodit-workplace + .jodit-status-bar:not(:empty) {