Skip to content

fix: fix component style #34

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tianyingchun merged 2 commits into from
Jun 20, 2025
Merged

fix: fix component style #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b87143e
fix: fix component style
tclxshunquan-wang Jun 20, 2025
8d746d3
refactor: update Overlay and OverlayTip components to improve state m…
tclxshunquan-wang Jun 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/dull-geckos-run.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@hyperse/inspector-component": patch
---

Fix: Resolved style override issues within Shadow DOM environments.
Fix: Addressed compatibility issues when setting the translate property on documentElement.
3 changes: 1 addition & 2 deletions packages/inspector-component/eslint.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import { base, defineConfig, react } from '@hyperse/eslint-config-hyperse';
import { base, defineConfig } from '@hyperse/eslint-config-hyperse';

export default defineConfig([
...base,
react,
{
rules: {
'@typescript-eslint/no-explicit-any': 'off',
Expand Down
25 changes: 15 additions & 10 deletions packages/inspector-component/src/components/Panel.styled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ export const PanelActionButton = styled.button`
padding: 6px 8px;
font-size: 14px;
border-radius: 4px;
font-weight: 600;
background-color: transparent;
border: none;
&:hover {
Expand All @@ -56,10 +57,11 @@ export const PanelActionButton = styled.button`
export const PanelContentLayout = styled.div`
display: flex;
flex-direction: column;
height: 24rem;
height: 400px;
overflow-y: auto;
background-color: transparent;
padding: 0.5rem;
padding: 10px;
font-size: 12px;

/* Hide scrollbar for Chrome, Safari and Opera */
&::-webkit-scrollbar {
Expand All @@ -75,7 +77,7 @@ export const PanelListItemActionLayout = styled.div`
display: flex;
align-items: center;
flex-direction: row;
gap: 0.1rem;
gap: 2px;
opacity: 0;
`;

Expand All @@ -84,10 +86,11 @@ export const PanelListItem = styled.div`
cursor: pointer;
flex-direction: column;
justify-content: center;
gap: 0.5rem;
border-radius: 0.375rem;
padding: 0.5rem;
gap: 6px;
border-radius: 8px;
padding: 6px;
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
&:hover {
background-color: rgba(255, 255, 255, 0.2);
${PanelListItemActionLayout} {
Expand All @@ -99,7 +102,8 @@ export const PanelListItem = styled.div`

export const PanelListItemTitle = styled.span`
flex: 1;
font-weight: 700;
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
overflow: hidden;
text-overflow: ellipsis;
Expand All @@ -116,15 +120,15 @@ export const PanelListItemDescription = styled.span`
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.75rem;
font-size: 12px;
`;

export const PanelListItemActionButton = styled.div`
display: flex;
align-items: center;
justify-content: center;
padding: 0.25rem;
border-radius: 0.25rem;
padding: 6px;
border-radius: 12px;
background-color: transparent;
border: none;
cursor: pointer;
Expand All @@ -139,4 +143,5 @@ export const PanelListItemActionButton = styled.div`
export const PanelListItemRow = styled.div`
display: flex;
flex-direction: row;
align-items: center;
`;
10 changes: 6 additions & 4 deletions packages/inspector-component/src/components/ShadowRoot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useEffect, useRef, type ReactNode } from 'react';
import { type ReactNode, useEffect, useRef } from 'react';
import { createRoot } from 'react-dom/client';
import { StyleSheetManager } from 'styled-components';

Expand All @@ -9,17 +9,19 @@ const ShadowRoot = ({ children }: { children: ReactNode }) => {
if (!hostRef.current || hostRef.current.shadowRoot) return;

const shadowRoot = hostRef.current.attachShadow({ mode: 'open' });

const container = document.createElement('div');
shadowRoot.appendChild(container);

const root = createRoot(container);
root.render(<StyleSheetManager target={shadowRoot}>{children}</StyleSheetManager>);
root.render(
<StyleSheetManager target={shadowRoot}>{children}</StyleSheetManager>
);

return () => root.unmount();
}, []);

return <div ref={hostRef} />;
};

export default ShadowRoot;
export default ShadowRoot;
27 changes: 27 additions & 0 deletions packages/inspector-component/src/helpers/helper-copy-text.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
export const copyText = (text: string) => {
if (navigator.clipboard) {
try {
void navigator.clipboard.writeText(text);
} catch (err) {
console.log(err);
}
}
// eslint-disable-next-line @typescript-eslint/no-deprecated
if (typeof document.execCommand === 'function') {
try {
const input = document.createElement('textarea');
input.setAttribute('readonly', 'readonly');
input.value = text;
document.body.appendChild(input);
input.select();
// eslint-disable-next-line @typescript-eslint/no-deprecated
if (document.execCommand('copy')) {
// eslint-disable-next-line @typescript-eslint/no-deprecated
document.execCommand('copy');
}
document.body.removeChild(input);
} catch (error) {
console.log(error);
}
}
};
Comment on lines +1 to +27
Copy link

@coderabbitai coderabbitai bot Jun 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix the redundant execCommand call and improve error handling.

The helper function has good structure with proper fallback, but contains a logic error and could be improved:

  1. Critical Issue: Lines 18-20 call execCommand('copy') twice redundantly
  2. Improvement: Consider returning success/failure status and providing more informative error messages

Apply this diff to fix the logic error:

-      if (document.execCommand('copy')) {
-        // eslint-disable-next-line @typescript-eslint/no-deprecated
-        document.execCommand('copy');
-      }
+      // eslint-disable-next-line @typescript-eslint/no-deprecated
+      document.execCommand('copy');

Consider enhancing the function to return success status:

-export const copyText = (text: string) => {
+export const copyText = (text: string): Promise<boolean> | boolean => {
   if (navigator.clipboard) {
     try {
-      void navigator.clipboard.writeText(text);
+      return navigator.clipboard.writeText(text).then(() => true).catch((err) => {
+        console.error('Clipboard API failed:', err);
+        return false;
+      });
     } catch (err) {
-      console.log(err);
+      console.error('Clipboard API failed:', err);
     }
   }
   // ... rest of fallback logic with similar improvements
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export const copyText = (text: string) => {
if (navigator.clipboard) {
try {
void navigator.clipboard.writeText(text);
} catch (err) {
console.log(err);
}
}
// eslint-disable-next-line @typescript-eslint/no-deprecated
if (typeof document.execCommand === 'function') {
try {
const input = document.createElement('textarea');
input.setAttribute('readonly', 'readonly');
input.value = text;
document.body.appendChild(input);
input.select();
// eslint-disable-next-line @typescript-eslint/no-deprecated
if (document.execCommand('copy')) {
// eslint-disable-next-line @typescript-eslint/no-deprecated
document.execCommand('copy');
}
document.body.removeChild(input);
} catch (error) {
console.log(error);
}
}
};
export const copyText = (text: string) => {
if (navigator.clipboard) {
try {
void navigator.clipboard.writeText(text);
} catch (err) {
console.log(err);
}
}
// eslint-disable-next-line @typescript-eslint/no-deprecated
if (typeof document.execCommand === 'function') {
try {
const input = document.createElement('textarea');
input.setAttribute('readonly', 'readonly');
input.value = text;
document.body.appendChild(input);
input.select();
// eslint-disable-next-line @typescript-eslint/no-deprecated
document.execCommand('copy');
document.body.removeChild(input);
} catch (error) {
console.log(error);
}
}
};
🤖 Prompt for AI Agents 
In packages/inspector-component/src/helpers/helper-copy-text.ts lines 1 to 27,
remove the redundant second call to document.execCommand('copy') inside the
fallback block to fix the logic error. Additionally, enhance the function by
returning a boolean indicating success or failure of the copy operation and
improve error handling by logging more informative error messages that specify
which method failed.

7 changes: 4 additions & 3 deletions packages/inspector-component/src/overlay/Overlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { createRef, type RefObject } from 'react';
import { createRoot } from 'react-dom/client';
import ShadowRoot from '../components/ShadowRoot.js';
import { InspectorOverlayTagName } from '../constant.js';
import { getElementDimensions } from '../helpers/helper-element-dimensions.js';
import { getBoundingRect } from '../helpers/helper-rect.js';
import ShadowRoot from '../components/ShadowRoot.js';
import type { BoxSizing, Rect } from '../types/type-rect.js';
import InspectorOverlay, {
type InspectorOverlayRef,
Expand All @@ -23,9 +23,10 @@ export class Overlay {
this.overlay = document.createElement(
InspectorOverlayTagName
) as HTMLDivElement;
doc.body.appendChild(this.overlay);
doc.documentElement.appendChild(this.overlay);

createRoot(this.overlay).render(
this.root = createRoot(this.overlay);
this.root.render(
<ShadowRoot>
<InspectorOverlay ref={this.overlayInstance} />
</ShadowRoot>
Expand Down
177 changes: 86 additions & 91 deletions packages/inspector-component/src/overlay/OverlayTip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,4 @@
import {
type CSSProperties,
useEffect,
useRef,
useState,
} from 'react';
import { type CSSProperties, useEffect, useRef, useState } from 'react';
import { Overlay } from '../components/index.js';
import {
getViewSpaceBox,
Expand All @@ -23,100 +18,100 @@ export interface OverlayTipProps {
cornerHintText?: string;
}

const OverlayTip =
({
title,
info,
className,
boundingRect,
boxSizing,
spaceBox,
showCornerHint,
cornerHintText = 'Right-click to show list.',
}: OverlayTipProps) => {
const tipSpaceBox = () => spaceBox ?? getViewSpaceBox();
const containerRef = useRef<HTMLDivElement>(null);
const hidden = !boundingRect || !boxSizing;
const infoDisplay = info ? 'block' : 'none';
const width = Math.round(boundingRect?.width ?? 0);
const height = Math.round(boundingRect?.height ?? 0);

const [position, setPosition] = useState<Pick<CSSProperties, 'translate'>>(
{}
);

const outerBox = (): Rect => {
if (!boundingRect || !boxSizing) {
return {
x: 0,
y: 0,
width: 0,
height: 0,
};
}
const OverlayTip = ({
title,
info,
className,
boundingRect,
boxSizing,
spaceBox,
showCornerHint,
cornerHintText = 'Right-click to show list.',
}: OverlayTipProps) => {
const tipSpaceBox = () => spaceBox ?? getViewSpaceBox();
const containerRef = useRef<HTMLDivElement>(null);
const hidden = !boundingRect || !boxSizing;
const infoDisplay = info ? 'block' : 'none';
const width = Math.round(boundingRect?.width ?? 0);
const height = Math.round(boundingRect?.height ?? 0);

const top = boundingRect.y - Math.max(boxSizing.marginTop, 0);
const left = boundingRect.x - Math.max(boxSizing.marginLeft, 0);
const right =
boundingRect.x +
boundingRect.width +
Math.max(boxSizing.marginRight, 0);
const bottom =
boundingRect.y +
boundingRect.height +
Math.max(boxSizing.marginBottom, 0);
const [position, setPosition] = useState<Pick<CSSProperties, 'translate'>>({
translate: '0px 0px',
});

const outerBox = (): Rect => {
if (!boundingRect || !boxSizing) {
return {
x: left,
y: top,
width: right - left,
height: bottom - top,
x: 0,
y: 0,
width: 0,
height: 0,
};
}

const top = boundingRect.y - Math.max(boxSizing.marginTop, 0);
const left = boundingRect.x - Math.max(boxSizing.marginLeft, 0);
const right =
boundingRect.x + boundingRect.width + Math.max(boxSizing.marginRight, 0);
const bottom =
boundingRect.y +
boundingRect.height +
Math.max(boxSizing.marginBottom, 0);

return {
x: left,
y: top,
width: right - left,
height: bottom - top,
};
};

useEffect(() => {
if (!containerRef.current) return;
restraintTipPosition({
elementBox: outerBox(),
spaceBox: tipSpaceBox(),
tipSize: containerRef.current!.getBoundingClientRect().toJSON(),
}).then((position) => {
useEffect(() => {
let mounted = true;
if (!containerRef.current) return;
restraintTipPosition({
elementBox: outerBox(),
spaceBox: tipSpaceBox(),
tipSize: containerRef.current!.getBoundingClientRect().toJSON(),
}).then((position) => {
if (mounted) {
setPosition({
translate: `${position.left}px ${position.top}px`,
});
});
}, [containerRef, boundingRect, boxSizing]);
}
});
return () => {
mounted = false;
};
}, [containerRef, boundingRect, boxSizing, spaceBox]);

return (
<Overlay.OverlayTipRoot
ref={containerRef}
className={className}
style={{
display: hidden ? 'none' : 'flex',
translate: position.translate,
}}
>
<Overlay.OverlayInfoRow>
<Overlay.OverlayInfoName>
<Overlay.OverlayInfoTitle>
&lrm;{title}&lrm;
</Overlay.OverlayInfoTitle>
<Overlay.OverlayInfoSubtitle style={{ display: infoDisplay }}>
&lrm;{info}&lrm;
</Overlay.OverlayInfoSubtitle>
</Overlay.OverlayInfoName>
<Overlay.OverlaySeparator />
<Overlay.OverlaySize>
{width}px × {height}px
</Overlay.OverlaySize>
</Overlay.OverlayInfoRow>
<Overlay.OverlayCornerHint
style={{
display: showCornerHint ? 'block' : 'none',
}}
>{cornerHintText}</Overlay.OverlayCornerHint>
</Overlay.OverlayTipRoot>
);
}
return (
<Overlay.OverlayTipRoot
ref={containerRef}
className={className}
style={{
display: hidden ? 'none' : 'flex',
translate: position.translate,
transform: `translate(${position.translate})`,
}}
>
<Overlay.OverlayInfoRow>
<Overlay.OverlayInfoName>
<Overlay.OverlayInfoTitle>&lrm;{title}&lrm;</Overlay.OverlayInfoTitle>
<Overlay.OverlayInfoSubtitle style={{ display: infoDisplay }}>
&lrm;{info}&lrm;
</Overlay.OverlayInfoSubtitle>
</Overlay.OverlayInfoName>
<Overlay.OverlaySeparator />
<Overlay.OverlaySize>
{width}px × {height}px
</Overlay.OverlaySize>
</Overlay.OverlayInfoRow>
{showCornerHint && (
<Overlay.OverlayCornerHint>{cornerHintText}</Overlay.OverlayCornerHint>
)}
</Overlay.OverlayTipRoot>
);
};

export default OverlayTip;
Loading