jodit 3.12.3 → 3.13.2

package/src/modules/file-browser/ui/tree/tree.less

@@ -1,5 +1,10 @@
 @import (reference) '../../../../styles/variables';
 @import (reference) '../../../../styles/mixins';
+@import (reference) '../../styles/file-browser';
+
+:root {
+	--color-folder-title: #b1b1b1;
+}
 
 .jodit-filebrowser-tree {
 	position: relative;
@@ -15,6 +20,10 @@
 		display: flex;
 	}
 
+	&_loading_true {
+		.file-browser-loader();
+	}
+
 	.scrollbarSlim();
 
 	&_active_true {
@@ -45,8 +54,6 @@
 			background-color: rgba(127, 127, 127, 0.5);
 			outline: 1px solid slategrey;
 		}
-
-		--text-color: #b1b1b1;
 	}
 
 	&__item {
@@ -57,13 +64,14 @@
 		justify-content: space-between;
 		padding: calc(var(--padding-default) / 2) var(--padding-default);
 		border-bottom: 1px solid #474747;
-		color: var(--text-color);
+		color: var(--color-folder-title);
 		text-decoration: none;
 		transition: background-color 0.2s ease 0s;
 		word-break: break-all;
 
 		&-title {
 			flex: 1;
+			color: var(--color-folder-title);
 		}
 
 		.jodit-icon_folder {
@@ -81,8 +89,8 @@
 			& svg {
 				width: var(--icon-size);
 				height: var(--icon-size);
-				fill: var(--text-color) !important;
-				stroke: var(--text-color) !important;
+				fill: var(--color-folder-title) !important;
+				stroke: var(--color-folder-title) !important;
 			}
 
 			&:hover {
@@ -92,7 +100,9 @@
 
 		&:hover {
 			background-color: var(--color-background-button-hover);
-			color: #222;
+			&-title {
+				color: var(--color-text);
+			}
 
 			i.jodit-icon_folder {
 				opacity: 0.6;

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

@@ -5,7 +5,7 @@
  */
 
 import './tree.less';
-import { UIGroup } from '../../../../core/ui';
+import { UIGroup } from 'jodit/core/ui';
 
 export class FileBrowserTree extends UIGroup {
 	override className(): string {

package/src/modules/image-editor/image-editor.ts

@@ -21,17 +21,17 @@ import type {
 	IUIButton,
 	IDictionary,
 	IFileBrowserDataProvider
-} from '../../types';
-import { Config } from '../../config';
-import { ViewComponent } from '../../core/component';
-import { Alert, Dialog, Prompt } from '../dialog';
-import { $$, attr, css, refs, toArray, trim } from '../../core/helpers';
-import { Dom } from '../../core/dom';
-import { Button } from '../../core/ui/button';
+} from 'jodit/types';
+import { Config } from 'jodit/config';
+import { ViewComponent } from 'jodit/core/component';
+import { Alert, Dialog, Prompt } from 'jodit/modules/dialog';
+import { $$, attr, css, refs, toArray, trim } from 'jodit/core/helpers';
+import { Dom } from 'jodit/core/dom';
+import { Button } from 'jodit/core/ui/button';
 import { form } from './templates/form';
-import { component, debounce, throttle, autobind } from '../../core/decorators';
+import { component, debounce, throttle, autobind } from 'jodit/core/decorators';
 
-declare module '../../config' {
+declare module 'jodit/config' {
 	interface Config {
 		imageeditor: ImageEditorOptions;
 	}
@@ -40,56 +40,15 @@ declare module '../../config' {
 Config.prototype.imageeditor = {
 	min_width: 20,
 	min_height: 20,
-	/**
-	 * @property {boolean} imageeditor.closeAfterSave=false Close editor after save image
-	 */
 	closeAfterSave: false,
-
-	/**
-	 * @property {string|int} imageeditor.width=85% Default dialog width by screen
-	 */
 	width: '85%',
-
-	/**
-	 * @property {string|int} imageeditor.height=85% Default dialog height by screen
-	 */
 	height: '85%',
-
-	/**
-	 * @property {boolean} imageeditor.crop=true Show tab cropping
-	 */
 	crop: true,
-
-	/**
-	 * @property {boolean} imageeditor.resize=true Show tab resizing
-	 */
 	resize: true,
-
-	/**
-	 * @property {boolean} imageeditor.resizeUseRatio=true Keep aspect ratio on resize
-	 */
 	resizeUseRatio: true,
-
-	/**
-	 * @property {int} imageeditor.resizeMinWidth=20 minimal width on resize
-	 */
 	resizeMinWidth: 20,
-
-	/**
-	 * @property {boolean} imageeditor.resizeMinHeight=20 minimal height on resize
-	 */
 	resizeMinHeight: 20,
-
-	/**
-	 * @property {boolean} imageeditor.cropUseRatio=true Keep aspect ratio on crop
-	 */
 	cropUseRatio: true,
-
-	/**
-	 * @property {string} imageeditor.cropDefaultWidth=70% In the tab, crop the image is displayed not in real size.
-	 * Boxing default size for it
-	 * @property {string} imageeditor.cropDefaultHeight=70%
-	 */
 	cropDefaultWidth: '70%',
 	cropDefaultHeight: '70%'
 };
@@ -645,8 +604,6 @@ export class ImageEditor extends ViewComponent {
 
 	/**
 	 * Hide image editor
-	 *
-	 * @method hide
 	 */
 	@autobind
 	hide(): void {

package/src/modules/image-editor/templates/form.ts

@@ -8,8 +8,8 @@
  * @module modules/image-editor
  */
 
-import type { ImageEditorOptions, IViewBased } from '../../../types';
-import { Icon } from '../../../core/ui';
+import type { ImageEditorOptions, IViewBased } from 'jodit/types';
+import { Icon } from 'jodit/core/ui';
 
 const jie = 'jodit-image-editor';
 const gi = Icon.get.bind(Icon);
@@ -30,9 +30,9 @@ export const form = (
 	) => `<div class="jodit-form__group">
 			<label>${i(label)}</label>
 
-			<label class='jodi-switcher'>
+			<label class='jodit-switcher'>
 				<input ${act(active, 'checked')} data-ref="${ref}" type="checkbox"/>
-				<span class="jodi-switcher__slider"></span>
+				<span class="jodit-switcher__slider"></span>
 			</label>
 	</div>`;
 

package/src/modules/observer/command.ts

@@ -8,7 +8,7 @@
  * @module modules/observer
  */
 
-import type { SnapshotType } from '../../types';
+import type { SnapshotType } from 'jodit/types';
 import type { Observer } from './observer';
 
 export class Command {

package/src/modules/observer/observer.ts

@@ -10,15 +10,15 @@
  * @module modules/observer
  */
 
-import type { IJodit, SnapshotType, IObserver } from '../../types';
-import { Config } from '../../config';
-import { ViewComponent } from '../../core/component';
+import type { IJodit, SnapshotType, IObserver } from 'jodit/types';
+import { Config } from 'jodit/config';
+import { ViewComponent } from 'jodit/core/component';
 import { Snapshot } from './snapshot';
 import { Stack } from './stack';
 import { Command } from './command';
-import { debounce } from '../../core/decorators';
+import { debounce } from 'jodit/core/decorators';
 
-declare module '../../config' {
+declare module 'jodit/config' {
 	interface Config {
 		observer: {
 			/**

package/src/modules/observer/snapshot.ts

@@ -8,9 +8,9 @@
  * @module modules/observer
  */
 
-import type { IJodit, ISnapshot, SnapshotType } from '../../types';
-import { ViewComponent } from '../../core/component';
-import { Dom } from '../../core/dom';
+import type { IJodit, ISnapshot, SnapshotType } from 'jodit/types';
+import { ViewComponent } from 'jodit/core/component';
+import { Dom } from 'jodit/core/dom';
 
 // declare const isProd: boolean;
 /**

package/src/modules/observer/stack.ts

@@ -8,7 +8,7 @@
  * @module modules/observer
  */
 
-import type { CanUndef, IStack } from '../../types';
+import type { CanUndef, IStack } from 'jodit/types';
 import type { Command } from './command';
 
 export class Stack implements IStack {

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

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

package/src/modules/table/table.ts

@@ -10,9 +10,9 @@
  * @module modules/table
  */
 
-import type { ICreate, IDictionary, IJodit } from '../../types';
-import * as consts from '../../core/constants';
-import { Dom } from '../../core/dom';
+import type { ICreate, IDictionary, IJodit } from 'jodit/types';
+import * as consts from 'jodit/core/constants';
+import { Dom } from 'jodit/core/dom';
 import {
 	$$,
 	attr,
@@ -20,12 +20,12 @@ import {
 	isNumber,
 	toArray,
 	trim
-} from '../../core/helpers/';
-import { ViewComponent } from '../../core/component';
-import { getContainer } from '../../core/global';
-import { debounce } from '../../core/decorators';
+} from 'jodit/core/helpers/';
+import { ViewComponent } from 'jodit/core/component';
+import { getContainer } from 'jodit/core/global';
+import { debounce } from 'jodit/core/decorators';
 
-declare module '../../config' {
+declare module 'jodit/config' {
 	interface Config {
 		table: {
 			allowCellSelection: boolean;

package/src/modules/toolbar/button/button.less

@@ -6,7 +6,7 @@
 
 @import (reference) '../../../styles/variables';
 @import (reference) '../../../styles/mixins';
-@import (reference) '../../../core/ui/button/button/button';
+@import (reference) 'jodit/core/ui/button/button/button';
 
 .trigger-size(@size) {
 	width: @size;

package/src/modules/toolbar/button/button.ts

@@ -21,12 +21,12 @@ import type {
 	IToolbarCollection,
 	IViewBased,
 	Nullable
-} from '../../../types';
-import { UIButton, UIButtonState } from '../../../core/ui/button';
-import { component, watch } from '../../../core/decorators';
-import { Dom } from '../../../core/dom';
-import { Popup } from '../../../core/ui/popup/';
-import { makeCollection } from '../factory';
+} from 'jodit/types';
+import { UIButton, UIButtonState } from 'jodit/core/ui/button';
+import { component, watch } from 'jodit/core/decorators';
+import { Dom } from 'jodit/core/dom';
+import { Popup } from 'jodit/core/ui/popup/';
+import { makeCollection } from 'jodit/modules/toolbar/factory';
 import {
 	isFunction,
 	isString,
@@ -37,11 +37,11 @@ import {
 	call,
 	isArray,
 	keys
-} from '../../../core/helpers/';
-import { Icon } from '../../../core/ui';
-import { ToolbarCollection } from '../../../modules/toolbar/collection/collection';
-import { STATUSES } from '../../../core/component';
-import { findControlType } from '../../../core/ui/helpers/get-control-type';
+} from 'jodit/core/helpers';
+import { Icon } from 'jodit/core/ui';
+import { ToolbarCollection } from 'jodit/modules/toolbar/collection/collection';
+import { STATUSES } from 'jodit/core/component';
+import { findControlType } from 'jodit/core/ui/helpers/get-control-type';
 
 @component
 export class ToolbarButton<T extends IViewBased = IViewBased>
@@ -83,10 +83,8 @@ export class ToolbarButton<T extends IViewBased = IViewBased>
 		const { control, state } = this,
 			tc = this.closest(ToolbarCollection) as ToolbarCollection;
 
-		if (tc) {
-			state.disabled = Boolean(tc.shouldBeDisabled(this));
-			state.activated = Boolean(tc.shouldBeActive(this));
-		}
+		state.disabled = this.calculateDisabledStatus(tc);
+		state.activated = this.calculateActivatedStatus(tc);
 
 		if (isFunction(control.update)) {
 			control.update(this);
@@ -95,6 +93,50 @@ export class ToolbarButton<T extends IViewBased = IViewBased>
 		super.update();
 	}
 
+	/**
+	 * Calculates whether the button is active
+	 */
+	private calculateActivatedStatus(tc?: ToolbarCollection): boolean {
+		if (isJoditObject(this.j) && !this.j.editorIsActive) {
+			return false;
+		}
+
+		if (
+			isFunction(this.control.isActive) &&
+			this.control.isActive(this.j, this.control, this)
+		) {
+			return true;
+		}
+
+		return Boolean(tc && tc.shouldBeActive(this));
+	}
+
+	/**
+	 * Calculates whether an element is blocked for the user
+	 */
+	private calculateDisabledStatus(tc?: ToolbarCollection): boolean {
+		if (this.j.o.disabled) {
+			return true;
+		}
+
+		if (
+			this.j.o.readonly &&
+			(!this.j.o.activeButtonsInReadOnly ||
+				!this.j.o.activeButtonsInReadOnly.includes(this.control.name))
+		) {
+			return true;
+		}
+
+		if (
+			isFunction(this.control.isDisabled) &&
+			this.control.isDisabled(this.j, this.control, this)
+		) {
+			return true;
+		}
+
+		return Boolean(tc && tc.shouldBeDisabled(this));
+	}
+
 	/** @override */
 	protected override onChangeActivated(): void {
 		attr(this.button, 'aria-pressed', this.state.activated);

package/src/modules/toolbar/button/content.less

@@ -6,7 +6,7 @@
 
 @import (reference) '../../../styles/variables';
 @import (reference) '../../../styles/mixins';
-@import (reference) '../../../core/ui/button/button/button';
+@import (reference) 'jodit/core/ui/button/button/button';
 
 .jodit-toolbar-content {
 	.jodit-ui-button();

package/src/modules/toolbar/button/content.ts

@@ -15,11 +15,11 @@ import type {
 	IToolbarButton,
 	IViewBased,
 	Nullable
-} from '../../../types';
-import { UIButton } from '../../../core/ui/button';
-import { Dom } from '../../../core/dom';
-import { isString, attr } from '../../../core/helpers';
-import { component } from '../../../core/decorators';
+} from 'jodit/types';
+import { UIButton } from 'jodit/core/ui/button';
+import { Dom } from 'jodit/core/dom';
+import { isString, attr } from 'jodit/core/helpers';
+import { component } from 'jodit/core/decorators';
 
 @component
 export class ToolbarContent<T extends IViewBased = IViewBased>

package/src/modules/toolbar/collection/collection.less

@@ -5,7 +5,7 @@
  */
 
 @import (reference) '../../../styles/variables';
-@import (reference) '../../../core/ui/group/list';
+@import (reference) 'jodit/core/ui/group/list';
 
 .gradient(@icon-size) {
 	--button-icon-size: @icon-size;

package/src/modules/toolbar/collection/collection.ts

@@ -23,13 +23,13 @@ import type {
 	CanUndef,
 	IViewWithToolbar,
 	IBound
-} from '../../../types/';
+} from 'jodit/types';
 
-import { error, isFunction } from '../../../core/helpers/';
+import { error } from 'jodit/core/helpers';
 
-import { UIList } from '../../../core/ui';
+import { UIList } from 'jodit/core/ui';
 import { makeButton } from '../factory';
-import { component, autobind } from '../../../core/decorators';
+import { component, autobind } from 'jodit/core/decorators';
 
 @component
 export class ToolbarCollection<T extends IViewWithToolbar = IViewWithToolbar>
@@ -66,10 +66,6 @@ export class ToolbarCollection<T extends IViewWithToolbar = IViewWithToolbar>
 	 * Button should be active
 	 */
 	shouldBeActive(button: IToolbarButton): boolean | undefined {
-		if (isFunction(button.control.isActive)) {
-			return button.control.isActive(this.j, button.control, button);
-		}
-
 		return undefined;
 	}
 
@@ -77,29 +73,7 @@ export class ToolbarCollection<T extends IViewWithToolbar = IViewWithToolbar>
 	 * Button should be disabled
 	 */
 	shouldBeDisabled(button: IToolbarButton): boolean | undefined {
-		if (this.j.o.disabled) {
-			return true;
-		}
-
-		if (
-			this.j.o.readonly &&
-			(!this.j.o.activeButtonsInReadOnly ||
-				!this.j.o.activeButtonsInReadOnly.includes(button.control.name))
-		) {
-			return true;
-		}
-
-		let isDisabled: boolean | undefined;
-
-		if (isFunction(button.control.isDisabled)) {
-			isDisabled = button.control.isDisabled(
-				this.j,
-				button.control,
-				button
-			);
-		}
-
-		return isDisabled;
+		return undefined;
 	}
 
 	/**

package/src/modules/toolbar/collection/editor-collection.ts

@@ -9,17 +9,17 @@
  */
 
 import { ToolbarCollection } from './collection';
-import * as consts from '../../../core/constants';
-import { Dom } from '../../../core/dom';
+import * as consts from 'jodit/core/constants';
+import { Dom } from 'jodit/core/dom';
 import type {
 	IDictionary,
 	IToolbarButton,
 	IViewBased,
 	IJodit,
 	IBound
-} from '../../../types';
-import { css, isFunction, isJoditObject } from '../../../core/helpers';
-import { component } from '../../../core/decorators';
+} from 'jodit/types';
+import { css, isFunction } from 'jodit/core/helpers';
+import { component } from 'jodit/core/decorators';
 
 @component
 export class ToolbarEditorCollection extends ToolbarCollection<IJodit> {
@@ -46,10 +46,6 @@ export class ToolbarEditorCollection extends ToolbarCollection<IJodit> {
 
 	/** @override */
 	override shouldBeActive(button: IToolbarButton): boolean {
-		if (isJoditObject(this.j) && !this.j.editorIsActive) {
-			return false;
-		}
-
 		const active = super.shouldBeActive(button);
 
 		if (active !== undefined) {

package/src/modules/toolbar/factory.ts

@@ -18,8 +18,8 @@ import type {
 	IUIElement,
 	IViewBased,
 	Nullable
-} from '../../types';
-import { isFunction, isJoditObject } from '../../core/helpers';
+} from 'jodit/types';
+import { isFunction, isJoditObject } from 'jodit/core/helpers';
 import { ToolbarCollection } from './collection/collection';
 import { ToolbarEditorCollection } from './collection/editor-collection';
 import { ToolbarButton } from './button/button';

package/src/modules/uploader/uploader.ts

@@ -25,10 +25,10 @@ import type {
 	IUploaderOptions,
 	IViewBased,
 	Nullable
-} from '../../types';
-import { Config } from '../../config';
-import { IS_IE, TEXT_PLAIN } from '../../core/constants';
-import { Ajax } from '../../core/request';
+} from 'jodit/types';
+import { Config } from 'jodit/config';
+import { IS_IE, TEXT_PLAIN } from 'jodit/core/constants';
+import { Ajax } from 'jodit/core/request';
 import {
 	attr,
 	error,
@@ -39,12 +39,12 @@ import {
 	toArray,
 	isString,
 	ConfigProto
-} from '../../core/helpers';
-import { Dom } from '../../core/dom';
-import { ViewComponent, STATUSES } from '../../core/component/';
-import { getContainer } from '../../core/global';
+} from 'jodit/core/helpers';
+import { Dom } from 'jodit/core/dom';
+import { ViewComponent, STATUSES } from 'jodit/core/component/';
+import { getContainer } from 'jodit/core/global';
 
-declare module '../../config' {
+declare module 'jodit/config' {
 	interface Config {
 		/**
 		 * Enable drag and drop file editor

package/src/modules/widget/color-picker/color-picker.ts

@@ -12,7 +12,7 @@
 
 import './color-picker.less';
 
-import type { IDictionary, IJodit } from '../../../types';
+import type { IDictionary, IJodit } from 'jodit/types';
 import {
 	normalizeColor,
 	hasBrowserColorPicker,
@@ -21,9 +21,9 @@ import {
 	isFunction,
 	isArray,
 	refs
-} from '../../../core/helpers/';
-import { Icon } from '../../../core/ui';
-import { Dom } from '../../../core/dom';
+} from 'jodit/core/helpers/';
+import { Icon } from 'jodit/core/ui';
+import { Dom } from 'jodit/core/dom';
 
 /**
  * Build color picker

package/src/modules/widget/file-selector/file-selector.ts

@@ -14,11 +14,11 @@ import type {
 	IFileBrowserCallBackData,
 	IJodit,
 	IUploaderData
-} from '../../../types';
-import { isFunction, $$, attr, val } from '../../../core/helpers';
-import { Dom } from '../../../core/dom';
+} from 'jodit/types';
+import { isFunction, $$, attr, val } from 'jodit/core/helpers';
+import { Dom } from 'jodit/core/dom';
 import { TabOption, TabsWidget } from '../tabs/tabs';
-import { UIBlock, UIForm, UIInput, UIButton } from '../../../core/ui';
+import { UIBlock, UIForm, UIInput, UIButton } from 'jodit/core/ui';
 
 interface ImageSelectorCallbacks {
 	/**

package/src/modules/widget/tabs/tabs.ts

@@ -12,9 +12,9 @@
 
 import './tabs.less';
 
-import type { IDictionary, IJodit, IUIButton } from '../../../types';
-import { $$, isFunction } from '../../../core/helpers';
-import { Button, UIElement } from '../../../core/ui';
+import type { IDictionary, IJodit, IUIButton } from 'jodit/types';
+import { $$, isFunction } from 'jodit/core/helpers';
+import { Button, UIElement } from 'jodit/core/ui';
 
 export interface TabOption {
 	icon?: string;