[#7746] readded editor fullscreen option and preloaded the tinymce component

ui/src/base/tinymce.js

@@ -201,9 +201,10 @@ window.app.components.tinymce = function(propsArg = {}) {
                 "media",
                 "table",
                 "wordcount",
+                "fullscreen",
             ],
             toolbar:
-                "styles | alignleft aligncenter alignright | bold italic forecolor backcolor | bullist numlist | link media_picker table codesample | direction code",
+                "styles | alignleft aligncenter alignright | bold italic forecolor backcolor | bullist numlist | link media_picker table codesample direction | code fullscreen",
             paste_postprocess: (editor, args) => {
                 cleanupPastedNode(args.node);
             },
@@ -490,14 +491,14 @@ function unwrap(node) {
     parent.removeChild(node);
 }
 
+const scriptId = "lazy-tinymce-js";
+
 async function loadTinyMCE() {
     // already loaded
     if (typeof window.tinymce != "undefined") {
         return;
     }
 
-    const scriptId = "lazy-tinymce-js";
-
     // in the process of being loaded
     if (document.getElementById(scriptId)) {
         return new Promise((resolve, reject) => {
@@ -541,3 +542,23 @@ async function loadTinyMCE() {
         document.dispatchEvent(new CustomEvent("tinymceLoadError", { detail: err }));
     });
 }
+
+// preload TinyMCE with all of its plugins in the background to speed up
+// initial rendering of the component
+let preloadedElem;
+function preloadTinyMCE() {
+    if (typeof window.tinymce != "undefined" || preloadedElem || document.getElementById(scriptId)) {
+        return; // already loaded or in the process of loading
+    }
+
+    preloadedElem = t.div({ hidden: true }, app.components.tinymce());
+    document.body.appendChild(preloadedElem);
+
+    // small enough time for the plugins to initialize
+    setTimeout(() => {
+        preloadedElem?.remove();
+        preloadedElem = null;
+    }, 500);
+}
+
+preloadTinyMCE();