qbank_dam-8.x-1.4/js/ckeditor5_plugins/qbank/src/qbankmediaui.js

import { Plugin } from 'ckeditor5/src/core';
import { ButtonView } from 'ckeditor5/src/ui';
import icon from '../../../../icons/icon.svg';

export default class QBankMediaUI extends Plugin {
  init() {
    const editor = this.editor;

    // Register toolbar button
    editor.ui.componentFactory.add('qbankMedia', (locale) => {
      const command = editor.commands.get('insertQBankMedia');
      const buttonView = new ButtonView(locale);

      // Create the toolbar button.
      buttonView.set({
        label: editor.t('QBank DAM - Image Selection'),
        icon,
        tooltip: true,
      });

      // Bind the state of the button to the command.
      buttonView.bind('isOn', 'isEnabled').to(command, 'value', 'isEnabled');

      // Execute the command when the button is clicked (executed).
      this.listenTo(buttonView, 'execute', () =>
        editor.execute('insertQBankMedia'),
      );

      return buttonView;
    });
  }
}