jodit 3.22.1 → 3.23.2

package/src/jodit.ts

@@ -27,13 +27,15 @@ import type {
 	IFileBrowserCallBackData,
 	IStorage,
 	CanPromise,
-	IHistory
-} from './types';
+	IHistory,
+	AjaxOptions,
+	IResponse
+} from 'jodit/types';
 
-import type * as Modules from './modules/';
+import type * as Modules from 'jodit/modules/';
 
-import { Config } from './config';
-import * as constants from './core/constants';
+import { Config } from 'jodit/config';
+import * as constants from 'jodit/core/constants';
 
 import {
 	Create,
@@ -44,7 +46,7 @@ import {
 	StatusBar,
 	STATUSES,
 	ViewWithToolbar
-} from './modules/';
+} from 'jodit/modules/';
 
 import {
 	asArray,
@@ -64,14 +66,26 @@ import {
 	kebabCase,
 	isJoditObject,
 	isNumber
-} from './core/helpers/';
+} from 'jodit/core/helpers/';
 
-import { Storage } from './core/storage/';
+import { Storage } from 'jodit/core/storage/';
 
 import { lang } from 'jodit/core/constants';
-import { instances, pluginSystem, modules, eventEmitter } from './core/global';
-import { autobind, cache, throttle, watch, derive } from './core/decorators';
+import {
+	instances,
+	pluginSystem,
+	modules,
+	eventEmitter
+} from 'jodit/core/global';
+import {
+	autobind,
+	cache,
+	throttle,
+	watch,
+	derive
+} from 'jodit/core/decorators';
 import { Dlgs } from 'jodit/core/traits';
+import { Ajax } from 'jodit/core/request';
 
 const __defaultStyleDisplayKey = 'data-jodit-default-style-display';
 const __defaultClassesKey = 'data-jodit-default-classes';
@@ -217,7 +231,7 @@ export class Jodit extends ViewWithToolbar implements IJodit, Dlgs {
 	 */
 	editorIsActive = false;
 
-	private setPlaceField(field: keyof IWorkPlace, value: any): void {
+	private __setPlaceField(field: keyof IWorkPlace, value: any): void {
 		if (!this.currentPlace) {
 			this.currentPlace = {} as any;
 			this.places = [this.currentPlace];
@@ -241,7 +255,7 @@ export class Jodit extends ViewWithToolbar implements IJodit, Dlgs {
 	}
 
 	set editor(editor: HTMLDivElement | HTMLBodyElement) {
-		this.setPlaceField('editor', editor);
+		this.__setPlaceField('editor', editor);
 	}
 
 	/**
@@ -252,7 +266,7 @@ export class Jodit extends ViewWithToolbar implements IJodit, Dlgs {
 	}
 
 	override set container(container: HTMLDivElement) {
-		this.setPlaceField('container', container);
+		this.__setPlaceField('container', container);
 	}
 
 	/**
@@ -277,7 +291,7 @@ export class Jodit extends ViewWithToolbar implements IJodit, Dlgs {
 	}
 
 	set iframe(iframe: HTMLIFrameElement | void) {
-		this.setPlaceField('iframe', iframe);
+		this.__setPlaceField('iframe', iframe);
 	}
 
 	get history(): IHistory {
@@ -299,7 +313,7 @@ export class Jodit extends ViewWithToolbar implements IJodit, Dlgs {
 	}
 
 	set editorWindow(win: Window) {
-		this.setPlaceField('editorWindow', win);
+		this.__setPlaceField('editorWindow', win);
 	}
 
 	/**
@@ -331,7 +345,7 @@ export class Jodit extends ViewWithToolbar implements IJodit, Dlgs {
 	}
 
 	override set options(opt: Config) {
-		this.setPlaceField('options', opt);
+		this.__setPlaceField('options', opt);
 	}
 
 	readonly selection!: Select;
@@ -460,6 +474,7 @@ export class Jodit extends ViewWithToolbar implements IJodit, Dlgs {
 	/**
 	 * This is an internal method, do not use it in your applications.
 	 * @private
+	 * @internal
 	 */
 	__imdSynchronizeValues(): void {
 		this.setEditorValue();
@@ -581,7 +596,7 @@ export class Jodit extends ViewWithToolbar implements IJodit, Dlgs {
 			new_value = this.getEditorValue();
 
 		if (
-			!this.isSilentChange &&
+			!this.__isSilentChange &&
 			old_value !== new_value &&
 			this.__callChangeCount < constants.SAFE_COUNT_CHANGE_CALL
 		) {
@@ -810,7 +825,7 @@ export class Jodit extends ViewWithToolbar implements IJodit, Dlgs {
 		result = this.e.fire('beforeCommand', command, showUI, value, ...args);
 
 		if (result !== false) {
-			result = this.execCustomCommands(command, showUI, value, ...args);
+			result = this.__execCustomCommands(command, showUI, value, ...args);
 		}
 
 		if (result !== false) {
@@ -846,7 +861,7 @@ export class Jodit extends ViewWithToolbar implements IJodit, Dlgs {
 	/**
 	 * Don't raise a change event
 	 */
-	private isSilentChange: boolean = false;
+	private __isSilentChange: boolean = false;
 
 	/**
 	 * Exec native command
@@ -856,16 +871,16 @@ export class Jodit extends ViewWithToolbar implements IJodit, Dlgs {
 		showUI?: boolean,
 		value?: null | any
 	): boolean {
-		this.isSilentChange = true;
+		this.__isSilentChange = true;
 
 		try {
 			return this.ed.execCommand(command, showUI, value);
 		} finally {
-			this.isSilentChange = false;
+			this.__isSilentChange = false;
 		}
 	}
 
-	private execCustomCommands<C extends string>(
+	private __execCustomCommands<C extends string>(
 		commandName: C,
 		second?: any,
 		third?: null | any,
@@ -1125,17 +1140,27 @@ export class Jodit extends ViewWithToolbar implements IJodit, Dlgs {
 		return this.o.readonly;
 	}
 
+	focus(): void {
+		if (this.getMode() !== constants.MODE_SOURCE) {
+			this.s.focus();
+		}
+	}
+
+	get isFocused(): boolean {
+		return this.s.isFocused();
+	}
+
 	/**
 	 * Hook before init
 	 */
-	beforeInitHook(): CanPromise<void> {
+	protected beforeInitHook(): CanPromise<void> {
 		// do nothing
 	}
 
 	/**
 	 * Hook after init
 	 */
-	afterInitHook(): void {
+	protected afterInitHook(): void {
 		// do nothing
 	}
 
@@ -1197,7 +1222,7 @@ export class Jodit extends ViewWithToolbar implements IJodit, Dlgs {
 			}
 		});
 
-		this.e.on('prepareWYSIWYGEditor', this.prepareWYSIWYGEditor);
+		this.e.on('prepareWYSIWYGEditor', this.__prepareWYSIWYGEditor);
 
 		this.selection = new Select(this);
 
@@ -1241,7 +1266,7 @@ export class Jodit extends ViewWithToolbar implements IJodit, Dlgs {
 	currentPlace!: IWorkPlace;
 	places!: IWorkPlace[];
 
-	private readonly elementToPlace: Map<HTMLElement, IWorkPlace> = new Map();
+	private readonly __elementToPlace: Map<HTMLElement, IWorkPlace> = new Map();
 
 	/**
 	 * Create and init current editable place
@@ -1281,6 +1306,11 @@ export class Jodit extends ViewWithToolbar implements IJodit, Dlgs {
 		container.classList.add('jodit');
 		container.classList.add('jodit-container');
 		container.classList.add(`jodit_theme_${this.o.theme || 'default'}`);
+		addClassNames(this.o.className, container);
+
+		if (this.o.containerStyle) {
+			css(container, this.o.containerStyle);
+		}
 
 		const { styleValues } = this.o;
 
@@ -1363,14 +1393,14 @@ export class Jodit extends ViewWithToolbar implements IJodit, Dlgs {
 			editorWindow: this.ow
 		};
 
-		this.elementToPlace.set(editor, currentPlace);
+		this.__elementToPlace.set(editor, currentPlace);
 
 		this.setCurrentPlace(currentPlace);
 		this.places.push(currentPlace);
 
 		this.setNativeEditorValue(this.getElementValue()); // Init value
 
-		const initResult = this.initEditor(buffer);
+		const initResult = this.__initEditor(buffer);
 
 		const opt = this.options;
 
@@ -1384,8 +1414,8 @@ export class Jodit extends ViewWithToolbar implements IJodit, Dlgs {
 			}
 
 			// in initEditor - the editor could change
-			if (!this.elementToPlace.get(this.editor)) {
-				this.elementToPlace.set(this.editor, currentPlace);
+			if (!this.__elementToPlace.get(this.editor)) {
+				this.__elementToPlace.set(this.editor, currentPlace);
 			}
 
 			this.e.fire('afterAddPlace', currentPlace);
@@ -1394,7 +1424,6 @@ export class Jodit extends ViewWithToolbar implements IJodit, Dlgs {
 		return callPromise(initResult, init);
 	}
 
-	/** @override */
 	protected override addDisclaimer(elm: HTMLElement): void {
 		this.workplace.appendChild(elm);
 	}
@@ -1420,8 +1449,8 @@ export class Jodit extends ViewWithToolbar implements IJodit, Dlgs {
 		}
 	}
 
-	private initEditor(buffer: null | string): void | Promise<any> {
-		const result = this.createEditor();
+	private __initEditor(buffer: null | string): void | Promise<any> {
+		const result = this.__createEditor();
 
 		return callPromise(result, () => {
 			if (this.isInDestruct) {
@@ -1483,7 +1512,7 @@ export class Jodit extends ViewWithToolbar implements IJodit, Dlgs {
 	/**
 	 * Create main DIV element and replace source textarea
 	 */
-	private createEditor(): void | Promise<any> {
+	private __createEditor(): void | Promise<any> {
 		const defaultEditorArea = this.editor;
 
 		const stayDefault: boolean | undefined | Promise<void> = this.e.fire(
@@ -1500,6 +1529,11 @@ export class Jodit extends ViewWithToolbar implements IJodit, Dlgs {
 				Dom.safeRemove(defaultEditorArea);
 			}
 
+			addClassNames(
+				this.o.editorClassName || this.o.editorCssClass,
+				this.editor
+			);
+
 			if (this.o.editorCssClass) {
 				this.editor.classList.add(this.o.editorCssClass);
 			}
@@ -1517,7 +1551,7 @@ export class Jodit extends ViewWithToolbar implements IJodit, Dlgs {
 				})
 				.on('blur', () => (this.editorIsActive = false));
 
-			this.prepareWYSIWYGEditor();
+			this.__prepareWYSIWYGEditor();
 
 			// direction
 			if (this.o.direction) {
@@ -1545,7 +1579,7 @@ export class Jodit extends ViewWithToolbar implements IJodit, Dlgs {
 	 * Attach some native event listeners
 	 */
 	@autobind
-	private prepareWYSIWYGEditor(): void {
+	private __prepareWYSIWYGEditor(): void {
 		const { editor } = this;
 
 		// direction
@@ -1560,7 +1594,7 @@ export class Jodit extends ViewWithToolbar implements IJodit, Dlgs {
 		// proxy events
 		this.e
 			.on(editor, 'mousedown touchstart focus', () => {
-				const place = this.elementToPlace.get(editor);
+				const place = this.__elementToPlace.get(editor);
 
 				if (place) {
 					this.setCurrentPlace(place);
@@ -1572,7 +1606,7 @@ export class Jodit extends ViewWithToolbar implements IJodit, Dlgs {
 				'selectionchange selectionstart keydown keyup input keypress dblclick mousedown mouseup ' +
 					'click copy cut dragstart drop dragover paste resize touchstart touchend focus blur',
 				(event: Event): false | void => {
-					if (this.o.readonly || this.isSilentChange) {
+					if (this.o.readonly || this.__isSilentChange) {
 						return;
 					}
 
@@ -1595,6 +1629,33 @@ export class Jodit extends ViewWithToolbar implements IJodit, Dlgs {
 			);
 	}
 
+	fetch<Response extends object = any>(
+		url: string,
+		options?: Partial<AjaxOptions>
+	): Promise<IResponse<Response>> {
+		const ajax = new Ajax<Response>(
+			{
+				url,
+				...options
+			},
+			this.o.defaultAjaxOptions
+		);
+
+		const destroy = (): void => {
+			this.e.off('beforeDestruct', destroy);
+			this.progressbar.progress(100).hide();
+			ajax.destruct();
+		};
+		this.e.one('beforeDestruct', destroy);
+
+		this.progressbar.show().progress(30);
+		const promise = ajax.send();
+
+		promise.finally(destroy).catch(() => null);
+
+		return promise;
+	}
+
 	/**
 	 * Jodit's Destructor. Remove editor, and return source input
 	 */
@@ -1605,7 +1666,7 @@ export class Jodit extends ViewWithToolbar implements IJodit, Dlgs {
 
 		this.setStatus(STATUSES.beforeDestruct);
 
-		this.elementToPlace.clear();
+		this.__elementToPlace.clear();
 
 		if (!this.editor) {
 			return;
@@ -1695,3 +1756,9 @@ export class Jodit extends ViewWithToolbar implements IJodit, Dlgs {
 		super.destruct();
 	}
 }
+
+function addClassNames(className: string | false, elm: HTMLElement): void {
+	if (className) {
+		className.split(/\s+/).forEach(cn => elm.classList.add(cn));
+	}
+}

package/src/modules/file-browser/README.md

@@ -205,7 +205,6 @@ const response = {
 
 -   filebrowser.ajax.url='' Address entry point on the server for AJAX connection
 -   filebrowser.ajax.data={} Default data to send to the server
--   filebrowser.ajax.dataType='json' The format of the returned data
 -   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.
@@ -254,7 +253,6 @@ const options = {
 		headers: {},
 		method: 'POST',
 		processData: true,
-		dataType: 'json',
 		headers: {},
 		prepareData: function (data) {
 			return data;
@@ -314,7 +312,6 @@ Jodit.make('#editor2', {
 		ajax: {
 			url: 'ajax.php',
 			method: 'GET',
-			dataType: 'text',
 			headers: {
 				'X-CSRF-Token': document
 					.querySelector('meta[name="csrf-token"]')

package/src/modules/file-browser/config.ts

@@ -227,7 +227,6 @@ Config.prototype.filebrowser = {
 		...Config.prototype.defaultAjaxOptions,
 
 		url: '',
-		async: true,
 
 		data: {},
 		cache: true,
@@ -235,7 +234,6 @@ Config.prototype.filebrowser = {
 
 		method: 'POST',
 		processData: true,
-		dataType: 'json',
 
 		headers: {},
 

package/src/modules/file-browser/data-provider.ts

@@ -101,7 +101,7 @@ export default class DataProvider implements IFileBrowserDataProvider {
 			opts.data = opts.prepareData.call(this, opts.data as IDictionary);
 		}
 
-		const ajax = new Ajax<T>(this.parent, opts);
+		const ajax = new Ajax<T>(opts);
 		ai.set(name, ajax);
 
 		const promise = ajax.send();

package/src/modules/history/snapshot.ts

@@ -207,9 +207,7 @@ export class Snapshot extends ViewComponent<IJodit> implements ISnapshot {
 				this.j.value = snapshot.html;
 			}
 
-			if (this.j.s.isFocused()) {
-				this.restoreOnlySelection(snapshot);
-			}
+			this.restoreOnlySelection(snapshot);
 
 			this.restoreScrollState(scroll);
 		});

package/src/modules/uploader/helpers/send.ts

@@ -24,7 +24,7 @@ export function send(
 	const sendData = (
 		request: FormData | IDictionary<string> | string
 	): Promise<any> => {
-		const ajax = new Ajax<IUploaderAnswer>(uploader.j, {
+		const ajax = new Ajax<IUploaderAnswer>({
 			xhr: (): XMLHttpRequest => {
 				const xhr = new XMLHttpRequest();
 
@@ -69,7 +69,6 @@ export function send(
 			headers: uploader.o.headers,
 			queryBuild: uploader.o.queryBuild,
 			contentType: uploader.o.contentType.call(uploader, request),
-			dataType: uploader.o.format || 'json',
 			withCredentials: uploader.o.withCredentials || false
 		});
 
@@ -82,6 +81,8 @@ export function send(
 
 		instances.add(ajax);
 
+		uploader.j.e.one('beforeDestruct', ajax.destruct);
+
 		return ajax
 			.send()
 			.then(resp => resp.json())
@@ -89,6 +90,7 @@ export function send(
 				uploader.o.error.call(uploader, error);
 			})
 			.finally(() => {
+				ajax.destruct();
 				instances?.delete(ajax);
 			});
 	};

package/src/plugins/add-new-line/add-new-line.ts

@@ -159,7 +159,7 @@ export class addNewLine extends Plugin {
 		editor.s.setCursorIn(p);
 		scrollIntoViewIfNeeded(p, editor.editor, editor.ed);
 
-		editor.e.fire('synchro');
+		editor.synchronizeValues();
 		this.hideForce();
 
 		e.preventDefault();

package/src/plugins/bold/README.md

@@ -1,3 +1,13 @@
 # Bold and styles button
 
-Bold/Italic/Strikethrough/Underile/Subscript buttons
+Provide Bold/Italic/Strikethrough/Underline/Subscript/Superscript buttons and commands.
+
+```js
+const editor = Jodit.make('#editor');
+editor.execCommand('bold'); // or press Ctrl+B
+editor.execCommand('italic'); // or press Ctrl+I
+editor.execCommand('underline'); // or press Ctrl+U
+editor.execCommand('strikethrough');
+editor.execCommand('subscript');
+editor.execCommand('superscript');
+```

package/src/plugins/bold/bold.test.js

@@ -8,10 +8,15 @@ describe('Bold plugin', () => {
 	let jodit;
 	beforeEach(() => {
 		jodit = getJodit();
+		jodit.focus();
 		jodit.value = '<p>|<br></p>';
 		setCursorToChar(jodit);
 	});
 
+	afterEach(() => {
+		jodit.destruct();
+	});
+
 	describe('Click bold button', () => {
 		it('Should add empty STRONG element', async () => {
 			clickButton('bold', jodit);
@@ -20,4 +25,34 @@ describe('Bold plugin', () => {
 			expect(jodit.value).eq('<p><strong>|</strong></p>');
 		});
 	});
+
+	describe('Click subscript button', () => {
+		it('Should add empty SUB element', async () => {
+			clickButton('subscript', jodit);
+			jodit.async.requestIdlePromise();
+			replaceCursorToChar(jodit);
+			expect(jodit.value).eq('<p><sub>|</sub></p>');
+		});
+
+		describe('Inside sub tag', () => {
+			it('Should move cursor in the outside from the tag', async () => {
+				jodit.value = '<p><sup>test|</sup></p>';
+				setCursorToChar(jodit);
+				clickButton('superscript', jodit);
+				jodit.async.requestIdlePromise();
+				jodit.s.insertHTML('pop');
+				replaceCursorToChar(jodit);
+				expect(jodit.value).eq('<p><sup>test</sup>pop|</p>');
+			});
+		});
+	});
+
+	describe('Click superscript button', () => {
+		it('Should add empty SUP element', async () => {
+			clickButton('superscript', jodit);
+			jodit.async.requestIdlePromise();
+			replaceCursorToChar(jodit);
+			expect(jodit.value).eq('<p><sup>|</sup></p>');
+		});
+	});
 });

package/src/plugins/bold/bold.ts

@@ -10,57 +10,14 @@
  * @module plugins/bold
  */
 
-import type { IDictionary, IJodit, IControlType } from 'jodit/types';
+import type { IDictionary, IJodit, IControlType, CanUndef } from 'jodit/types';
 import { Config } from 'jodit/config';
 import { isArray } from 'jodit/core/helpers';
 import { pluginSystem } from 'jodit/core/global';
 import { Icon } from 'jodit/core/ui/icon';
 
-Config.prototype.controls.subscript = {
-	tags: ['sub'],
-	tooltip: 'subscript'
-} as IControlType;
-
-Config.prototype.controls.superscript = {
-	tags: ['sup'],
-	tooltip: 'superscript'
-} as IControlType;
-
-Config.prototype.controls.bold = {
-	tagRegExp: /^(strong|b)$/i,
-	tags: ['strong', 'b'],
-	css: {
-		'font-weight': ['bold', '700']
-	},
-	tooltip: 'Bold'
-} as IControlType;
-
-Config.prototype.controls.italic = {
-	tagRegExp: /^(em|i)$/i,
-	tags: ['em', 'i'],
-	css: {
-		'font-style': 'italic'
-	},
-	tooltip: 'Italic'
-} as IControlType;
-
-Config.prototype.controls.underline = {
-	tagRegExp: /^(u)$/i,
-	tags: ['u'],
-	css: {
-		'text-decoration-line': 'underline'
-	},
-	tooltip: 'Underline'
-} as IControlType;
-
-Config.prototype.controls.strikethrough = {
-	tagRegExp: /^(s)$/i,
-	tags: ['s'],
-	css: {
-		'text-decoration-line': 'line-through'
-	},
-	tooltip: 'Strike through'
-} as IControlType;
+import './interface';
+import './config';
 
 /**
  * Adds `bold`,` strikethrough`, `underline` and` italic` buttons to Jodit
@@ -74,10 +31,15 @@ export function bold(editor: IJodit): void {
 				| IDictionary<string | string[]>
 				| IDictionary<(editor: IJodit, value: string) => boolean> = {
 				...control.css
-			},
-			cssRules: IDictionary<string> = {};
+			};
+
+		let cssRules: CanUndef<IDictionary<string>>;
 
 		Object.keys(cssOptions).forEach((key: string) => {
+			if (!cssRules) {
+				cssRules = {};
+			}
+
 			cssRules[key] = isArray(cssOptions[key])
 				? (cssOptions[key] as any)[0]
 				: cssOptions[key];
@@ -87,7 +49,7 @@ export function bold(editor: IJodit): void {
 			element: control.tags ? control.tags[0] : undefined
 		});
 
-		editor.e.fire('synchro');
+		editor.synchronizeValues();
 
 		return false;
 	};
@@ -124,6 +86,14 @@ export function bold(editor: IJodit): void {
 
 		.registerCommand('strikethrough', {
 			exec: callBack
+		})
+
+		.registerCommand('subscript', {
+			exec: callBack
+		})
+
+		.registerCommand('superscript', {
+			exec: callBack
 		});
 }