bug: disable iframes within shadowdom during dnd

mathuo · Dec 17, 2024 · a4b9255 · a4b9255
1 parent 4291774
commit a4b9255
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 10 deletions.
diff --git 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 = [];
+
+    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<HTMLElement, string>(); // 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
@@ -7,6 +7,7 @@ import {
     DockviewApi,
 } 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';
@@ -30,6 +31,20 @@ const Option = (props: {
     );
 };
 
+const ShadowIframe = (props: IDockviewPanelProps) => {
+    return (
+        <iframe
+            onMouseDown={() => {
+                if (!props.api.isActive) {
+                    props.api.setActive();
+                }
+            }}
+            style={{ border: 'none', width: '100%', height: '100%' }}
+            src="https://dockview.dev"
+        />
+    );
+};
+
 const components = {
     default: (props: IDockviewPanelProps) => {
         const isDebug = React.useContext(DebugContext);
@@ -105,13 +120,41 @@ const components = {
                     }
                 }}
                 style={{
+                    border: 'none',
                     width: '100%',
                     height: '100%',
                 }}
                 src="https://dockview.dev"
             />
         );
     },
+    shadowDom: (props: IDockviewPanelProps) => {
+        const ref = React.useRef<HTMLDivElement>(null);
+
+        React.useEffect(() => {
+            if (!ref.current) {
+                return;
+            }
+
+            const shadow = ref.current.attachShadow({
+                mode: 'open',
+            });
+
+            const shadowRoot = document.createElement('div');
+            shadowRoot.style.height = '100%';
+            shadow.appendChild(shadowRoot);
+
+            const root = ReactDOM.createRoot(shadowRoot);
+
+            root.render(<ShadowIframe {...props} />);
+
+            return () => {
+                root.unmount();
+            };
+        }, []);
+
+        return <div style={{ height: '100%' }} ref={ref}></div>;
+    },
 };
 
 const headerComponents = {
@@ -208,7 +251,7 @@ const DockviewDemo = (props: { theme?: string }) => {
 
         event.api.onDidMaximizedGroupChange((event) => {
             addLogLine(
-                `Group Maximized Changed ${event.view.id} [${event.isMaximized}]`
+                `Group Maximized Changed ${event.group.id} [${event.isMaximized}]`
             );
         });
 

diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx
@@ -132,15 +132,18 @@ export const GridActions = (props: {
 
     const popover = usePopover();
 
-    const onAddPanel = (options?: { advanced: boolean }) => {
+    const onAddPanel = (options?: {
+        advanced: boolean;
+        component?: string;
+    }) => {
         if (options?.advanced) {
             popover.open(({ close }) => {
                 return <PanelBuilder api={props.api!} done={close} />;
             });
         } else {
             props.api?.addPanel({
                 id: `id_${Date.now().toString()}`,
-                component: 'default',
+                component: options?.component ?? 'default',
                 title: `Tab ${nextId()}`,
                 renderer: 'always',
             });
@@ -170,6 +173,22 @@ export const GridActions = (props: {
                     <span className="material-symbols-outlined">tune</span>
                 </button>
             </div>
+            <div className="button-group">
+                <button
+                    className="text-button"
+                    onClick={() =>
+                        onAddPanel({ component: 'shadowDom', advanced: false })
+                    }
+                >
+                    Add Panel 2
+                </button>
+                <button
+                    className="demo-icon-button"
+                    onClick={() => onAddPanel({ advanced: true })}
+                >
+                    <span className="material-symbols-outlined">tune</span>
+                </button>
+            </div>
             <button className="text-button" onClick={onAddGroup}>
                 Add Group
             </button>

diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/panelActions.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/panelActions.tsx
@@ -75,9 +75,9 @@ const PanelAction = (props: {
                         const panel = props.api.getPanel(props.panelId);
                         if (panel) {
                             props.api.addFloatingGroup(panel, {
+                                width: 400,
+                                height: 300,
                                 position: {
-                                    width: 400,
-                                    height: 300,
                                     bottom: 50,
                                     right: 50,
                                 },