From bd80bd312e528c53cb6c9048976e17788d2141a3 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 10 May 2024 15:32:28 +0200 Subject: [PATCH 1/3] fix: load the editor only once this ensures the index.ts file is only loaded once even though you have more editors visible on the page --- .../input-tiny-mce/input-tiny-mce.element.ts | 26 +++++++------------ 1 file changed, 9 insertions(+), 17 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.ts index 69c747373e..7f767c3a52 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.ts @@ -52,8 +52,6 @@ export class UmbInputTinyMceElement extends UUIFormControlMixin(UmbLitElement, ' @state() private _tinyConfig: RawEditorOptions = {}; - // eslint-disable-next-line @typescript-eslint/consistent-type-imports - #renderEditor?: typeof import('@umbraco-cms/backoffice/external/tinymce').renderEditor; #plugins: Array UmbTinyMcePluginBase> = []; #editorRef?: Editor | null = null; #stylesheetRepository = new UmbStylesheetDetailRepository(this); @@ -80,21 +78,15 @@ export class UmbInputTinyMceElement extends UUIFormControlMixin(UmbLitElement, ' private _editorElement?: HTMLElement; protected async firstUpdated(): Promise { - // 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 Promise.all([...(await this.#loadPlugins())]); await this.#setTinyConfig(); } disconnectedCallback() { super.disconnectedCallback(); - if (this.#editorRef) { - // TODO: Test if there is any problems with destroying the RTE here, but not initializing on connectedCallback. (firstUpdated is only called first time the element is rendered, not when it is reconnected) - this.#editorRef.destroy(); - } + // TODO: Test if there is any problems with destroying the RTE here, but not initializing on connectedCallback. (firstUpdated is only called first time the element is rendered, not when it is reconnected) + this.#editorRef?.destroy(); } /** @@ -105,7 +97,7 @@ export class UmbInputTinyMceElement extends UUIFormControlMixin(UmbLitElement, ' */ async #loadPlugins() { const observable = umbExtensionsRegistry?.byType('tinyMcePlugin'); - const manifests = (await firstValueFrom(observable)) as ManifestTinyMcePlugin[]; + const manifests = await firstValueFrom(observable); const promises = []; for (const manifest of manifests) { @@ -255,10 +247,10 @@ export class UmbInputTinyMceElement extends UUIFormControlMixin(UmbLitElement, ' this.#editorRef.destroy(); } - if (!this.#renderEditor) { - throw new Error('TinyMCE renderEditor is not loaded'); - } - const editors = await this.#renderEditor(this._tinyConfig); + const editors = await renderEditor(this._tinyConfig).catch((error) => { + console.error('Failed to render TinyMCE', error); + return []; + }); this.#editorRef = editors.pop(); } @@ -321,7 +313,7 @@ export class UmbInputTinyMceElement extends UUIFormControlMixin(UmbLitElement, ' this.#onChange(editor.getContent()); }); - editor.on('SetContent', (e) => { + editor.on('SetContent', () => { /** * Prevent injecting arbitrary JavaScript execution in on-attributes. * From ae207b1c123cbda0312b0a5503c5d3e8ce206b69 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 10 May 2024 15:33:09 +0200 Subject: [PATCH 2/3] fix: allow multiple editors on the page tinymce does not support having the same html id on its root elements (even though it's a Shadow DOM), so we use an html class instead and tinymce is happy --- .../input-tiny-mce/input-tiny-mce.element.ts | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.ts index 7f767c3a52..cf9a8f885d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.ts @@ -12,8 +12,12 @@ import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbStylesheetDetailRepository, UmbStylesheetRuleManager } from '@umbraco-cms/backoffice/stylesheet'; import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui'; -import type { EditorEvent, Editor, RawEditorOptions } from '@umbraco-cms/backoffice/external/tinymce'; -import type { ManifestTinyMcePlugin } from '@umbraco-cms/backoffice/extension-registry'; +import { + type EditorEvent, + type Editor, + type RawEditorOptions, + renderEditor, +} from '@umbraco-cms/backoffice/external/tinymce'; import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; /** @@ -74,7 +78,7 @@ export class UmbInputTinyMceElement extends UUIFormControlMixin(UmbLitElement, ' return super.value; } - @query('#editor', true) + @query('.editor', true) private _editorElement?: HTMLElement; protected async firstUpdated(): Promise { @@ -347,7 +351,7 @@ export class UmbInputTinyMceElement extends UUIFormControlMixin(UmbLitElement, ' * a target div and binds the RTE to that element */ render() { - return html`
`; + return html`
`; } static styles = [ From f08c4749784e39e9e08d6ecd87f223c38553a152 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 10 May 2024 15:34:25 +0200 Subject: [PATCH 3/3] fix: merge css and let it work on the visible element --- .../components/input-tiny-mce/input-tiny-mce.element.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.ts index cf9a8f885d..7794a67eb8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.ts @@ -356,12 +356,9 @@ export class UmbInputTinyMceElement extends UUIFormControlMixin(UmbLitElement, ' static styles = [ css` - #editor { + .tox-tinymce { position: relative; min-height: 100px; - } - - .tox-tinymce { border-radius: 0; border: var(--uui-input-border-width, 1px) solid var(--uui-input-border-color, var(--uui-color-border, #d8d7d9)); }