Skip to content
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

Jump to bottom

Close math editor through ESC and new button #2697

Merged
merged 7 commits into from
Aug 8, 2023
Merged

Close math editor through ESC and new button #2697

merged 7 commits into from
Aug 8, 2023

Conversation

CodingDive
Copy link
Contributor

@CodingDive CodingDive commented Aug 4, 2023 •
edited
Loading

Trying to understand slate transformations. I don't get how I can move the cursor, or why the X button needs a small timeout around Editor.focus(editor) for the selection to be reset, and therefore, the modal with the LaTeX formula to be closed. 😵‍💫

  • Clean up code
  • Test more edge cases
  • Create a card in Trello for it
  • Remove 2px margin with !important of the texarea
  • Maybe in follow-up PR: Move components to separate files and renderFns to distinct components
  • Figure out why the Redo test is failing for me locally (might be unrelated to my changes here) 😿

@vercel
Copy link

vercel bot commented Aug 4, 2023 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
frontend ✅ Ready (Inspect) Visit Preview Aug 8, 2023 9:55am

@CodingDive CodingDive marked this pull request as draft August 4, 2023 19:04
@github-actions
Copy link
Contributor

github-actions bot commented Aug 4, 2023 •
edited
Loading

📦 Next.js Bundle Analysis for @serlo/frontend

This analysis was generated by the Next.js Bundle Analysis action. 🤖

🎉 Global Bundle Size Decreased

Page Size (compressed)
global 95.61 KB (-6 B)
Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

Twenty Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page Size (compressed) First Load
/[...slug] 69.54 KB (🟡 +2 B) 165.15 KB
/___bot_or_not 152.6 KB (🟡 +2 B) 248.21 KB
/biologie 147.72 KB (🟡 +2 B) 243.33 KB
/chemie 147.72 KB (🟡 +2 B) 243.33 KB
/content-only/[...slug] 67.81 KB (🟡 +2 B) 163.42 KB
/editor 189.8 KB (🟡 +2 B) 285.41 KB
/entity/create/[type]/[taxonomyId] 456.45 KB (🟡 +139 B) 552.06 KB
/entity/repository/add-revision/[...id] 456.33 KB (🟡 +139 B) 551.94 KB
/entity/repository/compare/[entity_id]/[revision_id] 84.67 KB (🟡 +2 B) 180.28 KB
/informatik 147.72 KB (🟡 +2 B) 243.33 KB
/jobs/[[...jobId]] 43.79 KB (🟡 +1 B) 139.39 KB
/lerntipps 147.72 KB (🟡 +2 B) 243.33 KB
/license/detail/[id] 57.93 KB (🟡 +2 B) 153.54 KB
/mathe 147.72 KB (🟡 +2 B) 243.33 KB
/nachhaltigkeit 147.72 KB (🟡 +2 B) 243.33 KB
/page/create 456.15 KB (🟡 +139 B) 551.76 KB
/taxonomy/term/create/[parent_id]/[id] 455.84 KB (🟡 +139 B) 551.45 KB
/taxonomy/term/update/[id] 455.76 KB (🟡 +139 B) 551.37 KB
/user/[...userslug] 249.53 KB (🟡 +2 B) 345.14 KB
/user/settings 454.51 KB (🟡 +139 B) 550.12 KB
Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this.

@CodingDive CodingDive mentioned this pull request Aug 4, 2023
Merged
@CodingDive CodingDive marked this pull request as ready for review August 6, 2023 09:45
@CodingDive CodingDive requested a review from elbotho August 6, 2023 09:45
@CodingDive CodingDive changed the title WIP: Close math editor through ESC and new button Close math editor through ESC and new button Aug 7, 2023
elbotho
elbotho requested changes Aug 7, 2023
View reviewed changes
Copy link
Member

@elbotho elbotho left a comment

Choose a reason for hiding this comment

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

code looks good, added one question and one change request.

src/serlo-editor/math/editor.tsx Outdated Show resolved Hide resolved
src/serlo-editor/plugins/text/components/math-element.tsx Outdated Show resolved Hide resolved
hejtful
hejtful reviewed Aug 7, 2023
View reviewed changes
Copy link
Contributor

@hejtful hejtful left a comment

Choose a reason for hiding this comment

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

Just one (long) comment, hope you agree with my reasoning there

src/serlo-editor/math/editor.tsx Outdated Show resolved Hide resolved
src/serlo-editor/plugins/text/components/math-element.tsx Outdated Show resolved Hide resolved
Implement feedback of Vito and Botho
8de35f0 
- Hover/focus state & a11y
- Remove unneeded code
- Define extra function to close modal
hejtful
hejtful approved these changes Aug 7, 2023
View reviewed changes
Copy link
Contributor

@hejtful hejtful left a comment

Choose a reason for hiding this comment

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

Two super minor comments just for clean-up, but looks good to me already!

src/serlo-editor/math/editor.tsx Outdated Show resolved Hide resolved
src/serlo-editor/math/editor.tsx Outdated Show resolved Hide resolved
@CodingDive CodingDive requested a review from elbotho August 7, 2023 22:17
elbotho
elbotho approved these changes Aug 8, 2023
View reviewed changes
src/serlo-editor/math/editor.tsx Outdated
<button
onClick={props.closeMathEditorOverlay}
className="mr-0.5 mt-1 text-sm font-bold text-gray-600 hover:bg-gray-200 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-700"
aria-label="Close math formula editor"
Copy link
Member

Choose a reason for hiding this comment

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

follow up: i18n or borrow shorter close string from e.g. strings.share.close.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Added the English translation, the rest is done automagically through crowdin?

src/serlo-editor/math/editor.tsx Outdated Show resolved Hide resolved
@CodingDive CodingDive merged commit 9347c96 into staging Aug 8, 2023
9 checks passed
@CodingDive CodingDive deleted the fix/close-math-editor branch August 8, 2023 09:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@elbotho elbotho elbotho approved these changes

@hejtful hejtful hejtful approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@CodingDive @elbotho @hejtful