[#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();

ui/src/collections/collectionUpsertModal.js

@@ -7,6 +7,7 @@ import { collectionViewQueryTab } from "./collectionViewQueryTab";
 window.app = window.app || {};
 window.app.modals = window.app.modals || {};
 
+// @todo consider adding an option for setting the initial open tab
 window.app.modals.openCollectionUpsert = function(collection = {}, modalSettings = {
     // base modal events
     onbeforeopen: null, // function(el) {},

ui/src/css/modal.css

@@ -217,6 +217,12 @@
     }
 }
 
+/* tinymce fullscreen preview */
+.tox-fullscreen .modal {
+    width: 100% !important;
+    transition: none;
+}
+
 /* content scroll shadows */
 .modal-content {
     --topShadowOffset: calc(var(--spacing) + 1px);