From d14ee18acf4702f1e9a52d000d2bef25e6a131c1 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Thu, 23 May 2024 09:42:25 +0200 Subject: [PATCH 1/2] chore: make better onSetup method --- .../plugins/tiny-mce-embeddedmedia.plugin.ts | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) 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 1cadeaa0fe..890510b11b 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 @@ -10,17 +10,11 @@ export default class UmbTinyMceEmbeddedMediaPlugin extends UmbTinyMcePluginBase 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); + onSetup: function (api) { + const changed = args.editor.selection.selectorChangedWithUnbind('div.umb-embed-holder', (state) => + api.setActive(state), + ); + return () => changed.unbind(); }, }); } From 8cf936cb0cd2ae33b8503ccf28ed1f0f9ba605fe Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 23 May 2024 11:36:48 +0200 Subject: [PATCH 2/2] link picker plugin --- .../tiny-mce-multi-url-picker.plugin.ts | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/tiny-mce-plugin/tiny-mce-multi-url-picker.plugin.ts b/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/tiny-mce-plugin/tiny-mce-multi-url-picker.plugin.ts index c8591199fd..74442fba55 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/tiny-mce-plugin/tiny-mce-multi-url-picker.plugin.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/tiny-mce-plugin/tiny-mce-multi-url-picker.plugin.ts @@ -30,16 +30,24 @@ export default class UmbTinyMceMultiUrlPickerPlugin extends UmbTinyMcePluginBase // return () => editor.off('NodeChange', editorEventCallback); // }; - args.editor.ui.registry.addButton('link', { + this.editor.ui.registry.addToggleButton('link', { icon: 'link', tooltip: 'Insert/edit link', onAction: () => this.showDialog(), + onSetup: (api) => { + const changed = this.editor.selection.selectorChangedWithUnbind('a', (state) => api.setActive(state)); + return () => changed.unbind(); + }, }); - args.editor.ui.registry.addButton('unlink', { + this.editor.ui.registry.addToggleButton('unlink', { icon: 'unlink', - tooltip: 'Remove link', + tooltip: 'Remove Link', onAction: () => args.editor.execCommand('unlink'), + onSetup: (api) => { + const changed = this.editor.selection.selectorChangedWithUnbind('a', (state) => api.setActive(state)); + return () => changed.unbind(); + }, }); }