Merge pull request #1868 from umbraco/feature/tinymce-togglebutton

Feature: TinyMce Toggle Buttons
This commit is contained in:
Lone Iversen
2024-05-23 12:44:08 +02:00
committed by GitHub
2 changed files with 16 additions and 14 deletions

View File

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

View File

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