From e0a38f5c267bc3ff8afc6c2b2556cb8d433da222 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 24 Jan 2024 15:09:54 +0100
Subject: [PATCH] different way to load tinyMCE and its plugins

---
 .../input-tiny-mce/input-tiny-mce.element.ts  | 44 +++++++++++++------
 1 file changed, 31 insertions(+), 13 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tiny-mce/input-tiny-mce.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tiny-mce/input-tiny-mce.element.ts
index d868cd5d79..054c8a1577 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tiny-mce/input-tiny-mce.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tiny-mce/input-tiny-mce.element.ts
@@ -3,10 +3,10 @@ import { pastePreProcessHandler } from './input-tiny-mce.handlers.js';
 import { availableLanguages } from './input-tiny-mce.languages.js';
 import { uriAttributeSanitizer } from './input-tiny-mce.sanitizer.js';
 import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
-import { type Editor, type RawEditorOptions, renderEditor } from '@umbraco-cms/backoffice/external/tinymce';
-import { TinyMcePluginArguments, UmbTinyMcePluginBase } from '@umbraco-cms/backoffice/components';
+import { type Editor, type RawEditorOptions } from '@umbraco-cms/backoffice/external/tinymce';
+import { type TinyMcePluginArguments, type UmbTinyMcePluginBase } from '@umbraco-cms/backoffice/components';
 import { loadManifestApi } from '@umbraco-cms/backoffice/extension-api';
-import { ManifestTinyMcePlugin, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+import { type ManifestTinyMcePlugin, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import {
 	PropertyValueMap,
 	css,
@@ -32,6 +32,7 @@ export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) {
 	@state()
 	private _tinyConfig: RawEditorOptions = {};
 
+	#renderEditor?: typeof import('@umbraco-cms/backoffice/external/tinymce').renderEditor;
 	#mediaHelper = new UmbMediaHelper();
 	#plugins: Array<new (args: TinyMcePluginArguments) => UmbTinyMcePluginBase> = [];
 	#editorRef?: Editor | null = null;
@@ -58,7 +59,12 @@ export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) {
 
 	protected async firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): Promise<void> {
 		super.firstUpdated(_changedProperties);
-		await this.#loadPlugins();
+
+		// Here we want to start the loading of everything at first, not one at a time, which is why this code is not using await.
+		const loadEditor = import('@umbraco-cms/backoffice/external/tinymce').then((tinyMce) => {
+			this.#renderEditor = tinyMce.renderEditor;
+		});
+		await Promise.all([loadEditor, ...(await this.#loadPlugins())]);
 		await this.#setTinyConfig();
 	}
 
@@ -81,16 +87,28 @@ export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) {
 		const observable = umbExtensionsRegistry?.extensionsOfType('tinyMcePlugin');
 		const manifests = (await firstValueFrom(observable)) as ManifestTinyMcePlugin[];
 
+		const promises = [];
 		for (const manifest of manifests) {
-			const plugin = manifest.js
-				? await loadManifestApi(manifest.js)
-				: manifest.api
-				? await loadManifestApi(manifest.api)
-				: undefined;
-			if (plugin) {
-				this.#plugins.push(plugin);
+			if (manifest.js) {
+				promises.push(
+					loadManifestApi(manifest.js).then((plugin) => {
+						if (plugin) {
+							this.#plugins.push(plugin);
+						}
+					}),
+				);
+			}
+			if (manifest.api) {
+				promises.push(
+					loadManifestApi(manifest.api).then((plugin) => {
+						if (plugin) {
+							this.#plugins.push(plugin);
+						}
+					}),
+				);
 			}
 		}
+		return promises;
 	}
 
 	async getFormatStyles(stylesheetPaths: Array<string>) {
@@ -214,7 +232,7 @@ export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) {
 			this.#editorRef.destroy();
 		}
 
-		const editors = await renderEditor(this._tinyConfig);
+		const editors = await this.#renderEditor(this._tinyConfig);
 		this.#editorRef = editors.pop();
 	}
 
@@ -346,7 +364,7 @@ export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) {
 
 			/* Solves issue 1019 by lowering un-needed z-index on header.*/
 			.tox.tox-tinymce .tox-editor-header {
-				z-index:0;
+				z-index: 0;
 			}
 		`,
 	];