How to use the @ephox/alloy.AddEventsBehaviour.config function in @ephox/alloy

parts: {
        blocker: {
          dom: DomFactory.fromHtml('<div class="tox-dialog-wrap"></div>'),
          components: [
            {
              dom: {
                tag: 'div',
                classes: (isTouch ? [ 'tox-dialog-wrap__backdrop', 'tox-dialog-wrap__backdrop--opaque' ] : [ 'tox-dialog-wrap__backdrop' ])
              }
            }
          ]
        }
      },
      modalBehaviours: Behaviour.derive([
        // Dupe warning.
        AddEventsBehaviour.config('basic-dialog-events', [
          AlloyEvents.run(formCancelEvent, (comp, se) =&gt; {
            spec.onCancel();
          }),
          AlloyEvents.run(formSubmitEvent, (comp, se) =&gt; {
            spec.onSubmit();
          }),
        ])
      ])
    }
  );
};

closeWindow(dialogUi.instanceApi);
          }
        },
        backstage, ariaAttrs
      );

      const inlineDialogComp = GuiFactory.build(InlineView.sketch({
        lazySink: backstage.shared.getSink,
        dom: {
          tag: 'div',
          classes: [ ]
        },
        // Fires the default dismiss event.
        fireDismissalEventInstead: { },
        inlineBehaviours: Behaviour.derive([
          AddEventsBehaviour.config('window-manager-inline-events', [
            // Can't just fireDismissalEvent formCloseEvent, because it is on the parent component of the dialog
            AlloyEvents.run(SystemEvents.dismissRequested(), (comp, se) => {
              AlloyTriggers.emit(dialogUi.dialog, formCancelEvent);
            }),
          ]),
          ...inlineAdditionalBehaviours(editor, isStickyToolbar)
        ])
      }));
      inlineDialog.set(inlineDialogComp);

      // Position the inline dialog
      InlineView.showWithin(
        inlineDialogComp,
        anchor,
        GuiFactory.premade(dialogUi.dialog),
        Option.some(Body.body())

tabbarBehaviours: Behaviour.derive([
          Tabstopping.config({ })
        ])
      }),
      AlloyTabSection.parts().tabview({
        dom: {
          tag: 'div',
          classes: [ 'tox-dialog__body-content' ]
        }
      })
    ],

    selectFirst: tabMode.selectFirst,

    tabSectionBehaviours: Behaviour.derive([
      AddEventsBehaviour.config('tabpanel', tabMode.extraEvents),
      Keying.config({
        mode: 'acyclic'
      }),

      // INVESTIGATE: Is this necessary? Probably used by getCompByName.
      Composing.config({
        // TODO: Think about this
        find: (comp) => Arr.head(AlloyTabSection.getViewItems(comp))
      }),
      Representing.config({
        store: {
          mode: 'manual',
          getValue: (tsection: AlloyComponent) => {
            // NOTE: Assumes synchronous updating of store.
            tsection.getSystem().broadcastOn([ SendDataToSectionChannel ], { });
            return storedValue.get();

// DUPE with TextField.
  const pLabel = spec.label.map((label) => renderLabel(label, providersBackstage));

  const pField = AlloyFormField.parts().field({
    // TODO: Alloy should not allow dom changing of an HTML select!
    dom: {  },
    selectAttributes: {
      size: spec.size
    },
    options: translatedOptions,
    factory: AlloyHtmlSelect,
    selectBehaviours: Behaviour.derive([
      Disabling.config({ disabled: spec.disabled }),
      Tabstopping.config({ }),
      AddEventsBehaviour.config('selectbox-change', [
        AlloyEvents.run(NativeEvents.change(), (component, _) => {
          AlloyTriggers.emitWith(component, formChangeEvent, { name: spec.name } );
        })
      ])
    ])
  });

  const chevron: Option = spec.size > 1 ? Option.none() :
    Option.some({
        dom: {
          tag: 'div',
          classes: ['tox-selectfield__icon-js'],
          innerHtml: Icons.get('chevron-down', providersBackstage.icons)
        }
      });

tag: 'div',
            classes: [ `${prefix}__select-chevron` ],
            innerHtml: Icons.get('chevron-down', sharedBackstage.providers.icons)
          }
        })
      ]),
      matchWidth: true,
      useMinWidth: true,

      // TODO: Not quite working. Can still get the button focused.
      dropdownBehaviours: Behaviour.derive([
        ...spec.dropdownBehaviours,
        DisablingConfigs.button(spec.disabled),
        Unselecting.config({ }),
        Replacing.config({ }),
        AddEventsBehaviour.config('dropdown-events', [
          onControlAttached(spec, editorOffCell),
          onControlDetached(spec, editorOffCell)
        ]),
        AddEventsBehaviour.config('menubutton-update-display-text', [
          AlloyEvents.run(updateMenuText, (comp, se) => {
            optMemDisplayText.bind((mem) => mem.getOpt(comp)).each((displayText) => {
              Replacing.set(displayText, [ GuiFactory.text(sharedBackstage.providers.translate(se.event().text())) ] );
            });
          }),
          AlloyEvents.run(updateMenuIcon, (comp, se) => {
            optMemDisplayIcon.bind((mem) => mem.getOpt(comp)).each((displayIcon) => {
              Replacing.set(displayIcon, [ renderReplacableIconFromPack(se.event().icon(), sharedBackstage.providers.icons) ] );
            });
          })
        ])
      ]),

const renderField = (s) => {
    return {
      uid: s.uid,
      dom: {
        tag: 'div',
        classes: [ 'tox-dropzone-container' ]
      },
      behaviours: Behaviour.derive([
        RepresentingConfigs.memory([ ]),
        ComposingConfigs.self(),
        Disabling.config({}),
        Toggling.config({
          toggleClass: 'dragenter',
          toggleOnExecute: false
        }),
        AddEventsBehaviour.config('dropzone-events', [
          AlloyEvents.run('dragenter', sequence([ stopper, Toggling.toggle ])),
          AlloyEvents.run('dragleave', sequence([ stopper, Toggling.toggle ])),
          AlloyEvents.run('dragover', stopper),
          AlloyEvents.run('drop', sequence([ stopper, onDrop ])),
          AlloyEvents.run(NativeEvents.change(), onSelect)
        ]),
      ]),
      components: [
        {
          dom: {
            tag: 'div',
            classes: [ 'tox-dropzone' ],
            styles: {}
          },
          components: [
            {

const wrapInPopDialog = (toolbarSpec: AlloySpec) => {
    return {
      dom: {
        tag: 'div',
        classes: ['tox-pop__dialog'],
      },
      components: [toolbarSpec],
      behaviours: Behaviour.derive([
        Keying.config({
          mode: 'acyclic'
        }),

        AddEventsBehaviour.config('pop-dialog-wrap-events', [
          AlloyEvents.runOnAttached((comp) => {
            editor.shortcuts.add('ctrl+F9', 'focus statusbar', () => Keying.focusIn(comp));
          }),
          AlloyEvents.runOnDetached((comp) => {
            editor.shortcuts.remove('ctrl+F9');
          })
        ])
      ])
    };
  };

const cropPanelComponents = [
    createBackButton(),
    createSpacer(),
    createButton('Apply', (button) => {
      const transform = makeCropTransform();
      emitTransformApply(button, transform);
      imagePanel.hideCrop();
    }, false, true)
  ];

  const CropPanel = Container.sketch({
    dom: panelDom,
    components: cropPanelComponents.map((mem) => mem.asSpec()),
    containerBehaviours: Behaviour.derive([
      AddEventsBehaviour.config('image-tools-crop-buttons-events', [
        AlloyEvents.run(ImageToolsEvents.external.disable(), (comp, se) => {
          disableAllComponents(cropPanelComponents, comp);
        }),
        AlloyEvents.run(ImageToolsEvents.external.enable(), (comp, se) => {
          enableAllComponents(cropPanelComponents, comp);
        })
      ])
    ])
  });

  const memSize = Memento.record(
    renderSizeInput({
      name: 'size',
      label: Option.none(),
      constrain: true,
      disabled: false

};

  const memInput = Memento.record(
    {
      dom: {
        tag: 'input',
        attributes: {
          type: 'file',
          accept: 'image/*'
        },
        styles: {
          display: 'none'
        }
      },
      behaviours: Behaviour.derive([
        AddEventsBehaviour.config('input-file-events', [
          AlloyEvents.cutter(NativeEvents.click()),
          AlloyEvents.cutter(SystemEvents.tap())
        ])
      ])
    }
  );

  const renderField = (s) => {
    return {
      uid: s.uid,
      dom: {
        tag: 'div',
        classes: [ 'tox-dropzone-container' ]
      },
      behaviours: Behaviour.derive([
        RepresentingConfigs.memory([ ]),

const createVariableFilterPanel = (label: string, transform: (ir: ImageResult, adjust: number) => Promise, min: number, value: number, max: number) => {
    const filterPanelComponents = variableFilterPanelComponents(label, transform, min, value, max);
    return Container.sketch({
      dom: panelDom,
      components: filterPanelComponents.map((mem) => mem.asSpec()),
      containerBehaviours: Behaviour.derive([
        AddEventsBehaviour.config('image-tools-filter-panel-buttons-events', [
          AlloyEvents.run(ImageToolsEvents.external.disable(), (comp, se) => {
            disableAllComponents(filterPanelComponents, comp);
          }),
          AlloyEvents.run(ImageToolsEvents.external.enable(), (comp, se) => {
            enableAllComponents(filterPanelComponents, comp);
          })
        ])
      ])
    });
  };