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] 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<void> {
@@ -347,7 +351,7 @@ export class UmbInputTinyMceElement extends UUIFormControlMixin(UmbLitElement, '
 	 * a target div and binds the RTE to that element
 	 */
 	render() {
-		return html`<div id="editor"></div>`;
+		return html`<div class="editor"></div>`;
 	}
 
 	static styles = [