opentiny 6.9.0

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

@@ -0,0 +1,239 @@
+import { Keys } from '@ephox/agar';
+import { AddEventsBehaviour, AlloyComponent, AlloyEvents, AlloySpec, Behaviour, Button, Disabling, Focusing, FocusInsideModes, Input, Keying, Memento, NativeEvents, Representing, SystemEvents, Tooltipping } from '@ephox/alloy';
+import { Arr, Cell, Fun, Id, Optional, Type } from '@ephox/katamari';
+import { Focus, SugarElement, Traverse } from '@ephox/sugar';
+
+import Editor from 'tinymce/core/api/Editor';
+import { UiFactoryBackstage } from 'tinymce/themes/silver/backstage/Backstage';
+
+import { renderIconFromPack } from '../../button/ButtonSlices';
+import { onControlAttached, onControlDetached } from '../../controls/Controls';
+import { updateMenuText, UpdateMenuTextEvent } from '../../dropdown/CommonDropdown';
+import { onSetupEvent } from '../ControlUtils';
+import { NumberInputSpec } from './FontSizeBespoke';
+
+interface BespokeSelectApi {
+  readonly getComponent: () => AlloyComponent;
+}
+
+const createBespokeNumberInput = (editor: Editor, backstage: UiFactoryBackstage, spec: NumberInputSpec, btnName?: string): AlloySpec => {
+  let currentComp: Optional<AlloyComponent> = Optional.none();
+
+  const getValueFromCurrentComp = (comp: Optional<AlloyComponent>): string =>
+    comp.map((alloyComp) => Representing.getValue(alloyComp)).getOr('');
+
+  const onSetup = onSetupEvent(editor, 'NodeChange SwitchMode', (api: BespokeSelectApi) => {
+    const comp = api.getComponent();
+    currentComp = Optional.some(comp);
+    spec.updateInputValue(comp);
+    Disabling.set(comp, !editor.selection.isEditable());
+  });
+
+  const getApi = (comp: AlloyComponent): BespokeSelectApi => ({ getComponent: Fun.constant(comp) });
+  const editorOffCell = Cell(Fun.noop);
+
+  const customEvents = Id.generate('custom-number-input-events');
+
+  const changeValue = (f: (v: number, step: number) => number, fromInput: boolean, focusBack: boolean): void => {
+    const text = getValueFromCurrentComp(currentComp);
+
+    const newValue = spec.getNewValue(text, f);
+
+    const lenghtDelta = text.length - `${newValue}`.length;
+    const oldStart = currentComp.map((comp) => comp.element.dom.selectionStart - lenghtDelta);
+    const oldEnd = currentComp.map((comp) => comp.element.dom.selectionEnd - lenghtDelta);
+
+    spec.onAction(newValue, focusBack);
+    currentComp.each((comp) => {
+      Representing.setValue(comp, newValue);
+      if (fromInput) {
+        oldStart.each((oldStart) => comp.element.dom.selectionStart = oldStart);
+        oldEnd.each((oldEnd) => comp.element.dom.selectionEnd = oldEnd);
+      }
+    });
+  };
+
+  const decrease = (fromInput: boolean, focusBack: boolean) => changeValue((n, s) => n - s, fromInput, focusBack);
+  const increase = (fromInput: boolean, focusBack: boolean) => changeValue((n, s) => n + s, fromInput, focusBack);
+
+  const goToParent = (comp: AlloyComponent) =>
+    Traverse.parentElement(comp.element).fold(Optional.none, (parent) => {
+      Focus.focus(parent);
+      return Optional.some(true);
+    });
+
+  const focusInput = (comp: AlloyComponent) => {
+    if (Focus.hasFocus(comp.element)) {
+      Traverse.firstChild(comp.element).each((input) => Focus.focus(input as SugarElement<HTMLElement>));
+      return Optional.some(true);
+    } else {
+      return Optional.none();
+    }
+  };
+
+  const makeStepperButton = (action: (focusBack: boolean) => void, title: string, tooltip: string, classes: string[]) => {
+    const editorOffCellStepButton = Cell(Fun.noop);
+    const translatedTooltip = backstage.shared.providers.translate(tooltip);
+    const altExecuting = Id.generate('altExecuting');
+    const onSetup = onSetupEvent(editor, 'NodeChange SwitchMode', (api: BespokeSelectApi) => {
+      Disabling.set(api.getComponent(), !editor.selection.isEditable());
+    });
+
+    const onClick = (comp: AlloyComponent) => {
+      if (!Disabling.isDisabled(comp)) {
+        action(true);
+      }
+    };
+
+    return Button.sketch({
+      dom: {
+        tag: 'button',
+        attributes: {
+          'aria-label': translatedTooltip,
+          'data-mce-name': title
+        },
+        classes: classes.concat(title)
+      },
+      components: [
+        renderIconFromPack(title, backstage.shared.providers.icons)
+      ],
+      buttonBehaviours: Behaviour.derive([
+        Disabling.config({}),
+        Tooltipping.config(
+          backstage.shared.providers.tooltips.getConfig({
+            tooltipText: translatedTooltip
+          })
+        ),
+        AddEventsBehaviour.config(altExecuting, [
+          onControlAttached({ onSetup, getApi }, editorOffCellStepButton),
+          onControlDetached({ getApi }, editorOffCellStepButton),
+          AlloyEvents.run(NativeEvents.keydown(), (comp, se) => {
+            if (se.event.raw.keyCode === Keys.space() || se.event.raw.keyCode === Keys.enter()) {
+              if (!Disabling.isDisabled(comp)) {
+                action(false);
+              }
+            }
+          }),
+          AlloyEvents.run(NativeEvents.click(), onClick),
+          AlloyEvents.run(NativeEvents.touchend(), onClick)
+        ])
+      ]),
+      eventOrder: {
+        [NativeEvents.keydown()]: [ altExecuting, 'keying' ],
+        [NativeEvents.click()]: [ altExecuting, 'alloy.base.behaviour' ],
+        [NativeEvents.touchend()]: [ altExecuting, 'alloy.base.behaviour' ],
+        [SystemEvents.attachedToDom()]: [ 'alloy.base.behaviour', altExecuting, 'tooltipping' ],
+        [SystemEvents.detachedFromDom()]: [ altExecuting, 'tooltipping' ]
+      }
+    });
+  };
+
+  const memMinus = Memento.record(makeStepperButton((focusBack) => decrease(false, focusBack), 'minus', 'Decrease font size', []));
+  const memPlus = Memento.record(makeStepperButton((focusBack) => increase(false, focusBack), 'plus', 'Increase font size', []));
+
+  const memInput = Memento.record({
+    dom: {
+      tag: 'div',
+      classes: [ 'tox-input-wrapper' ]
+    },
+    components: [
+      Input.sketch({
+        inputBehaviours: Behaviour.derive([
+          Disabling.config({}),
+          AddEventsBehaviour.config(customEvents, [
+            onControlAttached({ onSetup, getApi }, editorOffCell),
+            onControlDetached({ getApi }, editorOffCell)
+          ]),
+          AddEventsBehaviour.config('input-update-display-text', [
+            AlloyEvents.run<UpdateMenuTextEvent>(updateMenuText, (comp, se) => {
+              Representing.setValue(comp, se.event.text);
+            }),
+            AlloyEvents.run(NativeEvents.focusout(), (comp) => {
+              spec.onAction(Representing.getValue(comp));
+            }),
+            AlloyEvents.run(NativeEvents.change(), (comp) => {
+              spec.onAction(Representing.getValue(comp));
+            })
+          ]),
+          Keying.config({
+            mode: 'special',
+            onEnter: (_comp) => {
+              changeValue(Fun.identity, true, true);
+              return Optional.some(true);
+            },
+            onEscape: goToParent,
+            onUp: (_comp) => {
+              increase(true, false);
+              return Optional.some(true);
+            },
+            onDown: (_comp) => {
+              decrease(true, false);
+              return Optional.some(true);
+            },
+            onLeft: (_comp, se) => {
+              se.cut();
+              return Optional.none();
+            },
+            onRight: (_comp, se) => {
+              se.cut();
+              return Optional.none();
+            }
+          })
+        ])
+      })
+    ],
+    behaviours: Behaviour.derive([
+      Focusing.config({}),
+      Keying.config({
+        mode: 'special',
+        onEnter: focusInput,
+        onSpace: focusInput,
+        onEscape: goToParent
+      }),
+      AddEventsBehaviour.config('input-wrapper-events', [
+        AlloyEvents.run(NativeEvents.mouseover(), (comp) => {
+          Arr.each([ memMinus, memPlus ], (button) => {
+            const buttonNode = SugarElement.fromDom(button.get(comp).element.dom);
+            if (Focus.hasFocus(buttonNode)) {
+              Focus.blur(buttonNode);
+            }
+          });
+        })
+      ])
+    ])
+  });
+
+  return {
+    dom: {
+      tag: 'div',
+      classes: [ 'tox-number-input' ],
+      attributes: {
+        ...(Type.isNonNullable(btnName) ? { 'data-mce-name': btnName } : {})
+      }
+    },
+    components: [
+      memMinus.asSpec(),
+      memInput.asSpec(),
+      memPlus.asSpec()
+    ],
+    behaviours: Behaviour.derive([
+      Focusing.config({}),
+      Keying.config({
+        mode: 'flow',
+        focusInside: FocusInsideModes.OnEnterOrSpaceMode,
+        cycles: false,
+        selector: 'button, .tox-input-wrapper',
+        onEscape: (wrapperComp) => {
+          if (Focus.hasFocus(wrapperComp.element)) {
+            return Optional.none();
+          } else {
+            Focus.focus(wrapperComp.element);
+            return Optional.some(true);
+          }
+        },
+      })
+    ])
+  };
+};
+
+export { createBespokeNumberInput };

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

@@ -0,0 +1,245 @@
+import { AlloyComponent, Disabling, SketchSpec, TieredData, Tooltipping } from '@ephox/alloy';
+import { Arr, Cell, Fun, Optional } from '@ephox/katamari';
+import { Attribute } from '@ephox/sugar';
+
+import Editor from 'tinymce/core/api/Editor';
+import { Menu } from 'tinymce/core/api/ui/Ui';
+import { EditorEvent } from 'tinymce/core/api/util/EventDispatcher';
+import { UiFactoryBackstage } from 'tinymce/themes/silver/backstage/Backstage';
+
+import { renderCommonDropdown } from '../../dropdown/CommonDropdown';
+import ItemResponse from '../../menus/item/ItemResponse';
+import * as NestedMenus from '../../menus/menu/NestedMenus';
+import { ToolbarButtonClasses } from '../../toolbar/button/ButtonClasses';
+import { composeUnbinders, onSetupEvent } from '../ControlUtils';
+import { SelectDataset } from './SelectDatasets';
+import { NestedStyleFormat } from './StyleFormat';
+import * as FormatRegister from './utils/FormatRegister';
+import * as Tooltip from './utils/Tooltip';
+
+export interface PreviewSpec {
+  readonly tag: string;
+  readonly styles: Record<string, string>;
+}
+
+export interface FormatterFormatItem {
+  readonly type: 'formatter';
+  readonly title: string;
+  readonly format: string;
+  readonly icon?: string;
+  readonly isSelected: (value: Optional<any>) => boolean;
+  readonly getStylePreview: () => Optional<PreviewSpec>;
+}
+
+export interface SubMenuFormatItem extends NestedStyleFormat {
+  readonly type: 'submenu';
+  readonly getStyleItems: () => FormatItem[];
+}
+
+export interface SeparatorFormatItem {
+  readonly type: 'separator';
+  readonly title: string;
+}
+
+export type FormatItem = FormatterFormatItem | SubMenuFormatItem | SeparatorFormatItem;
+
+export interface SelectedFormat {
+  readonly title: string;
+  readonly format: string;
+}
+
+export interface SelectSpec {
+  readonly tooltip: string;
+  readonly text: Optional<string>;
+  readonly icon: Optional<string>;
+  // This is used for determining if an item gets a tick in the menu
+  readonly isSelectedFor: FormatRegister.IsSelectedForType;
+  // This is used to get the current selection value when a menu is opened
+  readonly getCurrentValue: () => Optional<SelectedFormat>;
+  // This is used for rendering individual items with styles
+  readonly getPreviewFor: FormatRegister.GetPreviewForType;
+  // This is used for clicking on the item
+  readonly onAction: (item: FormatterFormatItem) => (api: Menu.ToggleMenuItemInstanceApi) => void;
+  // This is used to change the menu text
+  readonly updateText: (comp: AlloyComponent) => void;
+  // This is true if items should be hidden if they are not an applicable
+  // format to the current selection
+  readonly shouldHide: boolean;
+  // This determines if an item is applicable
+  readonly isInvalid: (item: FormatterFormatItem) => boolean;
+
+  readonly dataset: SelectDataset;
+}
+
+export interface BespokeSelectTooltip {
+  tooltip: string;
+  hasPlaceholder: boolean;
+}
+
+interface BespokeSelectApi {
+  readonly getComponent: () => AlloyComponent;
+  readonly setTooltip: (tooltip: string) => void;
+}
+
+interface BespokeMenuItems {
+  readonly items: {
+    readonly validateItems: (preItems: FormatItem[]) => Menu.NestedMenuItemContents[];
+    readonly getFetch: (backstage: UiFactoryBackstage, getStyleItems: () => FormatItem[]) => (comp: AlloyComponent, callback: (menu: Optional<TieredData>) => void) => void;
+  };
+  readonly getStyleItems: () => FormatItem[];
+}
+
+const enum IrrelevantStyleItemResponse {
+  Hide,
+  Disable
+}
+
+const generateSelectItems = (backstage: UiFactoryBackstage, spec: SelectSpec) => {
+  const generateItem = (rawItem: FormatItem, response: IrrelevantStyleItemResponse, invalid: boolean, value: Optional<SelectedFormat>): Optional<Menu.NestedMenuItemContents> => {
+    const translatedText = backstage.shared.providers.translate(rawItem.title);
+    if (rawItem.type === 'separator') {
+      return Optional.some<Menu.SeparatorMenuItemSpec>({
+        type: 'separator',
+        text: translatedText
+      });
+    } else if (rawItem.type === 'submenu') {
+      const items = Arr.bind(rawItem.getStyleItems(), (si) => validate(si, response, value));
+      if (response === IrrelevantStyleItemResponse.Hide && items.length <= 0) {
+        return Optional.none();
+      } else {
+        return Optional.some<Menu.NestedMenuItemSpec>({
+          type: 'nestedmenuitem',
+          text: translatedText,
+          enabled: items.length > 0,
+          getSubmenuItems: () => Arr.bind(rawItem.getStyleItems(), (si) => validate(si, response, value))
+        });
+      }
+    } else {
+      return Optional.some<Menu.ToggleMenuItemSpec>({
+        // ONLY TOGGLEMENUITEMS HANDLE STYLE META.
+        // See ToggleMenuItem and ItemStructure for how it's handled.
+        // If this type ever changes, we'll need to change that too
+        type: 'togglemenuitem',
+        text: translatedText,
+        icon: rawItem.icon,
+        active: rawItem.isSelected(value),
+        enabled: !invalid,
+        onAction: spec.onAction(rawItem),
+        ...rawItem.getStylePreview().fold(() => ({}), (preview) => ({ meta: { style: preview } as any }))
+      });
+    }
+  };
+
+  const validate = (item: FormatItem, response: IrrelevantStyleItemResponse, value: Optional<SelectedFormat>): Menu.NestedMenuItemContents[] => {
+    const invalid = item.type === 'formatter' && spec.isInvalid(item);
+
+    // If we are making them disappear based on some setting
+    if (response === IrrelevantStyleItemResponse.Hide) {
+      return invalid ? [ ] : generateItem(item, response, false, value).toArray();
+    } else {
+      return generateItem(item, response, invalid, value).toArray();
+    }
+  };
+
+  const validateItems = (preItems: FormatItem[]) => {
+    const value = spec.getCurrentValue();
+    const response = spec.shouldHide ? IrrelevantStyleItemResponse.Hide : IrrelevantStyleItemResponse.Disable;
+    return Arr.bind(preItems, (item) => validate(item, response, value));
+  };
+
+  const getFetch = (backstage: UiFactoryBackstage, getStyleItems: () => FormatItem[]) => (comp: AlloyComponent, callback: (menu: Optional<TieredData>) => void) => {
+    const preItems = getStyleItems();
+    const items = validateItems(preItems);
+    const menu = NestedMenus.build(
+      items,
+      ItemResponse.CLOSE_ON_EXECUTE,
+      backstage,
+      {
+        isHorizontalMenu: false,
+        search: Optional.none()
+      }
+    );
+    callback(menu);
+  };
+
+  return {
+    validateItems,
+    getFetch
+  };
+};
+
+const createMenuItems = (backstage: UiFactoryBackstage, spec: SelectSpec): BespokeMenuItems => {
+  const dataset = spec.dataset; // needs to be a var for tsc to understand the ternary
+  const getStyleItems = dataset.type === 'basic' ?
+    () => Arr.map(dataset.data, (d) => FormatRegister.processBasic(d, spec.isSelectedFor, spec.getPreviewFor)) :
+    dataset.getData;
+  return {
+    items: generateSelectItems(backstage, spec),
+    getStyleItems
+  };
+};
+
+const createSelectButton = (editor: Editor, backstage: UiFactoryBackstage, spec: SelectSpec, tooltipWithPlaceholder: string, textUpdateEventName: string, btnName: string): SketchSpec => {
+  const { items, getStyleItems } = createMenuItems(backstage, spec);
+  const tooltipString = Cell<string>(spec.tooltip);
+
+  const getApi = (comp: AlloyComponent): BespokeSelectApi => ({
+    getComponent: Fun.constant(comp),
+    setTooltip: (tooltip: string) => {
+      const translatedTooltip = backstage.shared.providers.translate(tooltip);
+      Attribute.set(comp.element, 'aria-label', translatedTooltip);
+      tooltipString.set(tooltip);
+    }
+  });
+
+  // Set the initial text when the component is attached and then update on node changes
+  const onSetup = (api: BespokeSelectApi) => {
+    const handler = (e: EditorEvent<{ value: string }>) =>
+      api.setTooltip(Tooltip.makeTooltipText(editor, tooltipWithPlaceholder, e.value));
+    editor.on(textUpdateEventName, handler);
+    return composeUnbinders(
+      onSetupEvent(editor, 'NodeChange', (api: BespokeSelectApi) => {
+        const comp = api.getComponent();
+        spec.updateText(comp);
+        Disabling.set(api.getComponent(), !editor.selection.isEditable());
+      })(api),
+      () => editor.off(textUpdateEventName, handler)
+    );
+  };
+
+  return renderCommonDropdown(
+    {
+      text: spec.icon.isSome() ? Optional.none() : spec.text,
+      icon: spec.icon,
+      ariaLabel: Optional.some(spec.tooltip),
+      tooltip: Optional.none(), // TINY-10474 - Using own tooltip config
+      role: Optional.none(),
+      fetch: items.getFetch(backstage, getStyleItems),
+      onSetup,
+      getApi,
+      columns: 1,
+      presets: 'normal',
+      classes: spec.icon.isSome() ? [] : [ 'bespoke' ],
+      dropdownBehaviours: [
+        Tooltipping.config({
+          ...backstage.shared.providers.tooltips.getConfig({
+            tooltipText: backstage.shared.providers.translate(spec.tooltip),
+            onShow: (comp) => {
+              if (spec.tooltip !== tooltipString.get()) {
+                const translatedTooltip = backstage.shared.providers.translate(tooltipString.get());
+                Tooltipping.setComponents(comp,
+                  backstage.shared.providers.tooltips.getComponents({ tooltipText: translatedTooltip })
+                );
+              }
+            }
+          }),
+        })
+      ]
+    },
+    ToolbarButtonClasses.Button,
+    backstage.shared,
+    btnName
+  );
+};
+
+export { createMenuItems, createSelectButton };

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

@@ -0,0 +1,74 @@
+import { AlloyComponent, AlloyTriggers, SketchSpec } from '@ephox/alloy';
+import { 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 { UiFactoryBackstage } from '../../../backstage/Backstage';
+import { updateMenuText } from '../../dropdown/CommonDropdown';
+import { onActionToggleFormat, onSetupEditableToggle } from '../ControlUtils';
+import { createMenuItems, createSelectButton, SelectSpec } from './BespokeSelect';
+import { buildBasicSettingsDataset, Delimiter } from './SelectDatasets';
+import { findNearest } from './utils/FormatDetection';
+import * as Tooltip from './utils/Tooltip';
+
+const menuTitle = 'Blocks';
+const btnTooltip = 'Block {0}';
+const fallbackFormat = 'Paragraph';
+
+const getSpec = (editor: Editor): SelectSpec => {
+
+  const isSelectedFor = (format: string) => () => editor.formatter.match(format);
+
+  const getPreviewFor = (format: string) => () => {
+    const fmt = editor.formatter.get(format);
+    if (fmt) {
+      return 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))
+      });
+    } else {
+      return Optional.none();
+    }
+  };
+
+  const updateSelectMenuText = (comp: AlloyComponent) => {
+    const detectedFormat = findNearest(editor, () => dataset.data);
+    const text = detectedFormat.fold(Fun.constant(fallbackFormat), (fmt) => fmt.title);
+    AlloyTriggers.emitWith(comp, updateMenuText, {
+      text
+    });
+    Events.fireBlocksTextUpdate(editor, { value: text });
+  };
+
+  const dataset = buildBasicSettingsDataset(editor, 'block_formats', Delimiter.SemiColon);
+
+  return {
+    tooltip: Tooltip.makeTooltipText(editor, btnTooltip, fallbackFormat),
+    text: Optional.some(fallbackFormat),
+    icon: Optional.none(),
+    isSelectedFor,
+    getCurrentValue: Optional.none,
+    getPreviewFor,
+    onAction: onActionToggleFormat(editor),
+    updateText: updateSelectMenuText,
+    dataset,
+    shouldHide: false,
+    isInvalid: (item) => !editor.formatter.canApply(item.format)
+  };
+};
+
+const createBlocksButton = (editor: Editor, backstage: UiFactoryBackstage): SketchSpec =>
+  createSelectButton(editor, backstage, getSpec(editor), btnTooltip, 'BlocksTextUpdate', 'blocks');
+
+// FIX: Test this!
+const createBlocksMenu = (editor: Editor, backstage: UiFactoryBackstage): void => {
+  const menuItems = createMenuItems(backstage, getSpec(editor));
+  editor.ui.registry.addNestedMenuItem('blocks', {
+    text: menuTitle,
+    onSetup: onSetupEditableToggle(editor),
+    getSubmenuItems: () => menuItems.items.validateItems(menuItems.getStyleItems())
+  });
+};
+export { createBlocksButton, createBlocksMenu };

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

@@ -0,0 +1,125 @@
+import { AlloyComponent, AlloyTriggers, SketchSpec } from '@ephox/alloy';
+import { Arr, Fun, Optional, Optionals } from '@ephox/katamari';
+
+import Editor from 'tinymce/core/api/Editor';
+
+import * as Events from '../../../api/Events';
+import * as Options from '../../../api/Options';
+import { UiFactoryBackstage } from '../../../backstage/Backstage';
+import { updateMenuText } from '../../dropdown/CommonDropdown';
+import { onSetupEditableToggle } from '../ControlUtils';
+import { createMenuItems, createSelectButton, FormatterFormatItem, PreviewSpec, SelectedFormat, SelectSpec } from './BespokeSelect';
+import { buildBasicSettingsDataset, Delimiter } from './SelectDatasets';
+import * as Tooltip from './utils/Tooltip';
+
+const menuTitle = 'Fonts';
+const btnTooltip = 'Font {0}';
+const systemFont = 'System Font';
+
+// A list of fonts that must be in a font family for the font to be recognised as the system stack
+// Note: Don't include 'BlinkMacSystemFont', as Chrome on Mac converts it to different names
+// The system font stack will be similar to the following. (Note: each has minor variants)
+// Oxide: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+// Bootstrap: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+// Wordpress: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+const systemStackFonts = [ '-apple-system', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'sans-serif' ];
+
+// Split the fonts into an array and strip away any start/end quotes
+const splitFonts = (fontFamily: string): string[] => {
+  const fonts = fontFamily.split(/\s*,\s*/);
+  return Arr.map(fonts, (font) => font.replace(/^['"]+|['"]+$/g, ''));
+};
+
+const matchesStack = (fonts: string[], stack: string[]): boolean => stack.length > 0 && Arr.forall(stack, (font) => fonts.indexOf(font.toLowerCase()) > -1);
+
+const isSystemFontStack = (fontFamily: string, userStack: string[]): boolean => {
+  if (fontFamily.indexOf('-apple-system') === 0 || userStack.length > 0) {
+    const fonts = splitFonts(fontFamily.toLowerCase());
+    return matchesStack(fonts, systemStackFonts) || matchesStack(fonts, userStack);
+  } else {
+    return false;
+  }
+};
+
+const getSpec = (editor: Editor): SelectSpec => {
+  const getMatchingValue = () => {
+    const getFirstFont = (fontFamily: string | undefined) => fontFamily ? splitFonts(fontFamily)[0] : '';
+
+    const fontFamily = editor.queryCommandValue('FontName');
+    const items = dataset.data;
+    const font = fontFamily ? fontFamily.toLowerCase() : '';
+    const userStack = Options.getDefaultFontStack(editor);
+
+    const matchOpt = Arr.find(items, (item) => {
+      const format = item.format;
+      return (format.toLowerCase() === font) || (getFirstFont(format).toLowerCase() === getFirstFont(font).toLowerCase());
+    }).orThunk(() => {
+      return Optionals.someIf(isSystemFontStack(font, userStack), {
+        title: systemFont,
+        format: font
+      });
+    });
+
+    return { matchOpt, font: fontFamily };
+  };
+
+  const isSelectedFor = (item: string) => (valueOpt: Optional<SelectedFormat>) =>
+    valueOpt.exists((value) => value.format === item);
+
+  const getCurrentValue = () => {
+    const { matchOpt } = getMatchingValue();
+    return matchOpt;
+  };
+
+  const getPreviewFor = (item: string) => () => Optional.some<PreviewSpec>({
+    tag: 'div',
+    styles: item.indexOf('dings') === -1 ? { 'font-family': item } : { }
+  });
+
+  const onAction = (rawItem: FormatterFormatItem) => () => {
+    editor.undoManager.transact(() => {
+      editor.focus();
+      editor.execCommand('FontName', false, rawItem.format);
+    });
+  };
+
+  const updateSelectMenuText = (comp: AlloyComponent) => {
+    const { matchOpt, font } = getMatchingValue();
+    const text = matchOpt.fold(Fun.constant(font), (item) => item.title);
+    AlloyTriggers.emitWith(comp, updateMenuText, {
+      text
+    });
+    Events.fireFontFamilyTextUpdate(editor, { value: text });
+  };
+
+  const dataset = buildBasicSettingsDataset(editor, 'font_family_formats', Delimiter.SemiColon);
+
+  return {
+    tooltip: Tooltip.makeTooltipText(editor, btnTooltip, systemFont),
+    text: Optional.some(systemFont),
+    icon: Optional.none(),
+    isSelectedFor,
+    getCurrentValue,
+    getPreviewFor,
+    onAction,
+    updateText: updateSelectMenuText,
+    dataset,
+    shouldHide: false,
+    isInvalid: Fun.never
+  };
+};
+
+const createFontFamilyButton = (editor: Editor, backstage: UiFactoryBackstage): SketchSpec =>
+  createSelectButton(editor, backstage, getSpec(editor), btnTooltip, 'FontFamilyTextUpdate', 'fontfamily');
+
+// TODO: Test this!
+const createFontFamilyMenu = (editor: Editor, backstage: UiFactoryBackstage): void => {
+  const menuItems = createMenuItems(backstage, getSpec(editor));
+  editor.ui.registry.addNestedMenuItem('fontfamily', {
+    text: backstage.shared.providers.translate(menuTitle),
+    onSetup: onSetupEditableToggle(editor),
+    getSubmenuItems: () => menuItems.items.validateItems(menuItems.getStyleItems())
+  });
+};
+
+export { createFontFamilyButton, createFontFamilyMenu };