jodit 3.8.4 → 3.8.8

package/src/plugins/image/image-properties/image-properties.less

@@ -9,16 +9,20 @@
 .jodit-properties {
 	&__unlock > svg,
 	&__lock > svg {
-		font-style: normal;
 		display: inline-block;
+		overflow: hidden;
+
 		width: 14px;
 		height: 14px;
-		line-height: 14px;
-		font-size: 8px;
-		overflow: hidden;
-		vertical-align: middle;
+
 		fill: #222;
+
+		font-size: 8px;
+		font-style: normal;
+		line-height: 14px;
+
 		transform-origin: 0 0 !important;
+		vertical-align: middle;
 	}
 
 	.jodit-properties_view_box {
@@ -26,9 +30,9 @@
 
 		.jodit-properties_image_view {
 			display: flex;
+			height: 150px;
 			align-items: center;
 			justify-content: center;
-			height: 150px;
 			padding: 0;
 			margin: 0 0 var(--padding-default);
 			background-color: #f6f6f6;
@@ -40,11 +44,11 @@
 		}
 
 		.jodit-properties_image_sizes.jodit-form__group {
+			min-width: auto;
 			flex-direction: row;
 			align-items: center;
 			padding: 0 !important;
 			margin: 0 !important;
-			min-width: auto;
 
 			a {
 				display: inline-block;

package/src/plugins/image/image-properties/image-properties.ts

@@ -643,17 +643,20 @@ export class imageProperties extends Plugin {
 			imageWidth.value !== image.offsetWidth.toString() ||
 			imageHeight.value !== image.offsetHeight.toString()
 		) {
+			const updatedtWidth = trim(imageWidth.value)
+				? normalSizeToString(imageWidth.value)
+				: null;
+			const updatedHeight = trim(imageHeight.value)
+				? normalSizeToString(imageHeight.value)
+				: null;
+
 			css(image, {
-				width: trim(imageWidth.value)
-					? normalSizeToString(imageWidth.value)
-					: null,
-				height: trim(imageHeight.value)
-					? normalSizeToString(imageHeight.value)
-					: null
+				width: updatedtWidth,
+				height: updatedHeight
 			});
 
-			attr(image, 'width', null);
-			attr(image, 'height', null);
+			attr(image, 'width', attr(image, 'width') ? updatedtWidth : null);
+			attr(image, 'height', attr(image, 'height') ? updatedHeight : null);
 		}
 
 		const margins = [marginTop, marginRight, marginBottom, marginLeft];

package/src/plugins/placeholder/placeholder.less

@@ -7,14 +7,14 @@
 @import (reference) '../../styles/variables';
 
 .jodit-placeholder {
-	width: 100%;
-	user-select: none !important;
+	position: absolute;
+	z-index: 1;
 	top: 0;
 	left: 0;
 	display: block;
-	position: absolute;
+	width: 100%;
 	padding: var(--padding-default);
 	color: var(--color-placeholder);
-	z-index: 1;
 	pointer-events: none;
+	user-select: none !important;
 }

package/src/plugins/resizer/resizer.less

@@ -13,33 +13,33 @@
 }
 
 [data-jodit_iframe_wrapper] {
+	position: relative;
 	display: block;
 	user-select: none;
-	position: relative;
 
 	&::after {
 		position: absolute;
-		content: '';
 		z-index: 1;
 		top: 0;
-		left: 0;
 		right: 0;
 		bottom: 0;
-		cursor: pointer;
+		left: 0;
 		display: block;
 		background: rgba(0, 0, 0, 0);
+		content: '';
+		cursor: pointer;
 	}
 }
 
 .jodit-resizer {
-	width: 100px;
-	height: 100px;
 	position: absolute;
-	border: 1px solid var(--color-border-dark);
 	top: 0;
 	left: 0;
-	pointer-events: none;
+	width: 100px;
+	height: 100px;
+	border: 1px solid var(--color-border-dark);
 	font-size: 0;
+	pointer-events: none;
 
 	* {
 		box-sizing: border-box;
@@ -47,47 +47,52 @@
 
 	> span {
 		position: absolute;
-		left: 50%;
 		top: 50%;
+		left: 50%;
+
 		display: inline-block;
+		overflow: visible;
 		width: var(--viewer_width);
 		height: var(--viewer_height);
-		margin-left: calc(var(--viewer_width) / -2);
 		margin-top: calc(var(--viewer_height) / -2);
-		line-height: var(--viewer_height);
-		font-size: 12px;
-		text-align: center;
-		color: var(--color-white);
+		margin-left: calc(var(--viewer_width) / -2);
+
 		background-color: var(--color-placeholder);
+		color: var(--color-white);
+
+		font-size: 12px;
+		line-height: var(--viewer_height);
+
 		opacity: 0;
+		text-align: center;
 		transition: opacity 0.2s linear;
-		overflow: visible;
 	}
 
 	> i {
 		position: absolute;
-		display: inline-block;
 		z-index: 4;
-		pointer-events: all;
+		display: inline-block;
+
+		width: var(--resizer-handle-size);
+		height: var(--resizer-handle-size);
+
 		border: 1px solid var(--color-border-dark);
 		background-color: var(--color-background-gray);
+		pointer-events: all;
 
 		&:hover {
 			background-color: var(--color-background-gray-hover);
 		}
 
-		width: var(--resizer-handle-size);
-		height: var(--resizer-handle-size);
-
 		&:nth-child(1) {
-			left: calc(var(--resizer-handle-size) / -2);
 			top: calc(var(--resizer-handle-size) / -2);
+			left: calc(var(--resizer-handle-size) / -2);
 			cursor: nw-resize;
 		}
 
 		&:nth-child(2) {
-			right: calc(var(--resizer-handle-size) / -2);
 			top: calc(var(--resizer-handle-size) / -2);
+			right: calc(var(--resizer-handle-size) / -2);
 			cursor: ne-resize;
 		}
 
@@ -98,8 +103,8 @@
 		}
 
 		&:nth-child(4) {
-			left: calc(var(--resizer-handle-size) / -2);
 			bottom: calc(var(--resizer-handle-size) / -2);
+			left: calc(var(--resizer-handle-size) / -2);
 			cursor: sw-resize;
 		}
 

package/src/plugins/search/search.less

@@ -16,6 +16,12 @@
 }
 
 .jodit-search {
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 0;
+	height: 0;
+
 	visibility: hidden;
 
 	&_sticky {
@@ -26,33 +32,28 @@
 		visibility: visible;
 	}
 
-	position: absolute;
-	top: 0;
-	right: 0;
-	width: 0;
-	height: 0;
-
 	.jodit-search__box {
-		width: var(--width-search);
-		max-width: 100vw;
+		position: absolute;
+		right: 0;
 
 		display: flex;
 
-		position: absolute;
-		right: 0;
-		background-color: var(--color-panel);
+		width: var(--width-search);
+		max-width: 100vw;
+		padding: calc(var(--padding-default) / 2);
+
 		border: solid var(--color-border);
 		border-width: 0 0 1px 1px;
-		padding: calc(var(--padding-default) / 2);
+		background-color: var(--color-panel);
 
 		input {
-			margin: 0;
 			width: 100%;
 			height: 100%;
+			padding: 0 var(--padding-default);
 			border: 0;
+			margin: 0;
 			background-color: transparent;
 			outline: none;
-			padding: 0 var(--padding-default);
 
 			&[data-ref='replace'] {
 				display: none;
@@ -75,36 +76,35 @@
 		}
 
 		.jodit-search__counts {
-			width: var(--width-search-count-box);
 			display: flex;
-			justify-content: center;
+			width: var(--width-search-count-box);
 			align-items: center;
-			color: var(--color-border);
+			justify-content: center;
 			border-left: 1px solid var(--color-border);
+			color: var(--color-border);
 		}
 
 		.jodit-search__buttons {
-			flex: 1;
-			padding-left: 0;
 			display: flex;
-			justify-content: center;
+			flex: 1;
 			align-items: center;
+			justify-content: center;
+			padding-left: 0;
 
 			button {
 				width: 32%;
+				height: 100%;
+				border: 1px solid transparent;
 				margin-right: 1%;
+				background-color: transparent;
 
 				&[data-ref='replace-btn'] {
+					display: none;
 					width: 100%;
 					border: 1px solid var(--color-border);
 					margin-top: 2px;
-					display: none;
 				}
 
-				height: 100%;
-				border: 1px solid transparent;
-				background-color: transparent;
-
 				&:hover {
 					background-color: var(--color-background-button-hover);
 				}

package/src/plugins/source/source.less

@@ -12,12 +12,12 @@
 }
 
 .jodit-source {
-	display: none;
 	position: relative;
-	background-color: var(--color-source-area);
+	display: none;
+	overflow: auto;
 	min-height: 100%;
 	flex: auto;
-	overflow: auto;
+	background-color: var(--color-source-area);
 
 	.jodit-source__mirror-fake {
 		min-height: 100%;
@@ -41,8 +41,8 @@
 
 .jodit-container.jodit_split_mode {
 	.jodit-workplace {
-		flex-wrap: nowrap;
 		flex-direction: row;
+		flex-wrap: nowrap;
 	}
 
 	.jodit-wysiwyg,
@@ -55,26 +55,26 @@
 }
 
 .jodit-source__mirror {
-	border: 0;
+	z-index: 2;
+	overflow: auto;
 	width: 100%;
 	height: 100%;
-	background: var(--color-source-area);
-	margin: 0;
-	resize: none;
+	min-height: 100%;
 	box-sizing: border-box;
+	padding: var(--padding-default);
+	border: 0;
+	margin: 0;
+	background: var(--color-source-area);
+	box-shadow: none;
 	color: #f0f0f0;
+	line-height: 1.5;
 	outline: none;
+	resize: none;
+	tab-size: 2em;
 
 	.fontSource();
 
-	line-height: 1.5;
-	box-shadow: none;
-	overflow: auto;
-	z-index: 2;
-	padding: var(--padding-default);
 	white-space: pre-wrap;
-	tab-size: 2em;
-	min-height: 100%;
 
 	&::selection {
 		background: var(--color-selection-area);

package/src/plugins/xpath/xpath.less

@@ -14,14 +14,14 @@
 
 	&__item {
 		display: flex;
-		line-height: calc(var(--font-size-small) - 1px);
 		height: var(--font-size-small);
+		line-height: calc(var(--font-size-small) - 1px);
 
 		a {
-			font-size: var(--font-size-small);
-			color: var(--color-default);
 			padding: 0 3px;
 			margin-left: 2px;
+			color: var(--color-default);
+			font-size: var(--font-size-small);
 			outline: 0;
 		}
 	}

package/src/styles/form.less

@@ -7,6 +7,15 @@
 @import (reference) './variables';
 @import (reference) './mixins';
 
+:root {
+	--switche-width: 60px;
+	--switche-height: 32px;
+	--switche-slider-margin: 4px;
+	--switche-slider-size: calc(
+		var(--switche-height) - var(--switche-slider-margin) * 2
+	);
+}
+
 .jodit-form {
 	.font();
 
@@ -201,15 +210,10 @@
 }
 
 .jodi-switcher {
-	--width: 60px;
-	--height: 32px;
-	--slider-margin: 4px;
-	--slider-size: calc(var(--height) - var(--slider-margin) * 2);
-
 	position: relative;
 	display: inline-block;
-	width: var(--width);
-	height: var(--height);
+	width: var(--switche-width);
+	height: var(--switche-height);
 
 	input {
 		width: 0;
@@ -217,23 +221,23 @@
 		opacity: 0;
 	}
 
-	&__slider {
+	& &__slider {
 		position: absolute;
 		top: 0;
 		right: 0;
 		bottom: 0;
 		left: 0;
 		background-color: var(--color-gray);
-		border-radius: var(--height);
+		border-radius: var(--switche-height);
 		cursor: pointer;
 		transition: 0.4s;
 
 		&:before {
 			position: absolute;
-			bottom: var(--slider-margin);
-			left: var(--slider-margin);
-			width: var(--slider-size);
-			height: var(--slider-size);
+			bottom: var(--switche-slider-margin);
+			left: var(--switche-slider-margin);
+			width: var(--switche-slider-size);
+			height: var(--switche-slider-size);
 			background-color: white;
 			border-radius: 50%;
 			content: '';
@@ -247,7 +251,8 @@
 		&:before {
 			transform: translateX(
 				calc(
-					var(--width) - var(--slider-margin) * 2 - var(--slider-size)
+					var(--switche-width) - var(--switche-slider-margin) * 2 -
+						var(--switche-slider-size)
 				)
 			);
 		}

package/src/styles/modules/button-group.less

@@ -27,15 +27,15 @@
 	input:first-child + button,
 	button:first-child {
 		border-right: 0;
-		border-top-right-radius: 0;
 		border-bottom-right-radius: 0;
+		border-top-right-radius: 0;
 	}
 
 	input:last-child + button,
 	button:last-child {
 		border-left: 0;
-		border-top-left-radius: 0;
 		border-bottom-left-radius: 0;
+		border-top-left-radius: 0;
 	}
 
 	input[type='checkbox'] {

package/src/styles/modules/icon.less

@@ -14,26 +14,27 @@
 }
 
 .jodit-icon_loader {
-	background: data-uri('../icons/loader.png') no-repeat center;
-	background-size: 100% 100%;
+	display: inline-block;
 	width: var(--icon-loader-size);
 	height: var(--icon-loader-size);
-	display: inline-block;
+	animation: rotate 2s ease-out 0s infinite;
+	background: data-uri('../icons/loader.png') no-repeat center;
+	background-size: 100% 100%;
 	vertical-align: middle;
 	will-change: transform;
-	animation: rotate 2s ease-out 0s infinite;
 }
 
 .jodit-icon {
+	overflow: visible;
 	.size(@icon-middle-size);
 
+	background: center no-repeat;
+	background-size: contain;
+
 	fill: var(--color-icon);
 	stroke: var(--color-icon);
 
 	transform-origin: 0 0 !important;
-	overflow: visible;
-	background: center no-repeat;
-	background-size: contain;
 }
 
 .jodit-icon_close {
@@ -41,8 +42,8 @@
 }
 
 svg.jodit-icon {
-	isolation: isolate;
 	height: auto;
+	isolation: isolate;
 }
 
 .jodit-icon_text {

package/src/types/ajax.d.ts

@@ -38,17 +38,45 @@ export interface IAjax extends IDestructible {
 }
 
 export interface AjaxOptions {
+	/**
+	 * json or text The type of data that you're expecting back
+	 * from the server. if `json` the return value passes through the `JSON.parse`
+	 */
 	dataType?: string;
+
+	/**
+	 * The HTTP method toWYSIWYG use for the request
+	 * (e.g. "POST", "GET", "PUT")
+	 */
 	method?: string;
 
+	/**
+	 * A string containing the URL toWYSIWYG which the request is sent.
+	 */
 	url?: string;
 
+	/**
+	 * Data toWYSIWYG be sent toWYSIWYG the server.
+	 * It is converted toWYSIWYG a query string, if not already a string. It's appended toWYSIWYG the url for GET-requests.
+	 */
 	data: DataVariant;
 
+	/**
+	 * When sending data toWYSIWYG the server, use this content type. Default is "application/x-www-form-urlencoded;
+	 * charset=UTF-8", which is fine for most cases
+	 */
 	contentType?: string | false;
 
+	/**
+	 * An object of additional header key/value pairs toWYSIWYG send along
+	 * with requests using the XMLHttpRequest transport. Uses in {@link FileBrowser|FileBrowser}
+	 * and {@link Uploader|Uploader}
+	 */
 	headers?: IDictionary<string> | null;
 
+	/**
+	 * Enable or disable Access-Control-Allow-Credentials client side. Useful for cross domain requests
+	 */
 	withCredentials?: boolean;
 
 	queryBuild?: (

package/src/types/async.d.ts

@@ -4,9 +4,10 @@
  * Copyright (c) 2013-2021 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
 
-import { CallbackFunction, IDestructible } from './types';
+import type { CallbackFunction, IDestructible } from './types';
 
 export type ITimeout = number | (() => number);
+
 export interface IAsyncParams {
 	timeout?: number;
 	label?: string;
@@ -54,7 +55,7 @@ export interface IAsync extends IDestructible {
 		firstCallImmediately?: boolean
 	): CallbackFunction;
 
-	requestIdleCallback(fn: CallbackFunction): number;
-	requestIdlePromise(): Promise<number>;
+	requestIdleCallback(fn: IdleRequestCallback): number;
+	requestIdlePromise(): RejectablePromise<number>;
 	cancelIdleCallback(request: number): void;
 }

package/src/types/events.d.ts

@@ -26,6 +26,21 @@ interface IEventsNative extends IDestructible {
 	current: string;
 	currents: string[];
 
+	/**
+	 * Doesn't start any handler
+	 */
+	mute(event?: string): IEventsNative;
+
+	/**
+	 * No handlers are triggered for the event
+	 */
+	isMuted(event?: string): boolean;
+
+	/**
+	 * Returns event handling
+	 */
+	unmute(event?: string): IEventsNative;
+
 	/**
 	 * Sets the handler for the specified event ( Event List ) for a given element .
 	 *

package/tsconfig.json

@@ -31,7 +31,7 @@
 
 		"importHelpers": true,
 
-		"lib": ["es5", "esnext", "dom", "scripthost"]
+		"lib": ["es5", "esnext", "dom", "scripthost", "es2015.iterable"]
 	},
 	"include": [
     "./src/types/"