feat: devtools to shadow dom to avoid css influence

tolgee · Sep 3, 2022 · 7097b4a · 7097b4a
1 parent 80769a4
commit 7097b4a
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 10 deletions.
diff --git a/packages/ui/src/KeyContextMenu/KeyContextMenu.tsx b/packages/ui/src/KeyContextMenu/KeyContextMenu.tsx
@@ -4,8 +4,8 @@ import MenuItem from '@mui/material/MenuItem';
 import { styled } from '@mui/material/styles';
 import type { TranslationService } from '@tolgee/core/lib/services/TranslationService';
 
-import { ThemeProvider } from '../ThemeProvider';
 import { DEVTOOLS_ID, DEVTOOLS_Z_INDEX } from '../constants';
+import { ThemeProvider } from '../ThemeProvider';
 
 const ScMenuItem = styled(MenuItem)`
   display: flex;

diff --git a/packages/ui/src/ThemeProvider.tsx b/packages/ui/src/ThemeProvider.tsx
@@ -1,9 +1,11 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import {
   createTheme,
   ThemeProvider as MuiThemeProvider,
 } from '@mui/material/styles';
-import { DEVTOOLS_Z_INDEX } from './constants';
+import { DEVTOOLS_ID, DEVTOOLS_Z_INDEX } from './constants';
+import createCache from '@emotion/cache';
+import { CacheProvider } from '@emotion/react';
 
 let theme = createTheme({
   typography: {
@@ -53,5 +55,17 @@ theme = createTheme(theme, {
 });
 
 export const ThemeProvider: React.FC = ({ children }) => {
-  return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>;
+  const cache = useRef(
+    createCache({
+      key: 'css',
+      prepend: true,
+      container: document.getElementById(DEVTOOLS_ID).shadowRoot,
+    })
+  );
+
+  return (
+    <CacheProvider value={cache.current!}>
+      <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
+    </CacheProvider>
+  );
 };
diff --git a/packages/ui/src/common/BodyEnd.tsx b/packages/ui/src/common/BodyEnd.tsx
@@ -10,7 +10,10 @@ export class BodyEnd extends React.PureComponent<{ document?: Document }> {
   }
 
   get devTools() {
-    return this.document.getElementById(DEVTOOLS_ID) || this.document.body;
+    return (
+      this.document.getElementById(DEVTOOLS_ID)?.shadowRoot ||
+      this.document.body
+    );
   }
 
   componentDidMount() {

diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
@@ -10,15 +10,18 @@ export class UI {
   private keyContextMenu: KeyContextMenu;
 
   constructor(private dependencies: ComponentDependencies) {
-    const devTools = document.createElement('div');
-    devTools.id = DEVTOOLS_ID;
-    document.body.append(devTools);
+    const rootElement = document.createElement('div');
+    rootElement.id = DEVTOOLS_ID;
+    rootElement.attachShadow({ mode: 'open' });
+    const devTools = rootElement.shadowRoot;
+
+    document.body.appendChild(rootElement);
 
     const tolgeeModalContainer = document.createElement('div');
-    devTools.append(tolgeeModalContainer);
+    devTools.appendChild(tolgeeModalContainer);
 
     const contextMenuContainer = document.createElement('div');
-    devTools.append(contextMenuContainer);
+    devTools.appendChild(contextMenuContainer);
 
     const viewerElement = createElement(KeyDialog, {
       dependencies: this.dependencies,