Skip to content

Commit

Permalink
fix: prevent scrolling in mirror frame by default
Browse files Browse the repository at this point in the history
  • Loading branch information
@iamogbz
iamogbz committed Nov 12, 2022
1 parent c1b0e6d commit 25770f2
Show file tree
Hide file tree
Showing 4 changed files with 148 additions and 103 deletions.
14 changes: 14 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,20 @@
},
"release": {
"dryRun": false,
"branches": [
"+([0-9])?(.{+([0-9]),x}).x",
"main",
"next",
"next-major",
{
"name": "beta",
"prerelease": true
},
{
"name": "alpha",
"prerelease": true
}
],
"plugins": [
"@semantic-release/commit-analyzer",
"@semantic-release/release-notes-generator",
Expand Down
20 changes: 14 additions & 6 deletions src/components/Frame.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,14 @@ export type FrameProps = Omit<IFrameProps, "getMountNode">;
/**
* Used to wrap and isolate reflection from rest of document
*/
export function Frame({ children, ...frameProps }: FrameProps) {
export function Frame({ children, style, ...frameProps }: FrameProps) {
return (
<IFrame {...frameProps}>
<IFrame
frameBorder="none"
scrolling="no"
style={{ border: "none", ...style }}
{...frameProps}
>
<FrameStyles />
{children}
</IFrame>
Expand Down Expand Up @@ -67,9 +72,12 @@ function DocumentStyle() {
*/
function ResetStyle() {
return (
<link
rel="stylesheet"
href="https://necolas.github.io/normalize.css/8.0.1/normalize.css"
/>
<>
<link
rel="stylesheet"
href="https://necolas.github.io/normalize.css/8.0.1/normalize.css"
/>
<Style id="reset-frame" rules={["html { overflow: hidden }"]} />
</>
);
}
52 changes: 32 additions & 20 deletions src/components/__tests__/Frame.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,12 @@ describe("Frame", () => {
const iframe = subject.getByTestId("testId") as HTMLIFrameElement;

expect(iframe).toMatchInlineSnapshot(`
<iframe
data-test-id="testId"
/>
`);
<iframe
data-test-id="testId"
frameborder="none"
scrolling="no"
/>
`);

expect(iframe.contentDocument?.firstElementChild).toMatchInlineSnapshot(`
<html>
Expand All @@ -30,6 +32,11 @@ describe("Frame", () => {
href="https://necolas.github.io/normalize.css/8.0.1/normalize.css"
rel="stylesheet"
/>
<style
id="reset-frame"
>
html { overflow: hidden }
</style>
<style
id="parent-document-mirror-stylesheets"
>
Expand All @@ -56,21 +63,26 @@ describe("Frame", () => {
});

expect(iframe.contentDocument?.firstElementChild).toMatchInlineSnapshot(`
<html>
<head />
<body>
<link
href="https://necolas.github.io/normalize.css/8.0.1/normalize.css"
rel="stylesheet"
/>
<style
id="parent-document-mirror-stylesheets"
/>
<div>
child text
</div>
</body>
</html>
`);
<html>
<head />
<body>
<link
href="https://necolas.github.io/normalize.css/8.0.1/normalize.css"
rel="stylesheet"
/>
<style
id="reset-frame"
>
html { overflow: hidden }
</style>
<style
id="parent-document-mirror-stylesheets"
/>
<div>
child text
</div>
</body>
</html>
`);
});
});
165 changes: 88 additions & 77 deletions src/components/__tests__/Mirror.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,17 +29,19 @@ describe("Mirror", () => {
/>,
);
expect(subject.baseElement).toMatchInlineSnapshot(`
<body>
<div>
<iframe
class="mirror-frame-cls"
height="0"
id="mirror-frame-id"
width="0"
/>
</div>
</body>
`);
<body>
<div>
<iframe
class="mirror-frame-cls"
frameborder="none"
height="0"
id="mirror-frame-id"
scrolling="no"
width="0"
/>
</div>
</body>
`);
});

it("frames an empty reflection when find node errors", () => {
Expand All @@ -58,16 +60,18 @@ describe("Mirror", () => {
expect(consoleWarnSpy).toHaveBeenCalledTimes(1);
expect(consoleWarnSpy).toHaveBeenLastCalledWith(expectedError);
expect(subject.baseElement).toMatchInlineSnapshot(`
<body>
<div>
<iframe
height="0"
id="4fzzzxj"
width="0"
/>
</div>
</body>
`);
<body>
<div>
<iframe
frameborder="none"
height="0"
id="4fzzzxj"
scrolling="no"
width="0"
/>
</div>
</body>
`);

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

const subject = render(<Mirror {...renderProps} />);
expect(subject.baseElement).toMatchInlineSnapshot(`
<body>
<div>
<div
attr="[value"
class="class1 one"
>
<input
class="class2 two"
/>
</div>
text content
</div>
<div>
<iframe
class="mirrorFrame"
data-test-id="mirrorFrame"
height="0"
id="4fzzzxj"
width="0"
/>
</div>
</body>
`);
<body>
<div>
<div
attr="[value"
class="class1 one"
>
<input
class="class2 two"
/>
</div>
text content
</div>
<div>
<iframe
class="mirrorFrame"
data-test-id="mirrorFrame"
frameborder="none"
height="0"
id="4fzzzxj"
scrolling="no"
width="0"
/>
</div>
</body>
`);

const iframe = subject.getByTestId(frameId) as HTMLIFrameElement;
expect(iframe.contentDocument?.firstElementChild).toMatchInlineSnapshot(`
<html>
<head />
<body>
<link
href="https://necolas.github.io/normalize.css/8.0.1/normalize.css"
rel="stylesheet"
/>
<style
id="parent-document-mirror-stylesheets"
/>
<div
class=""
readonly=""
style="pointer-events: none;"
>
<div
attr="[value"
class="class1 one"
readonly=""
style="pointer-events: none;"
>
<input
class="class2 two"
readonly=""
style="pointer-events: none;"
value="input-value"
/>
</div>
text content
</div>
</body>
</html>
`);
<html>
<head />
<body>
<link
href="https://necolas.github.io/normalize.css/8.0.1/normalize.css"
rel="stylesheet"
/>
<style
id="reset-frame"
>
html { overflow: hidden }
</style>
<style
id="parent-document-mirror-stylesheets"
/>
<div
class=""
readonly=""
style="pointer-events: none;"
>
<div
attr="[value"
class="class1 one"
readonly=""
style="pointer-events: none;"
>
<input
class="class2 two"
readonly=""
style="pointer-events: none;"
value="input-value"
/>
</div>
text content
</div>
</body>
</html>
`);
/** clean up */
await act(async () => {
domNode.remove();
Expand Down

0 comments on commit 25770f2

Please sign in to comment.