opentiny 6.9.0 → 6.9.2

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

@@ -1,239 +0,0 @@
-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

@@ -1,245 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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

@@ -1,125 +0,0 @@
-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 };