[BB-6151] feat: upgrades tinyMCE v4.0.20 to tinyMCE v5.5.1 #30335

DubeySandeep · 2022-04-29T21:28:07Z

Description

This PR upgrades TinyMCE version 4 to version 5.5.1.

These changes will impact the "Course author".

Supporting information

Discovery doc to upgrade TinyMCE [Approved]
Internal ticket: https://tasks.opencraft.com/browse/BB-6151

Testing instructions

Testing new TinyMCE in Studio

Run the studio server from devstack dir “make studio-up”
Login to studio and create a new course.
Add a new unit in the course and go to the unit editor page.
Click “HTML” component button and select “Text”.
Click the component to edit, this will show a modal containing “tinymce” editor.
Use the TinyMCE editor thoroughly to test all the features.
Save the changes and expect it to get saved and loads correctly after refreshing the page.

Ensure the “visual” and “raw” html editor are working fine

Run the studio server from devstack dir “make studio-up”
Login to studio and create a new course.
Add a new unit in the course and go to the unit editor page.
Click “HTML” component button and select “Raw”.
Click the component to edit, this will show a modal containing “codemirror” editor.
Click the “setting-icon” in the editor modal and change the “Editing mode” to “visual”.
Click the component to edit, this will show a modal containing “tinyMce” editor.

Ensure the “codemirror-plugin” works fine in the tinymce editor

Run the studio server from devstack dir “make studio-up”
Login to studio and create a new course.
Add a new unit in the course and go to the unit editor page.
Click “HTML” component button and select “Text”.
Click the component to edit, this will show a modal containing “tinymce” editor.
Click on “HTML” icon on the toolbar of the editor, this will show a modal with codemirror editor.
Add some HTML content and save the changes.
The saved changes should show up in the TinyMCE editor.

Testing announcements message in studio

Run the studio server from devstack dir “make studio-up”
Go to “/maintenance” and select “announcement” section.
Click “Create new announcement” button.
The TinyMCE editor will show up, make sure to test all the components in the editor.
Save the announcement message.

Screenshots and videos of UI changes

Video comparing TinyMCE4 and TinyMCE5 in studio

TinyMCE4_vs_TinyMCE5.mp4

OLD TinyMCE UI in Studio

NEW TinyMCE UI in Studio

OLD TinyMCE UI on announcement editor page

NEW TinyMCE UI on announcement editor page

openedx-webhooks · 2022-04-29T21:28:13Z

Thanks for the pull request, @DubeySandeep! Please note that it may take us up to several weeks or months to complete a review and merge your PR.

Feel free to add as much of the following information to the ticket as you can:

supporting documentation
Open edX discussion forum threads
timeline information ("this must be merged by XX date", and why that is)
partner information ("this is a course on edx.org")
any other information that can help Product understand the context for the PR

All technical communication about the code itself will be done via the GitHub pull request interface. As a reminder, our process documentation is here.

Please let us know once your PR is ready for our review and all tests are green.

DubeySandeep

(Leaving some inline comments to explain the changes to reviewer.)

DubeySandeep · 2022-04-29T22:55:39Z

common/lib/xmodule/xmodule/js/src/html/edit.js

          codemirror: {
-            path: baseUrl + "js/vendor"
+            path: baseUrl + "js/vendor",
+            disableFilesMerge: true,


The new codemirror plugin allows passing the custom jsFiles to the plugin. Earlier we had to change the plugin code (ref)

DubeySandeep · 2022-04-29T22:55:42Z

common/lib/xmodule/xmodule/js/src/html/edit.js

-          theme: "modern",
-          skin: 'studio-tmce4',
+          theme: "silver",
+          skin: "studio-tmce5",


"studio-tmce5" is the new skin created having similar colour and style of "studio-tmce4" (Note: The custom-skin structure is completely changed in v5 so we had to regenerate the new skin from scratch.)

DubeySandeep · 2022-04-29T22:57:10Z

common/lib/xmodule/xmodule/js/src/html/edit.js

-            "alignleft aligncenter alignright alignjustify | " +
-            "bullist numlist outdent indent blockquote | link unlink " +
-            ((this.new_image_modal ? 'insertImage' : 'image') + " | code"),
+          toolbar: "formatselect fontselect bold italic underline forecolor wrapAsCode " +


Although we have used | here but we had disabled the "bars" in the studio-tmce4 skin but disabling the "bars" is not possible in the new skin so ended up remving "|" to achieve the old UI.

It's also worth noting that these separators are redundant now. The only thing they were doing before, was wrapping the toolbar items in groups. I.e. if a button from a single group should be moved to a lower row (due to insufficient width of the editor), then the whole group is moved there instead.

It is no longer the case because the default toolbar modes have been changed to more user-friendly options. The PC version is using the floating toolbar, but for this to happen, a browser's window width would need to be under 1024px. On mobile devices, the overflow is handled by scrolling.

DubeySandeep · 2022-04-29T23:01:02Z

common/lib/xmodule/xmodule/js/src/html/edit.js

-        image: baseUrl + "images/ico-tinymce-code.png",
-        onclick: function() {
+        tooltip: gettext('Code block'),
+        icon: 'code-sample',


TinyMCE5 only allows svg icons and have different way to add new icon (ref), overe here we are using a builtin icon.

Old png icon: { }
New svg icon (code-sample): { ; }

(Check screenshot in the PR description for UI)

natabene · 2022-05-03T19:36:49Z

@DubeySandeep Thank you for your contribution. Is this ready for our review?

jmyatt · 2022-05-05T16:43:38Z

@jmbowman @jristau1984 as this change affects Studio as opposed to the LMS, maybe it should be reviewed by TNL?

DubeySandeep · 2022-05-05T22:09:38Z

@natabene Thanks for checking! Yeah, the PR is ready for review, I've asked @Agrendalath to take the first pass (as an internal reviewer) and I'll be happy to get feedback/suggestion from other reviewers! :)

Agrendalath

@DubeySandeep, I've tested that this is working correctly with both announcements and HTML XBlock. I've checked the HTML XBlock in the Studio unit view, the custom pages view, and the bulk email section of the Instructor Dashboard.

Could you please look into this failing JS test?

Agrendalath · 2022-05-05T22:50:32Z

common/lib/xmodule/xmodule/js/src/html/edit.js

-            "alignleft aligncenter alignright alignjustify | " +
-            "bullist numlist outdent indent blockquote | link unlink " +
-            ((this.new_image_modal ? 'insertImage' : 'image') + " | code"),
+          toolbar: "formatselect fontselect bold italic underline forecolor wrapAsCode " +


It's also worth noting that these separators are redundant now. The only thing they were doing before, was wrapping the toolbar items in groups. I.e. if a button from a single group should be moved to a lower row (due to insufficient width of the editor), then the whole group is moved there instead.

It is no longer the case because the default toolbar modes have been changed to more user-friendly options. The PC version is using the floating toolbar, but for this to happen, a browser's window width would need to be under 1024px. On mobile devices, the overflow is handled by scrolling.

common/static/js/vendor/tinymce/BUILD_README.txt

Agrendalath · 2022-05-05T23:06:49Z

common/static/js/vendor/tinymce/BUILD_README.txt

+4. Find all the EDX specific changes in the currently used version of tinymce by searching for the string "EDX" in the vendor/js/tinymce dir.
+5. Merge the EDX specific changes with the newly downloaded version.


Just for better visibility during the review. We have only two overrides - one in plugins/codemirror/source.html and one in js/tinymce/plugins/codemirror/plugin.js. Is it correct?

Yes, that's true!

Agrendalath · 2022-05-05T23:29:13Z

common/static/js/vendor/tinymce/BUILD_README.txt

+2. Open terminal and change directory to the newly downloaded tinymce.
+3. Run the build command: “yarn build”, this will create multiple zip files in the build directory.
+4. Unzip the tinymce_<version>.zip file in common/static/vendor/js/
+5. Unzip vendor_extra/tinymce/JakePackage.zip in  common/static/vendor/js/tinymce/.


I believe it's common/static/js/vendor/tinymce/,

Also, is there a specific reason to use js/vendor/tinymce/js/tinymce instead of just js/vendor/tinymce?

Also, is there a specific reason to use js/vendor/tinymce/js/tinymce instead of just js/vendor/tinymce?

the common/static/js/vendor/ is the open-edx structure for storing vendor files where as js/tinymce/ is the tinymce's structure (the js dir contains other files like README, packge.json etc.).

I believe it's common/static/js/vendor/tinymce/,

Yeah, that's true! I've updated the instructions.

where as js/tinymce/ is the tinymce's structure

I couldn't find any references to this structure in TinyMCE or CodeMirror, but I see that it's referenced like this in multiple places within the edx-platform, so let's keep it as-is for backward compatibility.

(the js dir contains other files like README, packge.json etc.).

I don't see other files in vendor/tinymce/js, but I suppose that keeping BUILD_README.txt in a separate directory increases its visibility 👍

natabene · 2022-05-06T19:08:35Z

Owning team will want to have a look at this before merging, since they are actively working in this area.

tecoholic · 2022-05-20T03:14:02Z

@Agrendalath This was a doozy. I finally traced it to a race condition in the tests where data was being queried before TinyMCE has finished initializing. I have update the tests, to wait until init is complete before testing. Kindly review.

tecoholic · 2022-05-20T03:16:30Z

common/lib/xmodule/xmodule/js/src/html/edit.js

@@ -1406,7 +1410,7 @@
      if (this.editor_choice === 'visual') {
        visualEditor = this.getVisualEditor();
        raw_content = visualEditor.getContent({
-          format: "raw",
+          format: "text",


TinyMCE 5 uses the value text instead of raw for the format.

Agrendalath

👍

I tested this: checked that it is working correctly with both announcements and HTML XBlock; checked the HTML XBlock in the Studio unit view, the custom pages view, and the bulk email section of the Instructor Dashboard.
I read through the code
I checked for accessibility issues
Includes documentation
I made sure any change in configuration variables is reflected in the corresponding client's configuration-secure repository: n/a

common/lib/xmodule/xmodule/js/spec/html/edit_spec.js

Agrendalath · 2022-05-24T23:04:36Z

@natabene, this is ready for your review.

Agrendalath

We found some regressions that cannot be reproduced locally. I'm converting it to a draft for now.

tecoholic · 2022-06-03T02:33:24Z

@Agrendalath I have added the commit 49e3309 with the fix for editor breaking on Studio. The minified version of the TinyMCE doesn't seem to play well with the optimized builds of webpack. Once I switched out the minified to a non-minified version in the Webpack configuration and redid a optimized build, things started to work fine.

Another side-effect I noticed is that the size of the container.js file dropped drastically. Using the larger input file actually provides a smaller output file. Something to do with tree-shaking I guess.

Before - using tinymce.full.min.js - 2.2MB

After - using the tinymce.js - 1.4MB

natabene · 2022-06-06T13:09:53Z

@Agrendalath Please let me know if this is ready.

Agrendalath · 2022-06-07T17:25:12Z

@tecoholic, I deployed this to the production-like environment (which is using a CDN) and noticed that we have missed the following change: 9c1a42b.

We need to check if there is something else missing from here: #3155.

tecoholic · 2022-06-08T08:58:11Z

@Agrendalath I have made the necessary changes to get the iframe communication working in TinyMCE in 1ed35b7. But I am afraid the work is far from being done.

While testing I noticed that the Open Response Assessment block is crashing when the editor is set to WYSIWYG. Tried debugging for almost an hour and for some reason I can't find the source file. Let me know if you have some insights into this.
While the reference commit removes the plugin.min.js file in favour of JS build tool, I am afraid the tools have changed since then and it's no longer automatically done. The instructions related to this in BUILD_README.txt is of no help and I am sure, are completely wrong after the current commit, as it will discard the changes. For the current commit, I manually used esbuild to minify the plugin file and added it to the commit. - DONE at 8de9e66
The CodeMirror files are compressed into a single file, but currently the source.html file references them individually. So that needs to be changed. This is a small change I will probably get this done first. - Done at eaaccc9

Let's move this to draft until we wrap all of this up.

* This commit updates the instructions for updating TinyMCE with working set of steps as the previous instructions using the Jakefile was outdated. * The Jakefile zip bundle in vendor_extras is removed as it is no longer required

tecoholic · 2022-09-14T08:39:17Z

@Agrendalath Rebased on master and resolved conflicts.

Agrendalath

All good from my end. Linking my review: #30335 (review)

openedx-webhooks · 2022-09-19T10:43:22Z

@DubeySandeep 🎉 Your pull request was merged! Please take a moment to answer a two question survey so we can improve your experience in the future.

edx-pipeline-bot · 2022-09-19T15:49:55Z

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

edx-pipeline-bot · 2022-09-19T16:38:40Z

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

edx-pipeline-bot · 2022-09-19T16:43:59Z

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

edx-pipeline-bot · 2022-09-19T16:47:39Z

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

…rsion 5.x (openedx#1869) * feat: replace references to tinymce v4 with v5 Replaces the version 4.x references of TinyMCE static files with version 5.x and removes the workaround required for TMCE 4 from oa_editor_tinymce.js Related platform PR: openedx/edx-platform#30335 Related changes: * fix: set tinymce base url so resources are loaded in studio * fix: theme files not loading on studio edit window * chore: bumped minor version to 4.5.0 * chore: update edx paragon to latest version, and fix failing tests due to paragon api change * fix: fix and update translations Co-authored-by: Agrendalath <piotr@surowiec.it> (cherry picked from commit 6072196)

Co-authored-by: Arunmozhi <arunmozhi@opencraft.com> (cherry picked from commit 51b5e62)

Recent upstream changes to Olive include deletion of the "modern" theme we've used for the TinyMCE initialization for the course overview field in the Studio course Schedule and Details page. The fix: use the "silver" theme added in the same PR the "modern" theme was removed. Check [this PR](openedx#30335) for details. YT: https://youtrack.raccoongang.com/issue/RGOeX-25023

openedx-webhooks added needs triage open-source-contribution PR author is not from Axim or 2U labels Apr 29, 2022

DubeySandeep commented Apr 29, 2022

View reviewed changes

openedx-webhooks added waiting on author PR author needs to resolve review requests, answer questions, fix tests, etc. and removed needs triage labels May 3, 2022

Agrendalath force-pushed the DubeySandeep/tinymce_upgrade branch from 1d4dff0 to 9201eb2 Compare May 5, 2022 21:30

Agrendalath reviewed May 6, 2022

View reviewed changes

tecoholic reviewed May 20, 2022

View reviewed changes

Agrendalath approved these changes May 24, 2022

View reviewed changes

common/lib/xmodule/xmodule/js/spec/html/edit_spec.js Outdated Show resolved Hide resolved

tecoholic force-pushed the DubeySandeep/tinymce_upgrade branch from be6d7df to c54a007 Compare May 25, 2022 02:11

Agrendalath mentioned this pull request May 25, 2022

chore: backport TinyMCE upgrade to echo branch [BB-6151] open-craft/edx-platform#472

Merged

Agrendalath requested changes May 26, 2022

View reviewed changes

Agrendalath marked this pull request as draft May 26, 2022 01:38

Agrendalath marked this pull request as ready for review June 4, 2022 16:39

openedx-webhooks added needs triage and removed waiting on author PR author needs to resolve review requests, answer questions, fix tests, etc. labels Jun 4, 2022

Agrendalath force-pushed the DubeySandeep/tinymce_upgrade branch from 49e3309 to ada8e9f Compare June 4, 2022 16:50

Agrendalath mentioned this pull request Jun 7, 2022

chore: backport TinyMCE upgrade to echo branch v2 [BB-6151] open-craft/edx-platform#477

Merged

tecoholic force-pushed the DubeySandeep/tinymce_upgrade branch from a11b3e1 to 8d49e28 Compare June 9, 2022 13:19

tecoholic added 9 commits September 14, 2022 14:03

docs: update instructions for compressing code-mirror plugin

ca8a45b

fix: validate message origin in codemirror source.html

992ca57

fix: remove unnecssary code in the codemirror plugin

527b443

docs: remove outdated note from build instructions

11f35c0

refactor: rename BUILD_README from txt to md

40ca489

temp: set the ora version to PR version for testing

e267594

refactor: regenerate the tinymce.full.min.js using LC_ALL set to C

688e425

chore: update ora2 requirement version to 4.5.0

6b976bf

tecoholic force-pushed the DubeySandeep/tinymce_upgrade branch from 82a5cb3 to 6b976bf Compare September 14, 2022 08:38

Agrendalath approved these changes Sep 15, 2022

View reviewed changes

Agrendalath merged commit 51b5e62 into openedx:master Sep 19, 2022

Agrendalath deleted the DubeySandeep/tinymce_upgrade branch September 19, 2022 10:43

Agrendalath mentioned this pull request Oct 7, 2022

feat[maple]: upgrade TinyMCE4 to TinyMCE5 [BB-6151] open-craft/edx-platform#493

Merged

Agrendalath pushed a commit to open-craft/edx-platform that referenced this pull request Oct 7, 2022

feat: upgrade TinyMCE v4.0.20 to TinyMCE v5.5.1 (openedx#30335)

9536f1b

Co-authored-by: Arunmozhi <arunmozhi@opencraft.com> (cherry picked from commit 51b5e62)

Agrendalath mentioned this pull request Oct 7, 2022

feat[nutmeg]: upgrade TinyMCE4 to TinyMCE5 [BB-6151] open-craft/edx-platform#494

Merged

Agrendalath pushed a commit to open-craft/edx-platform that referenced this pull request Oct 7, 2022

feat: upgrade TinyMCE v4.0.20 to TinyMCE v5.5.1 (openedx#30335)

13abc2c

Co-authored-by: Arunmozhi <arunmozhi@opencraft.com> (cherry picked from commit 51b5e62)

asadali145 mentioned this pull request Oct 27, 2022

fix: Styling issue in TinyMCE editor in Studio #31212

Merged

angellareo mentioned this pull request Sep 18, 2023

TinyMCE problem in edx-sga problems: modern theme not found mitodl/edx-sga#346

Closed

Anas12091101 mentioned this pull request Jan 31, 2024

chore: upgrade xblock-utils to 3.2.0 to support TinyMCE v5 #34149

Merged

		4. Find all the EDX specific changes in the currently used version of tinymce by searching for the string "EDX" in the vendor/js/tinymce dir.
		5. Merge the EDX specific changes with the newly downloaded version.

[BB-6151] feat: upgrades tinyMCE v4.0.20 to tinyMCE v5.5.1 #30335

[BB-6151] feat: upgrades tinyMCE v4.0.20 to tinyMCE v5.5.1 #30335

Conversation

DubeySandeep commented Apr 29, 2022 • edited Loading

Description

Supporting information

Testing instructions

Testing new TinyMCE in Studio

Ensure the “visual” and “raw” html editor are working fine

Ensure the “codemirror-plugin” works fine in the tinymce editor

Testing announcements message in studio

Screenshots and videos of UI changes

OLD TinyMCE UI in Studio

NEW TinyMCE UI in Studio

OLD TinyMCE UI on announcement editor page

NEW TinyMCE UI on announcement editor page

openedx-webhooks commented Apr 29, 2022 • edited Loading

DubeySandeep left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Agrendalath May 5, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

natabene commented May 3, 2022

jmyatt commented May 5, 2022

DubeySandeep commented May 5, 2022

Agrendalath left a comment

Choose a reason for hiding this comment

Agrendalath May 5, 2022 • edited Loading

Choose a reason for hiding this comment

Agrendalath May 5, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

natabene commented May 6, 2022

tecoholic commented May 20, 2022

Choose a reason for hiding this comment

Agrendalath left a comment

Choose a reason for hiding this comment

Agrendalath commented May 24, 2022

Agrendalath left a comment

Choose a reason for hiding this comment

tecoholic commented Jun 3, 2022 • edited Loading

Before - using tinymce.full.min.js - 2.2MB

After - using the tinymce.js - 1.4MB

natabene commented Jun 6, 2022

Agrendalath commented Jun 7, 2022

tecoholic commented Jun 8, 2022 • edited Loading

tecoholic commented Sep 14, 2022

Agrendalath left a comment

Choose a reason for hiding this comment

openedx-webhooks commented Sep 19, 2022

edx-pipeline-bot commented Sep 19, 2022

edx-pipeline-bot commented Sep 19, 2022

edx-pipeline-bot commented Sep 19, 2022

edx-pipeline-bot commented Sep 19, 2022

DubeySandeep commented Apr 29, 2022 •

edited

Loading

openedx-webhooks commented Apr 29, 2022 •

edited

Loading

Agrendalath May 5, 2022 •

edited

Loading

Agrendalath May 5, 2022 •

edited

Loading

Agrendalath May 5, 2022 •

edited

Loading

tecoholic commented Jun 3, 2022 •

edited

Loading

tecoholic commented Jun 8, 2022 •

edited

Loading