opentiny 6.9.0

package/src/themes/silver/main/ts/ui/menus/item/build/CardMenuItem.ts

@@ -0,0 +1,84 @@
+import { AlloyComponent, AlloySpec, Behaviour, Disabling, ItemTypes } from '@ephox/alloy';
+import { Menu } from '@ephox/bridge';
+import { Arr, Optional } from '@ephox/katamari';
+import { SelectorFilter } from '@ephox/sugar';
+
+import { UiFactoryBackstageShared } from 'tinymce/themes/silver/backstage/Backstage';
+import { renderItemDomStructure } from 'tinymce/themes/silver/ui/menus/item/structure/ItemStructure';
+
+import * as ItemClasses from '../ItemClasses';
+import ItemResponse from '../ItemResponse';
+import { renderContainer, renderHtml, renderImage } from '../structure/ItemSlices';
+import { replaceText } from './AutocompleteMenuItem';
+import { buildData, renderCommonItem } from './CommonMenuItem';
+
+export interface CardExtras {
+  readonly itemBehaviours?: Behaviour.NamedConfiguredBehaviour<any, any, any>[];
+  // Extras specific to cardText components
+  readonly cardText: {
+    readonly matchText?: string;
+    readonly highlightOn: string[];
+  };
+}
+
+const render = (items: Menu.CardItem[], extras: CardExtras): Array<AlloySpec> => Arr.map(items, (item) => {
+  switch (item.type) {
+    case 'cardcontainer':
+      return renderContainer(item, render(item.items, extras));
+
+    case 'cardimage':
+      return renderImage(item.src, item.classes, item.alt);
+
+    case 'cardtext':
+      // Only highlight targeted text components
+      const shouldHighlight = item.name.exists((name) => Arr.contains(extras.cardText.highlightOn, name));
+      const matchText = shouldHighlight ? Optional.from(extras.cardText.matchText).getOr('') : '';
+      return renderHtml(replaceText(item.text, matchText), item.classes);
+  }
+});
+
+export const renderCardMenuItem = (
+  spec: Menu.CardMenuItem,
+  itemResponse: ItemResponse,
+  sharedBackstage: UiFactoryBackstageShared,
+  extras: CardExtras
+): ItemTypes.ItemSpec => {
+  const getApi = (component: AlloyComponent): Menu.CardMenuItemInstanceApi => ({
+    isEnabled: () => !Disabling.isDisabled(component),
+    setEnabled: (state: boolean) => {
+      Disabling.set(component, !state);
+
+      // Disable sub components
+      Arr.each(SelectorFilter.descendants(component.element, '*'), (elm) => {
+        component.getSystem().getByDom(elm).each((comp: AlloyComponent) => {
+          if (comp.hasConfigured(Disabling)) {
+            Disabling.set(comp, !state);
+          }
+        });
+      });
+    }
+  });
+
+  const structure = {
+    dom: renderItemDomStructure(spec.label),
+    optComponents: [
+      Optional.some({
+        dom: {
+          tag: 'div',
+          classes: [ ItemClasses.containerClass, ItemClasses.containerRowClass ]
+        },
+        components: render(spec.items, extras)
+      })
+    ]
+  };
+
+  return renderCommonItem({
+    data: buildData({ text: Optional.none(), ...spec }),
+    enabled: spec.enabled,
+    getApi,
+    onAction: spec.onAction,
+    onSetup: spec.onSetup,
+    triggersSubmenu: false,
+    itemBehaviours: Optional.from(extras.itemBehaviours).getOr([])
+  }, structure, itemResponse, sharedBackstage.providers);
+};

package/src/themes/silver/main/ts/ui/menus/item/build/ChoiceItem.ts

@@ -0,0 +1,82 @@
+import { AlloyComponent, Disabling, ItemTypes, Toggling, Tooltipping } from '@ephox/alloy';
+import { Menu, Toolbar } from '@ephox/bridge';
+import { Fun, Merger, Optional } from '@ephox/katamari';
+
+import { UiFactoryBackstageProviders } from 'tinymce/themes/silver/backstage/Backstage';
+
+import * as ItemClasses from '../ItemClasses';
+import ItemResponse from '../ItemResponse';
+import { renderCheckmark } from '../structure/ItemSlices';
+import { renderItemStructure } from '../structure/ItemStructure';
+import { buildData, renderCommonItem } from './CommonMenuItem';
+
+const renderChoiceItem = (
+  spec: Menu.ChoiceMenuItem,
+  useText: boolean,
+  presets: Toolbar.PresetItemTypes,
+  onItemValueHandler: (itemValue: string) => void,
+  isSelected: boolean,
+  itemResponse: ItemResponse,
+  providersBackstage: UiFactoryBackstageProviders,
+  renderIcons: boolean = true
+): ItemTypes.ItemSpec => {
+  const getApi = (component: AlloyComponent): Menu.ToggleMenuItemInstanceApi => ({
+    setActive: (state) => {
+      Toggling.set(component, state);
+    },
+    isActive: () => Toggling.isOn(component),
+    isEnabled: () => !Disabling.isDisabled(component),
+    setEnabled: (state) => Disabling.set(component, !state)
+  });
+
+  const structure = renderItemStructure({
+    presets,
+    textContent: useText ? spec.text : Optional.none(),
+    htmlContent: Optional.none(),
+    ariaLabel: spec.text,
+    iconContent: spec.icon,
+    shortcutContent: useText ? spec.shortcut : Optional.none(),
+
+    // useText essentially says that we have one column. In one column lists, we should show a tick
+    // The tick is controlled by the tickedClass (via css). It is always present
+    // but is hidden unless the tickedClass is present.
+    checkMark: useText ? Optional.some(renderCheckmark(providersBackstage.icons)) : Optional.none(),
+    caret: Optional.none(),
+    value: spec.value
+  }, providersBackstage, renderIcons);
+
+  const optTooltipping = spec.text
+    .filter(Fun.constant(!useText))
+    .map((t) => Tooltipping.config(
+      providersBackstage.tooltips.getConfig({
+        tooltipText: providersBackstage.translate(t)
+      })
+    ));
+
+  return Merger.deepMerge(
+    renderCommonItem({
+      data: buildData(spec),
+      enabled: spec.enabled,
+      getApi,
+      onAction: (_api) => onItemValueHandler(spec.value),
+      onSetup: (api) => {
+        api.setActive(isSelected);
+        return Fun.noop;
+      },
+      triggersSubmenu: false,
+      itemBehaviours: [
+        ...optTooltipping.toArray()
+      ]
+    }, structure, itemResponse, providersBackstage),
+    {
+      toggling: {
+        toggleClass: ItemClasses.tickedClass,
+        toggleOnExecute: false,
+        selected: spec.active,
+        exclusive: true
+      }
+    }
+  );
+};
+
+export { renderChoiceItem };

package/src/themes/silver/main/ts/ui/menus/item/build/ColorSwatchItem.ts

@@ -0,0 +1,57 @@
+import { ItemTypes, ItemWidget, Menu as AlloyMenu, MenuTypes } from '@ephox/alloy';
+import { Menu } from '@ephox/bridge';
+import { Fun, Id } from '@ephox/katamari';
+
+import { UiFactoryBackstage } from 'tinymce/themes/silver/backstage/Backstage';
+import * as ColorSwatch from 'tinymce/themes/silver/ui/core/color/ColorSwatch';
+
+import { createPartialChoiceMenu } from '../../menu/MenuChoice';
+import { deriveMenuMovement } from '../../menu/MenuMovement';
+import * as MenuParts from '../../menu/MenuParts';
+import ItemResponse from '../ItemResponse';
+
+export const renderColorSwatchItem = (spec: Menu.ColorSwatchMenuItem, backstage: UiFactoryBackstage): ItemTypes.WidgetItemSpec => {
+  const items = getColorItems(spec, backstage);
+  const columns = backstage.colorinput.getColorCols(spec.initData.storageKey);
+  const presets = 'color';
+
+  const menuSpec = createPartialChoiceMenu(
+    Id.generate('menu-value'),
+    items,
+    (value) => {
+      spec.onAction({ value });
+    },
+    columns,
+    presets,
+    ItemResponse.CLOSE_ON_EXECUTE,
+    spec.select.getOr(Fun.never),
+    backstage.shared.providers
+  );
+
+  const widgetSpec: MenuTypes.MenuSpec = {
+    ...menuSpec,
+    markers: MenuParts.markers(presets),
+    movement: deriveMenuMovement(columns, presets)
+  };
+
+  return {
+    type: 'widget',
+    data: { value: Id.generate('widget-id') },
+    dom: {
+      tag: 'div',
+      classes: [ 'tox-fancymenuitem' ]
+    },
+    autofocus: true,
+    components: [
+      ItemWidget.parts.widget(AlloyMenu.sketch(widgetSpec))
+    ]
+  };
+};
+
+const getColorItems = (spec: Menu.ColorSwatchMenuItem, backstage: UiFactoryBackstage): Menu.ChoiceMenuItemSpec[] => {
+  const useCustomColors = spec.initData.allowCustomColors && backstage.colorinput.hasCustomColors();
+  return spec.initData.colors.fold(
+    () => ColorSwatch.getColors(backstage.colorinput.getColors(spec.initData.storageKey), spec.initData.storageKey, useCustomColors),
+    (colors) => colors.concat(ColorSwatch.getAdditionalColors(useCustomColors))
+  );
+};

package/src/themes/silver/main/ts/ui/menus/item/build/CommonMenuItem.ts

@@ -0,0 +1,99 @@
+import {
+  AddEventsBehaviour, AlloyComponent, AlloyEvents, AlloySpec, Behaviour, Button, Focusing, ItemTypes, NativeEvents, Replacing
+} from '@ephox/alloy';
+import { Cell, Fun, Optional, Optionals } from '@ephox/katamari';
+
+import { UiFactoryBackstageProviders } from 'tinymce/themes/silver/backstage/Backstage';
+import * as ReadOnly from 'tinymce/themes/silver/ReadOnly';
+import { DisablingConfigs } from 'tinymce/themes/silver/ui/alien/DisablingConfigs';
+import { onControlAttached, onControlDetached, OnDestroy } from 'tinymce/themes/silver/ui/controls/Controls';
+
+import { menuItemEventOrder, onMenuItemExecute } from '../ItemEvents';
+import ItemResponse from '../ItemResponse';
+import { ItemStructure } from '../structure/ItemStructure';
+
+export interface ItemDataInput {
+  readonly value: string;
+  readonly text: Optional<string>;
+  readonly meta: Record<string, any>;
+}
+
+export type ItemDataOutput = ItemTypes.NormalItemSpec['data'];
+
+export interface CommonMenuItemSpec<T> {
+  readonly onAction: (itemApi: T) => void;
+  readonly onSetup: (itemApi: T) => OnDestroy<T>;
+  readonly triggersSubmenu: boolean;
+  readonly enabled: boolean;
+  readonly itemBehaviours: Behaviour.NamedConfiguredBehaviour<any, any, any>[];
+  readonly getApi: (comp: AlloyComponent) => T;
+  readonly data: ItemDataOutput;
+}
+
+export interface CommonCollectionItemSpec {
+  readonly onAction: () => void;
+  readonly disabled: boolean;
+}
+
+export const componentRenderPipeline: (xs: Array<Optional<AlloySpec>>) => AlloySpec[] = Optionals.cat;
+
+const renderCommonItem = <T>(spec: CommonMenuItemSpec<T>, structure: ItemStructure, itemResponse: ItemResponse, providersBackstage: UiFactoryBackstageProviders): ItemTypes.ItemSpec => {
+  const editorOffCell = Cell(Fun.noop);
+
+  return {
+    type: 'item',
+    dom: structure.dom,
+    components: componentRenderPipeline(structure.optComponents),
+    data: spec.data,
+    eventOrder: menuItemEventOrder,
+    hasSubmenu: spec.triggersSubmenu,
+    itemBehaviours: Behaviour.derive(
+      [
+        AddEventsBehaviour.config('item-events', [
+          onMenuItemExecute(spec, itemResponse),
+          onControlAttached(spec, editorOffCell),
+          onControlDetached(spec, editorOffCell)
+        ]),
+        DisablingConfigs.item(() => !spec.enabled || providersBackstage.isDisabled()),
+        ReadOnly.receivingConfig(),
+        Replacing.config({ })
+      ].concat(spec.itemBehaviours)
+    )
+  };
+};
+
+// This is not the ideal place for this code. We really want to
+// be doing a bit more code reuse. This render is different
+// from other renders because it is used for rendering a component
+// inside a dialog, not inside a menu. That's basically the reason
+// for the differences here.
+const renderCommonChoice = (spec: CommonCollectionItemSpec, structure: ItemStructure, itemResponse: ItemResponse, providersBackstage: UiFactoryBackstageProviders): AlloySpec =>
+  Button.sketch({
+    dom: structure.dom,
+    components: componentRenderPipeline(structure.optComponents),
+    eventOrder: menuItemEventOrder,
+    buttonBehaviours: Behaviour.derive(
+      [
+        AddEventsBehaviour.config('item-events', [
+          AlloyEvents.run(NativeEvents.mouseover(), Focusing.focus)
+        ]),
+        DisablingConfigs.item(() => spec.disabled || providersBackstage.isDisabled()),
+        ReadOnly.receivingConfig()
+      ]
+    ),
+    action: spec.onAction
+  });
+
+const buildData = (source: ItemDataInput): ItemDataOutput => ({
+  value: source.value,
+  meta: {
+    text: source.text.getOr(''),
+    ...source.meta
+  }
+});
+
+export {
+  buildData,
+  renderCommonItem,
+  renderCommonChoice
+};

package/src/themes/silver/main/ts/ui/menus/item/build/FancyMenuItem.ts

@@ -0,0 +1,19 @@
+import { ItemTypes } from '@ephox/alloy';
+import { Menu } from '@ephox/bridge';
+import { Obj, Optional } from '@ephox/katamari';
+
+import { UiFactoryBackstage } from '../../../../backstage/Backstage';
+import { renderColorSwatchItem } from './ColorSwatchItem';
+import { renderInsertTableMenuItem } from './InsertTableMenuItem';
+
+const fancyMenuItems: Record<keyof Menu.FancyActionArgsMap, (mi: any, bs: UiFactoryBackstage) => ItemTypes.WidgetItemSpec> = {
+  inserttable: renderInsertTableMenuItem,
+  colorswatch: renderColorSwatchItem
+};
+
+const renderFancyMenuItem = (spec: Menu.FancyMenuItem, backstage: UiFactoryBackstage): Optional<ItemTypes.WidgetItemSpec> =>
+  Obj.get(fancyMenuItems, spec.fancytype).map((render) => render(spec, backstage));
+
+export {
+  renderFancyMenuItem
+};

package/src/themes/silver/main/ts/ui/menus/item/build/InsertTableMenuItem.ts

@@ -0,0 +1,142 @@
+import {
+  AddEventsBehaviour, AlloyComponent, AlloyEvents, AlloySpec, AlloyTriggers, Behaviour, CustomEvent, Focusing, GuiFactory, ItemTypes, ItemWidget,
+  Keying, Memento, NativeEvents, NativeSimulatedEvent, PremadeSpec, Replacing, SystemEvents, Toggling
+} from '@ephox/alloy';
+import { Menu } from '@ephox/bridge';
+import { Arr, Id } from '@ephox/katamari';
+
+import { UiFactoryBackstage } from '../../../../backstage/Backstage';
+
+const cellOverEvent = Id.generate('cell-over');
+const cellExecuteEvent = Id.generate('cell-execute');
+
+interface CellEvent extends CustomEvent {
+  readonly col: number;
+  readonly row: number;
+}
+
+const makeAnnouncementText = (backstage: UiFactoryBackstage) => (row: number, col: number): string =>
+  backstage.shared.providers.translate([ '{0} columns, {1} rows', col, row ]);
+
+const makeCell = (row: number, col: number, label: string): AlloyComponent => {
+  const emitCellOver = (c: AlloyComponent) => AlloyTriggers.emitWith(c, cellOverEvent, { row, col } );
+  const emitExecute = (c: AlloyComponent) => AlloyTriggers.emitWith(c, cellExecuteEvent, { row, col } );
+
+  const onClick = (c: AlloyComponent, se: NativeSimulatedEvent) => {
+    se.stop();
+    emitExecute(c);
+  };
+
+  return GuiFactory.build({
+    dom: {
+      tag: 'div',
+      attributes: {
+        role: 'button',
+        ['aria-label']: label
+      }
+    },
+    behaviours: Behaviour.derive([
+      AddEventsBehaviour.config('insert-table-picker-cell', [
+        AlloyEvents.run(NativeEvents.mouseover(), Focusing.focus),
+        AlloyEvents.run(SystemEvents.execute(), emitExecute),
+        AlloyEvents.run(NativeEvents.click(), onClick),
+        AlloyEvents.run(SystemEvents.tap(), onClick)
+      ]),
+      Toggling.config({
+        toggleClass: 'tox-insert-table-picker__selected',
+        toggleOnExecute: false
+      }),
+      Focusing.config({ onFocus: emitCellOver })
+    ])
+  });
+};
+
+const makeCells = (getCellLabel: (r: number, c: number) => string, numRows: number, numCols: number): AlloyComponent[][] => {
+  const cells: AlloyComponent[][] = [];
+  for (let i = 0; i < numRows; i++) {
+    const row = [];
+    for (let j = 0; j < numCols; j++) {
+      const label = getCellLabel(i + 1, j + 1);
+      row.push(makeCell(i, j, label));
+    }
+    cells.push(row);
+  }
+  return cells;
+};
+
+const selectCells = (cells: AlloyComponent[][], selectedRow: number, selectedColumn: number, numRows: number, numColumns: number) => {
+  for (let i = 0; i < numRows; i++) {
+    for (let j = 0; j < numColumns; j++) {
+      Toggling.set(cells[i][j], i <= selectedRow && j <= selectedColumn);
+    }
+  }
+};
+
+const makeComponents = (cells: AlloyComponent[][]): AlloySpec[] =>
+  Arr.bind(cells, (cellRow) => Arr.map(cellRow, GuiFactory.premade));
+
+const makeLabelText = (row: number, col: number): PremadeSpec =>
+  GuiFactory.text(`${col}x${row}`);
+
+export const renderInsertTableMenuItem = (spec: Menu.InsertTableMenuItem, backstage: UiFactoryBackstage): ItemTypes.WidgetItemSpec => {
+  const numRows = 10;
+  const numColumns = 10;
+  const getCellLabel = makeAnnouncementText(backstage);
+  const cells = makeCells(getCellLabel, numRows, numColumns);
+
+  const emptyLabelText = makeLabelText(0, 0);
+
+  const memLabel = Memento.record({
+    dom: {
+      tag: 'span',
+      classes: [ 'tox-insert-table-picker__label' ],
+    },
+    components: [ emptyLabelText ],
+    behaviours: Behaviour.derive([
+      Replacing.config({})
+    ])
+  });
+
+  return {
+    type: 'widget',
+    data: { value: Id.generate('widget-id') },
+    dom: {
+      tag: 'div',
+      classes: [ 'tox-fancymenuitem' ]
+    },
+    autofocus: true,
+    components: [ ItemWidget.parts.widget({
+      dom: {
+        tag: 'div',
+        classes: [ 'tox-insert-table-picker' ]
+      },
+      components: makeComponents(cells).concat(memLabel.asSpec()),
+      behaviours: Behaviour.derive([
+        AddEventsBehaviour.config('insert-table-picker', [
+          AlloyEvents.runOnAttached((c) => {
+            // Restore the empty label when opened, otherwise it may still be using an old label from last time it was opened
+            Replacing.set(memLabel.get(c), [ emptyLabelText ]);
+          }),
+          AlloyEvents.runWithTarget<CellEvent>(cellOverEvent, (c, t, e) => {
+            const { row, col } = e.event;
+            selectCells(cells, row, col, numRows, numColumns);
+            Replacing.set(memLabel.get(c), [ makeLabelText(row + 1, col + 1) ]);
+          }),
+          AlloyEvents.runWithTarget<CellEvent>(cellExecuteEvent, (c, _, e) => {
+            const { row, col } = e.event;
+            spec.onAction({ numRows: row + 1, numColumns: col + 1 });
+            AlloyTriggers.emit(c, SystemEvents.sandboxClose());
+          })
+        ]),
+        Keying.config({
+          initSize: {
+            numRows,
+            numColumns
+          },
+          mode: 'flatgrid',
+          selector: '[role="button"]'
+        })
+      ])
+    }) ]
+  };
+};

package/src/themes/silver/main/ts/ui/menus/item/build/NestedMenuItem.ts

@@ -0,0 +1,51 @@
+import { AlloyComponent, Disabling, ItemTypes } from '@ephox/alloy';
+import { Menu } from '@ephox/bridge';
+import { Fun, Optional } from '@ephox/katamari';
+import { Attribute, SelectorFind } from '@ephox/sugar';
+
+import { UiFactoryBackstageProviders } from 'tinymce/themes/silver/backstage/Backstage';
+
+import ItemResponse from '../ItemResponse';
+import { renderDownwardsCaret, renderSubmenuCaret } from '../structure/ItemSlices';
+import { renderItemStructure } from '../structure/ItemStructure';
+import { buildData, renderCommonItem } from './CommonMenuItem';
+
+// Note, this does not create a valid SketchSpec.
+const renderNestedItem = (spec: Menu.NestedMenuItem, itemResponse: ItemResponse, providersBackstage: UiFactoryBackstageProviders, renderIcons: boolean = true, downwardsCaret: boolean = false): ItemTypes.ItemSpec => {
+  const caret = downwardsCaret ? renderDownwardsCaret(providersBackstage.icons) : renderSubmenuCaret(providersBackstage.icons);
+  const getApi = (component: AlloyComponent): Menu.NestedMenuItemInstanceApi => ({
+    isEnabled: () => !Disabling.isDisabled(component),
+    setEnabled: (state: boolean) => Disabling.set(component, !state),
+    setIconFill: (id, value) => {
+      SelectorFind.descendant(component.element, `svg path[class="${id}"], rect[class="${id}"]`).each((underlinePath) => {
+        Attribute.set(underlinePath, 'fill', value);
+      });
+    },
+    setTooltip: (tooltip: string) => {
+      const translatedTooltip = providersBackstage.translate(tooltip);
+      Attribute.set(component.element, 'aria-label', translatedTooltip);
+    }
+  });
+
+  const structure = renderItemStructure({
+    presets: 'normal',
+    iconContent: spec.icon,
+    textContent: spec.text,
+    htmlContent: Optional.none(),
+    ariaLabel: spec.text,
+    caret: Optional.some(caret),
+    checkMark: Optional.none(),
+    shortcutContent: spec.shortcut
+  }, providersBackstage, renderIcons);
+  return renderCommonItem({
+    data: buildData(spec),
+    getApi,
+    enabled: spec.enabled,
+    onAction: Fun.noop,
+    onSetup: spec.onSetup,
+    triggersSubmenu: true,
+    itemBehaviours: []
+  }, structure, itemResponse, providersBackstage);
+};
+
+export { renderNestedItem };

package/src/themes/silver/main/ts/ui/menus/item/build/NormalMenuItem.ts

@@ -0,0 +1,40 @@
+import { AlloyComponent, Disabling, ItemTypes } from '@ephox/alloy';
+import { Menu } from '@ephox/bridge';
+import { Optional } from '@ephox/katamari';
+
+import { UiFactoryBackstageProviders } from 'tinymce/themes/silver/backstage/Backstage';
+
+import ItemResponse from '../ItemResponse';
+import { renderItemStructure } from '../structure/ItemStructure';
+import { buildData, renderCommonItem } from './CommonMenuItem';
+
+// Note, this does not create a valid SketchSpec.
+const renderNormalItem = (spec: Menu.MenuItem, itemResponse: ItemResponse, providersBackstage: UiFactoryBackstageProviders, renderIcons: boolean = true): ItemTypes.ItemSpec => {
+  const getApi = (component: AlloyComponent): Menu.MenuItemInstanceApi => ({
+    isEnabled: () => !Disabling.isDisabled(component),
+    setEnabled: (state: boolean) => Disabling.set(component, !state)
+  });
+
+  const structure = renderItemStructure({
+    presets: 'normal',
+    iconContent: spec.icon,
+    textContent: spec.text,
+    htmlContent: Optional.none(),
+    ariaLabel: spec.text,
+    caret: Optional.none(),
+    checkMark: Optional.none(),
+    shortcutContent: spec.shortcut
+  }, providersBackstage, renderIcons);
+
+  return renderCommonItem({
+    data: buildData(spec),
+    getApi,
+    enabled: spec.enabled,
+    onAction: spec.onAction,
+    onSetup: spec.onSetup,
+    triggersSubmenu: false,
+    itemBehaviours: []
+  }, structure, itemResponse, providersBackstage);
+};
+
+export { renderNormalItem };

package/src/themes/silver/main/ts/ui/menus/item/build/SeparatorItem.ts

@@ -0,0 +1,17 @@
+import { GuiFactory, ItemTypes } from '@ephox/alloy';
+import { Menu } from '@ephox/bridge';
+
+import * as ItemClasses from '../ItemClasses';
+
+const renderSeparatorItem = (spec: Menu.SeparatorMenuItem): ItemTypes.ItemSpec => ({
+  type: 'separator',
+  dom: {
+    tag: 'div',
+    classes: [ ItemClasses.selectableClass, ItemClasses.groupHeadingClass ]
+  },
+  components: spec.text.map(GuiFactory.text).toArray()
+});
+
+export {
+  renderSeparatorItem
+};

package/src/themes/silver/main/ts/ui/menus/item/build/ToggleMenuItem.ts

@@ -0,0 +1,62 @@
+import { AlloyComponent, Disabling, ItemTypes, Toggling } from '@ephox/alloy';
+import { Menu } from '@ephox/bridge';
+import { Merger, Optional } from '@ephox/katamari';
+
+import { UiFactoryBackstageProviders } from 'tinymce/themes/silver/backstage/Backstage';
+
+import * as ItemClasses from '../ItemClasses';
+import ItemResponse from '../ItemResponse';
+import { renderCheckmark } from '../structure/ItemSlices';
+import { renderItemStructure } from '../structure/ItemStructure';
+import { buildData, renderCommonItem } from './CommonMenuItem';
+
+const renderToggleMenuItem = (
+  spec: Menu.ToggleMenuItem,
+  itemResponse: ItemResponse,
+  providersBackstage: UiFactoryBackstageProviders,
+  renderIcons: boolean = true
+): ItemTypes.ItemSpec => {
+  const getApi = (component: AlloyComponent): Menu.ToggleMenuItemInstanceApi => ({
+    setActive: (state) => {
+      Toggling.set(component, state);
+    },
+    isActive: () => Toggling.isOn(component),
+    isEnabled: () => !Disabling.isDisabled(component),
+    setEnabled: (state: boolean) => Disabling.set(component, !state)
+  });
+
+  // BespokeSelects use meta to pass through styling information. Bespokes should only
+  // be togglemenuitems hence meta is only passed through in this MenuItem.
+  const structure = renderItemStructure({
+    iconContent: spec.icon,
+    textContent: spec.text,
+    htmlContent: Optional.none(),
+    ariaLabel: spec.text,
+    checkMark: Optional.some(renderCheckmark(providersBackstage.icons)),
+    caret: Optional.none(),
+    shortcutContent: spec.shortcut,
+    presets: 'normal',
+    meta: spec.meta
+  }, providersBackstage, renderIcons);
+
+  return Merger.deepMerge(
+    renderCommonItem({
+      data: buildData(spec),
+      enabled: spec.enabled,
+      getApi,
+      onAction: spec.onAction,
+      onSetup: spec.onSetup,
+      triggersSubmenu: false,
+      itemBehaviours: []
+    }, structure, itemResponse, providersBackstage),
+    {
+      toggling: {
+        toggleClass: ItemClasses.tickedClass,
+        toggleOnExecute: false,
+        selected: spec.active
+      }
+    }
+  );
+};
+
+export { renderToggleMenuItem };