diff --git a/packages/dockview-core/src/dom.ts b/packages/dockview-core/src/dom.ts index 3dc9000a9..4d06ffa53 100644 --- a/packages/dockview-core/src/dom.ts +++ b/packages/dockview-core/src/dom.ts @@ -112,8 +112,11 @@ export function isAncestor( return false; } -export function getElementsByTagName(tag: string): HTMLElement[] { - return Array.prototype.slice.call(document.getElementsByTagName(tag), 0); +export function getElementsByTagName( + tag: string, + document: ParentNode +): HTMLElement[] { + return Array.prototype.slice.call(document.querySelectorAll(tag), 0); } export interface IFocusTracker extends IDisposable { @@ -288,10 +291,29 @@ export function addTestId(element: HTMLElement, id: string): void { element.setAttribute('data-testid', id); } -export function disableIframePointEvents() { +export function disableIframePointEvents(rootNode: ParentNode = document) { + const includeShadowDom = true; + + const shadowRoots: ShadowRoot[] = []; + + if (includeShadowDom) { + const items = rootNode.querySelectorAll('*'); + + for (let i = 0; i < items.length; i++) { + const item = items[i]; + if (item.shadowRoot) { + shadowRoots.push(item.shadowRoot); + } + } + } + const iframes: HTMLElement[] = [ - ...getElementsByTagName('iframe'), - ...getElementsByTagName('webview'), + ...getElementsByTagName('iframe', rootNode), + ...getElementsByTagName('webview', rootNode), + ...shadowRoots.flatMap((root) => [ + ...getElementsByTagName('iframe', root), + ...getElementsByTagName('webview', root), + ]), ]; const original = new WeakMap(); // don't hold onto HTMLElement references longer than required diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx index a69632ebf..7c9fe42f7 100644 --- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx +++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx @@ -8,6 +8,7 @@ import { DockviewTheme, } from 'dockview'; import * as React from 'react'; +import * as ReactDOM from 'react-dom/client'; import './app.scss'; import { defaultConfig } from './defaultLayout'; import { GridActions } from './gridActions'; @@ -31,6 +32,20 @@ const Option = (props: { ); }; +const ShadowIframe = (props: IDockviewPanelProps) => { + return ( +