[SE-3381] Allows adding new tinymce plugins through platform configuration

[nizarmah]

This makes it possible to install new tinymce plugins through the environment settings.

This PR is responsible for adding the tinymce plugin settings to the tinymce javascript configuration.

JIRA tickets: SE-3381, SE-3247

Dependencies:

• [SE-3381] Allows adding new tinymce plugins through platform configuration configuration#143

Upstream Pull Request:

• https://github.com/edx/edx-platform/pull/25695

Sandbox URL:

• LMS: https://configurable-tinymce-plugins.stage.opencraft.hosting/
• Studio: https://studio.configurable-tinymce-plugins.stage.opencraft.hosting/

Testing instructions:

1. Login to Studio using staff@example.com/edx
2. Create a new Unit with an HTML Text
3. Make sure that the ADSK Link shows in the toolbar
4. Create a link and make sure you can preview it, and see it on the LMS

Reviewers

• @pkulkark
• @bradenmacdonald

Settings

EDXAPP_CMS_ENV_EXTRA:
  JS_ENV_EXTRA_CONFIG:
    TINYMCE_ADDITIONAL_PLUGINS:
    - name: adsklink
      toolbar: true
      extra_settings:
        linktypes:
        - download
        - offer
        filetypes:
        - PDF
        - zip
        - Video
        - Design
        orientations:
        - Vertical
        - Horizontal
        styles:
        - Primary
        - Normal
        - Secondary

TINYMCE_ADDITIONAL_PLUGINS_LIST:
- repo: https://gitlab.com/nizarmah/tinymce-adsk-plugin
  name: adsklink
  plugin_path: "/adsklink"

edx_ansible_source_repo: "https://github.com/open-craft/configuration.git"
configuration_version: "nizar/tinymce_plugins_role_backport"
edx_platform_commit: "nizar/tinymce-easy-plugin-modification-backport"

[pkulkark]

json.dumps is already called in the previous step while defining the variable.

[nizarmah]

Check this commit please.

So in that commit, what I did was take the Env.get_django_setting("ADDITIONAL_NODE_ENV_VARS", "cms", settings=settings).replace("'", '"') and simply sort it. So I json.loads to sort it and then json.dumps after it is sorted.

But we need to run json.dumps again in order to escape the previous string, which is the dump of the sorted json.

So we dump twice in order to make sure that the string is escaped when it is added to the command.

[nizarmah]

@pkulkark following up on this discussion...

The only tinymce plugin from the list of tinymce plugins in the edx-platform which uses CSS is visualblocks.
visualblocks only uses CSS inside the editor, here's the code segment which imports the stylesheet into the editor.

It seems like we'll need to continue adding the styles manually through the custom theme for now. Adding the stylesheets from tinymce plugins into the platform's bundle would be a big change, and for now the adsklink plugin is the only one that's using it.
So, for the sake of budget, it might be a good idea to postpone such a change until it is more necessary/crucial.

I have launched a new app server with the custom autodesk theme in order to prove my suspicions, which are that the reason it wasn't working was because of the theme. 👍

cc @bradenmacdonald could we have your thoughts on this matter?

[bradenmacdonald]

@nizarmah I would have expected tinymce to handle the loading of stylesheets for its own plugins. If it's not doing that, and if most plugins don't need stylesheets, and if you don't see any easy way to add that now, then that makes sense to just use the theme for the time being.

[pkulkark]

@nizarmah The changes LGTM 👍

• I tested this: verified that the sandbox deployed works as expected
• I read through the code

[nizarmah]

👍🏼

I'll be merging the changes.

• Changes are being reviewed upstream
• Addressed first set of comments on upstream pull request
• Tested the new changes on the sandbox instance
• Pull request was already reviewed by another member

If any changes are requested upstream, we can revert, and re-apply the changes.