jodit 3.8.5 → 3.9.2

package/src/modules/dialog/confirm.ts

@@ -15,7 +15,7 @@ import { Button } from '../../core/ui';
  * @param callback - callback. The first argument is the value entered
  * @example
  * ```javascript
- * Jodit.Confirm("Are you shure?", "Confirm Dialog", function (yes) {
+ * Jodit.Confirm("Are you sure?", "Confirm Dialog", function (yes) {
  *     if (yes) {
  *         // do something
  *     }

package/src/modules/dialog/dialog.ts

@@ -40,15 +40,6 @@ import { eventEmitter, pluginSystem } from '../../core/global';
 import { component, autobind, hook } from '../../core/decorators';
 import { View } from '../../core/view/view';
 
-/**
- * @property {object} dialog module settings {@link Dialog|Dialog}
- * @property {int} dialog.zIndex=1000 Default Z-index for dialog window. {@link Dialog|Dialog}'s settings
- * @property {boolean} dialog.resizable=true This dialog can resize by trigger
- * @property {boolean} dialog.draggable=true This dialog can move by header
- * @property {boolean} dialog.fullsize=false A dialog window will open in full screen by default
- * @property {Buttons} dialog.buttons=['close.dialog', 'fullsize.dialog']
- */
-
 declare module '../../config' {
 	interface Config {
 		dialog: IDialogOptions;
@@ -58,7 +49,15 @@ declare module '../../config' {
 Config.prototype.dialog = {
 	namespace: '',
 	extraButtons: [],
+
+	/**
+	 * This dialog can resize by trigger
+	 */
 	resizable: true,
+
+	/**
+	 * This dialog can move by header
+	 */
 	draggable: true,
 	buttons: ['dialog.close'],
 	removeButtons: []
@@ -201,7 +200,6 @@ export class Dialog extends ViewWithToolbar implements IDialog {
 		if (this.e) {
 			/**
 			 * Fired when dialog box is started moving
-			 * @event startMove
 			 */
 			this.e.fire(this, 'startMove');
 		}
@@ -239,9 +237,6 @@ export class Dialog extends ViewWithToolbar implements IDialog {
 			if (this.e) {
 				/**
 				 * Fired when dialog box is resized
-				 * @event resizeDialog
-				 * @param {int} dx Delta X
-				 * @param {int} dy Delta Y
 				 */
 				this.e.fire(
 					this,
@@ -301,7 +296,6 @@ export class Dialog extends ViewWithToolbar implements IDialog {
 		if (this.e) {
 			/**
 			 * Fired when dialog box is started resizing
-			 * @event startResize
 			 */
 			this.e.fire(this, 'startResize');
 		}
@@ -325,9 +319,6 @@ export class Dialog extends ViewWithToolbar implements IDialog {
 
 	override OPTIONS!: IDialogOptions;
 
-	/**
-	 * @property {HTMLDivElement} dialog
-	 */
 	dialog!: HTMLElement;
 
 	workplace!: HTMLDivElement;
@@ -340,8 +331,8 @@ export class Dialog extends ViewWithToolbar implements IDialog {
 	/**
 	 * Specifies the size of the window
 	 *
-	 * @param {number} [w] - The width of the window
-	 * @param {number} [h] - The height of the window
+	 * @param w - The width of the window
+	 * @param h - The height of the window
 	 */
 	setSize(w?: number | string, h?: number | string): this {
 		if (w == null) {
@@ -374,8 +365,8 @@ export class Dialog extends ViewWithToolbar implements IDialog {
 	 * Specifies the position of the upper left corner of the window . If x and y are specified,
 	 * the window is centered on the center of the screen
 	 *
-	 * @param {Number} [x] - Position px Horizontal
-	 * @param {Number} [y] - Position px Vertical
+	 * @param x - Position px Horizontal
+	 * @param y - Position px Vertical
 	 */
 	setPosition(x?: number, y?: number): this {
 		const w = this.ow.innerWidth,
@@ -407,7 +398,7 @@ export class Dialog extends ViewWithToolbar implements IDialog {
 	/**
 	 * Specifies the dialog box title . It can take a string and an array of objects
 	 *
-	 * @param {string|string[]|Element|Element[]} content - A string or an HTML element ,
+	 * @param content - A string or an HTML element ,
 	 * or an array of strings and elements
 	 * @example
 	 * ```javascript
@@ -425,7 +416,7 @@ export class Dialog extends ViewWithToolbar implements IDialog {
 	/**
 	 * It specifies the contents of the dialog box. It can take a string and an array of objects
 	 *
-	 * @param {string|string[]|Element|Element[]} content A string or an HTML element ,
+	 * @param content - A string or an HTML element ,
 	 * or an array of strings and elements
 	 * @example
 	 * ```javascript
@@ -443,7 +434,7 @@ export class Dialog extends ViewWithToolbar implements IDialog {
 	/**
 	 * Sets the bottom of the dialog. It can take a string and an array of objects
 	 *
-	 * @param {string|string[]|Element|Element[]} content - A string or an HTML element ,
+	 * @param content - A string or an HTML element ,
 	 * or an array of strings and elements
 	 * @example
 	 * ```javascript
@@ -474,8 +465,6 @@ export class Dialog extends ViewWithToolbar implements IDialog {
 
 	/**
 	 * Get dialog instance with maximum z-index displaying it on top of all the dialog boxes
-	 *
-	 * @return {Dialog}
 	 */
 	getMaxZIndexDialog(): IDialog {
 		let maxZi: number = 0,
@@ -513,9 +502,6 @@ export class Dialog extends ViewWithToolbar implements IDialog {
 
 	/**
 	 * Expands the dialog on full browser window
-	 *
-	 * @param {boolean} condition true - fullsize
-	 * @return {boolean} true - fullsize
 	 */
 	maximization(condition?: boolean): boolean {
 		if (isVoid(condition)) {
@@ -555,14 +541,11 @@ export class Dialog extends ViewWithToolbar implements IDialog {
 	/**
 	 * It opens a dialog box to center it, and causes the two event.
 	 *
-	 * @param {string|string[]|Element|Element[]} [content]  specifies the contents of the dialog box.
-	 * Can be false или undefined. see {@link Dialog~setContent|setContent}
-	 * @param {string|string[]|Element|Element[]} [title]  specifies the title of the dialog box, @see setHeader
-	 * @param {boolean} [destroyAfterClose] true - After closing the window , the destructor will be called.
-	 * see {@link Dialog~destruct|destruct}
-	 * @param {boolean} [modal] - true window will be opened in modal mode
-	 * @fires {@link event:beforeOpen} id returns 'false' then the window will not open
-	 * @fires {@link event:afterOpen}
+	 * @param contentOrClose - specifies the contents of the dialog box.
+	 * Can be false или undefined. see `{@link Dialog~setContent|setContent}`
+	 * @param title - specifies the title of the dialog box, @see setHeader
+	 * @param destroyAfterClose - true - After closing the window , the destructor will be called.
+	 * @param modal - true window will be opened in modal mode
 	 */
 	open(
 		contentOrClose?: Content | boolean,
@@ -574,8 +557,6 @@ export class Dialog extends ViewWithToolbar implements IDialog {
 
 		/**
 		 * Called before the opening of the dialog box
-		 *
-		 * @event beforeOpen
 		 */
 		if (this.e.fire(this, 'beforeOpen') === false) {
 			return this;
@@ -619,7 +600,6 @@ export class Dialog extends ViewWithToolbar implements IDialog {
 
 		/**
 		 * Called after the opening of the dialog box
-		 * @event afterOpen
 		 */
 		this.e.fire('afterOpen', this);
 
@@ -630,7 +610,6 @@ export class Dialog extends ViewWithToolbar implements IDialog {
 
 	/**
 	 * Set modal mode
-	 * @param modal
 	 */
 	setModal(modal: undefined | boolean): this {
 		this.isModal = Boolean(modal);
@@ -644,12 +623,10 @@ export class Dialog extends ViewWithToolbar implements IDialog {
 	 */
 	isOpened: boolean = false;
 
-	/**
-	 * Closes the dialog box , if you want to call the method {@link Dialog~destruct|destruct}
+	/****
+	 * Closes the dialog box , if you want to call the method `destruct`
 	 *
 	 * @see destroy
-	 * @fires beforeClose
-	 * @fires afterClose
 	 * @example
 	 * ```javascript
 	 * //You can close dialog two ways
@@ -683,8 +660,6 @@ export class Dialog extends ViewWithToolbar implements IDialog {
 
 		/**
 		 * Called up to close the window
-		 *
-		 * @event beforeClose
 		 */
 		if (this.e) {
 			this.e.fire('beforeClose', this);

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/image-editor/image-editor.less

@@ -14,6 +14,8 @@
 }
 
 .jodit-image-editor {
+	overflow: hidden;
+
 	width: 100%;
 	height: 100%;
 
@@ -32,7 +34,6 @@
 	}
 
 	padding: var(--padding-default);
-	overflow: hidden;
 
 	* {
 		box-sizing: border-box;
@@ -40,22 +41,22 @@
 
 	.jodit-image-editor__slider {
 		&-title {
-			text-shadow: rgb(243, 243, 243) 0 1px 0;
-			color: rgb(51, 51, 51);
+			padding: 0.8em 1em;
 			border-bottom: 1px solid rgba(158, 158, 158, 0.31);
 			background-color: #f9f9f9;
-			padding: 0.8em 1em;
-			text-overflow: ellipsis;
-			white-space: nowrap;
+			color: rgb(51, 51, 51);
 			cursor: pointer;
-			user-select: none;
 			font-weight: bold;
 			line-height: 1em;
+			text-overflow: ellipsis;
+			text-shadow: rgb(243, 243, 243) 0 1px 0;
+			user-select: none;
+			white-space: nowrap;
 
 			svg {
-				margin-right: var(--padding-default);
-				width: 16px;
 				display: inline-block;
+				width: 16px;
+				margin-right: var(--padding-default);
 				vertical-align: middle;
 			}
 		}
@@ -80,7 +81,13 @@
 	}
 
 	&__area {
+		position: relative;
+		display: none;
+		overflow: hidden;
+
 		width: 100%;
+		height: 100%;
+
 		background-color: #eee;
 		background-image: linear-gradient(
 				45deg,
@@ -98,59 +105,57 @@
 				var(--color-border) 75%,
 				var(--color-border)
 			);
-		background-size: 30px 30px;
 		background-position: 0 0, 15px 15px;
-		height: 100%;
-		overflow: hidden;
+		background-size: 30px 30px;
 		user-select: none;
-		position: relative;
-		display: none;
 
 		&.jodit-image-editor_active {
 			display: block;
 		}
 
 		.jodit-image-editor__box {
-			overflow: hidden;
 			position: relative;
 			z-index: 1;
-			pointer-events: none;
+			overflow: hidden;
 			height: 100%;
+			pointer-events: none;
 
 			img {
-				user-select: none;
 				max-width: 100%;
 				max-height: 100%;
+				user-select: none;
 			}
 		}
 
 		.jodit-image-editor__croper,
 		.jodit-image-editor__resizer {
+			position: absolute;
 			z-index: 2;
+			top: var(--padding-default);
+			left: 20px;
 			width: 100px;
 			height: 100px;
-			position: absolute;
-			box-shadow: 0 0 11px #000;
 			border: 1px solid #fff;
 			background-repeat: no-repeat;
-			top: var(--padding-default);
-			left: 20px;
+			box-shadow: 0 0 11px #000;
 			pointer-events: none;
 
 			i.jodit_bottomright {
 				position: absolute;
+				z-index: 4;
+				right: calc(var(--padding-default) * -1);
+				bottom: calc(var(--padding-default) * -1);
+
 				display: inline-block;
+				width: 20px;
+				height: 20px;
+
 				border: 1px solid
 					var(--image_editor_resizer_target_border_color);
-				z-index: 4;
 				background-color: var(--image_editor_resizer_target_bg_color);
-				cursor: se-resize;
 				border-radius: 50%;
-				height: 20px;
-				width: 20px;
-				right: calc(var(--padding-default) * -1);
-				bottom: calc(var(--padding-default) * -1);
 				box-shadow: 0 0 11px #000;
+				cursor: se-resize;
 				pointer-events: all;
 
 				&:active {
@@ -161,64 +166,64 @@
 	}
 
 	&__area.jodit-image-editor__area_crop {
+		position: relative;
 		height: 100%;
 		background: #eee;
-		text-align: center;
 		line-height: 100%;
-		position: relative;
+		text-align: center;
 
 		.jodit-image-editor__box {
-			height: 100%;
 			overflow: visible;
+			height: 100%;
+			line-height: 100%;
 			pointer-events: all;
 
 			img {
-				max-width: 100%;
-				max-height: 100%;
 				width: 100%;
+				max-width: 100%;
 				height: 100%;
+				max-height: 100%;
 			}
 
 			text-align: left;
-			line-height: 100%;
 
 			&::after {
-				content: '';
 				position: absolute;
+				z-index: 1;
 				top: 0;
-				left: 0;
-				bottom: 0;
 				right: 0;
+				bottom: 0;
+				left: 0;
 				margin: auto;
 				background: rgba(255, 255, 255, 0.3);
-				z-index: 1;
+				content: '';
 			}
 
 			.jodit-image-editor__croper {
-				pointer-events: all;
 				cursor: move;
+				pointer-events: all;
 
 				i.jodit-image-editor__sizes {
-					font-size: 12px;
-					white-space: pre;
 					position: absolute;
 					bottom: -30px;
 					left: 100%;
-					text-align: center;
-					color: rgb(255, 255, 255);
-					text-shadow: none;
+					display: block;
+					padding: 9px 6px;
 					background: rgba(0, 0, 0, 0.2);
 					border-radius: 0.4em;
-					padding: 9px 6px;
-					display: block;
+					color: rgb(255, 255, 255);
+					font-size: 12px;
+					text-align: center;
+					text-shadow: none;
+					white-space: pre;
 				}
 			}
 		}
 
 		&.jodit-image-editor_active {
 			display: flex;
-			justify-content: center;
 			align-items: center;
+			justify-content: center;
 		}
 	}
 }

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

@@ -8,19 +8,19 @@
 @import (reference) '../../styles/mixins';
 
 .jodit-status-bar {
-	font-size: var(--font-size-small);
 	display: flex;
-	justify-content: flex-start;
+	overflow: hidden;
 	align-items: center;
-	background-color: var(--color-panel);
+	justify-content: flex-start;
 	padding: 0 calc(var(--padding-default) / 2);
-	overflow: hidden;
+	background-color: var(--color-panel);
 	border-radius: 0 0 var(--border-radius-default) var(--border-radius-default);
+	font-size: var(--font-size-small);
 
 	&::before {
-		content: '';
 		flex: auto;
 		order: 1;
+		content: '';
 	}
 
 	.jodit-status-bar__item {
@@ -31,25 +31,25 @@
 			font-size: var(--font-size-small);
 		}
 
-		line-height: 1.57142857em;
-		margin: 0 var(--padding-default) 0 0;
-		padding: 0;
 		order: 0;
+		padding: 0;
+		margin: 0 var(--padding-default) 0 0;
+		line-height: 1.57142857em;
 
 		&.jodit-status-bar__item-right {
-			margin: 0 0 0 var(--padding-default);
 			order: 2;
+			margin: 0 0 0 var(--padding-default);
 		}
 
 		a {
-			text-decoration: none;
-			cursor: default;
 			border-radius: 3px;
+			cursor: default;
+			text-decoration: none;
 
 			&:hover {
 				background-color: var(--color-background-gray);
-				text-decoration: none;
 				color: var(--color-text);
+				text-decoration: none;
 			}
 		}
 	}