yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

different way to load tinyMCE and its plugins

Browse Source
This commit is contained in:
Niels Lyngsø
2024-01-24 15:09:54 +01:00
parent e2e51374f5
commit e0a38f5c26
1 changed files with 31 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/Umbraco.Web.UI.Client/src/packages/core/components/input-tiny-mce/input-tiny-mce.element.ts
View File

@@ -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;
}
`,
];