TinyMCE loads content.min.css once for each text area

[vyruss]

Expected behaviour: content.min.css loaded once

Actual behaviour: content.min.css loaded x times for x text areas which is actively slowing down our page loads for large templates (it also gives the impression that you can't click on accordions to edit)

Steps to reproduce: edit a plan with multiple questions

Proposed solution here perhaps?

• https://stackoverflow.com/a/9111839
• Along the same lines: tinymce is requesting the theme css lots angular-ui/ui-tinymce#68 (comment)
  • If that doesn't work, we can try https://stackoverflow.com/a/47835687

[briri]

related to #1298

[briri]

Did some initial experimentation with the above recommendations. Setting the 'mode' on the Tinymce init method didn't seem to have any affect.
I think that spending some time to redesign the way this page is structured/served up to the UI would be a better approach. (e.g. load sections and comments areas via ajax on demand)

[jollopre]

I dug into this problem while trying to fix #1365. Tinymce loads the content.min.css asynchronously for each instance created and since each textarea got associated a new iframe for tinymce, there is no way to prevent loading multiple times the content.min.css (unless inline mode is used, which we don't want).

In order to speed up the page rendering, we should load things on demand (as @briri suggested) and therefore tinymce instances would be loaded incrementally when the user requests a specific area.

[mesterjagels]

Any update on this issue?

[briri]

Hi @mesterjagels, no we have not addressed this issue yet. We will be investigating the new Rails 6 ActionText as a replacement for Tinymce along with a larger redesign of the way the forms are generated/loaded.

We did update the 'Write Plan' page so that the Tinymce text areas load when the user expands one of the accordion sections which seems to have dramatically improved performance. It was originally loading them all at once which, depending on the number of sections/questions for the template was extremely slow to load.

[benjaminfaure]

Needs some investigation if this issue is still relevant

[coderjinhui]

Please improve this behavior! This will cause the loading bug when using the slow network!

Steps:
page1 has the editor, page2 also has the editor.
When using slow network, opening page1 will load the editor, and before the editor finished loading, navigate to page2.

Then, navigate back to page1, the editor will not load forever! It will be always blank!!!

What a horrible bug!