From 98770e3abc4bb892a7a36b0d25b77e381ba9e32b Mon Sep 17 00:00:00 2001 From: Rohit Date: Mon, 30 Jun 2025 21:10:06 +0530 Subject: [PATCH] feat: add enhance css for iframe --- .../recorder/DOMBrowserRenderer.tsx | 82 ++++++++++++------- 1 file changed, 53 insertions(+), 29 deletions(-) diff --git a/src/components/recorder/DOMBrowserRenderer.tsx b/src/components/recorder/DOMBrowserRenderer.tsx index 82c93d92..213488fd 100644 --- a/src/components/recorder/DOMBrowserRenderer.tsx +++ b/src/components/recorder/DOMBrowserRenderer.tsx @@ -296,23 +296,23 @@ export const DOMBrowserRenderer: React.FC = ({ if (element) { setCurrentHighlight({ element, - rect: rect, + rect: rect, selector, elementInfo: { ...elementInfo, tagName: elementInfo?.tagName ?? "", isDOMMode: true, }, - childSelectors, + childSelectors, }); if (onHighlight) { onHighlight({ - rect: rect, + rect: rect, elementInfo: { ...elementInfo, tagName: elementInfo?.tagName ?? "", - isDOMMode: true, + isDOMMode: true, }, selector, childSelectors, @@ -670,8 +670,8 @@ export const DOMBrowserRenderer: React.FC = ({ if (socket) { socket.emit("dom:scroll", { deltaX, - deltaY - }) + deltaY, + }); } notifyLastAction("scroll"); } @@ -790,34 +790,58 @@ export const DOMBrowserRenderer: React.FC = ({ rebuiltHTML = "\n" + rebuiltHTML; - const minimalCSS = ` - + const enhancedCSS = ` + /* rrweb rebuilt content styles */ + html, body { + margin: 0 !important; + padding: 8px !important; + overflow-x: hidden !important; + } + + html::-webkit-scrollbar, + body::-webkit-scrollbar { + display: none !important; + width: 0 !important; + height: 0 !important; + background: transparent !important; + } + + /* 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("")) { + const headTagRegex = /]*>/i; + const cssInjection = ` + + + + + `; + + if (headTagRegex.test(rebuiltHTML)) { rebuiltHTML = rebuiltHTML.replace( - "", - `${minimalCSS}` + headTagRegex, + `${cssInjection}` ); - } else if (rebuiltHTML.includes("")) { + } else { rebuiltHTML = rebuiltHTML.replace( - "", - `${minimalCSS}` + /]*>/i, + `${cssInjection}` ); }