fix: Styling issue in TinyMCE editor in Studio #31212

asadali145 · 2022-10-27T09:50:22Z

Description

This PR fixes the issue in the TinyMCE editor in Studio.
TinyMCE was upgraded from v4.0.20 to v5.5.1 under [BB-6151] feat: upgrades tinyMCE v4.0.20 to tinyMCE v5.5.1 #30335.
With these changes, we have also changed the way we get the text from the TinyMCE editor. We are passing text as format instead of raw to get the content from the editor object.
It returns plain text only. In the end, we just check for the plain text changes, and if plain text is not changed then the styling changes like bold, and italic text are not saved. Hyperlinks are also not working.
Changes will impact course authors.

Before these changes:

Screen.Recording.2022-10-27.at.3.22.01.PM.mov

After these changes:

Screen.Recording.2022-10-27.at.3.49.43.PM.mov

Supporting information

https://github.mit.edu/mitxonline/mitxonline-issues/issues/162

Testing instructions

Edit course unit in the studio using the TinyMCE editor as in the supporting videos.
Edit only the styles of the existing text and save the changes.
Changes should be saved.

Deadline

"None"

rayzhou-bit

lgtm! I tested this with new editor and it looks fine.

pdpinch · 2022-11-03T17:45:17Z

xmodule/js/src/html/edit.js

        visualEditor = this.getVisualEditor();
        raw_content = visualEditor.getContent({
-          format: "text",
+          format: "raw",


This reverts a change in https://github.com/openedx/edx-platform/pull/30335/files#diff-bd3e3877ed43b0228f0227205afd052479229747ee194918aab121957b9b0edbR1393

@DubeySandeep @Agrendalath I don't suppose you could tell us why you made this change when upgrade TinyMCE to v5.5.1?

@pdpinch, TinyMCE docs replaced all occurrences of the raw format with text between v4 and v5. These formats are undocumented, and we mistakenly assumed that this is the new way to get/set content in TinyMCE v5.

cc: @tecoholic

@pdpinch What @Agrendalath mentioned in the previous comment. I made the change thinking that the TinyMCE has changed the values from raw to text as there were no references to raw as a value in the docs.

Agrendalath

Thanks for fixing this, @asadali145.

👍

I tested this: checked that HTML changes are submitted correctly.
I read through the code
I checked for accessibility issues: n/a
Includes documentation: n/a
I made sure any change in configuration variables is reflected in the corresponding client's configuration-secure repository: n/a

openedx-webhooks · 2022-11-07T16:44:58Z

Although this pull request is already merged, I'm still watching it for updates.

There is nothing you have to do. No action is needed from your side. Thanks again for your contribution.

edx-pipeline-bot · 2022-11-08T22:48:19Z

EdX Release Notice: This PR has been deployed to the staging environment in preparation for a release to production.

edx-pipeline-bot · 2022-11-08T23:17:19Z

EdX Release Notice: This PR has been deployed to the production environment.

During the upgrade to TinyMCE v5, we changed the content format to `text`. However, it ignores changes in HTML tags. This reverts the format to `raw`.

…x#31500) During the upgrade to TinyMCE v5, we changed the content format to `text`. However, it ignores changes in HTML tags. This reverts the format to `raw`.

fix: Styling issue in TinyMCE editor in studio

2431880

asadali145 force-pushed the asad/course-authoring-html-styling-fix branch from 6a7a44b to 2431880 Compare October 27, 2022 13:00

asadali145 marked this pull request as ready for review October 28, 2022 09:30

fix: Editor tests

0679ea8

rayzhou-bit approved these changes Nov 3, 2022

View reviewed changes

pdpinch reviewed Nov 3, 2022

View reviewed changes

Agrendalath mentioned this pull request Nov 4, 2022

fix(maple): retrieve raw content from TinyMCE editor open-craft/openedx-platform#503

Merged

Agrendalath approved these changes Nov 4, 2022

View reviewed changes

Agrendalath mentioned this pull request Nov 4, 2022

fix(nutmeg): retrieve raw content from TinyMCE editor open-craft/openedx-platform#506

Merged

Agrendalath merged commit cb4279d into openedx:master Nov 7, 2022

openedx-webhooks added the open-source-contribution PR author is not from Axim or 2U label Nov 7, 2022

asadali145 mentioned this pull request Jan 5, 2023

fix: retrieve raw content from TinyMCE editor (#31212) #31500

Merged

pdpinch pushed a commit that referenced this pull request Jan 5, 2023

fix: retrieve raw content from TinyMCE editor (#31212) (#31500)

5af42f8

During the upgrade to TinyMCE v5, we changed the content format to `text`. However, it ignores changes in HTML tags. This reverts the format to `raw`.

sambapete added a commit to EDUlib/edx-platform that referenced this pull request Feb 9, 2023

unpatching fix: retrieve raw content from TinyMCE editor (openedx#31212)

730fe24

sambapete added a commit to EDUlib/edx-platform that referenced this pull request Apr 11, 2023

unpatching fix: retrieve raw content from TinyMCE editor (openedx#31212)

c13f70c

sambapete added a commit to EDUlib/edx-platform that referenced this pull request Apr 11, 2023

unpatching fix: retrieve raw content from TinyMCE editor (openedx#31212)

f003c84

sambapete added a commit to EDUlib/edx-platform that referenced this pull request May 22, 2023

unpatching fix: retrieve raw content from TinyMCE editor (openedx#31212)

1d9a022

sambapete added a commit to EDUlib/edx-platform that referenced this pull request Jun 14, 2023

unpatching fix: retrieve raw content from TinyMCE editor (openedx#31212)

509cece

sambapete added a commit to EDUlib/edx-platform that referenced this pull request Aug 9, 2023

unpatching fix: retrieve raw content from TinyMCE editor (openedx#31212)

c763b19

sambapete added a commit to EDUlib/edx-platform that referenced this pull request Oct 11, 2023

unpatching fix: retrieve raw content from TinyMCE editor (openedx#31212)

5eed07c

sambapete added a commit to EDUlib/edx-platform that referenced this pull request Oct 13, 2023

unpatching fix: retrieve raw content from TinyMCE editor (openedx#31212)

424368f

sambapete added a commit to EDUlib/edx-platform that referenced this pull request Nov 17, 2023

unpatching fix: retrieve raw content from TinyMCE editor (openedx#31212)

86f162c

sambapete added a commit to EDUlib/edx-platform that referenced this pull request Dec 11, 2023

unpatching fix: retrieve raw content from TinyMCE editor (openedx#31212)

2710dff

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: Styling issue in TinyMCE editor in Studio #31212

fix: Styling issue in TinyMCE editor in Studio #31212

Uh oh!

asadali145 commented Oct 27, 2022 •

edited

Loading

Uh oh!

rayzhou-bit left a comment

Uh oh!

pdpinch Nov 3, 2022

Uh oh!

Agrendalath Nov 4, 2022

Uh oh!

tecoholic Nov 6, 2022

Uh oh!

Agrendalath left a comment

Uh oh!

openedx-webhooks commented Nov 7, 2022

Uh oh!

edx-pipeline-bot commented Nov 8, 2022

Uh oh!

edx-pipeline-bot commented Nov 8, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

fix: Styling issue in TinyMCE editor in Studio #31212

fix: Styling issue in TinyMCE editor in Studio #31212

Uh oh!

Conversation

asadali145 commented Oct 27, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Supporting information

Testing instructions

Deadline

Uh oh!

rayzhou-bit left a comment

Choose a reason for hiding this comment

Uh oh!

pdpinch Nov 3, 2022

Choose a reason for hiding this comment

Uh oh!

Agrendalath Nov 4, 2022

Choose a reason for hiding this comment

Uh oh!

tecoholic Nov 6, 2022

Choose a reason for hiding this comment

Uh oh!

Agrendalath left a comment

Choose a reason for hiding this comment

Uh oh!

openedx-webhooks commented Nov 7, 2022

Uh oh!

edx-pipeline-bot commented Nov 8, 2022

Uh oh!

edx-pipeline-bot commented Nov 8, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

asadali145 commented Oct 27, 2022 •

edited

Loading