Skip to content

Commit 25770f2

Browse files
iamogbziamogbz
committed
fix: prevent scrolling in mirror frame by default
1 parent c1b0e6d commit 25770f2

File tree

4 files changed

+148
-103
lines changed

4 files changed

+148
-103
lines changed

‎package.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,20 @@
4242
},
4343
"release": {
4444
"dryRun": false,
45+
"branches": [
46+
"+([0-9])?(.{+([0-9]),x}).x",
47+
"main",
48+
"next",
49+
"next-major",
50+
{
51+
"name": "beta",
52+
"prerelease": true
53+
},
54+
{
55+
"name": "alpha",
56+
"prerelease": true
57+
}
58+
],
4559
"plugins": [
4660
"@semantic-release/commit-analyzer",
4761
"@semantic-release/release-notes-generator",

‎src/components/Frame.tsx‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,14 @@ export type FrameProps = Omit<IFrameProps, "getMountNode">;
1010
/**
1111
* Used to wrap and isolate reflection from rest of document
1212
*/
13-
export function Frame({ children, ...frameProps }: FrameProps) {
13+
export function Frame({ children, style, ...frameProps }: FrameProps) {
1414
return (
15-
<IFrame {...frameProps}>
15+
<IFrame
16+
frameBorder="none"
17+
scrolling="no"
18+
style={{ border: "none", ...style }}
19+
{...frameProps}
20+
>
1621
<FrameStyles />
1722
{children}
1823
</IFrame>
@@ -67,9 +72,12 @@ function DocumentStyle() {
6772
*/
6873
function ResetStyle() {
6974
return (
70-
<link
71-
rel="stylesheet"
72-
href="https://necolas.github.io/normalize.css/8.0.1/normalize.css"
73-
/>
75+
<>
76+
<link
77+
rel="stylesheet"
78+
href="https://necolas.github.io/normalize.css/8.0.1/normalize.css"
79+
/>
80+
<Style id="reset-frame" rules={["html { overflow: hidden }"]} />
81+
</>
7482
);
7583
}

‎src/components/__tests__/Frame.test.tsx‎

Lines changed: 32 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,12 @@ describe("Frame", () => {
1717
const iframe = subject.getByTestId("testId") as HTMLIFrameElement;
1818

1919
expect(iframe).toMatchInlineSnapshot(`
20-
<iframe
21-
data-test-id="testId"
22-
/>
23-
`);
20+
<iframe
21+
data-test-id="testId"
22+
frameborder="none"
23+
scrolling="no"
24+
/>
25+
`);
2426

2527
expect(iframe.contentDocument?.firstElementChild).toMatchInlineSnapshot(`
2628
<html>
@@ -30,6 +32,11 @@ describe("Frame", () => {
3032
href="https://necolas.github.io/normalize.css/8.0.1/normalize.css"
3133
rel="stylesheet"
3234
/>
35+
<style
36+
id="reset-frame"
37+
>
38+
html { overflow: hidden }
39+
</style>
3340
<style
3441
id="parent-document-mirror-stylesheets"
3542
>
@@ -56,21 +63,26 @@ describe("Frame", () => {
5663
});
5764

5865
expect(iframe.contentDocument?.firstElementChild).toMatchInlineSnapshot(`
59-
<html>
60-
<head />
61-
<body>
62-
<link
63-
href="https://necolas.github.io/normalize.css/8.0.1/normalize.css"
64-
rel="stylesheet"
65-
/>
66-
<style
67-
id="parent-document-mirror-stylesheets"
68-
/>
69-
<div>
70-
child text
71-
</div>
72-
</body>
73-
</html>
74-
`);
66+
<html>
67+
<head />
68+
<body>
69+
<link
70+
href="https://necolas.github.io/normalize.css/8.0.1/normalize.css"
71+
rel="stylesheet"
72+
/>
73+
<style
74+
id="reset-frame"
75+
>
76+
html { overflow: hidden }
77+
</style>
78+
<style
79+
id="parent-document-mirror-stylesheets"
80+
/>
81+
<div>
82+
child text
83+
</div>
84+
</body>
85+
</html>
86+
`);
7587
});
7688
});

‎src/components/__tests__/Mirror.test.tsx‎

Lines changed: 88 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -29,17 +29,19 @@ describe("Mirror", () => {
2929
/>,
3030
);
3131
expect(subject.baseElement).toMatchInlineSnapshot(`
32-
<body>
33-
<div>
34-
<iframe
35-
class="mirror-frame-cls"
36-
height="0"
37-
id="mirror-frame-id"
38-
width="0"
39-
/>
40-
</div>
41-
</body>
42-
`);
32+
<body>
33+
<div>
34+
<iframe
35+
class="mirror-frame-cls"
36+
frameborder="none"
37+
height="0"
38+
id="mirror-frame-id"
39+
scrolling="no"
40+
width="0"
41+
/>
42+
</div>
43+
</body>
44+
`);
4345
});
4446

4547
it("frames an empty reflection when find node errors", () => {
@@ -58,16 +60,18 @@ describe("Mirror", () => {
5860
expect(consoleWarnSpy).toHaveBeenCalledTimes(1);
5961
expect(consoleWarnSpy).toHaveBeenLastCalledWith(expectedError);
6062
expect(subject.baseElement).toMatchInlineSnapshot(`
61-
<body>
62-
<div>
63-
<iframe
64-
height="0"
65-
id="4fzzzxj"
66-
width="0"
67-
/>
68-
</div>
69-
</body>
70-
`);
63+
<body>
64+
<div>
65+
<iframe
66+
frameborder="none"
67+
height="0"
68+
id="4fzzzxj"
69+
scrolling="no"
70+
width="0"
71+
/>
72+
</div>
73+
</body>
74+
`);
7175

7276
findDOMNodeSpy.mockRestore();
7377
});
@@ -84,65 +88,72 @@ describe("Mirror", () => {
8488

8589
const subject = render(<Mirror {...renderProps} />);
8690
expect(subject.baseElement).toMatchInlineSnapshot(`
87-
<body>
88-
<div>
89-
<div
90-
attr="[value"
91-
class="class1 one"
92-
>
93-
<input
94-
class="class2 two"
95-
/>
96-
</div>
97-
text content
98-
</div>
99-
<div>
100-
<iframe
101-
class="mirrorFrame"
102-
data-test-id="mirrorFrame"
103-
height="0"
104-
id="4fzzzxj"
105-
width="0"
106-
/>
107-
</div>
108-
</body>
109-
`);
91+
<body>
92+
<div>
93+
<div
94+
attr="[value"
95+
class="class1 one"
96+
>
97+
<input
98+
class="class2 two"
99+
/>
100+
</div>
101+
text content
102+
</div>
103+
<div>
104+
<iframe
105+
class="mirrorFrame"
106+
data-test-id="mirrorFrame"
107+
frameborder="none"
108+
height="0"
109+
id="4fzzzxj"
110+
scrolling="no"
111+
width="0"
112+
/>
113+
</div>
114+
</body>
115+
`);
110116

111117
const iframe = subject.getByTestId(frameId) as HTMLIFrameElement;
112118
expect(iframe.contentDocument?.firstElementChild).toMatchInlineSnapshot(`
113-
<html>
114-
<head />
115-
<body>
116-
<link
117-
href="https://necolas.github.io/normalize.css/8.0.1/normalize.css"
118-
rel="stylesheet"
119-
/>
120-
<style
121-
id="parent-document-mirror-stylesheets"
122-
/>
123-
<div
124-
class=""
125-
readonly=""
126-
style="pointer-events: none;"
127-
>
128-
<div
129-
attr="[value"
130-
class="class1 one"
131-
readonly=""
132-
style="pointer-events: none;"
133-
>
134-
<input
135-
class="class2 two"
136-
readonly=""
137-
style="pointer-events: none;"
138-
value="input-value"
139-
/>
140-
</div>
141-
text content
142-
</div>
143-
</body>
144-
</html>
145-
`);
119+
<html>
120+
<head />
121+
<body>
122+
<link
123+
href="https://necolas.github.io/normalize.css/8.0.1/normalize.css"
124+
rel="stylesheet"
125+
/>
126+
<style
127+
id="reset-frame"
128+
>
129+
html { overflow: hidden }
130+
</style>
131+
<style
132+
id="parent-document-mirror-stylesheets"
133+
/>
134+
<div
135+
class=""
136+
readonly=""
137+
style="pointer-events: none;"
138+
>
139+
<div
140+
attr="[value"
141+
class="class1 one"
142+
readonly=""
143+
style="pointer-events: none;"
144+
>
145+
<input
146+
class="class2 two"
147+
readonly=""
148+
style="pointer-events: none;"
149+
value="input-value"
150+
/>
151+
</div>
152+
text content
153+
</div>
154+
</body>
155+
</html>
156+
`);
146157
/** clean up */
147158
await act(async () => {
148159
domNode.remove();

0 commit comments

Comments
 (0)