Skip to content

Maintain font size in grading view #7525

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.

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

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

donny-wong
Copy link
Contributor

Proposed Changes

When the font size is modified by the user in the grading view for the editor, we want to maintain that size even when the browser is refreshed. To do this we store the font size in the browser's local storage, where we check for and apply it when the browser is refreshed.

...

Screenshots of your changes (if applicable) This image shows where the editor's font size buttons are located: editor font size buttons
Associated documentation repository pull request (if applicable)

Type of Change

(Write an X or a brief description next to the type or types that best describe your changes.)

Type Applies?
🚨 Breaking change (fix or feature that would cause existing functionality to change)
New feature (non-breaking change that adds functionality) x
🐛 Bug fix (non-breaking change that fixes an issue)
🎨 User interface change (change to user interface; provide screenshots)
♻️ Refactoring (internal change to codebase, without changing functionality)
🚦 Test update (change that only adds or modifies tests)
📦 Dependency update (change that updates a dependency)
🔧 Internal (change that only affects developers or continuous integration)

Checklist

(Complete each of the following items for your pull request. Indicate that you have completed an item by changing the [ ] into a [x] in the raw text, or by clicking on the checkbox in the rendered description on GitHub.)

Before opening your pull request:

  • I have performed a self-review of my changes.
    • Check that all changed files included in this pull request are intentional changes.
    • Check that all changes are relevant to the purpose of this pull request, as described above.
  • I have added tests for my changes, if applicable.
    • This is required for all bug fixes and new features.
  • I have updated the project documentation, if applicable.
    • This is required for new features.
  • If this is my first contribution, I have added myself to the list of contributors.

After opening your pull request:

  • I have updated the project Changelog (this is required for all changes).
  • I have verified that the pre-commit.ci checks have passed.
  • I have verified that the CI tests have passed.
  • I have reviewed the test coverage changes reported by Coveralls.
  • I have requested a review from a project maintainer.

Questions and Comments

(Include any questions or comments you have regarding your changes.)

Donny Wong added 2 commits May 19, 2025 21:34
@donny-wong donny-wong requested a review from david-yz-liu May 20, 2025 17:09
@donny-wong
Copy link
Contributor Author

Currently, I am working on a Jest test to see if when we visit the grading view, if the font size variable in localstorage is being used to set the state, font_size.

Copy link
Collaborator

@david-yz-liu david-yz-liu left a comment

Choose a reason for hiding this comment

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

@donny-wong good work, I just left a few comments.

Regarding the remaining test cases, I suggest using a jest mock to return a particular value for the local storage when accessing text_viewer_font_size. See e.g. https://jestjs.io/docs/mock-functions.

@@ -37,6 +37,10 @@ export class TextViewer extends React.PureComponent {
componentDidMount() {
this.highlight_root = this.raw_content.current.parentNode;

if (localStorage.getItem("text_viewer_font_size") != null) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

in general, use triple-equals instead of double-equals in Javascript.

@@ -37,6 +37,10 @@ export class TextViewer extends React.PureComponent {
componentDidMount() {
this.highlight_root = this.raw_content.current.parentNode;

if (localStorage.getItem("text_viewer_font_size") != null) {
this.setState({font_size: Number(localStorage.getItem("text_viewer_font_size"))});
Copy link
Collaborator

Choose a reason for hiding this comment

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

let's do the Number parsing in a try-catch; if the number fails to parse, don't set state and instead delete the localStorage value

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants