How to use @ephox/katamari - 10 common examples

export const renderFooterButton = (spec: FooterButtonSpec, buttonType: string, backstage: UiFactoryBackstage): SketchSpec => {
  if (isMenuFooterButtonSpec(spec, buttonType)) {
    return renderMenuButton(spec, ToolbarButtonClasses.Button, backstage, Option.none());
  } else if (isNormalFooterButtonSpec(spec, buttonType)) {
    const action = getAction(spec.name, buttonType);
    const buttonSpec = {
      ...spec,
      borderless: false
    };
    return renderButton(buttonSpec, action, backstage.shared.providers, [ ]);
  } else {
    // tslint:disable-next-line:no-console
    console.error('Unknown footer button type: ', buttonType);
  }
};

const alignmentData = {};
  Tools.each(alignments.split(' '), (name) => {
    if (editor.formatter.matchNode(elm, formatName + name)) {
      alignmentData[dataName] = name;
    }
  });

  if (!alignmentData[dataName]) {
    // TODO: Note, this isn't a real value. But maybe that is OK?
    alignmentData[dataName] = '';
  }

  return alignmentData;
};

const getHAlignment = Fun.curry(getAlignment, 'left center right');
const getVAlignment = Fun.curry(getAlignment, 'top middle bottom');

export interface TableData {
  height: string;
  width: string;
  cellspacing: string;
  cellpadding: string;
  caption: boolean;
  class?: string;
  align: string;
  border: string;
  cols?: string;
  rows?: string;
  borderstyle?: string;
  bordercolor?: string;
  backgroundcolor?: string;

Tools.each(alignments.split(' '), (name) => {
    if (editor.formatter.matchNode(elm, formatName + name)) {
      alignmentData[dataName] = name;
    }
  });

  if (!alignmentData[dataName]) {
    // TODO: Note, this isn't a real value. But maybe that is OK?
    alignmentData[dataName] = '';
  }

  return alignmentData;
};

const getHAlignment = Fun.curry(getAlignment, 'left center right');
const getVAlignment = Fun.curry(getAlignment, 'top middle bottom');

export interface TableData {
  height: string;
  width: string;
  cellspacing: string;
  cellpadding: string;
  caption: boolean;
  class?: string;
  align: string;
  border: string;
  cols?: string;
  rows?: string;
  borderstyle?: string;
  bordercolor?: string;
  backgroundcolor?: string;
}

component.each(function (container) {
                /// view mode
                if (Swapping.isAlpha(container)) {
                  TinyCodeDupe.openLink(target.dom());
                }
              });
            }
          }
        },
        container: Element.fromDom(editor.editorContainer),
        socket: Element.fromDom(editor.contentAreaContainer),
        toolstrip: Element.fromDom(editor.editorContainer.querySelector('.' + Styles.resolve('toolstrip'))),
        toolbar: Element.fromDom(editor.editorContainer.querySelector('.' + Styles.resolve('toolbar'))),
        dropup: realm.dropup(),
        alloy: realm.system(),
        translate: Fun.noop,

        setReadOnly (ro) {
          setReadOnly(dynamicGroup, readOnlyGroups, mainGroups, ro);
        },

        readOnlyOnInit () {
          return Settings.readOnlyOnInit(editor);
        }
      });

      const hideDropup = function () {
        realm.dropup().disappear(function () {
          realm.system().broadcastOn([ TinyChannels.dropupDismissed() ], { });
        });
      };

const getCombinedItems = (triggerChar: string, matches: AutocompleteLookupData[]): ItemTypes.ItemSpec[] => {
    const columns = Options.findMap(matches, (m) => Option.from(m.columns)).getOr(1);

    return Arr.bind(matches, (match) => {
      const choices = match.items;

      return createAutocompleteItems(
        choices,
        match.matchText,
        (itemValue, itemMeta) => {
          const nr = editor.selection.getRng();
          getContext(editor.dom, nr, triggerChar).fold(
            // tslint:disable-next-line:no-console
            () => console.error('Lost context. Cursor probably moved'),
            ({ range }) => {
              const autocompleterApi: InlineContent.AutocompleterInstanceApi = {
                hide: () => {
                  cancelIfNecessary();
                },
                reload: (fetchOptions: Record) => {

const commenceIfNecessary = (context: AutocompleteContext) => {
    if (!isActive()) {
      // Create the wrapper
      const wrapper = AutocompleteTag.create(editor, context.range);

      // store the element/context
      activeAutocompleter.set(Option.some({
        triggerChar: context.triggerChar,
        element: wrapper,
        matchLength: context.text.length
      }));
      processingAction.set(false);
    }
  };

Objects.readOptFrom(scopes.lookupTable, e.toolbarKey).each((ctx) => {
      launchContext(ctx, e.target === editor ? Option.none() : Option.some(e as DomElement));
      // Forms launched via this way get immediate focus
      InlineView.getContent(contextbar).each(Keying.focusIn);
    });
  });

const fixedContainerElement = (editor): Option<element> =&gt; {
  const selector = fixedContainerSelector(editor);
  // If we have a valid selector and are in inline mode, try to get the fixed_toolbar_container
  return selector.length &gt; 0 &amp;&amp; editor.inline ? SelectorFind.descendant(Body.body(), selector) : Option.none();
};
</element>

const doEnrich = (items): FormatItem[] => {
    return Arr.map(items, (item) => {
      const keys = Obj.keys(item);
      // If it is a submenu, enrich all the subitems.
      if (Objects.hasKey(item, 'items')) {
        const newItems = doEnrich(item.items);
        return Merger.deepMerge(
          enrichMenu(item),
          {
            getStyleItems: () => newItems
          }
        ) as FormatItem;
      } else if (Objects.hasKey(item, 'format')) {
        return enrichSupported(item);

        // NOTE: This branch is added from the original StyleFormats in mobile
      } else if (keys.length === 1 && Arr.contains(keys, 'title')) {
        return Merger.deepMerge(item, { type: 'separator' }) as FormatItem;

const setSelection = editor.setSelection.getOrThunk(function () {
          return function (start, soffset, finish, foffset) {
            WindowSelection.setExact(win, start, soffset, finish, foffset);
          };
        });

        const clearSelection = editor.clearSelection.getOrThunk(function () {
          return function () {
            WindowSelection.clear(win);
          };
        });

        return {
          body: Fun.constant(body),
          doc: Fun.constant(doc),
          win: Fun.constant(win),
          html: Fun.constant(html),
          getSelection: Fun.curry(getSelectionFromFrame, frame),
          setSelection,
          clearSelection,
          frame: Fun.constant(frame),

          onKeyup: getOrListen(editor, doc, 'onKeyup', 'keyup'),
          onNodeChanged: getOrListen(editor, doc, 'onNodeChanged', 'SelectionChange'),
          onDomChanged: editor.onDomChanged, // consider defaulting with MutationObserver

          onScrollToCursor: editor.onScrollToCursor,
          onScrollToElement: editor.onScrollToElement,
          onToReading: editor.onToReading,
          onToEditing: editor.onToEditing,

          onToolbarScrollStart: editor.onToolbarScrollStart,