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(); + }, }); } 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(); }, }); }