From ac59563ddb132734178649adce1d4e2e2bb2832c Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Fri, 3 May 2024 15:17:24 +0200
Subject: [PATCH] chore: change the button to a toggle button and add an
 `onSetup` callback to toggle the button active/inactive when you click on
 elements

---
 .../plugins/tiny-mce-embeddedmedia.plugin.ts       | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/plugins/tiny-mce-embeddedmedia.plugin.ts b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/plugins/tiny-mce-embeddedmedia.plugin.ts
index df36043308..1cadeaa0fe 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/plugins/tiny-mce-embeddedmedia.plugin.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/plugins/tiny-mce-embeddedmedia.plugin.ts
@@ -6,10 +6,22 @@ export default class UmbTinyMceEmbeddedMediaPlugin extends UmbTinyMcePluginBase
 	constructor(args: TinyMcePluginArguments) {
 		super(args);
 
-		this.editor.ui.registry.addButton('umbembeddialog', {
+		this.editor.ui.registry.addToggleButton('umbembeddialog', {
 			icon: 'embed',
 			tooltip: 'Embed',
 			onAction: () => this.#onAction(),
+			onSetup: (api) => {
+				const editor = this.editor;
+				const onNodeChange = () => {
+					const selectedElm = editor.selection.getNode();
+					api.setActive(
+						selectedElm.nodeName.toUpperCase() === 'DIV' && selectedElm.classList.contains('umb-embed-holder'),
+					);
+				};
+
+				editor.on('NodeChange', onNodeChange);
+				return () => editor.off('NodeChange', onNodeChange);
+			},
 		});
 	}