jodit 3.9.3 → 3.9.4

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/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/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/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) {

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

@@ -6,9 +6,10 @@
 
 import './status-bar.less';
 
-import type { IJodit, IStatusBar } from '../../types';
+import type { IJodit, IStatusBar, IDictionary } from '../../types';
 import { ViewComponent, STATUSES } from '../../core/component';
 import { Dom } from '../../core/dom';
+import { Mods } from '../../core/traits';
 
 export class StatusBar extends ViewComponent<IJodit> implements IStatusBar {
 	className(): string {
@@ -38,6 +39,19 @@ export class StatusBar extends ViewComponent<IJodit> implements IStatusBar {
 		return !this.container.classList.contains('jodit_hidden');
 	}
 
+	readonly mods: IDictionary<string | boolean | null> = {};
+
+	/** @see [[Mods.setMod]] */
+	setMod(name: string, value: string | boolean | null): this {
+		Mods.setMod.call(this, name, value);
+		return this;
+	}
+
+	/** @see [[Mods.getMod]] */
+	getMod(name: string): string | boolean | null {
+		return Mods.getMod.call(this, name);
+	}
+
 	/**
 	 * Height of statusbar
 	 */

package/src/modules/widget/tabs/tabs.less

@@ -19,6 +19,7 @@
 
 		> * {
 			margin-left: calc(var(--padding-default) / 2);
+			cursor: pointer;
 
 			&:only-of-type {
 				width: 100%;

package/src/plugins/bold.ts

@@ -40,7 +40,7 @@ Config.prototype.controls.underline = {
 	tagRegExp: /^(u)$/i,
 	tags: ['u'],
 	css: {
-		'text-decoration': 'underline'
+		'text-decoration-line': 'underline'
 	},
 	tooltip: 'Underline'
 } as IControlType;
@@ -49,7 +49,7 @@ Config.prototype.controls.strikethrough = {
 	tagRegExp: /^(s)$/i,
 	tags: ['s'],
 	css: {
-		'text-decoration': 'line-through'
+		'text-decoration-line': 'line-through'
 	},
 	tooltip: 'Strike through'
 } as IControlType;

package/src/plugins/font.ts

@@ -114,7 +114,17 @@ Config.prototype.controls.font = {
 	},
 
 	childTemplate: (editor, key: string, value: string) => {
-		return `<span style="font-family: ${key}!important;">${value}</span>`;
+		let isAvailable = false;
+
+		try {
+			isAvailable =
+				key.indexOf('dings') === -1 &&
+				document.fonts.check(`16px ${key}`, value);
+		} catch {}
+
+		return `<span style="${
+			isAvailable ? `font-family: ${key}!important;` : ''
+		}">${value}</span>`;
 	},
 
 	data: {

package/src/plugins/index.ts

@@ -34,6 +34,7 @@ export { link } from './link/link';
 export * from './media';
 export { mobile } from './mobile';
 export { orderedList } from './ordered-list';
+export { poweredByJodit } from './powered-by-jodit';
 export { placeholder } from './placeholder/placeholder';
 export { redoUndo } from './redo-undo';
 export { resizer } from './resizer/resizer';

package/src/plugins/mobile.ts

@@ -13,10 +13,10 @@ import type {
 } from '../types/';
 import { Config } from '../config';
 import * as consts from '../core/constants';
-import { splitArray } from '../core/helpers/';
+import { splitArray, toArray } from '../core/helpers/';
 import { makeCollection } from '../modules/toolbar/factory';
 import { UIList } from '../core/ui';
-import { flatButtonsSet, isButtonGroup } from '../core/ui/helpers/buttons';
+import { flatButtonsSet } from '../core/ui/helpers/buttons';
 
 declare module '../config' {
 	interface Config {
@@ -117,18 +117,14 @@ export function mobile(editor: IJodit): void {
 		'getDiffButtons.mobile',
 		(toolbar: IToolbarCollection): void | ButtonsGroups => {
 			if (toolbar === editor.toolbar) {
-				const buttons: ButtonsGroups = splitArray(editor.o.buttons),
-					flatStore = flatButtonsSet(store);
-
-				return buttons.reduce((acc, item) => {
-					if (isButtonGroup(item)) {
-						acc.push({
-							...item,
-							buttons: item.buttons.filter(
-								btn => !flatStore.has(btn)
-							)
-						});
-					} else if (!flatStore.has(item)) {
+				const buttons = flatButtonsSet(
+						splitArray(editor.o.buttons),
+						editor
+					),
+					flatStore = flatButtonsSet(store, editor);
+
+				return toArray(buttons).reduce((acc, item) => {
+					if (!flatStore.has(item)) {
 						acc.push(item);
 					}
 

package/src/plugins/ordered-list.ts

@@ -8,6 +8,8 @@ import type { IControlType, IJodit, Nullable } from '../types';
 import { Config } from '../config';
 import { Dom } from '../core/dom';
 import { dataBind, toArray } from '../core/helpers';
+import { Plugin } from '../core/plugin';
+import { autobind } from '../core/decorators';
 
 const exec: IControlType<IJodit>['exec'] = (jodit, _, { control }): void => {
 	const key = `button${control.command}`;
@@ -52,7 +54,44 @@ Config.prototype.controls.ol = {
 /**
  * Process commands insertOrderedList and insertUnOrderedList
  */
-export function orderedList(editor: IJodit): void {
+export class orderedList extends Plugin {
+	override buttons: Plugin['buttons'] = [
+		{
+			name: 'ul',
+			group: 'list'
+		},
+		{
+			name: 'ol',
+			group: 'list'
+		}
+	];
+
+	protected afterInit(jodit: IJodit): void {
+		jodit
+			.registerCommand('insertUnorderedList', this.onCommand)
+			.registerCommand('insertOrderedList', this.onCommand);
+	}
+
+	@autobind
+	private onCommand(command: string, _: unknown, type: string): false {
+		this.jodit.s.applyStyle(
+			{
+				listStyleType: type ?? null
+			},
+			{
+				element: command === 'insertunorderedlist' ? 'ul' : 'ol'
+			}
+		);
+
+		this.jodit.setEditorValue();
+
+		return false;
+	}
+
+	protected beforeDestruct(jodit: IJodit): void {}
+}
+
+export function orderedList1(editor: IJodit): void {
 	const isOurCommand = (command: string) =>
 			/insert(un)?orderedlist/i.test(command),
 		getListWrapper = () =>

package/src/plugins/powered-by-jodit.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 { IJodit } from '../types';
+
+declare module '../config' {
+	interface Config {
+		hidePoweredByJodit: boolean;
+	}
+}
+
+export function poweredByJodit(jodit: IJodit): void {
+	if (
+		!jodit.o.hidePoweredByJodit &&
+		!jodit.o.inline &&
+		(jodit.o.showCharsCounter ||
+			jodit.o.showWordsCounter ||
+			jodit.o.showXPathInStatusbar)
+	) {
+		jodit.hookStatus('ready', () => {
+			jodit.statusbar.append(
+				jodit.create.fromHTML(
+					`<a
+						tabindex="-1"
+						style="text-transform: uppercase"
+						class="jodit-status-bar-link"
+						target="_blank"
+						href="https://xdsoft.net/jodit/">
+							Powered by Jodit
+						</a>`
+				),
+				true
+			);
+		});
+	}
+}