How to use the @ephox/alloy.GuiFactory.build function in @ephox/alloy

const dialogUi = renderInlineDialog(
        dialogInit,
        {
          redial: DialogManager.DialogManager.redial,
          closeWindow: () => {
            inlineDialog.on(InlineView.hide);
            editor.off('ResizeEditor', refreshDocking);
            inlineDialog.clear();
            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)
        ])

[editorContainer],
    // Inline mode does not have a status bar
    isInline ? [ ] : statusbar.toArray(),
    [ partThrobber ]
  ]);

  // Hide the outer container if using inline mode and there's no menubar or toolbar
  const isHidden = isDistractionFree(editor);

  const attributes = {
    role: 'application',
    ...I18n.isRtl() ? { dir: 'rtl' } : {},
    ...isHidden ? { 'aria-hidden': 'true' } : {}
  };

  const outerContainer = GuiFactory.build(
    OuterContainer.sketch({
      dom: {
        tag: 'div',
        classes: ['tox', 'tox-tinymce'].concat(isInline ? ['tox-tinymce-inline'] : []).concat(deviceClasses).concat(platformClasses),
        styles: {
          // This is overridden by the skin, it helps avoid FOUC
          visibility: 'hidden',
          // Hide the container if needed, but don't use "display: none" so that it still has a position
          ...isHidden ? { opacity: '0', border: '0' } : {},
        },
        attributes
      },
      components: containerComponents,
      behaviours: Behaviour.derive([
        Keying.config({
          mode: 'cyclic',

export default () => {
  const helpers = setupDemo();
  const sharedBackstage = helpers.extras.backstage.shared;

  const alert = GuiFactory.build(
    renderAlertBanner({
      text: 'I say I say yi ha',
      level: 'info', // info | warn | error | success
      icon: 'info',
      iconTooltip: 'I might close the banner',
      url: ''
    }, sharedBackstage.providers)
  );

  helpers.uiMothership.add(alert);
};

const open = function (settings: NotificationSpec, closeCallback: () => void) {
    const close = () => {
      closeCallback();
      InlineView.hide(notificationWrapper);
    };

    const notification = GuiFactory.build(
      Notification.sketch({
        text: settings.text,
        level: Arr.contains(['success', 'error', 'warning', 'info'], settings.type) ? settings.type : undefined,
        progress: settings.progressBar === true,
        icon: Option.from(settings.icon),
        onAction: close,
        iconProvider: backstage.shared.providers.icons,
        translationProvider: backstage.shared.providers.translate
      })
    );

    const notificationWrapper = GuiFactory.build(
      InlineView.sketch({
        dom: {
          tag: 'div',
          classes: [ 'tox-notifications-container' ]

const platform = PlatformDetection.detect();
  const isIE = platform.browser.isIE();
  const platformClasses = isIE ? ['tox-platform-ie'] : [];
  const isTouch = platform.deviceType.isTouch();
  const touchPlatformClass = 'tox-platform-touch';
  const deviceClasses = isTouch ? [touchPlatformClass] : [];

  const dirAttributes = I18n.isRtl() ? {
    attributes: {
      dir: 'rtl'
    }
  } : {};

  const lazyHeader = () => lazyOuterContainer.bind(OuterContainer.getHeader);

  const sink = GuiFactory.build({
    dom: {
      tag: 'div',
      classes: ['tox', 'tox-silver-sink', 'tox-tinymce-aux'].concat(platformClasses).concat(deviceClasses),
      ...dirAttributes
    },
    behaviours: Behaviour.derive([
      Positioning.config({
        useFixed: () => header.isDocked(lazyHeader)
      })
    ])
  });

  const lazySink = () => Result.value(sink);

  const memAnchorBar = Memento.record({
    dom: {

finishCell.get().each((finish) => {
      editor.fire('TableSelectorChange', { start, finish });
    });
  });

  const bottomRightSnaps = getSnapsConfig(getBottomRightSnaps, finishCell, (finish) => {
    startCell.get().each((start) => {
      editor.fire('TableSelectorChange', { start, finish });
    });
  });

  const memTopLeft = createSelector(topLeftSnaps);
  const memBottomRight = createSelector(bottomRightSnaps);

  const topLeft = GuiFactory.build(memTopLeft.asSpec());
  const bottomRight = GuiFactory.build(memBottomRight.asSpec());

  const showOrHideHandle = (selector: AlloyComponent, cell: Element, isAbove: (rect: ClientRect) => boolean, isBelow: (rect: ClientRect, viewportHeight: number) => boolean) => {
    const cellRect = cell.dom().getBoundingClientRect();
    Css.remove(selector.element(), 'display');
    const viewportHeight = Traverse.defaultView(Element.fromDom(editor.getBody())).dom().innerHeight;
    const aboveViewport = isAbove(cellRect);
    const belowViewport = isBelow(cellRect, viewportHeight);
    if (aboveViewport || belowViewport) {
      Css.set(selector.element(), 'display', 'none');
    }
  };

  const snapTo = (selector: AlloyComponent, cell: Element, getSnapConfig: (cell: Element) => DraggingTypes.SnapConfig, pos: 'top' | 'bottom') => {
    const snap = getSnapConfig(cell);
    Dragging.snapTo(selector, snap);
    const isAbove = (rect: ClientRect) => {

const helpers = setupDemo();
  const mockEditor: Editor = {
    on: () => { },
    formatter: {
      canApply: () => true,
      match: () => true,
      remove: () => { },
      apply: () => { }
    },
    focus: () => { },
    undoManager: {
      transact: (f) => f()
    }
  } as any;

  const toolbar = GuiFactory.build({
    dom: {
      tag: 'div',
      classes: [ 'demo-toolbar' ],
      styles: {
        'display': 'flex',
        'flex-direction': 'column'
      }
    },
    components: Arr.map([
      { label: 'Button', button: 'alpha' },
      { label: 'ToggleButton', button: 'alpha.toggle' },
      { label: 'SplitButton', button: 'beta' },
      { label: 'StyleButton', button: 'styleselect' }
    ], ({ label, button }) => {
      const groups = identifyButtons(mockEditor, { buttons, toolbar: button }, helpers.extras, Option.none());
      const buttonComponents = Arr.flatten(Arr.map(groups, (group) => group.items));

align: 'end',
        disabled: false,
        icon: Option.none()
      }, 'submit', extras.backstage)
    );

    const footerNo = renderFooterButton({
      name: 'no',
      text: 'No',
      primary: true,
      align: 'end',
      disabled: false,
      icon: Option.none()
    }, 'cancel', extras.backstage);

    const confirmDialog = GuiFactory.build(
      Dialogs.renderDialog({
        lazySink: () => sharedBackstage.getSink(),
        headerOverride: Option.some(Dialogs.hiddenHeader),
        partSpecs: {
          title: Dialogs.pUntitled(),
          close: Dialogs.pClose(() => {
            closeDialog(false);
          }, sharedBackstage.providers),
          body: Dialogs.pBodyMessage(message, sharedBackstage.providers),
          footer: Dialogs.pFooter(Dialogs.pFooterGroup([], [
            footerNo,
            memFooterYes.asSpec()
          ]))
        },
        onCancel: () => closeDialog(false),
        onSubmit: () => closeDialog(true),

{ dom: DomFactory.fromHtml('<h3>' + label + '</h3>') },
        { dom: { tag: 'hr' } },
        spec
      ]
    };
  };

  const memCollection = Memento.record(
    renderCollection({
      columns: 1,
      name: 'collection',
      label: Option.some('Collection: '),
    }, sharedBackstage.providers)
  );

  const everything = GuiFactory.build({
    dom: {
      tag: 'div'
    },
    components: [
      display('Collection', memCollection.asSpec()),
      display('Dropzone', dropzoneSpec),
      display('UrlInput', urlInputSpec),
      display('LinkTypeAheadInput', linkInputSpec),
      display('SizeInput', sizeInputSpec),
      display('SelectBox', selectBoxSpec),
      display('SelectBox with Size', selectBoxSizeSpec),
      display('Grid', gridSpec),
      display('ColorPicker', colorPickerSpec),
      display('ColorInput', colorInputSpec),
      display('Checkbox', checkboxSpec),
      display('Button', buttonSpec),

const register = (editor: Editor, sharedBackstage: UiFactoryBackstageShared) => {
  const activeAutocompleter = Cell>(Option.none());
  const processingAction = Cell(false);

  const autocompleter = GuiFactory.build(
    InlineView.sketch({
      dom: {
        tag: 'div',
        classes: [ 'tox-autocompleter' ]
      },
      components: [ ],
      fireDismissalEventInstead: { },
      inlineBehaviours: Behaviour.derive([
        AddEventsBehaviour.config('dismissAutocompleter', [
          AlloyEvents.run(SystemEvents.dismissRequested(), () => cancelIfNecessary())
        ])
      ]),
      lazySink: sharedBackstage.getSink
    })
  );