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.

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: olx parsers with formatted text #336

Merged
merged 4 commits into from
May 30, 2023

Conversation

KristinAoki
Copy link
Member

JIRA Ticket: TNL-10689

Currently if a user formats their text (italicize, bold, etc.) or adds an image all inside the same parent tag, e.g. <p>, the order of the text/image will be changed on save and re-open. This causes user to be confused and not trust the visual editor as it is not saving their work as expected. This PR uses fast-xml-parser's attribute preserve-order to keep the text in the same order while parsing and building. This attribute is currently used for the question parser, and is now being applied to all places where tinymce is used.

@connorhaugh
Copy link
Contributor

preserve-order is not in this PR? and it seems like this PR is just changes we've made in the past week again?

@KristinAoki KristinAoki marked this pull request as draft May 25, 2023 14:59
@KristinAoki KristinAoki marked this pull request as ready for review May 25, 2023 16:13
@codecov
Copy link

codecov bot commented May 25, 2023

Codecov Report

Patch coverage: 95.65% and project coverage change: +0.10 🎉

Comparison is base (3bdafd6) 90.94% compared to head (b3e0783) 91.05%.

Additional details and impacted files
@@            Coverage Diff             @@
##             main     #336      +/-   ##
==========================================
+ Coverage   90.94%   91.05%   +0.10%     
==========================================
  Files         215      215              
  Lines        3821     3834      +13     
  Branches      751      745       -6     
==========================================
+ Hits         3475     3491      +16     
+ Misses        325      323       -2     
+ Partials       21       20       -1     
Impacted Files Coverage Δ
...editors/containers/ProblemEditor/data/OLXParser.js 92.75% <91.76%> (+2.33%) ⬆️
...components/EditProblemView/SettingsWidget/hooks.js 94.93% <100.00%> (+0.09%) ⬆️
.../ProblemEditor/components/EditProblemView/hooks.js 100.00% <100.00%> (ø)
...ntainers/ProblemEditor/data/ReactStateOLXParser.js 95.11% <100.00%> (-0.11%) ⬇️

... and 1 file with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

*/
getPreservedAnswersAndFeedback(problemType, widgetName, option) {
const preservedProblem = this.richTextProblem;
const isChoiceProblem = problemType !== ProblemTypeKeys.NUMERIC ? problemType !== ProblemTypeKeys.TEXTINPUT : false;
Copy link
Member

Choose a reason for hiding this comment

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

This is hard to understand. I needed a while to work through all the negations to figure out what value is actually returned. I played around a bit, this seems a more readable version I came up with:

const isChoiceProblem = !([ProblemTypeKeys.NUMERIC, ProblemTypeKeys.TEXTINPUT].includes(problemType))

}
preservedProblem.forEach(wrapperTag => {
const wrapperTagKeys = Object.keys(wrapperTag);
if (wrapperTagKeys.includes(problemType)) {
Copy link
Member

Choose a reason for hiding this comment

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

This function has a very high complexity. There are multiple nested if statements and for loops and it is not possible for me to follow along with the code without spending a large amount of time analyzing it. It seems to me to make this more readable and maintainable, it is helpful to split this up into several well-named functions and variables, and avoid nested ifs / for loops.

Copy link
Member

Choose a reason for hiding this comment

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

I will mark this as optional. You can decide whether you want to do this here or not. I would of course welcome any improvements of readability, but the parser is already very complex anyway and we can also leave refactoring for another time. With the great amount of work you did in this issue I'm sure you'll be glad to get this merged.

Copy link
Member

@jesperhodge jesperhodge left a comment

Choose a reason for hiding this comment

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

This is awesome work! Works like a charm.

Copy link
Contributor

@connorhaugh connorhaugh left a comment

Choose a reason for hiding this comment

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

A lot of code here that looks ok, but I quickly smoke tested by:
Adding some text
adding an image as a child of the P tag.
Bolding the text inside the p tag
saving
reopening
and the order was preserved and the item stayed bold.

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.

3 participants