opentiny 6.9.0

package/src/themes/silver/main/ts/ui/core/complex/FontSizeBespoke.ts

@@ -0,0 +1,195 @@
+import { AlloyComponent, AlloySpec, AlloyTriggers, SketchSpec } from '@ephox/alloy';
+import { Arr, Fun, Obj, Optional } from '@ephox/katamari';
+import { Dimension } from '@ephox/sugar';
+
+import Editor from 'tinymce/core/api/Editor';
+import * as Options from 'tinymce/themes/silver/api/Options';
+
+import * as Events from '../../../api/Events';
+import { UiFactoryBackstage } from '../../../backstage/Backstage';
+import { updateMenuText } from '../../dropdown/CommonDropdown';
+import { onSetupEditableToggle } from '../ControlUtils';
+import { createBespokeNumberInput } from './BespokeNumberInput';
+import { createMenuItems, createSelectButton, FormatterFormatItem, SelectedFormat, SelectSpec } from './BespokeSelect';
+import { buildBasicSettingsDataset, Delimiter } from './SelectDatasets';
+import * as FormatRegister from './utils/FormatRegister';
+import * as Tooltip from './utils/Tooltip';
+
+interface Config {
+  readonly step: number;
+}
+
+export interface NumberInputSpec {
+  onAction: (format: string, focusBack?: boolean) => void;
+  updateInputValue: (comp: AlloyComponent) => void;
+  getNewValue: (text: string, updateFunction: (value: number, step: number) => number) => string;
+}
+
+const menuTitle = 'Font sizes';
+const btnTooltip = 'Font size {0}';
+const fallbackFontSize = '12pt';
+
+// See https://websemantics.uk/articles/font-size-conversion/ for conversions
+const legacyFontSizes: Record<string, string> = {
+  '8pt': '1',
+  '10pt': '2',
+  '12pt': '3',
+  '14pt': '4',
+  '18pt': '5',
+  '24pt': '6',
+  '36pt': '7'
+};
+
+// Note: 'xx-small', 'x-small' and 'large' are rounded up to nearest whole pt
+const keywordFontSizes: Record<string, string> = {
+  'xx-small': '7pt',
+  'x-small': '8pt',
+  'small': '10pt',
+  'medium': '12pt',
+  'large': '14pt',
+  'x-large': '18pt',
+  'xx-large': '24pt'
+};
+
+const round = (number: number, precision: number) => {
+  const factor = Math.pow(10, precision);
+  return Math.round(number * factor) / factor;
+};
+
+const toPt = (fontSize: string, precision?: number): string => {
+  if (/[0-9.]+px$/.test(fontSize)) {
+    // Round to the nearest 0.5
+    return round(parseInt(fontSize, 10) * 72 / 96, precision || 0) + 'pt';
+  } else {
+    return Obj.get(keywordFontSizes, fontSize).getOr(fontSize);
+  }
+};
+
+const toLegacy = (fontSize: string): string => Obj.get(legacyFontSizes, fontSize).getOr('');
+
+const getSpec = (editor: Editor): SelectSpec => {
+  const getMatchingValue = () => {
+    let matchOpt = Optional.none<{ title: string; format: string }>();
+    const items = dataset.data;
+
+    const fontSize = editor.queryCommandValue('FontSize');
+    if (fontSize) {
+      // checking for three digits after decimal point, should be precise enough
+      for (let precision = 3; matchOpt.isNone() && precision >= 0; precision--) {
+        const pt = toPt(fontSize, precision);
+        const legacy = toLegacy(pt);
+        matchOpt = Arr.find(items, (item) => item.format === fontSize || item.format === pt || item.format === legacy);
+      }
+    }
+
+    return { matchOpt, size: fontSize };
+  };
+
+  const isSelectedFor = (item: string) => (valueOpt: Optional<SelectedFormat>) => valueOpt.exists((value) => value.format === item);
+
+  const getCurrentValue = () => {
+    const { matchOpt } = getMatchingValue();
+    return matchOpt;
+  };
+
+  const getPreviewFor: FormatRegister.GetPreviewForType = Fun.constant(Optional.none);
+
+  const onAction = (rawItem: FormatterFormatItem) => () => {
+    editor.undoManager.transact(() => {
+      editor.focus();
+      editor.execCommand('FontSize', false, rawItem.format);
+    });
+  };
+
+  const updateSelectMenuText = (comp: AlloyComponent) => {
+    const { matchOpt, size } = getMatchingValue();
+
+    const text = matchOpt.fold(Fun.constant(size), (match) => match.title);
+    AlloyTriggers.emitWith(comp, updateMenuText, {
+      text
+    });
+    Events.fireFontSizeTextUpdate(editor, { value: text });
+  };
+
+  const dataset = buildBasicSettingsDataset(editor, 'font_size_formats', Delimiter.Space);
+
+  return {
+    tooltip: Tooltip.makeTooltipText(editor, btnTooltip, fallbackFontSize),
+    text: Optional.some(fallbackFontSize),
+    icon: Optional.none(),
+    isSelectedFor,
+    getPreviewFor,
+    getCurrentValue,
+    onAction,
+    updateText: updateSelectMenuText,
+    dataset,
+    shouldHide: false,
+    isInvalid: Fun.never
+  };
+};
+
+const createFontSizeButton = (editor: Editor, backstage: UiFactoryBackstage): SketchSpec =>
+  createSelectButton(editor, backstage, getSpec(editor), btnTooltip, 'FontSizeTextUpdate', 'fontsize');
+
+const getConfigFromUnit = (unit: string): Config => {
+  const baseConfig = { step: 1 };
+
+  const configs: Record<string, Config> = {
+    em: { step: 0.1 },
+    cm: { step: 0.1 },
+    in: { step: 0.1 },
+    pc: { step: 0.1 },
+    ch: { step: 0.1 },
+    rem: { step: 0.1 }
+  };
+
+  return configs[unit] ?? baseConfig;
+};
+
+const defaultValue = 16;
+const isValidValue = (value: number): boolean => value >= 0;
+
+const getNumberInputSpec = (editor: Editor): NumberInputSpec => {
+  const getCurrentValue = () => editor.queryCommandValue('FontSize');
+  const updateInputValue = (comp: AlloyComponent) => AlloyTriggers.emitWith(comp, updateMenuText, {
+    text: getCurrentValue()
+  });
+
+  return {
+    updateInputValue,
+    onAction: (format, focusBack) => editor.execCommand('FontSize', false, format, { skip_focus: !focusBack }),
+    getNewValue: (text, updateFunction) => {
+      Dimension.parse(text, [ 'unsupportedLength', 'empty' ]);
+
+      const currentValue = getCurrentValue();
+      const parsedText = Dimension.parse(text, [ 'unsupportedLength', 'empty' ]).or(
+        Dimension.parse(currentValue, [ 'unsupportedLength', 'empty' ])
+      );
+      const value = parsedText.map((res) => res.value).getOr(defaultValue);
+      const defaultUnit = Options.getFontSizeInputDefaultUnit(editor);
+      const unit = parsedText.map((res) => res.unit).filter((u) => u !== '').getOr(defaultUnit);
+
+      const newValue = updateFunction(value, getConfigFromUnit(unit).step);
+      const res = `${isValidValue(newValue) ? newValue : value}${unit}`;
+      if (res !== currentValue) {
+        Events.fireFontSizeInputTextUpdate(editor, { value: res });
+      }
+      return res;
+    }
+  };
+};
+
+const createFontSizeInputButton = (editor: Editor, backstage: UiFactoryBackstage): AlloySpec =>
+  createBespokeNumberInput(editor, backstage, getNumberInputSpec(editor), 'fontsizeinput');
+
+// TODO: Test this!
+const createFontSizeMenu = (editor: Editor, backstage: UiFactoryBackstage): void => {
+  const menuItems = createMenuItems(backstage, getSpec(editor));
+  editor.ui.registry.addNestedMenuItem('fontsize', {
+    text: menuTitle,
+    onSetup: onSetupEditableToggle(editor),
+    getSubmenuItems: () => menuItems.items.validateItems(menuItems.getStyleItems())
+  });
+};
+
+export { createFontSizeButton, createFontSizeInputButton, createFontSizeMenu };

package/src/themes/silver/main/ts/ui/core/complex/SelectDatasets.ts

@@ -0,0 +1,67 @@
+import { Arr } from '@ephox/katamari';
+
+import Editor from 'tinymce/core/api/Editor';
+
+import { UiFactoryBackstageForStyleFormats } from '../../../backstage/StyleFormatsBackstage';
+
+export interface BasicSelectItem {
+  readonly title: string;
+  readonly format: string;
+  readonly icon?: string;
+}
+
+export interface BasicSelectDataset {
+  readonly type: 'basic';
+  readonly data: Array<BasicSelectItem>;
+}
+
+export interface AdvancedSelectDataset extends UiFactoryBackstageForStyleFormats {
+  readonly type: 'advanced';
+}
+
+export type SelectDataset = BasicSelectDataset | AdvancedSelectDataset;
+
+const process = (rawFormats: string[]): BasicSelectItem[] => Arr.map(rawFormats, (item) => {
+  let title = item, format = item;
+  // Allow text=value block formats
+  const values = item.split('=');
+  if (values.length > 1) {
+    title = values[0];
+    format = values[1];
+  }
+
+  return { title, format };
+});
+
+const buildBasicStaticDataset = (data: Array<BasicSelectItem>): BasicSelectDataset => ({
+  type: 'basic',
+  data
+});
+
+export enum Delimiter {
+  SemiColon,
+  Space
+}
+
+const split = (rawFormats: string, delimiter: Delimiter): string[] => {
+  if (delimiter === Delimiter.SemiColon) {
+    return rawFormats.replace(/;$/, '').split(';');
+  } else {
+    return rawFormats.split(' ');
+  }
+};
+
+const buildBasicSettingsDataset = (editor: Editor, settingName: 'block_formats' | 'font_family_formats' | 'font_size_formats', delimiter: Delimiter): BasicSelectDataset => {
+  // eslint-disable-next-line @tinymce/no-direct-editor-options
+  const rawFormats = editor.options.get(settingName);
+  const data = process(split(rawFormats, delimiter));
+  return {
+    type: 'basic',
+    data
+  };
+};
+
+export {
+  buildBasicSettingsDataset,
+  buildBasicStaticDataset
+};

package/src/themes/silver/main/ts/ui/core/complex/StyleFormat.ts

@@ -0,0 +1,131 @@
+import { Arr, Obj, Type } from '@ephox/katamari';
+
+import Editor from 'tinymce/core/api/Editor';
+import {
+  AllowedFormat, BlockStyleFormat, FormatReference, InlineStyleFormat, NestedFormatting, SelectorStyleFormat, Separator, StyleFormat
+} from 'tinymce/core/api/fmt/StyleFormat';
+
+import { getUserStyleFormats, shouldMergeStyleFormats } from '../../../api/Options';
+
+export interface NestedStyleFormat {
+  readonly title: string;
+  readonly items: StyleFormatType[];
+}
+
+export type StyleFormatType = Separator | FormatReference | NestedStyleFormat;
+
+interface CustomFormatMapping {
+  readonly customFormats: { name: string; format: StyleFormat }[];
+  readonly formats: StyleFormatType[];
+}
+
+export const isNestedFormat = (format: StyleFormatType): format is NestedStyleFormat =>
+  Obj.hasNonNullableKey(format as NestedStyleFormat, 'items');
+
+export const isFormatReference = (format: StyleFormatType): format is FormatReference =>
+  Obj.hasNonNullableKey(format as FormatReference, 'format');
+
+export const defaultStyleFormats: AllowedFormat[] = [
+  {
+    title: 'Headings', items: [
+      { title: 'Heading 1', format: 'h1' },
+      { title: 'Heading 2', format: 'h2' },
+      { title: 'Heading 3', format: 'h3' },
+      { title: 'Heading 4', format: 'h4' },
+      { title: 'Heading 5', format: 'h5' },
+      { title: 'Heading 6', format: 'h6' }
+    ]
+  },
+
+  {
+    title: 'Inline', items: [
+      { title: 'Bold', format: 'bold' },
+      { title: 'Italic', format: 'italic' },
+      { title: 'Underline', format: 'underline' },
+      { title: 'Strikethrough', format: 'strikethrough' },
+      { title: 'Superscript', format: 'superscript' },
+      { title: 'Subscript', format: 'subscript' },
+      { title: 'Code', format: 'code' }
+    ]
+  },
+
+  {
+    title: 'Blocks', items: [
+      { title: 'Paragraph', format: 'p' },
+      { title: 'Blockquote', format: 'blockquote' },
+      { title: 'Div', format: 'div' },
+      { title: 'Pre', format: 'pre' }
+    ]
+  },
+
+  {
+    title: 'Align', items: [
+      { title: 'Left', format: 'alignleft' },
+      { title: 'Center', format: 'aligncenter' },
+      { title: 'Right', format: 'alignright' },
+      { title: 'Justify', format: 'alignjustify' }
+    ]
+  }
+];
+
+// Note: Need to cast format below to expected type, as Obj.has uses "K keyof T", which doesn't work with aliases
+const isNestedFormats = (format: AllowedFormat): format is NestedFormatting => Obj.has(format as NestedFormatting, 'items');
+
+const isBlockFormat = (format: AllowedFormat): format is BlockStyleFormat => Obj.has(format as BlockStyleFormat, 'block');
+
+const isInlineFormat = (format: AllowedFormat): format is InlineStyleFormat => Obj.has(format as InlineStyleFormat, 'inline');
+
+const isSelectorFormat = (format: AllowedFormat): format is SelectorStyleFormat => Obj.has(format as SelectorStyleFormat, 'selector');
+
+const mapFormats = (userFormats: AllowedFormat[]): CustomFormatMapping =>
+  Arr.foldl(userFormats, (acc, fmt) => {
+    if (isNestedFormats(fmt)) {
+      // Map the child formats
+      const result = mapFormats(fmt.items);
+      return {
+        customFormats: acc.customFormats.concat(result.customFormats),
+        formats: acc.formats.concat([{ title: fmt.title, items: result.formats }])
+      };
+    } else if (isInlineFormat(fmt) || isBlockFormat(fmt) || isSelectorFormat(fmt)) {
+      // Convert the format to a reference and add the original to the custom formats to be registered
+      const formatName = Type.isString(fmt.name) ? fmt.name : fmt.title.toLowerCase();
+      const formatNameWithPrefix = `custom-${formatName}`;
+      return {
+        customFormats: acc.customFormats.concat([{ name: formatNameWithPrefix, format: fmt }]),
+        formats: acc.formats.concat([{ title: fmt.title, format: formatNameWithPrefix, icon: fmt.icon }])
+      };
+    } else {
+      return { ...acc, formats: acc.formats.concat(fmt) };
+    }
+  }, { customFormats: [], formats: [] } as CustomFormatMapping);
+
+const registerCustomFormats = (editor: Editor, userFormats: AllowedFormat[]): StyleFormatType[] => {
+  const result = mapFormats(userFormats);
+
+  const registerFormats = (customFormats: Array<{ name: string; format: StyleFormat }>) => {
+    Arr.each(customFormats, (fmt) => {
+      // Only register the custom format with the editor, if it's not already registered
+      if (!editor.formatter.has(fmt.name)) {
+        editor.formatter.register(fmt.name, fmt.format);
+      }
+    });
+  };
+
+  // The editor may not yet be initialized, so check for that
+  if (editor.formatter) {
+    registerFormats(result.customFormats);
+  } else {
+    editor.on('init', () => {
+      registerFormats(result.customFormats);
+    });
+  }
+
+  return result.formats;
+};
+
+export const getStyleFormats = (editor: Editor): StyleFormatType[] => getUserStyleFormats(editor).map((userFormats) => {
+  // Ensure that any custom formats specified by the user are registered with the editor
+  const registeredUserFormats = registerCustomFormats(editor, userFormats);
+  // Merge the default formats with the custom formats if required
+  return shouldMergeStyleFormats(editor) ? defaultStyleFormats.concat(registeredUserFormats) : registeredUserFormats;
+}).getOr(defaultStyleFormats);

package/src/themes/silver/main/ts/ui/core/complex/StylesBespoke.ts

@@ -0,0 +1,83 @@
+import { AlloyComponent, AlloyTriggers, SketchSpec } from '@ephox/alloy';
+import { Arr, Fun, Optional } from '@ephox/katamari';
+
+import Editor from 'tinymce/core/api/Editor';
+import { BlockFormat, InlineFormat } from 'tinymce/core/api/fmt/Format';
+
+import * as Events from '../../../api/Events';
+import * as Options from '../../../api/Options';
+import { UiFactoryBackstage } from '../../../backstage/Backstage';
+import { updateMenuText } from '../../dropdown/CommonDropdown';
+import { onActionToggleFormat, onSetupEditableToggle } from '../ControlUtils';
+import { createMenuItems, createSelectButton, SelectSpec } from './BespokeSelect';
+import { AdvancedSelectDataset, BasicSelectItem, SelectDataset } from './SelectDatasets';
+import { getStyleFormats, isFormatReference, isNestedFormat, StyleFormatType } from './StyleFormat';
+import { findNearest } from './utils/FormatDetection';
+import * as Tooltip from './utils/Tooltip';
+
+const menuTitle = 'Formats';
+const btnTooltip = 'Format {0}';
+
+const getSpec = (editor: Editor, dataset: SelectDataset): SelectSpec => {
+  const fallbackFormat = 'Paragraph';
+
+  const isSelectedFor = (format: string) => () => editor.formatter.match(format);
+
+  const getPreviewFor = (format: string) => () => {
+    const fmt = editor.formatter.get(format);
+    return fmt !== undefined ? Optional.some({
+      tag: fmt.length > 0 ? (fmt[0] as InlineFormat).inline || (fmt[0] as BlockFormat).block || 'div' : 'div',
+      styles: editor.dom.parseStyle(editor.formatter.getCssText(format))
+    }) : Optional.none();
+  };
+
+  const updateSelectMenuText = (comp: AlloyComponent) => {
+    const getFormatItems = (fmt: StyleFormatType): BasicSelectItem[] => {
+      if (isNestedFormat(fmt)) {
+        return Arr.bind(fmt.items, getFormatItems);
+      } else if (isFormatReference(fmt)) {
+        return [{ title: fmt.title, format: fmt.format }];
+      } else {
+        return [];
+      }
+    };
+    const flattenedItems = Arr.bind(getStyleFormats(editor), getFormatItems);
+    const detectedFormat = findNearest(editor, Fun.constant(flattenedItems));
+    const text = detectedFormat.fold(Fun.constant(fallbackFormat), (fmt) => fmt.title);
+    AlloyTriggers.emitWith(comp, updateMenuText, {
+      text
+    });
+    Events.fireStylesTextUpdate(editor, { value: text });
+  };
+
+  return {
+    tooltip: Tooltip.makeTooltipText(editor, btnTooltip, fallbackFormat),
+    text: Optional.some(fallbackFormat),
+    icon: Optional.none(),
+    isSelectedFor,
+    getCurrentValue: Optional.none,
+    getPreviewFor,
+    onAction: onActionToggleFormat(editor),
+    updateText: updateSelectMenuText,
+    shouldHide: Options.shouldAutoHideStyleFormats(editor),
+    isInvalid: (item) => !editor.formatter.canApply(item.format),
+    dataset
+  } as SelectSpec;
+};
+
+const createStylesButton = (editor: Editor, backstage: UiFactoryBackstage): SketchSpec => {
+  const dataset: AdvancedSelectDataset = { type: 'advanced', ...backstage.styles };
+  return createSelectButton(editor, backstage, getSpec(editor, dataset), btnTooltip, 'StylesTextUpdate', 'styles');
+};
+
+const createStylesMenu = (editor: Editor, backstage: UiFactoryBackstage): void => {
+  const dataset: AdvancedSelectDataset = { type: 'advanced', ...backstage.styles };
+  const menuItems = createMenuItems(backstage, getSpec(editor, dataset));
+  editor.ui.registry.addNestedMenuItem('styles', {
+    text: menuTitle,
+    onSetup: onSetupEditableToggle(editor),
+    getSubmenuItems: () => menuItems.items.validateItems(menuItems.getStyleItems())
+  });
+};
+
+export { createStylesButton, createStylesMenu };

package/src/themes/silver/main/ts/ui/core/complex/utils/FormatDetection.ts

@@ -0,0 +1,14 @@
+import { Arr, Optional, Optionals } from '@ephox/katamari';
+
+import Editor from 'tinymce/core/api/Editor';
+
+import { BasicSelectItem } from '../SelectDatasets';
+
+export const findNearest = (editor: Editor, getStyles: () => BasicSelectItem[]): Optional<BasicSelectItem> => {
+  const styles = getStyles();
+  const formats = Arr.map(styles, (style) => style.format);
+
+  return Optional.from(editor.formatter.closest(formats)).bind((fmt) =>
+    Arr.find(styles, (data) => data.format === fmt)
+  ).orThunk(() => Optionals.someIf(editor.formatter.match('p'), { title: 'Paragraph', format: 'p' }));
+};

package/src/themes/silver/main/ts/ui/core/complex/utils/FormatRegister.ts

@@ -0,0 +1,73 @@
+import { Arr, Fun, Id, Obj, Optional, Type } from '@ephox/katamari';
+
+import Editor from 'tinymce/core/api/Editor';
+import { FormatReference, Separator, StyleFormat } from 'tinymce/core/api/fmt/StyleFormat';
+
+import { FormatItem, FormatterFormatItem, PreviewSpec, SelectedFormat, SubMenuFormatItem } from '../BespokeSelect';
+import { isFormatReference, isNestedFormat, NestedStyleFormat, StyleFormatType } from '../StyleFormat';
+
+export type IsSelectedForType = (format: string) => (currentValue: Optional<SelectedFormat>) => boolean;
+export type GetPreviewForType = (format: string) => () => Optional<PreviewSpec>;
+
+const isSeparator = (format: StyleFormatType): format is Separator => {
+  const keys = Obj.keys(format);
+  return keys.length === 1 && Arr.contains(keys, 'title');
+};
+
+const processBasic = (item: FormatReference, isSelectedFor: IsSelectedForType, getPreviewFor: GetPreviewForType): FormatterFormatItem => ({
+  ...item,
+  type: 'formatter' as const,
+  isSelected: isSelectedFor(item.format),
+  getStylePreview: getPreviewFor(item.format)
+});
+
+// TODO: This is adapted from StyleFormats in the mobile theme. Consolidate.
+const register = (editor: Editor, formats: StyleFormatType[], isSelectedFor: IsSelectedForType, getPreviewFor: GetPreviewForType): FormatItem[] => {
+  const enrichSupported = (item: FormatReference): FormatterFormatItem => processBasic(item, isSelectedFor, getPreviewFor);
+
+  // Item that triggers a submenu
+  const enrichMenu = (item: NestedStyleFormat): SubMenuFormatItem => {
+    const newItems = doEnrich(item.items);
+    return {
+      ...item,
+      type: 'submenu' as const,
+      getStyleItems: Fun.constant(newItems)
+    };
+  };
+
+  const enrichCustom = (item: StyleFormat): FormatterFormatItem => {
+    const formatName = Type.isString(item.name) ? item.name : Id.generate(item.title);
+    const formatNameWithPrefix = `custom-${formatName}`;
+
+    const newItem = {
+      ...item,
+      type: 'formatter' as const,
+      format: formatNameWithPrefix,
+      isSelected: isSelectedFor(formatNameWithPrefix),
+      getStylePreview: getPreviewFor(formatNameWithPrefix)
+    };
+    editor.formatter.register(formatName, newItem);
+    return newItem;
+  };
+
+  const doEnrich = (items: StyleFormatType[]): FormatItem[] => Arr.map(items, (item) => {
+    // If it is a submenu, enrich all the subitems.
+    if (isNestedFormat(item)) {
+      return enrichMenu(item);
+    } else if (isFormatReference(item)) {
+      return enrichSupported(item);
+    // NOTE: This branch is added from the original StyleFormats in mobile
+    } else if (isSeparator(item)) {
+      return { ...item, type: 'separator' as const };
+    } else {
+      return enrichCustom(item);
+    }
+  });
+
+  return doEnrich(formats);
+};
+
+export {
+  processBasic,
+  register
+};

package/src/themes/silver/main/ts/ui/core/complex/utils/Tooltip.ts

@@ -0,0 +1,8 @@
+import Editor from 'tinymce/core/api/Editor';
+
+const makeTooltipText = (editor: Editor, labelWithPlaceholder: string, value: string): string =>
+  editor.translate([ labelWithPlaceholder, editor.translate(value) ]);
+
+export {
+  makeTooltipText
+};

package/src/themes/silver/main/ts/ui/dialog/AlertDialog.ts

@@ -0,0 +1,65 @@
+import { AlloyEvents, Focusing, GuiFactory, Memento, ModalDialog } from '@ephox/alloy';
+import { Optional } from '@ephox/katamari';
+
+import { UiFactoryBackstage } from '../../backstage/Backstage';
+import { renderFooterButton } from '../general/Button';
+import { formCancelEvent, FormCancelEvent } from '../general/FormEvents';
+import * as Dialogs from './Dialogs';
+
+interface AlertDialogApi {
+  readonly open: (message: string, callback: () => void) => void;
+}
+
+export const setup = (backstage: UiFactoryBackstage): AlertDialogApi => {
+  const sharedBackstage = backstage.shared;
+
+  const open = (message: string, callback: () => void) => {
+
+    const closeDialog = () => {
+      ModalDialog.hide(alertDialog);
+      callback();
+    };
+
+    const memFooterClose = Memento.record(
+      renderFooterButton({
+        name: 'close-alert',
+        text: 'OK',
+        primary: true,
+        buttonType: Optional.some('primary'),
+        align: 'end',
+        enabled: true,
+        icon: Optional.none()
+      }, 'cancel', backstage)
+    );
+
+    const titleSpec = Dialogs.pUntitled();
+    const closeSpec = Dialogs.pClose(closeDialog, sharedBackstage.providers);
+
+    const alertDialog = GuiFactory.build(
+      Dialogs.renderDialog({
+        lazySink: () => sharedBackstage.getSink(),
+        header: Dialogs.hiddenHeader(titleSpec, closeSpec),
+        body: Dialogs.pBodyMessage(message, sharedBackstage.providers),
+        footer: Optional.some(Dialogs.pFooter(Dialogs.pFooterGroup([], [
+          memFooterClose.asSpec()
+        ]))),
+        onEscape: closeDialog,
+        extraClasses: [ 'tox-alert-dialog' ],
+        extraBehaviours: [ ],
+        extraStyles: { },
+        dialogEvents: [
+          AlloyEvents.run<FormCancelEvent>(formCancelEvent, closeDialog)
+        ],
+        eventOrder: { }
+      })
+    );
+
+    ModalDialog.show(alertDialog);
+    const footerCloseButton = memFooterClose.get(alertDialog);
+    Focusing.focus(footerCloseButton);
+  };
+
+  return {
+    open
+  };
+};

package/src/themes/silver/main/ts/ui/dialog/Bar.ts

@@ -0,0 +1,15 @@
+import { SimpleSpec } from '@ephox/alloy';
+import { Dialog } from '@ephox/bridge';
+import { Arr } from '@ephox/katamari';
+
+import { UiFactoryBackstageShared } from '../../backstage/Backstage';
+
+type BarSpec = Omit<Dialog.Bar, 'type'>;
+
+export const renderBar = (spec: BarSpec, backstage: UiFactoryBackstageShared): SimpleSpec => ({
+  dom: {
+    tag: 'div',
+    classes: [ 'tox-bar', 'tox-form__controls-h-stack' ]
+  },
+  components: Arr.map(spec.items, backstage.interpreter)
+});