How to use the @ephox/katamari.Id.generate function in @ephox/katamari

const history = filterByQuery(term, historyTargets(urlBackstage.getHistory(fileType)));
      return fileType === 'file' ? joinMenuLists([
        history,
        filterByQuery(term, headerTargets(linkInfo)),
        filterByQuery(term, Arr.flatten([
          anchorTargetTop(linkInfo),
          anchorTargets(linkInfo),
          anchorTargetBottom(linkInfo)
        ]))
      ])
        : history;
    }
  );
};

const errorId = Id.generate('aria-invalid');

export const renderUrlInput = (spec: UrlInputSpec, backstage: UiFactoryBackstage, urlBackstage: UiFactoryBackstageForUrlInput): SketchSpec => {
  const providersBackstage = backstage.shared.providers;

  const updateHistory = (component: AlloyComponent): void => {
    const urlEntry = Representing.getValue(component);
    urlBackstage.addToHistory(urlEntry.value, spec.filetype);
  };

  // TODO: Make alloy's typeahead only swallow enter and escape if menu is open
  const pField = AlloyFormField.parts().field({
    factory: AlloyTypeahead,
    dismissOnBlur: true,
    inputClasses: ['tox-textfield'],
    sandboxClasses: ['tox-dialog__popups'],
    inputAttributes: {

}).map((items) => {
        return Option.from(createTieredDataFrom(
          Merger.deepMerge(
            createPartialChoiceMenu(
              Id.generate('menu-value'),
              items,
              (value) => {
                spec.onItemAction(comp, value);
              },
              spec.columns,
              spec.presets,
              ItemResponse.CLOSE_ON_EXECUTE,
              // No colour is ever selected on opening
              () => false,
              sharedBackstage.providers
            ),
            {
              movement: deriveMenuMovement(spec.columns, spec.presets)
            }
          )
        ));

Unselecting,
} from '@ephox/alloy';
import { Types } from '@ephox/bridge';
import { Future, Id, Merger, Option, Arr, Cell, Fun } from '@ephox/katamari';
import { toolbarButtonEventOrder } from 'tinymce/themes/silver/ui/toolbar/button/ButtonEvents';

import { UiFactoryBackstageShared } from '../../backstage/Backstage';
import { renderLabel, renderReplacableIconFromPack } from '../button/ButtonSlices';
import * as Icons from '../icons/Icons';
import { componentRenderPipeline } from '../menus/item/build/CommonMenuItem';
import * as MenuParts from '../menus/menu/MenuParts';
import { DisablingConfigs } from '../alien/DisablingConfigs';
import { onControlAttached, onControlDetached, OnDestroy } from '../controls/Controls';

export const updateMenuText = Id.generate('update-menu-text');
export const updateMenuIcon = Id.generate('update-menu-icon');

export interface UpdateMenuTextEvent extends CustomEvent {
  text: () => string;
}

export interface UpdateMenuIconEvent extends CustomEvent {
  icon: () => string;
}

export interface CommonDropdownSpec {
  text: Option;
  icon: Option;
  disabled?: boolean;
  tooltip: Option;
  role: Option;
  fetch: (callback: (tdata: Option) => void) => void;

TieredData,
  Unselecting,
} from '@ephox/alloy';
import { Types } from '@ephox/bridge';
import { Future, Id, Merger, Option, Arr, Cell, Fun } from '@ephox/katamari';
import { toolbarButtonEventOrder } from 'tinymce/themes/silver/ui/toolbar/button/ButtonEvents';

import { UiFactoryBackstageShared } from '../../backstage/Backstage';
import { renderLabel, renderReplacableIconFromPack } from '../button/ButtonSlices';
import * as Icons from '../icons/Icons';
import { componentRenderPipeline } from '../menus/item/build/CommonMenuItem';
import * as MenuParts from '../menus/menu/MenuParts';
import { DisablingConfigs } from '../alien/DisablingConfigs';
import { onControlAttached, onControlDetached, OnDestroy } from '../controls/Controls';

export const updateMenuText = Id.generate('update-menu-text');
export const updateMenuIcon = Id.generate('update-menu-icon');

export interface UpdateMenuTextEvent extends CustomEvent {
  text: () => string;
}

export interface UpdateMenuIconEvent extends CustomEvent {
  icon: () => string;
}

export interface CommonDropdownSpec {
  text: Option;
  icon: Option;
  disabled?: boolean;
  tooltip: Option;
  role: Option;

const makeAnnotation = (eDoc: Document, { uid = Id.generate('mce-annotation'), ...data }, annotationName: string, decorate: Decorator): Element => {
  const master = Element.fromTag('span', eDoc);
  Class.add(master, Markings.annotation());
  Attr.set(master, `${Markings.dataAnnotationId()}`, uid);
  Attr.set(master, `${Markings.dataAnnotation()}`, annotationName);

  const { attributes = { }, classes = [ ] } = decorate(uid, data);
  Attr.setAll(master, attributes);
  Classes.add(master, classes);
  return master;
};

/**
 * Copyright (c) Tiny Technologies, Inc. All rights reserved.
 * Licensed under the LGPL or a commercial license.
 * For LGPL see License.txt in the project root for license information.
 * For commercial licenses see https://www.tiny.cloud/
 */

import { Fun, Id } from '@ephox/katamari';

const toolbarHeightChange = Fun.constant(Id.generate('toolbar-height-change'));

export {
  toolbarHeightChange
};

return ctx.type === 'contexttoolbar' ? (() => {
      const allButtons = Merger.merge(buttons, scopes.formNavigators);
      const initGroups = identifyButtons(editor, { buttons: allButtons, toolbar: ctx.items }, extras, Option.some([ 'form:' ]));
      return renderToolbar({
        uid: Id.generate('context-toolbar'),
        initGroups,
        onEscape: Option.none,
        cyclicKeying: true,
        backstage: extras.backstage,
        getSink: () => Result.error('')
      });
    })() : (() => {
      return ContextForm.renderContextForm(ctx, extras.backstage);

BlobConversions.blobToDataUri(img).then((datauri) => {
      const ir = ResultConversions.fromBlobAndUrlSync(img, datauri);
      const id = Id.generate('image');
      const asset = ImageAsset.blob(id, ir, objurl);
      callback(asset);
    });
  });

FieldPresence.defaultedThunk(() => {
      return Id.generate('button-name');
    }),
    ValueSchema.string

} from '@ephox/alloy';
import { Types } from '@ephox/bridge';
import { Future, Id, Option, Result } from '@ephox/katamari';
import { Css, Element, Traverse } from '@ephox/sugar';

import { UiFactoryBackstageShared } from '../../backstage/Backstage';
import { UiFactoryBackstageForColorInput } from '../../backstage/ColorInputBackstage';
import { renderLabel } from '../alien/FieldLabeller';
import ColorSwatch from '../core/color/ColorSwatch';
import Settings from '../core/color/Settings';
import { renderPanelButton } from '../general/PanelButton';
import { formChangeEvent } from '../general/FormEvents';
import { Omit } from '../Omit';

const colorInputChangeEvent = Id.generate('color-input-change');
const colorSwatchChangeEvent = Id.generate('color-swatch-change');
const colorPickerCancelEvent = Id.generate('color-picker-cancel');

interface ColorInputChangeEvent extends CustomEvent {
  color: () => string;
}

interface ColorSwatchChangeEvent extends CustomEvent {
  value: () => string;
}

interface ColorPickerCancelEvent extends CustomEvent {
  value: () => string;
}

type ColorInputSpec = Omit;