jodit 3.9.2 → 3.10.1

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

@@ -11,12 +11,14 @@ export class MemoryStorageProvider<T = StorageValueType>
 {
 	private data: Map<string, T> = new Map();
 
-	set(key: string, value: T): void {
+	set(key: string, value: T): IStorage<T> {
 		this.data.set(key, value);
+		return this;
 	}
 
-	delete(key: string): void {
+	delete(key: string): IStorage<T> {
 		this.data.delete(key);
+		return this;
 	}
 
 	get<R = T>(key: string): R | void {
@@ -27,7 +29,8 @@ export class MemoryStorageProvider<T = StorageValueType>
 		return this.data.has(key);
 	}
 
-	clear(): void {
+	clear(): IStorage<T> {
 		this.data.clear();
+		return this;
 	}
 }

package/src/core/storage/storage.ts

@@ -17,12 +17,14 @@ export const StorageKey: string = 'Jodit_';
 export class Storage<T = StorageValueType> implements IStorage<T> {
 	readonly prefix = StorageKey;
 
-	set(key: string, value: T): void {
+	set(key: string, value: T): IStorage<T> {
 		this.provider.set(camelCase(this.prefix + key), value);
+		return this;
 	}
 
-	delete(key: string): void {
+	delete(key: string): IStorage<T> {
 		this.provider.delete(camelCase(this.prefix + key));
+		return this;
 	}
 
 	get<R = T>(key: string): R | void {
@@ -33,8 +35,9 @@ export class Storage<T = StorageValueType> implements IStorage<T> {
 		return this.provider.exists(camelCase(this.prefix + key));
 	}
 
-	clear(): void {
-		return this.provider.clear();
+	clear(): IStorage<T> {
+		this.provider.clear();
+		return this;
 	}
 
 	protected constructor(readonly provider: IStorage<T>, suffix?: string) {

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;
@@ -140,28 +142,28 @@
 	}
 }
 
-.jodit-ui-button-statuses {
-	&_status_initial {
+.jodit-ui-button-variants {
+	&_variant_initial {
 	}
 
-	&_status_default {
+	&_variant_default {
 		.jodit_status(#e3e3e3, #212529, #c9cdd1, #212529, #dae0e5, #212529);
 	}
 
-	&_status_primary {
+	&_variant_primary {
 		.jodit_status(#007bff, #fff, #0069d9, #fff, #0062cc, #fff);
 	}
 
-	&_status_secondary {
+	&_variant_secondary {
 		.jodit_status(#d8d8d8, #212529, #c9cdd1, #212529, #dae0e5, #212529);
 		border-radius: 0;
 	}
 
-	&_status_success {
+	&_variant_success {
 		.jodit_status(#28a745, #fff, #218838, #fff, #1e7e34, #fff);
 	}
 
-	&_status_danger {
+	&_variant_danger {
 		.jodit_status(#dc3545, #fff, #c82333, #fff, #bd2130, #fff);
 	}
 }
@@ -190,5 +192,5 @@
 		outline: 1px dashed var(--color-background-selection);
 	}
 
-	.jodit-ui-button-statuses();
+	.jodit-ui-button-variants();
 }

package/src/core/ui/button/button/button.ts

@@ -11,7 +11,7 @@ import type {
 	IUIButtonState,
 	IUIButtonStatePartial,
 	IViewBased,
-	ButtonStatus
+	ButtonVariant
 } from '../../../../types';
 import { UIElement } from '../../element';
 import { Dom } from '../../../dom';
@@ -27,7 +27,7 @@ export const UIButtonState = (): IUIButtonState => ({
 	name: '',
 	value: '',
 
-	status: 'initial',
+	variant: 'initial',
 	disabled: false,
 	activated: false,
 
@@ -97,9 +97,9 @@ export class UIButton extends UIElement implements IUIButton {
 		}
 	}
 
-	@watch('state.status')
+	@watch('state.variant')
 	protected onChangeStatus(): void {
-		this.setMod('status', this.state.status);
+		this.setMod('variant', this.state.variant);
 	}
 
 	@watch('state.text')
@@ -257,19 +257,19 @@ export function Button(
 	jodit: IViewBased,
 	icon: string,
 	text: string,
-	status?: ButtonStatus
+	variant?: ButtonVariant
 ): IUIButton;
 export function Button(
 	jodit: IViewBased,
 	state: IUIButtonStatePartial,
-	status?: ButtonStatus
+	variant?: ButtonVariant
 ): IUIButton;
 
 export function Button(
 	jodit: IViewBased,
 	stateOrText: string | IUIButtonStatePartial,
 	text?: string,
-	status?: ButtonStatus
+	variant?: ButtonVariant
 ): IUIButton {
 	const button = new UIButton(jodit);
 
@@ -279,8 +279,8 @@ export function Button(
 		button.state.icon.name = stateOrText;
 		button.state.name = stateOrText;
 
-		if (status) {
-			button.state.status = status;
+		if (variant) {
+			button.state.variant = variant;
 		}
 
 		if (text) {

package/src/core/ui/button/group/group.ts

@@ -42,7 +42,7 @@ export class UIButtonGroup extends UIGroup {
 
 	constructor(
 		jodit: IViewBased,
-		readonly options: {
+		override readonly options: {
 			name?: string;
 			value?: string | boolean | number;
 			label?: string;
@@ -59,7 +59,7 @@ export class UIButtonGroup extends UIGroup {
 				const btn = new UIButton(jodit, {
 					text: opt.text,
 					value: opt.value,
-					status: 'primary'
+					variant: 'primary'
 				});
 
 				btn.onAction(() => {

package/src/core/ui/element.ts

@@ -46,6 +46,7 @@ export abstract class UIElement<T extends IViewBased = IViewBased>
 			callback(parent);
 			parent = parent.parentElement;
 		}
+
 		return this;
 	}
 
@@ -93,9 +94,9 @@ export abstract class UIElement<T extends IViewBased = IViewBased>
 	 * Find closest UIElement in DOM
 	 */
 	static closestElement(node: Node, type: Function): Nullable<IUIElement> {
-		const elm = Dom.up(node, node => {
-			if (node) {
-				const { component } = node as any;
+		const elm = Dom.up(node, elm => {
+			if (elm) {
+				const { component } = elm as HTMLElement;
 				return component && component instanceof type;
 			}
 

package/src/core/ui/form/block/block.ts

@@ -21,7 +21,7 @@ export class UIBlock extends UIGroup {
 	constructor(
 		jodit: IViewBased,
 		elements?: Array<IUIElement | void | null | false>,
-		readonly options: {
+		override readonly options: {
 			align?: 'center' | 'left' | 'right' | 'full';
 			width?: 'full';
 			ref?: string;

package/src/core/ui/form/form.ts

@@ -75,4 +75,12 @@ export class UIForm extends UIGroup implements IUIForm {
 		attr(form, 'dir', this.j.o.direction || 'auto');
 		return form;
 	}
+
+	constructor(...args: ConstructorParameters<typeof UIGroup>) {
+		super(...args);
+
+		if (this.options?.className) {
+			this.container.classList.add(this.options?.className);
+		}
+	}
 }

package/src/core/ui/form/inputs/area/area.less

@@ -4,7 +4,12 @@
 	.jodit-ui-input();
 	width: 100%;
 
+	&__wrapper {
+		flex: 1;
+	}
+
 	&__input {
+		height: 100%;
 		min-height: 60px;
 	}
 }

package/src/core/ui/form/inputs/area/area.ts

@@ -6,21 +6,42 @@
 
 import './area.less';
 
+import type { IUITextArea, IViewBased } from '../../../../../types';
 import { UIInput } from '../input/input';
 import { component } from '../../../../decorators';
 
 @component
-export class UITextArea extends UIInput {
+export class UITextArea extends UIInput implements IUITextArea {
 	/** @override */
 	override className(): string {
 		return 'UITextArea';
 	}
 
+	/** @override */
+	static override defaultState: IUITextArea['state'] = {
+		...UIInput.defaultState,
+		size: 5,
+		resizable: true
+	};
+
 	override nativeInput!: HTMLTextAreaElement;
 
+	/** @override */
+	override state: IUITextArea['state'] = { ...UITextArea.defaultState };
+
 	/** @override */
 	protected override createContainer(options: this['state']): HTMLElement {
 		this.nativeInput = this.j.create.element('textarea');
+
 		return super.createContainer(options);
 	}
+
+	constructor(jodit: IViewBased, state: Partial<IUITextArea['state']>) {
+		super(jodit, state);
+		Object.assign(this.state, state);
+
+		if (this.state.resizable === false) {
+			this.nativeInput.style.resize = 'none';
+		}
+	}
 }

package/src/core/ui/form/inputs/checkbox/checkbox.ts

@@ -6,17 +6,26 @@
 
 import './checkbox.less';
 
-import type { IUIInput, IViewBased } from '../../../../../types';
+import type { IViewBased, IUICheckBox } from '../../../../../types';
 import { UIInput } from '../input/input';
-import { component } from '../../../../decorators';
+import { component, watch, hook } from '../../../../decorators';
 
 @component
-export class UICheckbox extends UIInput {
+export class UICheckbox extends UIInput implements IUICheckBox {
 	/** @override */
 	override className(): string {
 		return 'UICheckbox';
 	}
 
+	/** @override */
+	static override defaultState: IUICheckBox['state'] = {
+		...UIInput.defaultState,
+		checked: false
+	};
+
+	/** @override */
+	override state: IUICheckBox['state'] = { ...UICheckbox.defaultState };
+
 	/** @override */
 	protected override render(): HTMLElement {
 		return this.j.c.element('label', {
@@ -25,7 +34,22 @@ export class UICheckbox extends UIInput {
 	}
 
 	/** @override **/
-	constructor(jodit: IViewBased, options: Partial<IUIInput['state']>) {
+	constructor(jodit: IViewBased, options: Partial<IUICheckBox['state']>) {
 		super(jodit, { ...options, type: 'checkbox' });
+		Object.assign(this.state, options);
+	}
+
+	@watch('state.checked')
+	@hook('ready')
+	protected onChangeChecked(): void {
+		this.value = this.state.checked.toString();
+		(<HTMLInputElement>this.nativeInput).checked = this.state.checked;
+
+		this.setMod('checked', this.state.checked);
+	}
+
+	@watch('nativeInput:change')
+	protected onChangeNativeCheckBox(): void {
+		this.state.checked = (<HTMLInputElement>this.nativeInput).checked;
 	}
 }

package/src/core/ui/form/inputs/input/input.less

@@ -62,7 +62,7 @@
 	}
 
 	&_focused_true &__wrapper {
-		box-shadow: var(--focus-input-box-shadow);
+		border-color: var(--color-border-selected);
 	}
 
 	&__icon:not(:empty) {

package/src/core/ui/form/inputs/input/input.ts

@@ -166,7 +166,11 @@ export class UIInput extends UIElement implements IUIInput {
 	 */
 	@watch('state.value')
 	protected onChangeStateValue(): void {
-		this.value = this.state.value;
+		const value = this.state.value.toString();
+
+		if (value !== this.value) {
+			this.value = value;
+		}
 	}
 
 	/**
@@ -176,9 +180,11 @@ export class UIInput extends UIElement implements IUIInput {
 	protected onChangeValue(): void {
 		const { value } = this;
 
-		this.state.value = value;
-		this.j.e.fire(this, 'change', value);
-		this.state.onChange?.(value);
+		if (this.state.value !== value) {
+			this.state.value = value;
+			this.j.e.fire(this, 'change', value);
+			this.state.onChange?.(value);
+		}
 	}
 
 	protected validators: Set<IUIInputValidator> = new Set([]);
@@ -226,6 +232,10 @@ export class UIInput extends UIElement implements IUIInput {
 	constructor(jodit: IViewBased, options?: Partial<IUIInput['state']>) {
 		super(jodit, options);
 
+		if (options?.value !== undefined) {
+			options.value = options.value.toString();
+		}
+
 		Object.assign(this.state, options);
 
 		if (this.state.clearButton !== undefined) {

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/icon.ts

@@ -23,6 +23,7 @@ export class Icon {
 		return (
 			Icon.icons[name] ||
 			Icon.icons[name.replace(/-/g, '_')] ||
+			Icon.icons[name.replace(/_/g, '-')] ||
 			Icon.icons[name.toLowerCase()]
 		);
 	}
@@ -44,8 +45,9 @@ export class Icon {
 	/**
 	 * Set SVG in store
 	 */
-	static set(name: string, value: string): void {
+	static set(name: string, value: string): typeof Icon {
 		this.icons[name.replace('_', '-')] = value;
+		return this;
 	}
 
 	/**

package/src/core/ui/index.ts

@@ -7,9 +7,7 @@
 export * from './element';
 export * from './button';
 export * from './popup';
-export * from './separator';
-export * from './list/group';
-export * from './list/list';
+export * from './list';
 export * from './form';
 export * from './icon';
 export * from './progress-bar/progress-bar';

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

@@ -10,14 +10,20 @@
 .jodit-ui-group {
 	display: inline-flex;
 	max-width: 100%;
+
 	flex: 0 0 auto;
 	flex-shrink: 0;
 	flex-wrap: wrap;
 
-	&_separated_true:not(:last-child) {
+	&_line_true {
+		display: flex;
+		justify-content: stretch;
+	}
+
+	&_separated_true:not(:last-child):not(&_before-spacer_true) {
 		&:after {
 			content: '';
-			.jodit-ui-separator();
+			.jodit-ui-separator-func();
 		}
 	}
 

package/src/core/ui/list/group.ts

@@ -76,7 +76,7 @@ export class UIGroup<T extends IViewBased = IViewBased>
 	 */
 	append(elm: IUIElement | IUIElement[], distElement?: string): this {
 		if (isArray(elm)) {
-			elm.forEach(item => this.append(item));
+			elm.forEach(item => this.append(item, distElement));
 			return this;
 		}
 
@@ -145,7 +145,7 @@ export class UIGroup<T extends IViewBased = IViewBased>
 	constructor(
 		jodit: T,
 		elements?: Array<IUIElement | void | null | false>,
-		options?: IDictionary
+		readonly options?: IDictionary
 	) {
 		super(jodit, options);
 		elements?.forEach(elm => elm && this.append(elm));

package/src/{modules/file-browser/consts.ts → core/ui/list/index.ts}

@@ -4,7 +4,7 @@
  * Copyright (c) 2013-2021 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
 
-export const F_CLASS = 'jodit-filebrowser';
-
-export const ITEM_CLASS = F_CLASS + '__files-item';
-export const ICON_LOADER = '<i class="jodit-icon_loader"></i>';
+export * from './group';
+export * from './list';
+export * from './separator';
+export * from './spacer';

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) {
@@ -34,7 +35,7 @@
 	}
 }
 
-.jodit-ui-separator {
+.jodit-ui-separator-func() {
 	padding: 0;
 	border-right: 1px solid var(--color-border);
 	border-left: 0;
@@ -42,9 +43,17 @@
 	cursor: default;
 }
 
+.jodit-ui-separator {
+	.jodit-ui-separator-func();
+}
+
 .jodit-ui-break {
 	width: 0;
 	height: 0 !important;
 	flex-basis: 100%;
 	border-top: 1px solid var(--color-border);
 }
+
+.jodit-ui-spacer {
+	flex: 1;
+}

package/src/core/ui/list/list.ts

@@ -21,7 +21,8 @@ import { UIButton } from '../button';
 import { getStrongControlTypes } from '../helpers/get-strong-control-types';
 import { component, watch } from '../../decorators';
 import { UIGroup } from './group';
-import { UISeparator } from '../separator';
+import { UISpacer } from './spacer';
+import { UISeparator } from './separator';
 import { isButtonGroup } from '../helpers/buttons';
 import { getControlType } from '../helpers/get-control-type';
 import { splitArray } from '../../helpers';
@@ -89,8 +90,9 @@ export class UIList<T extends IViewBased = IViewBased>
 
 		let lastBtnSeparator: boolean = false;
 
-		let line: IUIGroup = this.makeGroup();
+		let line = this.makeGroup();
 		this.append(line);
+		line.setMod('line', true);
 
 		let group: IUIGroup;
 
@@ -100,6 +102,7 @@ export class UIList<T extends IViewBased = IViewBased>
 			switch (control.name) {
 				case '\n':
 					line = this.makeGroup();
+					line.setMod('line', true);
 					group = this.makeGroup();
 					line.append(group);
 					this.append(line);
@@ -112,6 +115,19 @@ export class UIList<T extends IViewBased = IViewBased>
 					}
 					break;
 
+				case '---': {
+					group.setMod('before-spacer', true);
+
+					const space = new UISpacer(this.j);
+					line.append(space);
+
+					group = this.makeGroup();
+					line.append(group);
+					lastBtnSeparator = false;
+
+					break;
+				}
+
 				default:
 					lastBtnSeparator = false;
 					elm = this.makeButton(control, target);
@@ -136,9 +152,10 @@ export class UIList<T extends IViewBased = IViewBased>
 
 				if (buttons.length) {
 					group = this.makeGroup();
-					line.append(group);
 					group.setMod('separated', true).setMod('group', item.group);
 
+					line.append(group);
+
 					getStrongControlTypes(buttons, this.j.o.controls)
 						.filter(isNotRemoved)
 						.forEach(addButton);

package/src/core/ui/{separator.ts → list/separator.ts}

@@ -4,8 +4,8 @@
  * Copyright (c) 2013-2021 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
 
-import { UIElement } from './element';
-import { component } from '../decorators';
+import { UIElement } from '../element';
+import { component } from '../../decorators';
 
 @component
 export class UISeparator extends UIElement {

package/src/core/ui/list/spacer.ts

@@ -0,0 +1,15 @@
+/*!
+ * 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 { UIElement } from '../element';
+import { component } from '../../decorators';
+
+@component
+export class UISpacer extends UIElement {
+	className(): string {
+		return 'UISpacer';
+	}
+}

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 {