vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add enhance css for iframe

Browse Source
This commit is contained in:
Rohit
2025-06-30 21:10:06 +05:30
parent ae525894a4
commit 98770e3abc
1 changed files with 53 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/components/recorder/DOMBrowserRenderer.tsx
View File

@@ -296,23 +296,23 @@ export const DOMBrowserRenderer: React.FC<RRWebDOMBrowserRendererProps> = ({
if (element) { if (element) {
setCurrentHighlight({ setCurrentHighlight({
element, element,
rect: rect, rect: rect,
selector, selector,
elementInfo: { elementInfo: {
...elementInfo, ...elementInfo,
tagName: elementInfo?.tagName ?? "", tagName: elementInfo?.tagName ?? "",
isDOMMode: true, isDOMMode: true,
}, },
childSelectors, childSelectors,
}); });
if (onHighlight) { if (onHighlight) {
onHighlight({ onHighlight({
rect: rect, rect: rect,
elementInfo: { elementInfo: {
...elementInfo, ...elementInfo,
tagName: elementInfo?.tagName ?? "", tagName: elementInfo?.tagName ?? "",
isDOMMode: true, isDOMMode: true,
}, },
selector, selector,
childSelectors, childSelectors,
@@ -670,8 +670,8 @@ export const DOMBrowserRenderer: React.FC<RRWebDOMBrowserRendererProps> = ({
if (socket) { if (socket) {
socket.emit("dom:scroll", { socket.emit("dom:scroll", {
deltaX, deltaX,
deltaY deltaY,
}) });
} }
notifyLastAction("scroll"); notifyLastAction("scroll");
} }
@@ -790,34 +790,58 @@ export const DOMBrowserRenderer: React.FC<RRWebDOMBrowserRendererProps> = ({
rebuiltHTML = "<!DOCTYPE html>\n" + rebuiltHTML; rebuiltHTML = "<!DOCTYPE html>\n" + rebuiltHTML;
const minimalCSS = ` const enhancedCSS = `
<style> /* rrweb rebuilt content styles */
/* Minimal styles - don't override too much */ html, body {
html, body { margin: 0 !important;
margin: 0; padding: 8px !important;
padding: 8px; overflow-x: hidden !important;
overflow-x: hidden; }
}
html::-webkit-scrollbar,
/* Hide scrollbars but keep functionality */ body::-webkit-scrollbar {
::-webkit-scrollbar { width: 0px; background: transparent; } display: none !important;
body { scrollbar-width: none; -ms-overflow-style: none; } width: 0 !important;
height: 0 !important;
/* Prevent form submissions and navigation */ background: transparent !important;
form { pointer-events: none; } }
a[href] { pointer-events: ${isInCaptureMode ? "none" : "auto"}; }
</style> /* Hide scrollbars for all elements */
*::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
background: transparent !important;
}
* {
scrollbar-width: none !important; /* Firefox */
-ms-overflow-style: none !important; /* Internet Explorer 10+ */
}
/* Make everything interactive */
* {
cursor: "pointer" !important;
}
`; `;
if (rebuiltHTML.includes("<head>")) { const headTagRegex = /<head[^>]*>/i;
const cssInjection = `
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="${snapshotData.baseUrl}">
<style>${enhancedCSS}</style>
`;
if (headTagRegex.test(rebuiltHTML)) {
rebuiltHTML = rebuiltHTML.replace( rebuiltHTML = rebuiltHTML.replace(
"<head>", headTagRegex,
`<head><base href="${snapshotData.baseUrl}">${minimalCSS}` `<head>${cssInjection}`
); );
} else if (rebuiltHTML.includes("<html>")) { } else {
rebuiltHTML = rebuiltHTML.replace( rebuiltHTML = rebuiltHTML.replace(
"<html>", /<html[^>]*>/i,
`<html><head><base href="${snapshotData.baseUrl}">${minimalCSS}</head>` `<html><head>${cssInjection}</head>`
); );
} }