update

Author: MrWangJustToDo

ui/react-example/src/components/MainContent/MainContentDiffAdvance.tsx

@@ -16,11 +16,13 @@ const transform = (str: string) =>
     .replace(/\t/g, '<span class="diff-symbol diff-symbol-tab">\t</span>');
 
 export const MainContentDiffAdvance = () => {
-  const { tabSpace, setFastDiff, setTabSpace, fastDiff } = useDiffConfig((s) => ({
+  const { tabSpace, setFastDiff, setTabSpace, fastDiff, shadowDOM, setShadowDOM } = useDiffConfig((s) => ({
     tabSpace: s.tabSpace,
     setTabSpace: s.setTabSpace,
     fastDiff: s.fastDiff,
     setFastDiff: s.setFastDiff,
+    shadowDOM: s.shadowDOM,
+    setShadowDOM: s.setShadowDOM,
   }));
 
   useEffect(() => {
@@ -54,6 +56,9 @@ export const MainContentDiffAdvance = () => {
       <Button onClick={() => setFastDiff(!fastDiff)}>
         {fastDiff ? "disable fast diff template" : "enable fast diff template"}
       </Button>
+      <Button onClick={() => setShadowDOM(!shadowDOM)}>
+        {shadowDOM ? "disable shadow DOM" : "enable shadow DOM"}
+      </Button>
     </Group>
   );
 };

ui/react-example/src/components/MainContent/MainContentDiffExample.tsx

@@ -1,14 +1,14 @@
 import { generateDiffFile, DiffFile } from "@git-diff-view/file";
 import { Button, ButtonGroup, Card, FloatingIndicator, Group, LoadingOverlay, Popover, Tooltip } from "@mantine/core";
-import { useDisclosure, useMounted } from "@mantine/hooks";
+import { useCallbackRef, useDisclosure, useMounted } from "@mantine/hooks";
 import { IconCode, IconPlayerPlay, IconRefresh, IconBrandReact, IconBrandVue } from "@tabler/icons-react";
 import { useState, startTransition, useCallback, forwardRef, useMemo, useEffect } from "react";
 
 import { useDiffHighlighter } from "../../hooks/useDiffHighlighter";
 
 import { MainContentDiffExampleCode } from "./MainContentDiffExampleCode";
 import { temp1, temp2 } from "./MainContentDiffExampleData";
-import { MainContentDiffExampleView } from "./MainContentDiffExampleView";
+import { MainContentDiffExampleViewWrapper } from "./MainContentDiffExampleViewWrapper";
 
 const _diffFile = generateDiffFile("temp1.tsx", temp1, "temp2.tsx", temp2, "tsx", "tsx");
 
@@ -39,14 +39,14 @@ export const MainContentDiffExample = ({ onUpdate }: { onUpdate?: (diffFile: Dif
 
   const [loading, setLoading] = useState(false);
 
-  const refreshFile = () => {
+  const refreshFile = useCallbackRef(() => {
     setLoading(true);
     setDiffFile(getNewDiffFile());
     // simulate loading
     setTimeout(() => {
       startTransition(() => setLoading(false));
     }, 800);
-  };
+  });
 
   const [diffFile, setDiffFile] = useState(() => getNewDiffFile());
 
@@ -174,7 +174,8 @@ export const MainContentDiffExample = ({ onUpdate }: { onUpdate?: (diffFile: Dif
       {code ? (
         <MainContentDiffExampleCode type={platform} />
       ) : (
-        <MainContentDiffExampleView diffFile={diffFile} highlighter={highlighter} refreshDiffFile={refreshFile} />
+        <MainContentDiffExampleViewWrapper diffFile={diffFile} highlighter={highlighter} refreshDiffFile={refreshFile}  />
+        // <MainContentDiffExampleView diffFile={diffFile} highlighter={highlighter} refreshDiffFile={refreshFile} />
       )}
     </>
   );

ui/react-example/src/components/MainContent/MainContentDiffExampleViewWrapper.tsx

@@ -0,0 +1,77 @@
+import diffStyle from "@git-diff-view/react/styles/diff-view-pure.css?inline";
+import { MantineProvider } from "@mantine/core";
+import mantineStyle from "@mantine/core/styles.css?inline";
+import overlayscrollbarsStyle from "overlayscrollbars/overlayscrollbars.css?inline";
+import { useEffect, useRef, useState } from "react";
+import { createRoot } from "react-dom/client";
+
+import { useDiffConfig } from "../../hooks/useDiffConfig";
+import styles from "../../index.css?inline";
+import { theme } from "../../theme";
+
+import { MainContentDiffExampleView } from "./MainContentDiffExampleView";
+
+import type { DiffFile, DiffViewProps } from "@git-diff-view/react";
+import type { Root } from "react-dom/client";
+
+export const MainContentDiffExampleViewWrapper = ({
+  diffFile,
+  highlighter,
+  refreshDiffFile,
+}: {
+  diffFile: DiffFile;
+  highlighter?: DiffViewProps<string[]>["registerHighlighter"];
+  refreshDiffFile: () => void;
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  const [root, setRoot] = useState<Root>();
+
+  const shadow = useDiffConfig((s) => s.shadowDOM);
+
+  useEffect(() => {
+    if (shadow) {
+      const shadowRoot = ref.current?.shadowRoot || ref.current?.attachShadow({ mode: "open" });
+      if (shadowRoot) {
+        const reactRoot = createRoot(shadowRoot);
+        setRoot(reactRoot);
+      }
+    }
+  }, [shadow]);
+
+  useEffect(() => {
+    if (root) {
+      root.render(
+        <>
+          <style>{styles}</style>
+          <style>{mantineStyle}</style>
+          <style>{overlayscrollbarsStyle}</style>
+          <style>{diffStyle}</style>
+          <MantineProvider theme={theme}>
+            <MainContentDiffExampleView
+              diffFile={diffFile}
+              highlighter={highlighter}
+              refreshDiffFile={refreshDiffFile}
+            />
+          </MantineProvider>
+        </>
+      );
+    }
+  }, [root, diffFile, highlighter, refreshDiffFile]);
+
+  useEffect(() => {
+    return () => {
+      if (root) {
+        root.unmount();
+      }
+    };
+  }, [root]);
+
+  if (shadow) {
+    return <div ref={ref} className="h-full overflow-auto" />;
+  } else {
+    return (
+      <MainContentDiffExampleView diffFile={diffFile} highlighter={highlighter} refreshDiffFile={refreshDiffFile} />
+    );
+  }
+};

ui/react-example/src/hooks/useDiffConfig.ts

@@ -9,6 +9,7 @@ type DiffConfig = {
   engine: "lowlight" | "shiki";
   tabSpace: boolean;
   fastDiff: boolean;
+  shadowDOM: boolean;
 };
 
 export const useDiffConfig = createState(
@@ -21,6 +22,7 @@ export const useDiffConfig = createState(
       engine: "lowlight",
       tabSpace: false,
       fastDiff: false,
+      shadowDOM: false,
     }) as DiffConfig,
   {
     withActions(state) {
@@ -59,7 +61,12 @@ export const useDiffConfig = createState(
           if (v !== state.fastDiff) {
             state.fastDiff = v;
           }
-        }
+        },
+        setShadowDOM: (v: boolean) => {
+          if (v !== state.shadowDOM) {
+            state.shadowDOM = v;
+          }
+        },
       };
     },
     withNamespace: "diffConfig",