Dialogs don't work inside Shadow DOM #866

Issue: #866)

CHANGELOG.MD

@@ -9,6 +9,13 @@
 > -   :house: [Internal]
 > -   :nail_care: [Polish]
 
+## 3.19.4
+
+#### :bug: Bug Fix
+
+- [applyLink event is only fired when link is inserted via menu button but not when it is pasted #874](https://github.com/xdan/jodit/issues/874)
+- [Dialogs don't work inside Shadow DOM #866](https://github.com/xdan/jodit/issues/866)
+
 ## 3.19.3
 
 #### :bug: Bug Fix

src/core/view/panel.ts

@@ -0,0 +1,67 @@
+/*!
+ * 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
+ */
+
+import type { IDialog, IDialogOptions } from 'jodit/types';
+import { ViewWithToolbar } from './view-with-toolbar';
+import { Dialog, Alert, Confirm, Prompt } from 'jodit/modules/dialog';
+import { isString, markOwner } from 'jodit/core/helpers';
+
+export abstract class Panel extends ViewWithToolbar {
+	dialog(options?: IDialogOptions): IDialog {
+		const dialog = new Dialog({
+			language: this.o.language,
+			shadowRoot: this.o.shadowRoot,
+			ownerWindow: this.o.ownerWindow,
+			defaultTimeout: this.o.defaultTimeout,
+			theme: this.o.theme,
+			...options
+		});
+		markOwner(this, dialog.container);
+		return dialog.bindDestruct(this);
+	}
+
+	confirm(
+		msg: string,
+		title: string | ((yes: boolean) => void) | undefined,
+		callback?: (yes: boolean) => void | false
+	): IDialog {
+		if (isString(title)) {
+			title = this.i18n(title);
+		}
+		return Confirm.call(this.dialog(), this.i18n(msg), title, callback);
+	}
+
+	prompt(
+		msg: string,
+		title: string | (() => false | void) | undefined,
+		callback: (value: string) => false | void,
+		placeholder?: string,
+		defaultValue?: string
+	): IDialog {
+		if (isString(title)) {
+			title = this.i18n(title);
+		}
+		if (isString(placeholder)) {
+			placeholder = this.i18n(placeholder);
+		}
+		return Prompt.call(this.dialog(), this.i18n(msg), title, callback);
+	}
+
+	alert(
+		msg: string | HTMLElement,
+		title?: string | (() => void | false),
+		callback?: string | ((dialog: IDialog) => void | false),
+		className?: string
+	): IDialog {
+		if (isString(msg)) {
+			msg = this.i18n(msg);
+		}
+		if (isString(title)) {
+			title = this.i18n(title);
+		}
+		return Alert.call(this.dialog(), msg, title, callback, className);
+	}
+}

src/core/view/view.ts

@@ -376,5 +376,6 @@ View.defaultOptions = {
 	showTooltip: true,
 	useNativeTooltip: false,
 	buttons: [],
-	globalFullSize: true
+	globalFullSize: true,
+	language: 'auto'
 };

src/jodit.ts

@@ -65,7 +65,7 @@ import {
 
 import { Storage } from './core/storage/';
 
-import { ViewWithToolbar } from './core/view/view-with-toolbar';
+import { Panel } from './core/view/panel';
 
 import { lang } from 'jodit/core/constants';
 import { instances, pluginSystem, modules } from './core/global';
@@ -77,7 +77,7 @@ const __defaultClassesKey = 'data-jodit-default-classes';
 /**
  * Class Jodit. Main class
  */
-export class Jodit extends ViewWithToolbar implements IJodit {
+export class Jodit extends Panel implements IJodit {
 	/** @override */
 	override className(): string {
 		return 'Jodit';

src/modules/dialog/alert.ts

@@ -8,6 +8,7 @@
  * @module modules/dialog
  */
 
+import type { IDialog } from 'jodit/types';
 import { Dialog } from './dialog';
 import { asArray, isFunction } from 'jodit/core/helpers/';
 import { Dom } from 'jodit/core/dom';
@@ -27,17 +28,18 @@ import { Button } from 'jodit/core/ui';
  * });
  * ```
  */
-export const Alert = (
+export function Alert(
+	this: IDialog | unknown,
 	msg: string | HTMLElement,
 	title?: string | (() => void | false),
-	callback?: string | ((dialog: Dialog) => void | false),
+	callback?: string | ((dialog: IDialog) => void | false),
 	className: string = 'jodit-dialog_alert'
-): Dialog => {
+): IDialog {
 	if (isFunction(title)) {
 		callback = title;
 		title = undefined;
 	}
-	const dialog = new Dialog(),
+	const dialog = this instanceof Dialog ? this : new Dialog(),
 		container = dialog.c.div(className),
 		okButton = Button(dialog, 'ok', 'Ok');
 
@@ -59,4 +61,4 @@ export const Alert = (
 	okButton.focus();
 
 	return dialog;
-};
+}

src/modules/dialog/confirm.ts

@@ -8,9 +8,10 @@
  * @module modules/dialog
  */
 
-import { Dialog } from 'jodit/modules/dialog';
-import { isFunction } from 'jodit/core/helpers';
-import { Button } from 'jodit/core/ui';
+import type { IDialog } from 'jodit/types';
+import { Dialog } from 'jodit/modules/dialog/dialog';
+import { isFunction } from 'jodit/core/helpers/checker/is-function';
+import { Button } from 'jodit/core/ui/button/button/button';
 
 /**
  * Show `confirm` dialog. Work without Jodit object
@@ -26,12 +27,13 @@ import { Button } from 'jodit/core/ui';
  * });
  * ```
  */
-export const Confirm = (
+export function Confirm(
+	this: IDialog | unknown,
 	msg: string,
 	title: string | ((yes: boolean) => void) | undefined,
 	callback?: (yes: boolean) => void | false
-): Dialog => {
-	const dialog = new Dialog(),
+): IDialog {
+	const dialog = this instanceof Dialog ? this : new Dialog(),
 		$div: HTMLDivElement = dialog.c.fromHTML(
 			'<form class="jodit-dialog_prompt"></form>'
 		) as HTMLDivElement,
@@ -69,4 +71,4 @@ export const Confirm = (
 	$ok.focus();
 
 	return dialog;
-};
+}

src/modules/dialog/dialog.ts

@@ -96,7 +96,7 @@ export class Dialog extends ViewWithToolbar implements IDialog {
 	private offsetY?: number;
 
 	private get destination(): HTMLElement {
-		return this.od.body;
+		return (this.o.shadowRoot ?? this.od.body) as HTMLElement;
 	}
 
 	private destroyAfterClose: boolean = false;

src/modules/dialog/prompt.ts

@@ -8,6 +8,7 @@
  * @module modules/dialog
  */
 
+import type { IDialog } from 'jodit/types';
 import { Dialog } from 'jodit/modules/dialog';
 import { Button } from 'jodit/core/ui';
 import { attr, isFunction } from 'jodit/core/helpers';
@@ -29,14 +30,15 @@ import { attr, isFunction } from 'jodit/core/helpers';
  * });
  * ```
  */
-export const Prompt = (
+export function Prompt(
+	this: IDialog | unknown,
 	msg: string,
 	title: string | (() => false | void) | undefined,
 	callback: (value: string) => false | void,
 	placeholder?: string,
 	defaultValue?: string
-): Dialog => {
-	const dialog = new Dialog(),
+): IDialog {
+	const dialog = this instanceof Dialog ? this : new Dialog(),
 		cancelButton = Button(dialog, 'cancel', 'Cancel'),
 		okButton = Button(dialog, 'ok', 'Ok'),
 		form = dialog.c.element('form', {
@@ -92,4 +94,4 @@ export const Prompt = (
 	}
 
 	return dialog;
-};
+}

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

@@ -9,7 +9,6 @@
  */
 
 import type { IDialog, IFileBrowser } from 'jodit/types';
-import { Dialog } from 'jodit/modules/dialog';
 
 import { Dom } from 'jodit/core/dom';
 import { attr, error } from 'jodit/core/helpers';
@@ -117,9 +116,7 @@ export default (self: IFileBrowser): ((e: DragEvent) => boolean | void) => {
 							icon: 'eye',
 							title: 'Preview',
 							exec: (): void => {
-								const preview = new Dialog({
-										fullsize: self.o.fullsize,
-										language: self.o.language,
+								const preview = self.dialog({
 										buttons: ['fullsize', 'dialog.close']
 									}),
 									temp_content = self.c.div(

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

@@ -12,7 +12,6 @@ import './styles';
 
 import { Config } from 'jodit/config';
 import * as consts from 'jodit/core/constants';
-import { Dialog } from 'jodit/modules/dialog/dialog';
 
 import type {
 	IFileBrowser,
@@ -41,7 +40,7 @@ import {
 	trim,
 	isAbort
 } from 'jodit/core/helpers';
-import { ViewWithToolbar } from 'jodit/core/view/view-with-toolbar';
+import { Panel } from 'jodit/core/view/panel';
 import { Dom } from 'jodit/core/dom';
 import { makeDataProvider } from './factories';
 import { stateListeners } from './listeners/state-listeners';
@@ -57,7 +56,7 @@ import { STATUSES } from 'jodit/core/component';
 
 import './config';
 
-export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
+export class FileBrowser extends Panel implements IFileBrowser {
 	/** @override */
 	className(): string {
 		return 'Filebrowser';
@@ -137,7 +136,7 @@ export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 
 	override OPTIONS!: IFileBrowserOptions;
 
-	private dialog!: IDialog;
+	private _dialog!: IDialog;
 
 	/**
 	 * Container for set/get value
@@ -147,7 +146,7 @@ export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 	uploader!: IUploader;
 
 	get isOpened(): boolean {
-		return this.dialog.isOpened && this.browser.style.display !== 'none';
+		return this._dialog.isOpened && this.browser.style.display !== 'none';
 	}
 
 	/**
@@ -204,7 +203,7 @@ export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 	 * Close dialog
 	 */
 	close = (): void => {
-		this.dialog.close();
+		this._dialog.close();
 	};
 
 	/**
@@ -257,7 +256,7 @@ export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 
 			this.toolbar.build(this.o.buttons ?? []).appendTo(header);
 
-			this.dialog.open(this.browser, header);
+			this._dialog.open(this.browser, header);
 
 			this.e.fire('sort.filebrowser', this.state.sortBy);
 
@@ -311,12 +310,7 @@ export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 
 		self.dataProvider = makeDataProvider(self, self.options);
 
-		self.dialog = new Dialog({
-			fullsize: self.o.fullsize,
-			ownerWindow: self.ownerWindow,
-			theme: self.o.theme,
-			globalFullSize: self.o.globalFullSize,
-			language: this.o.language,
+		self._dialog = this.dialog({
 			minWidth: Math.min(700, screen.width),
 			minHeight: 300,
 			buttons: this.o.headerButtons ?? ['fullsize', 'dialog.close']
@@ -338,7 +332,7 @@ export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 		nativeListeners.call(self);
 		stateListeners.call(self);
 
-		self.dialog.setSize(self.o.width, self.o.height);
+		self._dialog.setSize(self.o.width, self.o.height);
 
 		const keys: Array<keyof IFileBrowserOptions> = [
 			'getLocalFileByUrl',
@@ -408,7 +402,7 @@ export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 
 	private proxyDialogEvents(self: FileBrowser): void {
 		['afterClose', 'beforeOpen'].forEach(proxyEvent => {
-			self.dialog.events.on(self.dialog, proxyEvent, () => {
+			self._dialog.events.on(self.dialog, proxyEvent, () => {
 				this.e.fire(proxyEvent);
 			});
 		});
@@ -421,7 +415,7 @@ export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 
 		super.destruct();
 
-		this.dialog.destruct();
+		this._dialog.destruct();
 		this.events && this.e.off('.filebrowser');
 		this.uploader && this.uploader.destruct();
 	}