Merge pull request #39 from MrWangJustToDo/fix/shadow-dom

MrWangJustToDo · web-flow · commit d01788a9f398 · 2025-08-24T23:11:13.000+08:00
Fix shadow dom
diff --git a/packages/react/index.d.ts b/packages/react/index.d.ts
@@ -821,6 +821,8 @@ declare const createDiffConfigStore: (props: DiffViewProps<any> & {
 }, diffFileId: string) => import("reactivity-store").UseSelectorWithStore<{
 	id: import("reactivity-store").Ref<string, string>;
 	setId: (_id: string) => string;
+	dom: import("reactivity-store").Ref<HTMLElement, HTMLElement>;
+	setDom: (_dom: HTMLElement) => HTMLElement;
 	mode: import("reactivity-store").Ref<DiffModeEnum, DiffModeEnum>;
 	setMode: (_mode: DiffModeEnum) => DiffModeEnum;
 	mounted: import("reactivity-store").Ref<boolean, boolean>;
diff --git a/packages/react/src/components/DiffView.tsx b/packages/react/src/components/DiffView.tsx
@@ -210,6 +210,10 @@ const InternalDiffView = <T extends unknown>(
     onCreateUseWidgetHook,
   ]);
 
+  useEffect(() => {
+    useDiffContext.getReadonlyState().setDom(wrapperRef?.current);
+  }, [useDiffContext, wrapperRef]);
+
   const value = useMemo(() => ({ useDiffContext }), [useDiffContext]);
 
   return (
diff --git a/packages/react/src/components/tools.ts b/packages/react/src/components/tools.ts
@@ -5,6 +5,10 @@ import type { RefObject } from "react";
 
 export const createDiffConfigStore = (props: DiffViewProps<any> & { isMounted: boolean }, diffFileId: string) => {
   return createStore(() => {
+    const dom = ref<HTMLElement>();
+
+    const setDom = (_dom: HTMLElement) => (dom.value = _dom);
+
     const id = ref(diffFileId);
 
     const setId = (_id: string) => (id.value = _id);
@@ -85,6 +89,8 @@ export const createDiffConfigStore = (props: DiffViewProps<any> & { isMounted: b
     return {
       id,
       setId,
+      dom,
+      setDom,
       mode,
       setMode,
       mounted,
diff --git a/packages/react/src/hooks/useDomWidth.ts b/packages/react/src/hooks/useDomWidth.ts
@@ -1,3 +1,4 @@
+import { getElementRoot } from "@git-diff-view/utils";
 import { useEffect, useState } from "react";
 
 import { useDiffViewContext } from "../components/DiffViewContext";
@@ -12,11 +13,13 @@ export const useDomWidth = ({ selector, enable }: { selector: string; enable: bo
 
   const { useDiffContext } = useDiffViewContext();
 
-  const { id, mounted } = useDiffContext.useShallowStableSelector((s) => ({ id: s.id, mounted: s.mounted }));
+  const { id, mounted, dom } = useDiffContext.useShallowStableSelector((s) => ({ id: s.id, mounted: s.mounted, dom: s.dom }));
 
   useEffect(() => {
     if (enable) {
-      const container = document.querySelector(`#diff-root${id}`);
+      const rootDocument = getElementRoot(dom as HTMLDivElement);
+
+      const container = rootDocument.querySelector(`#diff-root${id}`);
 
       const wrapper = container?.querySelector(selector);
 
@@ -61,7 +64,7 @@ export const useDomWidth = ({ selector, enable }: { selector: string; enable: bo
 
       return () => cleanCb();
     }
-  }, [selector, enable, id, mounted]);
+  }, [selector, enable, id, mounted, dom]);
 
   return width;
 };
diff --git a/packages/react/src/hooks/useSyncHeight.ts b/packages/react/src/hooks/useSyncHeight.ts
@@ -1,3 +1,4 @@
+import { getElementRoot } from "@git-diff-view/utils";
 import { useEffect } from "react";
 
 import { useDiffViewContext } from "../components/DiffViewContext";
@@ -17,11 +18,13 @@ export const useSyncHeight = ({
 }) => {
   const { useDiffContext } = useDiffViewContext();
 
-  const { id, mounted } = useDiffContext.useShallowStableSelector((s) => ({ id: s.id, mounted: s.mounted }));
+  const { id, mounted, dom } = useDiffContext.useShallowStableSelector((s) => ({ id: s.id, mounted: s.mounted, dom: s.dom }));
 
   useEffect(() => {
     if (enable) {
-      const container = document.querySelector(`#diff-root${id}`);
+      const rootDocument = getElementRoot(dom as HTMLDivElement);
+
+      const container = rootDocument.querySelector(`#diff-root${id}`);
 
       const elements = Array.from(container?.querySelectorAll(selector) || []);
 
@@ -83,5 +86,5 @@ export const useSyncHeight = ({
         return () => cleanCb();
       }
     }
-  }, [selector, enable, side, id, wrapper, mounted]);
+  }, [selector, enable, side, id, wrapper, mounted, dom]);
 };
diff --git a/packages/solid/src/components/DiffView.tsx b/packages/solid/src/components/DiffView.tsx
@@ -119,6 +119,7 @@ const InternalDiffView = <T extends unknown>(props: DiffViewProps<T>) => {
   createEffect(() => {
     const {
       setId,
+      setDom,
       setEnableAddWidget,
       setEnableHighlight,
       setEnableWrap,
@@ -146,6 +147,8 @@ const InternalDiffView = <T extends unknown>(props: DiffViewProps<T>) => {
 
     setMode(props.diffViewMode || DiffModeEnum.Split);
 
+    setDom(wrapperRef() as HTMLElement);
+
     setOnAddWidgetClick({ current: props.onAddWidgetClick });
 
     setRenderExtendLine(props.renderExtendLine);
diff --git a/packages/solid/src/components/tools.ts b/packages/solid/src/components/tools.ts
@@ -8,6 +8,10 @@ export const createDiffConfigStore = (props: DiffViewProps<any>, diffFileId: str
 
     const setId = (_id: string) => (id.value = _id);
 
+    const dom = ref<HTMLElement>();
+
+    const setDom = (_dom: HTMLElement) => (dom.value = _dom);
+
     const mode = ref(props.diffViewMode);
 
     const setMode = (_mode: DiffModeEnum) => (mode.value = _mode);
@@ -60,6 +64,8 @@ export const createDiffConfigStore = (props: DiffViewProps<any>, diffFileId: str
     return {
       id,
       setId,
+      dom,
+      setDom,
       mode,
       setMode,
       isMounted,
diff --git a/packages/solid/src/hooks/generate.ts b/packages/solid/src/hooks/generate.ts
@@ -2,11 +2,38 @@ import { createEffect, createSignal, onCleanup } from "solid-js";
 
 import { useDiffViewContext } from "../components/DiffViewContext";
 
+import type { DiffViewProps } from "../components/DiffView";
 import type { createDiffConfigStore } from "../components/tools";
+import type { DiffModeEnum } from "@git-diff-view/utils";
 
 type AllKey = keyof ReturnType<ReturnType<typeof createDiffConfigStore>["getReadonlyState"]>;
 
-type Data = ReturnType<ReturnType<typeof createDiffConfigStore>["getReadonlyState"]>;
+type Data = {
+  id: string;
+  setId: (id: string) => void;
+  dom: HTMLElement | undefined;
+  setDom: (dom: HTMLElement) => void;
+  mode: DiffModeEnum;
+  setMode: (mode: DiffModeEnum) => void;
+  isMounted: boolean;
+  setIsIsMounted: (isMounted: boolean) => void;
+  enableWrap: boolean;
+  setEnableWrap: (enableWrap: boolean) => void;
+  enableAddWidget: boolean;
+  setEnableAddWidget: (enableAddWidget: boolean) => void;
+  enableHighlight: boolean;
+  setEnableHighlight: (enableHighlight: boolean) => void;
+  fontSize: number;
+  setFontSize: (fontSize: number) => void;
+  extendData: DiffViewProps<any>["extendData"];
+  setExtendData: (extendData: DiffViewProps<any>["extendData"]) => void;
+  renderWidgetLine: DiffViewProps<any>["renderWidgetLine"];
+  setRenderWidgetLine: (renderWidgetLine: DiffViewProps<any>["renderWidgetLine"]) => void;
+  renderExtendLine: DiffViewProps<any>["renderExtendLine"];
+  setRenderExtendLine: (renderExtendLine: DiffViewProps<any>["renderExtendLine"]) => void;
+  onAddWidgetClick: { current: DiffViewProps<any>["onAddWidgetClick"] };
+  setOnAddWidgetClick: (onAddWidgetClick: { current: DiffViewProps<any>["onAddWidgetClick"] }) => void;
+};
 
 export const generateHook = <T extends AllKey, K extends Data[T] = Data[T]>(key: T) => {
   return () => {
diff --git a/packages/solid/src/hooks/index.ts b/packages/solid/src/hooks/index.ts
@@ -4,6 +4,7 @@ export * from "./useIsMounted";
 export * from "./useTextWidth";
 export * from "./useMode";
 export * from "./useId";
+export * from "./useDom";
 export * from "./useDomWidth";
 export * from "./useSyncHeight";
 export * from "./useExtendData";
diff --git a/packages/solid/src/hooks/useDom.ts b/packages/solid/src/hooks/useDom.ts
@@ -0,0 +1,6 @@
+import { generateHook } from "./generate";
+
+import type { Accessor } from "solid-js";
+
+
+export const useDom = generateHook("dom") as () => Accessor<HTMLElement | undefined>;
diff --git a/packages/solid/src/hooks/useDomWidth.ts b/packages/solid/src/hooks/useDomWidth.ts
@@ -1,5 +1,7 @@
+import { getElementRoot } from "@git-diff-view/utils";
 import { createEffect, createSignal, onCleanup, type Accessor } from "solid-js";
 
+import { useDom } from "./useDom";
 import { useId } from "./useId";
 import { useIsMounted } from "./useIsMounted";
 
@@ -11,6 +13,8 @@ export type ObserveElement = HTMLElement & {
 export const useDomWidth = ({ selector, enable }: { selector: Accessor<string>; enable: Accessor<boolean> }) => {
   const id = useId();
 
+  const dom = useDom();
+
   const mounted = useIsMounted();
 
   const [width, setWidth] = createSignal(0);
@@ -19,7 +23,9 @@ export const useDomWidth = ({ selector, enable }: { selector: Accessor<string>;
     if (!mounted()) return;
 
     if (enable()) {
-      const container = document.querySelector(`#diff-root${id()}`);
+      const rootDocument = getElementRoot(dom());
+
+      const container = rootDocument.querySelector(`#diff-root${id()}`);
 
       const wrapper = container?.querySelector(selector());
 
diff --git a/packages/solid/src/hooks/useSyncHeight.ts b/packages/solid/src/hooks/useSyncHeight.ts
@@ -1,5 +1,7 @@
+import { getElementRoot } from "@git-diff-view/utils";
 import { createEffect, onCleanup, type Accessor } from "solid-js";
 
+import { useDom } from "./useDom";
 import { useId } from "./useId";
 import { useIsMounted } from "./useIsMounted";
 
@@ -18,6 +20,8 @@ export const useSyncHeight = ({
 }) => {
   const id = useId();
 
+  const dom = useDom();
+
   const isMounted = useIsMounted();
 
   const observeHeight = () => {
@@ -26,7 +30,9 @@ export const useSyncHeight = ({
     if (enable()) {
       let clean = () => {};
 
-      const container = document.querySelector(`#diff-root${id()}`);
+      const rootDocument = getElementRoot(dom());
+
+      const container = rootDocument.querySelector(`#diff-root${id()}`);
 
       const elements = Array.from(container?.querySelectorAll(selector()) || []);
 
diff --git a/packages/svelte/src/lib/components/DiffUnifiedAddWidget.svelte b/packages/svelte/src/lib/components/DiffUnifiedAddWidget.svelte
@@ -27,7 +27,7 @@
 		class="diff-add-widget z-[1] flex h-full w-full origin-center cursor-pointer items-center justify-center rounded-md text-[1.2em]"
 		style={`
 			color: var(${addWidgetColorName});
-			backgroundColor: var(${addWidgetBGName});
+			background-color: var(${addWidgetBGName});
 		`}
 		onclick={() => {
 			props.onOpenAddWidget(props.lineNumber, props.side);
diff --git a/packages/svelte/src/lib/components/DiffView.svelte b/packages/svelte/src/lib/components/DiffView.svelte
@@ -9,6 +9,7 @@
 	import { setEnableWrap } from '$lib/context/enableWrap.js';
 	import { setRenderWidget } from '$lib/context/renderWidget.js';
 	import { setId } from '$lib/context/id.js';
+	import { setDom } from '$lib/context/dom.js';
 	import { setExtend } from '$lib/context/extend.js';
 	import { setWidget as setWidgetContext } from '$lib/context/widget.js';
 	import { setRenderExtend } from '$lib/context/renderExtend.js';
@@ -213,6 +214,8 @@
 	setExtend<T>(props);
 
 	setId(() => diffFile?.getId() || '');
+
+	setDom(() => wrapperRef as HTMLElement);
 </script>
 
 {#if diffFile}
diff --git a/packages/svelte/src/lib/context/dom.ts b/packages/svelte/src/lib/context/dom.ts
@@ -0,0 +1,11 @@
+import { setContext, getContext } from 'svelte';
+
+const key = Symbol('dom');
+
+export function setDom(getDom: () => HTMLElement) {
+	setContext(key, getDom);
+}
+
+export function getDom() {
+	return getContext(key) as () => HTMLElement;
+}
diff --git a/packages/svelte/src/lib/hooks/useDomWidth.svelte.ts b/packages/svelte/src/lib/hooks/useDomWidth.svelte.ts
@@ -1,4 +1,6 @@
+import { getDom } from '$lib/context/dom.js';
 import { getId } from '$lib/context/id.js';
+import { getElementRoot } from '$lib/utils/dom.js';
 
 import { useIsMounted } from './useIsMounted.svelte.js';
 
@@ -16,6 +18,8 @@ export const useDomWidth = ({
 }) => {
 	const id = $derived.by(getId());
 
+	const dom = $derived.by(getDom());
+
 	const isMounted = $derived.by(useIsMounted());
 
 	let width = $state(0);
@@ -26,7 +30,9 @@ export const useDomWidth = ({
 		if (!isMounted) return;
 
 		if (enable()) {
-			const container = document.querySelector(`#diff-root${id}`);
+			const rootDocument = getElementRoot(dom);
+
+			const container = rootDocument.querySelector(`#diff-root${id}`);
 
 			const wrapper = container?.querySelector(selector());
 
diff --git a/packages/svelte/src/lib/hooks/useSyncHeight.svelte.ts b/packages/svelte/src/lib/hooks/useSyncHeight.svelte.ts
@@ -1,4 +1,6 @@
+import { getDom } from '$lib/context/dom.js';
 import { getId } from '$lib/context/id.js';
+import { getElementRoot } from '$lib/utils/dom.js';
 
 import { useIsMounted } from './useIsMounted.svelte.js';
 
@@ -17,6 +19,8 @@ export const useSyncHeight = ({
 }) => {
 	const id = $derived.by(getId());
 
+	const dom = $derived.by(getDom());
+
 	const isMounted = $derived.by(useIsMounted());
 
 	const unSubscribe = { current: () => {} };
@@ -27,7 +31,9 @@ export const useSyncHeight = ({
 		if (enable()) {
 			let clean = () => {};
 
-			const container = document.querySelector(`#diff-root${id}`);
+			const rootDocument = getElementRoot(dom);
+
+			const container = rootDocument.querySelector(`#diff-root${id}`);
 
 			const elements = Array.from(container?.querySelectorAll(selector()) || []);
 
diff --git a/packages/utils/index.d.ts b/packages/utils/index.d.ts
@@ -35,6 +35,7 @@ export declare const getContentBG: (isAdded: boolean, isDelete: boolean, hasDiff
 export declare const getLineNumberBG: (isAdded: boolean, isDelete: boolean, hasDiff: boolean) => "var(--diff-add-lineNumber--)" | "var(--diff-del-lineNumber--)" | "var(--diff-plain-lineNumber--)" | "var(--diff-expand-lineNumber--)";
 export declare const removeAllSelection: () => void;
 export declare const syncScroll: (left: HTMLElement, right: HTMLElement) => () => void;
+export declare const getElementRoot: (element?: HTMLElement) => Document | ShadowRoot;
 export declare const diffFontSizeName = "--diff-font-size--";
 export declare const diffAsideWidthName = "--diff-aside-width--";
 export declare const memoFunc: <T extends Function>(func: T) => T;
diff --git a/packages/utils/src/dom.ts b/packages/utils/src/dom.ts
@@ -28,3 +28,16 @@ export const syncScroll = (left: HTMLElement, right: HTMLElement) => {
     right.onscroll = null;
   };
 };
+
+export const getElementRoot = (element?: HTMLElement) => {
+  if (element) {
+    const root = element.getRootNode();
+    
+    if (root instanceof ShadowRoot) {
+      return root;
+    }
+
+    return element.ownerDocument;
+  }
+  return document;
+};
diff --git a/packages/vue/src/components/DiffView.tsx b/packages/vue/src/components/DiffView.tsx
@@ -15,6 +15,7 @@ import {
   widgetStateSymbol,
   setWidgetStateSymbol,
   mountedSymbol,
+  domSymbol,
 } from "../context";
 import { useIsMounted } from "../hooks/useIsMounted";
 import { useProvide } from "../hooks/useProvide";
@@ -205,6 +206,8 @@ export const DiffView = defineComponent<
 
     provide(idSymbol, id);
 
+    provide(domSymbol, wrapperRef);
+
     provide(mountedSymbol, isMounted);
 
     provide(slotsSymbol, options.slots);
diff --git a/packages/vue/src/context/inject.ts b/packages/vue/src/context/inject.ts
@@ -1,6 +1,7 @@
 import { inject } from "vue";
 
 import {
+  domSymbol,
   enableAddWidgetSymbol,
   enableHighlightSymbol,
   enableWrapSymbol,
@@ -17,6 +18,8 @@ import {
 
 export const useId = () => inject(idSymbol);
 
+export const useDom = () => inject(domSymbol);
+
 export const useMode = () => inject(modeSymbol);
 
 export const useIsMounted = () => inject(mountedSymbol);
diff --git a/packages/vue/src/context/provider.ts b/packages/vue/src/context/provider.ts
diff --git a/packages/vue/src/hooks/useDomWidth.ts b/packages/vue/src/hooks/useDomWidth.ts
diff --git a/packages/vue/src/hooks/useSyncHeight.ts b/packages/vue/src/hooks/useSyncHeight.ts
diff --git a/ui/react-example/src/components/MainContent/MainContentDiffAdvance.tsx b/ui/react-example/src/components/MainContent/MainContentDiffAdvance.tsx
diff --git a/ui/react-example/src/components/MainContent/MainContentDiffExample.tsx b/ui/react-example/src/components/MainContent/MainContentDiffExample.tsx
diff --git a/ui/react-example/src/components/MainContent/MainContentDiffExampleViewWrapper.tsx b/ui/react-example/src/components/MainContent/MainContentDiffExampleViewWrapper.tsx
diff --git a/ui/react-example/src/hooks/useDiffConfig.ts b/ui/react-example/src/hooks/useDiffConfig.ts
