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 { availableLanguages } from './input-tiny-mce.languages.js';
import { uriAttributeSanitizer } from './input-tiny-mce.sanitizer.js'; import { uriAttributeSanitizer } from './input-tiny-mce.sanitizer.js';
import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui'; import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
import { type Editor, type RawEditorOptions, renderEditor } from '@umbraco-cms/backoffice/external/tinymce'; import { type Editor, type RawEditorOptions } from '@umbraco-cms/backoffice/external/tinymce';
import { TinyMcePluginArguments, UmbTinyMcePluginBase } from '@umbraco-cms/backoffice/components'; import { type TinyMcePluginArguments, type UmbTinyMcePluginBase } from '@umbraco-cms/backoffice/components';
import { loadManifestApi } from '@umbraco-cms/backoffice/extension-api'; 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 { import {
PropertyValueMap, PropertyValueMap,
css, css,
@@ -32,6 +32,7 @@ export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) {
@state() @state()
private _tinyConfig: RawEditorOptions = {}; private _tinyConfig: RawEditorOptions = {};
#renderEditor?: typeof import('@umbraco-cms/backoffice/external/tinymce').renderEditor;
#mediaHelper = new UmbMediaHelper(); #mediaHelper = new UmbMediaHelper();
#plugins: Array<new (args: TinyMcePluginArguments) => UmbTinyMcePluginBase> = []; #plugins: Array<new (args: TinyMcePluginArguments) => UmbTinyMcePluginBase> = [];
#editorRef?: Editor | null = null; #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> { protected async firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): Promise<void> {
super.firstUpdated(_changedProperties); 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(); await this.#setTinyConfig();
} }
@@ -81,16 +87,28 @@ export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) {
const observable = umbExtensionsRegistry?.extensionsOfType('tinyMcePlugin'); const observable = umbExtensionsRegistry?.extensionsOfType('tinyMcePlugin');
const manifests = (await firstValueFrom(observable)) as ManifestTinyMcePlugin[]; const manifests = (await firstValueFrom(observable)) as ManifestTinyMcePlugin[];
const promises = [];
for (const manifest of manifests) { for (const manifest of manifests) {
const plugin = manifest.js if (manifest.js) {
? await loadManifestApi(manifest.js) promises.push(
: manifest.api loadManifestApi(manifest.js).then((plugin) => {
? await loadManifestApi(manifest.api) if (plugin) {
: undefined; this.#plugins.push(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>) { async getFormatStyles(stylesheetPaths: Array<string>) {
@@ -214,7 +232,7 @@ export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) {
this.#editorRef.destroy(); this.#editorRef.destroy();
} }
const editors = await renderEditor(this._tinyConfig); const editors = await this.#renderEditor(this._tinyConfig);
this.#editorRef = editors.pop(); 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.*/ /* Solves issue 1019 by lowering un-needed z-index on header.*/
.tox.tox-tinymce .tox-editor-header { .tox.tox-tinymce .tox-editor-header {
z-index:0; z-index: 0;
} }
`, `,
]; ];