Skip to content

Put the left and right sides of the editor in separate scroll areas. #3832

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
nishasy merged 15 commits into from
Jul 2, 2026
Merged

Put the left and right sides of the editor in separate scroll areas. #3832

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
34df5db
[editor-preview-scroll] poc
nishasy Jun 23, 2026
35cad34
[editor-preview-scroll] remove nested scroll bars
nishasy Jun 23, 2026
44e5544
[editor-preview-scroll] comments
nishasy Jun 26, 2026
0aebe50
[editor-preview-scroll] docs(changeset): Put the left and right sides…
nishasy Jun 26, 2026
daec79f
[editor-preview-scroll] Apply the scroll behavior within the article …
nishasy Jun 27, 2026
9f97211
[editor-preview-scroll] remove padding on the left side to make it lo…
nishasy Jun 27, 2026
1c84c0c
[editor-preview-scroll] Merge branch 'main' into editor-preview-scroll
nishasy Jun 30, 2026
86a0c74
[editor-preview-scroll] remove display table
nishasy Jun 30, 2026
e92260f
[editor-preview-scroll] update table styles
nishasy Jun 30, 2026
734ebef
[editor-preview-scroll] snapshots
nishasy Jun 30, 2026
fc7c446
[editor-preview-scroll] fix tablet and desktop widths. remove horizon…
nishasy Jun 30, 2026
c5b61ac
[editor-preview-scroll] prettier
nishasy Jun 30, 2026
5343d60
[editor-preview-scroll] Merge branch 'main' into editor-preview-scroll
nishasy Jul 2, 2026
f607ffb
[editor-preview-scroll] make the cells fit better. remove unused style.
nishasy Jul 2, 2026
b748a73
[editor-preview-scroll] prettier
nishasy Jul 2, 2026
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
5 changes: 5 additions & 0 deletions .changeset/few-carrots-mate.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@khanacademy/perseus-editor": patch
---

Put the left and right sides of the editor in separate scroll areas
44 changes: 22 additions & 22 deletions packages/perseus-editor/src/__snapshots__/article-editor.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@ exports[`ArticleEditor should match snapshot for editing disabled for all widget
<div
class="perseus-editor-row"
>
<fieldset
disabled=""
<div
class="perseus-editor-left-cell"
>
<div
class="perseus-editor-left-cell"
<fieldset
disabled=""
>
<div
class="perseus-widget-editor"
Expand Down Expand Up @@ -15445,30 +15445,30 @@ table: [[☃ table 1]]
</div>
</div>
</div>
</div>
</fieldset>
</div>
<div
class="editor-preview"
>
<div
class="editor-preview"
style="width: 726px;"
>
<div
style="overflow: scroll; width: 726px;"
>
<div>
<div
<div>
<div
style="width: 100%; height: 100%;"
>
<iframe
data-id="3"
data-lint-gutter="true"
data-mobile="false"
data-name="content-preview"
src="https://www.example.com"
style="width: 100%; height: 100%;"
>
<iframe
data-id="3"
data-lint-gutter="true"
data-mobile="false"
data-name="content-preview"
src="https://www.example.com"
style="width: 100%; height: 100%;"
/>
</div>
/>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div
class="perseus-editor-row"
Expand Down
2 changes: 1 addition & 1 deletion packages/perseus-editor/src/__snapshots__/editor-page.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15509,7 +15509,7 @@ table: [[☃ table 1]]
id="problemarea"
>
<div
style="overflow: scroll; width: 726px;"
style="width: 726px;"
>
<div>
<div
Expand Down
14 changes: 7 additions & 7 deletions packages/perseus-editor/src/article-editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,8 +215,8 @@ export default class ArticleEditor extends React.Component<Props, State> {
{sections.map((section, i) => {
return [
<div className="perseus-editor-row" key={i}>
<fieldset disabled={editingDisabled}>
<div className="perseus-editor-left-cell">
<div className="perseus-editor-left-cell">
<fieldset disabled={editingDisabled}>
<IssuesPanel
issues={this.state.issues[i]}
/>
Expand Down Expand Up @@ -297,12 +297,12 @@ export default class ArticleEditor extends React.Component<Props, State> {
placeholder="Type your section text here..."
ref={"editor" + i}
/>
</div>
</fieldset>
</div>

<div className="editor-preview">
{this._renderIframePreview(i, true)}
</div>
</fieldset>
<div className="editor-preview">
{this._renderIframePreview(i, true)}
</div>
</div>,
];
})}
Expand Down
2 changes: 0 additions & 2 deletions packages/perseus-editor/src/components/device-framer.tsx
View file
Open in desktop

@nishasy nishasy Jun 27, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

These overflows were causing nested scroll bars within the preview iframe.

Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,6 @@ const DeviceFramer = ({
const withChromeStyle = React.useMemo(
() => ({
backgroundColor: "white",
overflow: "scroll",
color: "black",
textAlign: "left",
width: SCREEN_SIZES[deviceType].width,
Expand All @@ -69,7 +68,6 @@ const DeviceFramer = ({
<div
key="screen"
style={{
overflow: "scroll",
width:
SCREEN_SIZES[deviceType].framedWidth +
2 * perseusFrameBorderWidth +
Expand Down
45 changes: 30 additions & 15 deletions packages/perseus-editor/src/styles/perseus-editor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,6 @@ code {
}
#perseus {
margin: 20px;
width: calc(100% - 500px);
z-index: 10;
}
#perseus #problemarea #workarea {
Expand Down Expand Up @@ -265,30 +264,43 @@ code {
z-index: 3;
/* interactive-content */
}
.perseus-editor-table {
clear: both;
display: table;
table-layout: fixed;
}
.perseus-editor-row {
display: table-row;

@mark-fitzgerald mark-fitzgerald Jun 30, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Since you are removing the table-based styling for the row and cell, you should also remove the display: table for the .perseus-editor-table container.

display: flex;
flex-direction: row;
}
.perseus-editor-left-cell {
display: table-cell;
padding-right: 30px;
display: flex;
flex-direction: column;
vertical-align: top;
width: 360px;
max-width: 360px;
min-width: 360px;
position: relative;
z-index: 10;
/* Make the left cell scrollable. */
overflow-y: auto;
/* Don't show the the horizontal scrollbar that only appears when
* the vertical scrollbar appears. */
overflow-x: hidden;
/* Keep the left cell scroll area within the viewport. (244px to account
* for the header.) */
max-height: calc(95vh - 244px);
}
.perseus-editor-right-cell {
box-sizing: border-box;
display: table-cell;
display: flex;
flex-direction: column;
padding: 30px;
padding-top: 5px;
vertical-align: top;
/* Make the right cell scrollable. */
overflow-y: auto;
/* Keep the left cell scroll area within the viewport. (244px to account
* for the header.) */
max-height: calc(95vh - 244px);
/* Don't shrink below the preview's intrinsic width. We need this to
* preserve the Tablet and Desktop preview widths. */
flex-shrink: 0;
}
.perseus-hint-editor {
padding-bottom: 20px;
Expand Down Expand Up @@ -330,10 +342,6 @@ code {
margin-bottom: 20px;
margin-top: 20px;
}
.perseus-article-editor .perseus-editor-table {
margin-left: auto;
margin-right: auto;
}
.perseus-article-editor .perseus-single-editor {
margin-bottom: 10px;
}
Expand Down Expand Up @@ -363,7 +371,14 @@ code {
padding: 32px 20px;
}
.perseus-article-editor .editor-preview {
display: table-cell;
/* Make the preview scrollable. */
overflow-y: auto;
/* Keep the left cell scroll area within the viewport. (244px to account
* for the header.) */
max-height: calc(95vh - 244px);
/* Don't shrink below the preview's intrinsic width. We need this to
* preserve the Tablet and Desktop preview widths. */
flex-shrink: 0;
}
.perseus-article-editor .editor-preview.full-width {
width: 100%;
Expand Down
9 changes: 9 additions & 0 deletions packages/perseus-editor/src/testing/preview/exercise-preview-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,15 @@ const ExercisePreviewPage = () => {
const [iframeId, setIframeId] = React.useState<string | null>(null);
const containerRef = React.useRef<HTMLDivElement>(null);

// Set the overflow to hidden on the body within the iframe
// to prevent nested scrollbars from appearing.
React.useEffect(() => {
document.body.style.overflow = "hidden";

@mark-fitzgerald mark-fitzgerald Jun 30, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I'm not really thrilled with setting the <body> of the iFrame to overflow: hidden. I think that the container <div> shouldn't have the scroll, but that the internal document within the iframe should be the scrollable item. However, I think we can put that on a different PR (especially if we can get away from using an iFrame). So, I'm good with keeping this as-is for now.

@nishasy nishasy Jun 30, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

I'm good with revisiting it another time. I'm not sure the best way to revisit the nested scroll bars otherwise.

return () => {
document.body.style.overflow = "auto";
};
}, []);

// Read iframe configuration from dataset attributes
React.useEffect(() => {
// eslint-disable-next-line no-restricted-syntax
Expand Down