jodit 3.19.4 → 3.20.2

package/src/langs/it.js

@@ -19,7 +19,7 @@ module.exports = {
 		'Copyright © XDSoft.net - Chupurnov Valeriy. Alle Rechte vorbehalten.',
 	Anchor: 'Ancora',
 	'Open in new tab': 'Apri in una nuova scheda',
-	'Open editor in fullsize': "Apri l'editor a schermo intero",
+	'Open in fullsize': "Apri l'editor a schermo intero",
 	'Clear Formatting': 'Formato chiaro',
 	'Fill color or set the text color': 'Riempi colore o lettera',
 	Redo: 'Ripristina',

package/src/langs/ja.js

@@ -18,7 +18,7 @@ module.exports = {
 		'Copyright © XDSoft.net - Chupurnov Valeriy. All rights reserved.',
 	Anchor: '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/ko.js

@@ -17,7 +17,7 @@ module.exports = {
 		'© XDSoft.net - Chupurnov Valeriy. 에게 저작권과 모든 권리가 있습니다.',
 	Anchor: '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/nl.js

@@ -20,7 +20,7 @@ module.exports = {
 		'Copyright © XDSoft.net - Chupurnov Valeriy. Alle rechten voorbehouden.',
 	Anchor: 'Anker',
 	'Open in new tab': 'Open in nieuwe tab',
-	'Open editor in fullsize': 'Editor in volledig scherm openen',
+	'Open in fullsize': 'Editor in volledig scherm openen',
 	'Clear Formatting': 'Opmaak verwijderen',
 	'Fill color or set the text color': 'Vulkleur of tekstkleur aanpassen',
 	Redo: 'Opnieuw',

package/src/langs/pl.js

@@ -19,7 +19,7 @@ module.exports = {
 		'Copyright © XDSoft.net - Chupurnov Valeriy. Wszystkie prawa zastrzeżone.',
 	Anchor: 'Kotwica',
 	'Open in new tab': 'Otwórz w nowej zakładce',
-	'Open editor in fullsize': 'Otwórz edytor w pełnym rozmiarze',
+	'Open in fullsize': 'Otwórz edytor w pełnym rozmiarze',
 	'Clear Formatting': 'Wyczyść formatowanie',
 	'Fill color or set the text color':
 		'Kolor wypełnienia lub ustaw kolor tekstu',

package/src/langs/pt_br.js

@@ -18,7 +18,7 @@ module.exports = {
 		'Copyright © XDSoft.net - Chupurnov Valeriy. Todos os direitos reservados.',
 	Anchor: 'Link',
 	'Open in new tab': 'Abrir em nova aba',
-	'Open editor in fullsize': 'Abrir editor em tela cheia',
+	'Open in fullsize': 'Abrir editor em tela cheia',
 	'Clear Formatting': 'Limpar formatação',
 	'Fill color or set the text color': 'Cor de preenchimento ou cor do texto',
 	Redo: 'Refazer',

package/src/langs/ru.js

@@ -18,7 +18,7 @@ module.exports = {
 		'Авторские права © XDSoft.net - Чупурнов Валерий. Все права защищены.',
 	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/tr.js

@@ -18,7 +18,7 @@ module.exports = {
 		'Copyright © XDSoft.net - Chupurnov Valeriy. Tüm hakları saklıdır.',
 	Anchor: 'Bağlantı',
 	'Open in new tab': 'Yeni sekmede aç',
-	'Open editor in fullsize': 'Editörü tam ekranda aç',
+	'Open in fullsize': 'Editörü tam ekranda aç',
 	'Clear Formatting': 'Stili temizle',
 	'Fill color or set the text color': 'Renk doldur veya yazı rengi seç',
 	Redo: 'Yinele',

package/src/langs/zh_cn.js

@@ -19,7 +19,7 @@ module.exports = {
 		'Copyright © XDSoft.net - Chupurnov Valeriy. 版权所有',
 	Anchor: '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/zh_tw.js

@@ -18,7 +18,7 @@ module.exports = {
 		'Copyright © XDSoft.net - Chupurnov Valeriy. All rights reserved.',
 	Anchor: 'Anchor',
 	'Open in new tab': '在新窗口打開',
-	'Open editor in fullsize': '全屏編輯',
+	'Open in fullsize': '全屏編輯',
 	'Clear Formatting': '清除樣式',
 	'Fill color or set the text color': '顏色',
 	Redo: '重做',

package/src/modules/dialog/dialog.less

@@ -107,6 +107,8 @@
 		top: auto !important;
 		left: auto !important;
 		width: 100% !important;
+		box-shadow: none;
+		border: 1px solid var(--color-border)
 	}
 
 	&_theme_dark,

package/src/modules/dialog/dialog.ts

@@ -73,11 +73,10 @@ Config.prototype.controls.dialog = {
 	close: {
 		icon: 'cancel',
 		exec: dialog => {
-			(dialog as Dialog).close();
-			(dialog as Dialog).toggleFullSizeBox(false);
+			dialog.close();
 		}
 	}
-} as IDictionary<IControlType>;
+} as IDictionary<IControlType<IDialog>>;
 
 /**
  * Module to generate dialog windows
@@ -89,7 +88,7 @@ export class Dialog extends ViewWithToolbar implements IDialog {
 		return 'Dialog';
 	}
 
-	private resizer!: HTMLElement;
+	private readonly resizer!: HTMLElement;
 	override toolbar!: IToolbarCollection;
 
 	private offsetX?: number;
@@ -103,8 +102,6 @@ export class Dialog extends ViewWithToolbar implements IDialog {
 
 	private moved: boolean = false;
 
-	private iSetMaximization: boolean = false;
-
 	private resizable: boolean = false;
 	private draggable: boolean = false;
 	private startX: number = 0;
@@ -328,14 +325,14 @@ export class Dialog extends ViewWithToolbar implements IDialog {
 
 	override OPTIONS!: IDialogOptions;
 
-	dialog!: HTMLElement;
+	readonly dialog!: HTMLElement;
 
 	workplace!: HTMLDivElement;
 
-	private dialogbox_header!: HTMLElement;
-	private dialogbox_content!: HTMLElement;
-	private dialogbox_footer!: HTMLElement;
-	private dialogbox_toolbar!: HTMLElement;
+	private readonly dialogbox_header!: HTMLElement;
+	private readonly dialogbox_content!: HTMLElement;
+	private readonly dialogbox_footer!: HTMLElement;
+	private readonly dialogbox_toolbar!: HTMLElement;
 
 	/**
 	 * Specifies the size of the window
@@ -512,28 +509,14 @@ export class Dialog extends ViewWithToolbar implements IDialog {
 	/**
 	 * Expands the dialog on full browser window
 	 */
-	maximization(condition?: boolean): boolean {
-		if (isVoid(condition)) {
-			condition = !this.getMod('fullsize');
+	override toggleFullSize(isFullSize?: boolean): void {
+		if (isVoid(isFullSize)) {
+			isFullSize = !this.getMod('fullsize');
 		}
 
-		this.setMod('fullsize', condition);
-
-		this.toggleFullSizeBox(condition);
-		this.iSetMaximization = condition;
+		this.setMod('fullsize', isFullSize);
 
-		return condition;
-	}
-
-	toggleFullSizeBox(condition: boolean): void {
-		[this.destination, this.destination.parentNode].forEach(box => {
-			box &&
-				(box as HTMLElement).classList &&
-				(box as HTMLElement).classList.toggle(
-					'jodit_fullsize-box_true',
-					condition
-				);
-		});
+		super.toggleFullSize(isFullSize);
 	}
 
 	open(destroyAfterClose: boolean): this;
@@ -551,7 +534,7 @@ export class Dialog extends ViewWithToolbar implements IDialog {
 	 * It opens a dialog box to center it, and causes the two event.
 	 *
 	 * @param contentOrClose - specifies the contents of the dialog box.
-	 * Can be false or undefined. see `{@link Dialog~setContent|setContent}`
+	 * Can be false or undefined. see [[Dialog.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
@@ -604,7 +587,7 @@ export class Dialog extends ViewWithToolbar implements IDialog {
 		this.setMaxZIndex();
 
 		if (this.o.fullsize) {
-			this.maximization(true);
+			this.toggleFullSize(true);
 		}
 
 		/**
@@ -653,7 +636,7 @@ export class Dialog extends ViewWithToolbar implements IDialog {
 	 * ```
 	 */
 	@autobind
-	close(e?: MouseEvent): this {
+	close(): this {
 		if (
 			this.isDestructed ||
 			!this.isOpened ||
@@ -662,15 +645,10 @@ export class Dialog extends ViewWithToolbar implements IDialog {
 			return this;
 		}
 
-		if (e) {
-			e.stopImmediatePropagation();
-			e.preventDefault();
-		}
-
 		/**
 		 * Called up to close the window
 		 */
-		if (this.e && this.e.fire('beforeClose', this) === false) {
+		if (this.e.fire('beforeClose', this) === false) {
 			return this;
 		}
 
@@ -678,9 +656,8 @@ export class Dialog extends ViewWithToolbar implements IDialog {
 
 		this.isOpened = false;
 
-		this.e.fire('toggleFullSize', false);
-		if (this.iSetMaximization) {
-			this.maximization(false);
+		if (this.isFullSize) {
+			this.toggleFullSize(false);
 		}
 
 		Dom.safeRemove(this.container);
@@ -694,8 +671,8 @@ export class Dialog extends ViewWithToolbar implements IDialog {
 		/**
 		 * It called after the window is closed
 		 */
-		this.e?.fire(this, 'afterClose');
-		this.e?.fire(this.ow, 'joditCloseDialog');
+		this.e.fire(this, 'afterClose');
+		this.e.fire(this.ow, 'joditCloseDialog');
 
 		return this;
 	}
@@ -769,12 +746,12 @@ export class Dialog extends ViewWithToolbar implements IDialog {
 			'header-toolbar element does not exist'
 		);
 
-		self.dialog = dialog;
-		self.resizer = resizer;
-		self.dialogbox_header = dialogbox_header;
-		self.dialogbox_content = dialogbox_content;
-		self.dialogbox_footer = dialogbox_footer;
-		self.dialogbox_toolbar = dialogbox_toolbar;
+		this.dialog = dialog;
+		this.resizer = resizer;
+		this.dialogbox_header = dialogbox_header;
+		this.dialogbox_content = dialogbox_content;
+		this.dialogbox_footer = dialogbox_footer;
+		this.dialogbox_toolbar = dialogbox_toolbar;
 
 		css(self.dialog, {
 			maxWidth: self.options.maxWidth,

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

@@ -124,7 +124,7 @@ Jodit.make('#editor', {
 -   filebrowser.showFileName=true Show filename in thumbs
 -   filebrowser.showFileSize=true Show filesize in thumbs
 -   filebrowser.showFileChangeTime=true Show the last modification time in thumbs
--   filebrowser.editImage=true use {@link ImageEditor|Image editor module} - crop and resize image
+-   filebrowser.editImage=true use [[ImageEditor]] - crop and resize image
 -   filebrowser.preview=true Show preview button in context menu
 -   filebrowser.showPreviewNavigation=true Show navigation buttons in preview
 -   filebrowser.showSelectButtonInPreview=true Show select button in preview
@@ -208,30 +208,30 @@ const response = {
     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 to the server to resize
-    image. By default, the uses {@link Jodit.defaultOptions.filebrowser.ajax|filebrowser.ajax} with argument
+    image. By default, the uses [[Config.filebrowser.ajax]] with argument
     action=create
 -   filebrowser.crop Settings for AJAX connections to the server to crop image.
-    By default, the uses {@link Jodit.defaultOptions.filebrowser.ajax|filebrowser.ajax} with argument
+    By default, the uses [[Config.filebrowser.ajax]] with argument
     action=create
 -   filebrowser.c Settings for AJAX connections to the server to create
-    the category . By default, the uses {@link Jodit.defaultOptions.filebrowser.ajax|filebrowser.ajax}
+    the category . By default, the uses [[Config.filebrowser.ajax]]
     with argument `action=create`
 -   filebrowser.move Settings for AJAX connections to the server for the moving
-    image or category . By default uses {@link Jodit.defaultOptions.filebrowser.ajax|filebrowser.ajax}
+    image or category . By default uses [[Config.filebrowser.ajax]]
     with argument `action=move`
 -   filebrowser.remove Settings for AJAX connections to the server toWYSIWYG
-    delete the image or category . By default uses {@link Jodit.defaultOptions.filebrowser.ajax|filebrowser.ajax}
+    delete the image or category . By default uses [[Config.filebrowser.ajax]]
     with argument `action=remove`
     @property {object} filebrowser.folder Settings for AJAX connections to the server toWYSIWYG
     download the list of categories .
-    By default uses {@link Jodit.defaultOptions.filebrowser.ajax|filebrowser.ajax}
+    By default uses [[Config.filebrowser.ajax]]
     with argument `action=folder`
 -   filebrowser.items Settings for AJAX connections to the server to download
     the image list in the specified category . By default uses
-    {@link Jodit.defaultOptions.filebrowser.ajax|filebrowser.ajax} with argument action=items
--   filebrowser.uploader=null Settings Module {@link Uploader|Uploader}
+    [[Config.filebrowser.ajax]] with argument action=items
+-   filebrowser.uploader=null Settings Module [[Uploader]]
     for fast uploading images in category via Drag&Drop file in the file browser. The default settings of
-    the module {@link Uploader|Uploader}
+    the module [[Uploader]]
 
 Example:
 

package/src/modules/file-browser/builders/context-menu.ts

@@ -116,7 +116,7 @@ export default (self: IFileBrowser): ((e: DragEvent) => boolean | void) => {
 							icon: 'eye',
 							title: 'Preview',
 							exec: (): void => {
-								const preview = self.dialog({
+								const preview = self.dlg({
 										buttons: ['fullsize', 'dialog.close']
 									}),
 									temp_content = self.c.div(

package/src/modules/file-browser/file-browser.test.js

@@ -727,6 +727,9 @@ describe('Jodit FileBrowser Tests', function () {
 					}
 				});
 
+				editor.value = '<p>test|</p>';
+				setCursorToChar(editor);
+
 				const filebrowser = editor.filebrowser;
 
 				filebrowser
@@ -746,11 +749,11 @@ describe('Jodit FileBrowser Tests', function () {
 						);
 
 						simulateEvent('dragover', window, function (data) {
-							data.clientX = 50;
-							data.clientY = 20 + offset(editor.editor).top;
+							fillXY(data, editor);
 						});
 
 						simulateEvent('drop', editor.editor, function (data) {
+							fillXY(data, editor);
 							Object.defineProperty(data, 'dataTransfer', {
 								value: {
 									files: []
@@ -761,7 +764,7 @@ describe('Jodit FileBrowser Tests', function () {
 						simulateEvent('change', window);
 						editor.async.requestIdleCallback(() => {
 							expect(editor.value).equals(
-								'<p><img src="https://xdsoft.net/jodit/files/images.jpg"></p>'
+								'<p>test<img src="https://xdsoft.net/jodit/files/images.jpg"></p>'
 							);
 
 							simulateEvent('drop', window);
@@ -786,6 +789,8 @@ describe('Jodit FileBrowser Tests', function () {
 						}
 					}
 				});
+				editor.value = '<p>test|</p>';
+				setCursorToChar(editor);
 
 				const filebrowser = editor.filebrowser;
 
@@ -806,11 +811,11 @@ describe('Jodit FileBrowser Tests', function () {
 						);
 
 						simulateEvent('dragover', window, function (data) {
-							data.clientX = 50;
-							data.clientY = 20 + offset(editor.editor).top;
+							fillXY(data, editor);
 						});
 
 						simulateEvent('drop', editor.editor, function (data) {
+							fillXY(data, editor);
 							Object.defineProperty(data, 'dataTransfer', {
 								value: {
 									files: []
@@ -819,7 +824,7 @@ describe('Jodit FileBrowser Tests', function () {
 						});
 
 						expect(editor.value).equals(
-							'<p><a href="https://xdsoft.net/jodit/files/test.txt">https://xdsoft.net/jodit/files/test.txt</a></p>'
+							'<p>test<a href="https://xdsoft.net/jodit/files/test.txt">https://xdsoft.net/jodit/files/test.txt</a></p>'
 						);
 						simulateEvent('drop', window);
 
@@ -958,16 +963,22 @@ describe('Jodit FileBrowser Tests', function () {
 						}
 					});
 
-					editor.value = '';
+					editor.value = '<p>test|</p>';
+					setCursorToChar(editor);
 
 					editor.events.on('filesWereUploaded', function () {
-						expect(sortAttributes(editor.value)).equals(
-							'<p><img src="https://xdsoft.net/jodit/files/test.png" style="width:300px"></p>'
-						);
-						done();
+						try {
+							expect(sortAttributes(editor.value)).equals(
+								'<p>test<img src="https://xdsoft.net/jodit/files/test.png" style="width:300px"></p>'
+							);
+							done();
+						} catch (e) {
+							done(e);
+						}
 					});
 
 					simulateEvent('drop', editor.editor, function (data) {
+						fillXY(data, editor);
 						Object.defineProperty(data, 'dataTransfer', {
 							value: {
 								files: [{ name: 'test.png', type: 'image/png' }]
@@ -990,16 +1001,18 @@ describe('Jodit FileBrowser Tests', function () {
 						}
 					});
 
-					editor.value = '';
+					editor.value = '<p>test|</p>';
+					setCursorToChar(editor);
 
 					editor.events.on('filesWereUploaded', function () {
 						expect(editor.value).equals(
-							'<p><a href="https://xdsoft.net/jodit/files/test.txt">https://xdsoft.net/jodit/files/test.txt</a></p>'
+							'<p>test<a href="https://xdsoft.net/jodit/files/test.txt">https://xdsoft.net/jodit/files/test.txt</a></p>'
 						);
 						done();
 					});
 
 					simulateEvent('drop', editor.editor, function (data) {
+						fillXY(data, editor);
 						Object.defineProperty(data, 'dataTransfer', {
 							value: {
 								files: [

package/src/modules/file-browser/file-browser.test.screenshot.js

@@ -0,0 +1,23 @@
+/*!
+ * 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
+ */
+
+require('../../../test/bootstrap.screenshot.js');
+const expect = require('expect');
+
+describe('Filebrowser screenshot testing', () => {
+	describe('Open filebrowser', () => {
+		it('works', async function () {
+			await page.evaluate(() => {
+				return editor.filebrowser.open();
+			});
+
+			await page.waitForSelector('[data-jodit-filebrowser-item="true"]');
+			const dialog = await page.$('[role="dialog"] .jodit-dialog__panel');
+			const screenshot = await dialog.screenshot();
+			expect(screenshot).toMatchImageSnapshot(this);
+		}).timeout(10000);
+	});
+});

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

@@ -40,23 +40,27 @@ import {
 	trim,
 	isAbort
 } from 'jodit/core/helpers';
-import { Panel } from 'jodit/core/view/panel';
 import { Dom } from 'jodit/core/dom';
 import { makeDataProvider } from './factories';
 import { stateListeners } from './listeners/state-listeners';
 import { nativeListeners } from './listeners/native-listeners';
 import { selfListeners } from './listeners/self-listeners';
 import { DEFAULT_SOURCE_NAME } from './data-provider';
-import { autobind } from 'jodit/core/decorators';
+import { autobind, derive } from 'jodit/core/decorators';
 import { FileBrowserFiles, FileBrowserTree } from './ui';
 import { observable } from 'jodit/core/event-emitter';
 import { loadTree } from './fetch/load-tree';
 import { loadItems } from './fetch/load-items';
 import { STATUSES } from 'jodit/core/component';
+import { Dlgs } from 'jodit/core/traits';
+import { ViewWithToolbar } from 'jodit/core/view/view-with-toolbar';
 
 import './config';
 
-export class FileBrowser extends Panel implements IFileBrowser {
+export interface FileBrowser extends Dlgs {}
+
+@derive(Dlgs)
+export class FileBrowser extends ViewWithToolbar implements IFileBrowser, Dlgs {
 	/** @override */
 	className(): string {
 		return 'Filebrowser';
@@ -310,7 +314,7 @@ export class FileBrowser extends Panel implements IFileBrowser {
 
 		self.dataProvider = makeDataProvider(self, self.options);
 
-		self._dialog = this.dialog({
+		self._dialog = this.dlg({
 			minWidth: Math.min(700, screen.width),
 			minHeight: 300,
 			buttons: this.o.headerButtons ?? ['fullsize', 'dialog.close']
@@ -402,7 +406,7 @@ export class FileBrowser extends Panel implements IFileBrowser {
 
 	private proxyDialogEvents(self: FileBrowser): void {
 		['afterClose', 'beforeOpen'].forEach(proxyEvent => {
-			self._dialog.events.on(self.dialog, proxyEvent, () => {
+			self._dialog.events.on(self.dlg, proxyEvent, () => {
 				this.e.fire(proxyEvent);
 			});
 		});

package/src/modules/history/snapshot.ts

@@ -132,7 +132,9 @@ export class Snapshot extends ViewComponent<IJodit> implements ISnapshot {
 			}
 		};
 
-		snapshot.html = this.j.getNativeEditorValue();
+		snapshot.html = this.removeJoditSelection(
+			this.j.getNativeEditorValue()
+		);
 
 		const sel = this.j.s.sel;
 
@@ -175,7 +177,7 @@ export class Snapshot extends ViewComponent<IJodit> implements ISnapshot {
 	/**
 	 * Restores the state of the editor of the snapshot. Rebounding is not only html but selected text
 	 *
-	 * @param snapshot - snapshot of editor resulting from the `{@link Snapshot~make|make}`
+	 * @param snapshot - snapshot of editor resulting from the `[[Snapshot.make]]` method
 	 * @see make
 	 */
 	restore(snapshot: SnapshotType): void {
@@ -209,7 +211,7 @@ export class Snapshot extends ViewComponent<IJodit> implements ISnapshot {
 	/**
 	 * Restore selection from snapshot
 	 *
-	 * @param snapshot - snapshot of editor resulting from the `{@link Snapshot~make|make}`
+	 * @param snapshot - snapshot of editor resulting from the [[Snapshot.make]] method
 	 * @see make
 	 */
 	restoreOnlySelection(snapshot: SnapshotType): void {
@@ -244,4 +246,11 @@ export class Snapshot extends ViewComponent<IJodit> implements ISnapshot {
 		this.isBlocked = false;
 		super.destruct();
 	}
+
+	private removeJoditSelection(nativeEditorValue: string): string {
+		return nativeEditorValue.replace(
+			/<span[^>]*jodit-selection_marker[^>]*><\/span>/g,
+			''
+		);
+	}
 }

package/src/modules/image-editor/image-editor.test.screenshot.js

@@ -0,0 +1,25 @@
+/*!
+ * 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
+ */
+
+require('../../../test/bootstrap.screenshot.js');
+const expect = require('expect');
+
+describe('Image editor screenshot testing', () => {
+	describe('Open image editor', () => {
+		it('works', async function () {
+			await page.evaluate(() => {
+				return editor
+					.getInstance('ImageEditor')
+					.open('https://xdsoft.net/jodit/files/artio.jpg');
+			});
+
+			await page.waitForSelector('[role="dialog"] .jodit-dialog__panel');
+			const dialog = await page.$('[role="dialog"] .jodit-dialog__panel');
+			const screenshot = await dialog.screenshot();
+			expect(screenshot).toMatchImageSnapshot(this);
+		}).timeout(10000);
+	});
+});

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

@@ -20,8 +20,9 @@ import type {
 	IUIButton,
 	IDictionary,
 	IFileBrowserDataProvider,
-	IPanel,
-	IDialog
+	IDialog,
+	IViewWithToolbar,
+	IDlgs
 } from 'jodit/types';
 import { Config } from 'jodit/config';
 import { ViewComponent } from 'jodit/core/component';
@@ -68,7 +69,7 @@ const TABS = {
  *
  */
 @component
-export class ImageEditor extends ViewComponent<IPanel> {
+export class ImageEditor extends ViewComponent<IViewWithToolbar & IDlgs> {
 	/** @override */
 	override className(): string {
 		return 'ImageEditor';
@@ -719,7 +720,7 @@ export class ImageEditor extends ViewComponent<IPanel> {
 		});
 	}
 
-	constructor(editor: IPanel) {
+	constructor(editor: IViewWithToolbar & IDlgs) {
 		super(editor);
 
 		this.options =
@@ -759,7 +760,7 @@ export class ImageEditor extends ViewComponent<IPanel> {
 			`.${jie}__croper`
 		) as HTMLElement;
 
-		this._dialog = this.j.dialog({
+		this._dialog = this.j.dlg({
 			buttons: ['fullsize', 'dialog.close']
 		});
 
@@ -803,7 +804,7 @@ export class ImageEditor extends ViewComponent<IPanel> {
  * Open Image Editor
  */
 export function openImageEditor(
-	this: IPanel & { dataProvider: IFileBrowserDataProvider },
+	this: IViewWithToolbar & { dataProvider: IFileBrowserDataProvider },
 	href: string,
 	name: string,
 	path: string,