-
Notifications
You must be signed in to change notification settings - Fork 92
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
Fix problem input [FC-0076] #1646
base: master
Are you sure you want to change the base?
Conversation
Thanks for the pull request, @bradenmacdonald! This repository is currently maintained by Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review. 🔘 Get product approvalIf you haven't already, check this list to see if your contribution needs to go through the product review process.
🔘 Provide contextTo help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:
🔘 Get a green buildIf one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green. Where can I find more information?If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources: When can I expect my changes to be merged?Our goal is to get community contributions seen and reviewed as efficiently as possible. However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:
💡 As a result it may take up to several weeks or months to complete a review and merge your PR. |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #1646 +/- ##
=======================================
Coverage 93.24% 93.24%
=======================================
Files 1100 1101 +1
Lines 21803 21858 +55
Branches 4711 4738 +27
=======================================
+ Hits 20330 20382 +52
- Misses 1401 1404 +3
Partials 72 72 ☔ View full report in Codecov by Sentry. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The quick toolbar change looks good to me! I did not check on the other changes.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍 Working better than before, thank you for this @bradenmacdonald .
- I tested this using the PR test instructions
- I read through the code
- I checked for accessibility issues by using my keyboard alone to tab through a problem's answers and select text for inline formatting -- see note re inline image.
-
Includes documentationN/A -
User-facing strings are extracted for translationN/A
* This could potentially cause problems if there are TinyMCE editors being used | ||
* both on the parent page and inside a Paragon modal popup, but I don't think | ||
* we have that situation. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can this concern be resolved by passing editor.bodyElement
to this function, and using the .closest()
selector like you do below, instead of searching across the whole document
?
To be clear, I didn't find any problems with using document
in the problem editor, this is just a suggestion.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not sure, but I suspect that wouldn't help, because the various DIVs created to hold modals are always appended to the end of the body
element and there's no way to distinguish between the ones that are for editors outside the modal and the ones that are for editors inside the modal.
What we really need is a TinyMCE API to get its modal DIV(s) given a reference to the editor
object, but I looked at the entire API and the code and played around with the editor object in the JS console, and it doesn't seem to expose that publicly :/
if (editor.bodyElement?.closest('.pgn__modal')) { | ||
// This editor is inside a Paragon modal. Use this hack to avoid interference with TinyMCE's own modal popups: | ||
reparentTinyMceModals(); | ||
editor.on('selectionchange', reparentTinyMceModals); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The only editing issue I had here was when one of my problem's answers is an image:
image.as.answer.mp4
There's no way to select the embedded alt text to re-edit that image. But this was happening before, and is unrelated to this change.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Weird. I wonder why it renders only the alt text and doesn't just show the (selectable) image. Would you mind opening that as a separate issue on this repo?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sure thing: #1654
@ChrisChV could you please look at this PR as CC? I need a +1 from a CC to merge this. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@bradenmacdonald Looks good, but with this change emojis and formulas don't work in the text editor. I have tested it on master
and it does work on that branch.
@ChrisChV Hmm, what browser are you using? They were working for me. I think I know what the problem might be, but I'm not sure how to reproduce it. |
Description
Fixes #1637 so that clicking editor toolbars doesn't try to close the modal.
Partially fixes #1636
Before:
![Screenshot](https://private-user-images.githubusercontent.com/945577/409677956-b7981fdd-b794-420a-a106-d854f73516ea.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkzNTkzNTgsIm5iZiI6MTczOTM1OTA1OCwicGF0aCI6Ii85NDU1NzcvNDA5Njc3OTU2LWI3OTgxZmRkLWI3OTQtNDIwYS1hMTA2LWQ4NTRmNzM1MTZlYS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjEyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxMlQxMTE3MzhaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1mNjA3MDA1Yjc5YmI3MTNjN2JkMDQ5MWQ0N2IzZmJkNWM1OTQ3YTUyNWY1ZWIzOWYzNTA5MWY4Yjk2Y2FkZjViJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.oAqwv8s5Q4cOXQg1RJYf_RzCPfCHIo3CjpcnuuY5Mp8)
After:
![Screenshot](https://private-user-images.githubusercontent.com/945577/409677740-ab8df1a9-508b-4f33-8847-95f5bc41e2f8.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkzNTkzNTgsIm5iZiI6MTczOTM1OTA1OCwicGF0aCI6Ii85NDU1NzcvNDA5Njc3NzQwLWFiOGRmMWE5LTUwOGItNGYzMy04ODQ3LTk1ZjViYzQxZTJmOC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjEyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxMlQxMTE3MzhaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0yN2JlZmM0ZDExM2MwMWE3NmRkNzg2ZTUyZTM4YTY1NzVkMTg2Njg3YTBiNTMxZmFkODdkNTE1MmFlZmQ1MTU3JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.OFIjSkHownBos8ojiwQOPpoVX3sAjECsTGtH0duOLyY)
Supporting information
This "Insert" toolbar is shown in the "Expandable" text fields like Answer, Feedback, and Hint (all in the Problem editor), when you click on an empty line (or when the whole input is empty). Most people seemed fine with removing/shortening it, but I was asked on Slack to keep the "image" and "table" insertion tools. Which are also the ones in the official plugin docs for this floating toolbar plugin.
Testing instructions
Open a Problem component, both in a library and in a course. Set answers, feedback, and hints. Check that the formatting toolbars (bold/italic/etc. when you have text selected) and other editor modals (insert emoji, insert image, etc.) are clickable and working.
I also fixed a bug in the Studio header. Verify that clicking on the library name will take you back to the library home page:
![Screenshot 2025-02-04 at 10 00 08 AM](https://private-user-images.githubusercontent.com/945577/409679680-42220e84-d43e-4f01-88fe-8133f64cf8a9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkzNTkzNTgsIm5iZiI6MTczOTM1OTA1OCwicGF0aCI6Ii85NDU1NzcvNDA5Njc5NjgwLTQyMjIwZTg0LWQ0M2UtNGYwMS04OGZlLTgxMzNmNjRjZjhhOS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjEyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxMlQxMTE3MzhaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1lODBjODA4MDE5ZmI5MGE2OGU3NzVmZjMxMjU5Y2Y3ZjllZWY5ZTYzMjE1ZTQ0OWMyNGNiZmJmOTNjNTE2MjRmJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.atLw9Rk3UDFPDC7Yta7PH5q5FNwyYPHLSoFuPKNqxqA)
Private ref: FAL-4037