jodit 3.19.4 → 3.20.2

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

@@ -0,0 +1,132 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * Released under MIT see LICENSE.txt in the project root for license information.
+ * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ */
+
+/**
+ * [[include:plugins/tooltip/README.md]]
+ * @packageDocumentation
+ * @module plugins/tooltip
+ */
+
+import './tooltip.less';
+
+import type { IPoint, IViewBased } from 'jodit/types';
+import { css, dataBind } from 'jodit/core/helpers';
+import { getContainer } from 'jodit/core/global';
+import { autobind } from 'jodit/core/decorators';
+import { UIElement } from '../../element';
+
+export class UITooltip extends UIElement {
+	private __isOpened = false;
+
+	className(): string {
+		return 'UITooltip';
+	}
+
+	protected constructor(view: IViewBased) {
+		super(view);
+		getContainer(view, UITooltip).appendChild(this.container);
+
+		let timeout = 0;
+
+		view.e
+			.off('.tooltip')
+			.on(
+				'showTooltip.tooltip',
+				(getPoint: () => IPoint, content: string) => {
+					view.async.clearTimeout(timeout);
+					this.__open(getPoint, content);
+				}
+			)
+
+			.on('delayShowTooltip.tooltip', this.__delayOpen)
+
+			.on('escape.tooltip', this.__close)
+			.on(
+				'hideTooltip.tooltip change.tooltip scroll.tooltip changePlace.tooltip hidePopup.tooltip closeAllPopups.tooltip',
+				() => {
+					this.j.async.clearTimeout(this.__delayShowTimeout);
+
+					timeout = view.async.setTimeout(
+						this.__close,
+						this.j.defaultTimeout
+					);
+				}
+			);
+	}
+
+	private __useCount: number = 1;
+
+	/**
+	 * Creates only one instance of the tooltip for the container
+	 */
+	static make(view: IViewBased): UITooltip {
+		let instance = dataBind<UITooltip>(view, 'ui-tooltip');
+		if (instance) {
+			instance.__useCount += 1;
+			return instance;
+		}
+		instance = new UITooltip(view);
+		dataBind<UITooltip>(view, 'ui-tooltip', instance);
+		return instance;
+	}
+
+	private __delayShowTimeout: number = 0;
+
+	@autobind
+	private __delayOpen(getPoint: () => IPoint, content: string): void {
+		const to = this.j.o.showTooltipDelay || this.j.defaultTimeout;
+
+		this.j.async.clearTimeout(this.__delayShowTimeout);
+
+		this.__delayShowTimeout = this.j.async.setTimeout(
+			() => this.__open(getPoint, content),
+			{
+				timeout: to,
+				label: 'tooltip'
+			}
+		);
+	}
+
+	private __open(getPoint: () => IPoint, content: string): void {
+		this.setMod('visible', true);
+		this.container.innerHTML = content;
+
+		this.__isOpened = true;
+		this.__setPosition(getPoint);
+	}
+
+	private __setPosition(getPoint: () => IPoint): void {
+		const point = getPoint();
+
+		css(this.container, {
+			left: point.x,
+			top: point.y
+		});
+	}
+
+	@autobind
+	private __close(): void {
+		this.j.async.clearTimeout(this.__delayShowTimeout);
+
+		if (this.__isOpened) {
+			this.__isOpened = false;
+			this.setMod('visible', false);
+
+			css(this.container, {
+				left: -5000
+			});
+		}
+	}
+
+	override destruct(): void {
+		this.__useCount--;
+		if (!this.__useCount) {
+			this.j?.e.off('.tooltip');
+			this.__close();
+			super.destruct();
+		}
+	}
+}

package/src/core/ui/element.ts

@@ -12,15 +12,18 @@ import type {
 	IDictionary,
 	IUIElement,
 	IViewBased,
-	Nullable,
-	ModType
+	Nullable
 } from 'jodit/types';
 import { Component, ViewComponent } from 'jodit/core/component';
 import { Dom } from 'jodit/core/dom/dom';
 import { Elms, Mods } from 'jodit/core/traits';
 import { isString } from 'jodit/core/helpers/checker/is-string';
 import { Icon } from 'jodit/core/ui/icon';
+import { derive } from 'jodit/core/decorators';
 
+export interface UIElement extends Mods, Elms {}
+
+@derive(Mods, Elms)
 export abstract class UIElement<T extends IViewBased = IViewBased>
 	extends ViewComponent<T>
 	implements IUIElement, Mods, Elms
@@ -112,31 +115,6 @@ export abstract class UIElement<T extends IViewBased = IViewBased>
 
 	readonly mods: IDictionary<string | boolean | null> = {};
 
-	/** @see [[Mods.setMod]] */
-	setMod(
-		name: string,
-		value: ModType,
-		container: HTMLElement = this.container
-	): this {
-		Mods.setMod.call(this, name, value, container);
-		return this;
-	}
-
-	/** @see [[Mods.getMod]] */
-	getMod(name: string): ModType {
-		return Mods.getMod.call(this, name);
-	}
-
-	/** @see [[Elms.getElm]]*/
-	getElm(elementName: string): Nullable<HTMLElement> {
-		return Elms.getElm.call(this, elementName);
-	}
-
-	/** @see [[Elms.getElms]]*/
-	getElms(elementName: string): HTMLElement[] {
-		return Elms.getElms.call(this, elementName);
-	}
-
 	/**
 	 * Update UI from state
 	 */

package/src/core/ui/group/group.test.js

@@ -0,0 +1,44 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * Released under MIT see LICENSE.txt in the project root for license information.
+ * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ */
+
+describe('Test group ui', () => {
+	const { UIGroup, UIButton } = Jodit.modules;
+	let editor;
+	beforeEach(() => {
+		editor = getJodit();
+	});
+
+	describe('UIGroup', () => {
+		describe('setMod', () => {
+			describe('syncMod === true', () => {
+				it('should set mod for all children', () => {
+					const group = new UIGroup(editor);
+					group.syncMod = true;
+					const button = new UIButton(editor);
+					const button2 = new UIButton(editor);
+					group.append(button);
+					group.append(button2);
+					group.setMod('test', 123);
+					expect(button.getMod('test')).eq(123);
+					expect(button2.getMod('test')).eq(123);
+				});
+			});
+
+			describe('syncMod === false', () => {
+				it('should not set mod for all children', () => {
+					const group = new UIGroup(editor);
+					const button = new UIButton(editor);
+					const button2 = new UIButton(editor);
+					group.append(button);
+					group.append(button2);
+					group.setMod('test', 123);
+					expect(button.getMod('test')).not.eq(123);
+					expect(button2.getMod('test')).not.eq(123);
+				});
+			});
+		});
+	});
+});

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

@@ -16,7 +16,8 @@ import type {
 	IUIButtonState,
 	IUIElement,
 	IUIGroup,
-	IViewBased
+	IViewBased,
+	ModType
 } from 'jodit/types';
 import type { IDictionary } from 'jodit/types';
 import { UIElement } from '../element';
@@ -58,6 +59,7 @@ export class UIGroup<T extends IViewBased = IViewBased>
 			if (isArray(elm)) {
 				stack.push(...elm);
 			} else if (Component.isInstanceOf<UIGroup>(elm, UIGroup)) {
+				// @ts-ignore
 				stack.push(...elm.elements);
 			} else {
 				elm && result.push(elm);
@@ -108,12 +110,10 @@ export class UIGroup<T extends IViewBased = IViewBased>
 	}
 
 	/** @override */
-	override setMod(name: string, value: string | boolean | null): this {
+	override afterSetMod(name: string, value: ModType): void {
 		if (this.syncMod) {
 			this.elements.forEach(elm => elm.setMod(name, value));
 		}
-
-		return super.setMod(name, value);
 	}
 
 	/**

package/src/core/view/view-with-toolbar.ts

@@ -29,7 +29,7 @@ import { autobind } from 'jodit/core/decorators';
 
 export abstract class ViewWithToolbar extends View implements IViewWithToolbar {
 	TOOLBAR!: IToolbarCollection;
-	toolbar: this['TOOLBAR'] = makeCollection(this);
+	readonly toolbar: this['TOOLBAR'] = makeCollection(this);
 
 	private defaultToolbarContainer: HTMLElement =
 		this.c.div('jodit-toolbar__box');
@@ -154,7 +154,7 @@ export abstract class ViewWithToolbar extends View implements IViewWithToolbar {
 		}
 	}
 
-	override isJodit: boolean = false;
+	override readonly isJodit: boolean = false;
 
 	/** @override **/
 	protected constructor(

package/src/core/view/view.ts

@@ -39,38 +39,21 @@ import {
 	Create,
 	Dom,
 	ViewComponent
-} from '../../modules';
-import { modules } from '../global';
-import { hook } from 'jodit/core/decorators';
-import { Elms, Mods } from '../traits';
-import { EventEmitter } from '../event-emitter';
+} from 'jodit/modules';
+import { modules } from 'jodit/core/global';
+import { hook, derive } from 'jodit/core/decorators';
+import { Elms, Mods } from 'jodit/core/traits';
+import { EventEmitter } from 'jodit/core/event-emitter';
 
+export interface View extends Mods, Elms {}
+
+@derive(Mods, Elms)
 export abstract class View extends Component implements IViewBased, Mods, Elms {
 	readonly isView = true as const;
+	parent: Nullable<IViewBased> = null;
 
 	readonly mods: IDictionary<string | boolean | null> = {};
 
-	/** @see [[Mods.setMod]] */
-	setMod(...[name, value]: Parameters<typeof Mods.setMod>): this {
-		Mods.setMod.call(this, name, value);
-		return this;
-	}
-
-	/** @see [[Mods.getMod]] */
-	getMod(name: string): string | boolean | null {
-		return Mods.getMod.call(this, name);
-	}
-
-	/** @see [[Elms.getElm]]*/
-	getElm(elementName: string): Nullable<HTMLElement> {
-		return Elms.getElm.call(this, elementName);
-	}
-
-	/** @see [[Elms.getElms]]*/
-	getElms(elementName: string): HTMLElement[] {
-		return Elms.getElms.call(this, elementName);
-	}
-
 	/**
 	 * ID attribute for source element, id add `{id}_editor` it's editor's id
 	 */
@@ -174,10 +157,7 @@ export abstract class View extends Component implements IViewBased, Mods, Elms {
 		}
 
 		this.__isFullSize = isFullSize;
-
-		if (this.events) {
-			this.e.fire('toggleFullSize', isFullSize);
-		}
+		this.e.fire('toggleFullSize', isFullSize);
 	}
 
 	private __whoLocked: string | false = '';
@@ -276,9 +256,7 @@ export abstract class View extends Component implements IViewBased, Mods, Elms {
 		this.events = new EventEmitter(this.od);
 		this.create = new Create(this.od);
 
-		this.container = this.c.div();
-		this.container.classList.add('jodit');
-
+		this.container = this.c.div(`jodit ${this.componentName}`);
 		this.progressbar = new ProgressBar(this);
 	}
 

package/src/jodit.ts

@@ -40,7 +40,8 @@ import {
 	Plugin,
 	Select,
 	StatusBar,
-	STATUSES
+	STATUSES,
+	ViewWithToolbar
 } from './modules/';
 
 import {
@@ -65,11 +66,10 @@ import {
 
 import { Storage } from './core/storage/';
 
-import { Panel } from './core/view/panel';
-
 import { lang } from 'jodit/core/constants';
-import { instances, pluginSystem, modules } from './core/global';
-import { autobind, cache, throttle, watch } from './core/decorators';
+import { instances, pluginSystem, modules, eventEmitter } from './core/global';
+import { autobind, cache, throttle, watch, derive } from './core/decorators';
+import { Dlgs } from 'jodit/core/traits';
 
 const __defaultStyleDisplayKey = 'data-jodit-default-style-display';
 const __defaultClassesKey = 'data-jodit-default-classes';
@@ -77,7 +77,10 @@ const __defaultClassesKey = 'data-jodit-default-classes';
 /**
  * Class Jodit. Main class
  */
-export class Jodit extends Panel implements IJodit {
+export interface Jodit extends Dlgs {}
+
+@derive(Dlgs)
+export class Jodit extends ViewWithToolbar implements IJodit, Dlgs {
 	/** @override */
 	override className(): string {
 		return 'Jodit';
@@ -104,6 +107,12 @@ export class Jodit extends Panel implements IJodit {
 		});
 	}
 
+	static get ready(): Promise<IJodit> {
+		return new Promise(resolve => {
+			eventEmitter.on('oditready', resolve);
+		});
+	}
+
 	/**
 	 * Define if object is Jodit
 	 */
@@ -744,7 +753,7 @@ export class Jodit extends Panel implements IJodit {
 	 * Execute command editor
 	 *
 	 * @param command - command. It supports all the
-	 * {@link https://developer.mozilla.org/ru/docs/Web/API/Document/execCommand#commands} and a number of its own
+	 * @see https://developer.mozilla.org/ru/docs/Web/API/Document/execCommand#commands and a number of its own
 	 * for example applyStyleProperty. Comand fontSize receives the second parameter px,
 	 * formatBlock and can take several options
 	 * @example
@@ -763,7 +772,10 @@ export class Jodit extends Panel implements IJodit {
 			this.s.focus();
 		}
 
-		if (this.o.readonly && command !== 'selectall') {
+		if (
+			this.o.readonly &&
+			!this.o.allowCommandsInReadOnly.includes(command)
+		) {
 			return;
 		}
 

package/src/langs/ar.js

@@ -17,7 +17,7 @@ module.exports = {
 		'حقوق الطبع والنشر © XDSoft.net - Chupurnov Valeriy. كل الحقوق محفوظة.',
 	Anchor: 'مِرْساة',
 	'Open in new tab': 'فتح في نافذة جديدة',
-	'Open editor in fullsize': 'فتح المحرر في الحجم الكامل',
+	'Open in fullsize': 'فتح المحرر في الحجم الكامل',
 	'Clear Formatting': 'مسح التنسيق',
 	'Fill color or set the text color': 'ملء اللون أو تعيين لون النص',
 	Redo: 'إعادة',

package/src/langs/cs_cz.js

@@ -18,7 +18,7 @@ module.exports = {
 		'Copyright © XDSoft.net - Chupurnov Valeriy. Všechna práva vyhrazena.',
 	Anchor: 'Anchor',
 	'Open in new tab': 'Otevřít v nové záložce',
-	'Open editor in fullsize': 'Otevřít v celoobrazovkovém režimu',
+	'Open in fullsize': 'Otevřít v celoobrazovkovém režimu',
 	'Clear Formatting': 'Vyčistit formátování',
 	'Fill color or set the text color': 'Barva výplně a písma',
 	Redo: 'Vpřed',

package/src/langs/de.js

@@ -19,7 +19,7 @@ module.exports = {
 		'Copyright © XDSoft.net - Chupurnov Valeriy. Alle Rechte vorbehalten.',
 	Anchor: 'Anker',
 	'Open in new tab': 'In neuer Registerkarte öffnen',
-	'Open editor in fullsize': 'Editor in voller Größe öffnen',
+	'Open in fullsize': 'Editor in voller Größe öffnen',
 	'Clear Formatting': 'Formatierung löschen',
 	'Fill color or set the text color': 'Füllfarbe oder Textfarbe ändern',
 	Redo: 'Wiederholen',

package/src/langs/es.js

@@ -18,7 +18,7 @@ module.exports = {
 		'Copyright © XDSoft.net - Chupurnov Valeriy. Todos los derechos reservados.',
 	Anchor: 'Anclar',
 	'Open in new tab': 'Abrir en nueva pestaña',
-	'Open editor in fullsize': 'Abrir editor en pantalla completa',
+	'Open in fullsize': 'Abrir editor en pantalla completa',
 	'Clear Formatting': 'Limpiar formato',
 	'Fill color or set the text color': 'Color de relleno o de letra',
 	Redo: 'Rehacer',

package/src/langs/fa.js

@@ -18,7 +18,7 @@ module.exports = {
 		'Copyright © XDSoft.net - Chupurnov Valeriy. Alle Rechte vorbehalten.',
 	Anchor: 'لینک',
 	'Open in new tab': 'بازکردن در تب جدید',
-	'Open editor in fullsize': 'تمام صفحه کردن ویرایشگر',
+	'Open in fullsize': 'تمام صفحه کردن ویرایشگر',
 	'Clear Formatting': 'پاک کردن قالب ها',
 	'Fill color or set the text color':
 		'رنگ را پر کنید یا رنگ متن را تنظیم کنید',

package/src/langs/fr.js

@@ -17,7 +17,7 @@ module.exports = {
 		'Copyright © XDSoft.net - Chupurnov Valeriy. Tous droits réservés.',
 	Anchor: 'Ancre',
 	'Open in new tab': 'Ouvrir dans un nouvel onglet',
-	'Open editor in fullsize': "Ouvrir l'éditeur en pleine page",
+	'Open in fullsize': "Ouvrir l'éditeur en pleine page",
 	'Clear Formatting': 'Supprimer le formattage',
 	'Fill color or set the text color':
 		'Modifier la couleur du fond ou du texte',

package/src/langs/he.js

@@ -18,7 +18,7 @@ module.exports = {
 		'Copyright © XDSoft.net - Chupurnov Valeriy. All rights reserved.',
 	Anchor: 'מקום עיגון',
 	'Open in new tab': 'פתח בכרטיסיה חדשה',
-	'Open editor in fullsize': 'פתח את העורך בחלון חדש',
+	'Open in fullsize': 'פתח את העורך בחלון חדש',
 	'Clear Formatting': 'נקה עיצוב',
 	'Fill color or set the text color': 'שנה צבע טקסט או רקע',
 	Redo: 'בצע שוב',

package/src/langs/hu.js

@@ -19,7 +19,7 @@ module.exports = {
 		'Copyright © XDSoft.net - Chupurnov Valeriy. Minden jog fenntartva.',
 	Anchor: 'Horgony',
 	'Open in new tab': 'Megnyitás új lapon',
-	'Open editor in fullsize': 'Megnyitás teljes méretben',
+	'Open in fullsize': 'Megnyitás teljes méretben',
 	'Clear Formatting': 'Formázás törlése',
 	'Fill color or set the text color': 'Háttér/szöveg szín',
 	Redo: 'Újra',

package/src/langs/i18n.test.js

@@ -4,6 +4,176 @@
  * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
 describe('Test i18n functionality', function () {
+	describe('Helper 18n', function () {
+		const i18n = Jodit.modules.Helpers.i18n;
+
+		describe('Put defined sentence', function () {
+			it('Should replace it on defined language', function () {
+				const values = [
+					'Type something',
+					'Напишите что-либо',
+					'ru',
+
+					'rename',
+					'Переименовать',
+					'ru',
+
+					'Rename',
+					'Переименовать',
+					'ru',
+
+					'About Jodit',
+					'حول جوديت',
+					'ar',
+
+					'about Jodit',
+					'حول جوديت',
+					'ar',
+
+					'British people',
+					'British people',
+					'ar'
+				];
+
+				for (let i = 0; i < values.length; i += 3) {
+					expect(values[i + 1]).equals(
+						i18n(
+							values[i],
+							[],
+							{
+								language: values[i + 2]
+							},
+							true
+						)
+					);
+				}
+			});
+
+			describe('Put some information inside sentence', function () {
+				it('Should put this information inside new sentence', function () {
+					const values = [
+						'Chars: %d',
+						'Символов: 1',
+						'ru',
+						[1],
+						'Select %s',
+						'Выделить: Test',
+						'ru',
+						['Test'],
+						'select %s',
+						'Выделить: Test',
+						'ru',
+						['Test'],
+						'Bla %d Bla %s',
+						'Bla 1 Bla boo',
+						'ru',
+						[1, 'boo'],
+						'Bla %d Bla %s',
+						'Bla 1 Bla boo',
+						'ru1',
+						[1, 'boo']
+					];
+
+					for (let i = 0; i < values.length; i += 4) {
+						expect(values[i + 1]).equals(
+							i18n(
+								values[i],
+								values[i + 3],
+								{
+									language: values[i + 2]
+								},
+								true
+							)
+						);
+					}
+				});
+			});
+		});
+
+		const values = [
+			'Type something',
+			'Напишите что-либо',
+			'ru',
+
+			'About Jodit',
+			'حول جوديت',
+			'ar',
+
+			'About Jodit',
+			'{About Jodit}',
+			'ar1',
+
+			'British people',
+			'{British people}',
+			'ar'
+		];
+
+		for (let i = 0; i < values.length; i += 3) {
+			const [source, result, language] = [
+				values[i],
+				values[i + 1],
+				values[i + 2]
+			];
+
+			describe(`Debug mode for ${language}`, function () {
+				it(`Should show debug brackets for undefined keys for source ${source}`, function () {
+					expect(result).equals(
+						i18n(
+							source,
+							[],
+							{
+								language,
+								debugLanguage: true
+							},
+							true
+						)
+					);
+				});
+			});
+		}
+
+		describe('Define i18n property inside input options', function () {
+			it('Should use it', function () {
+				const values = [
+					'Type something',
+					'Привет',
+					'ru',
+					'About Jodit',
+					'جوديت',
+					'ar',
+					'British people',
+					'Bond',
+					'ar'
+				];
+
+				const opt = {
+					ru: {
+						'Type something': 'Привет'
+					},
+					ar: {
+						'About Jodit': 'جوديت',
+						'British people': 'Bond'
+					}
+				};
+
+				for (let i = 0; i < values.length; i += 3) {
+					expect(values[i + 1]).equals(
+						i18n(
+							values[i],
+							[],
+							{
+								language: values[i + 2],
+								i18n: opt,
+								debugLanguage: true
+							},
+							true
+						)
+					);
+				}
+			});
+		});
+	});
+
 	describe('Test has keys in all functionality', function () {
 		const filter = [
 			'customxxx',

package/src/langs/id.js

@@ -18,7 +18,7 @@ module.exports = {
 		'Hak Cipta © XDSoft.net - Chupurnov Valeriy. Hak cipta dilindungi undang-undang.',
 	Anchor: 'Tautan',
 	'Open in new tab': 'Buka di tab baru',
-	'Open editor in fullsize': 'Buka editor dalam ukuran penuh',
+	'Open in fullsize': 'Buka editor dalam ukuran penuh',
 	'Clear Formatting': 'Hapus Pemformatan',
 	'Fill color or set the text color': 'Isi warna atau atur warna teks',
 	Redo: 'Ulangi',