How to use the @ephox/katamari.Cell function in @ephox/katamari

};

  // FIX: make a lot nicer.
  const hideOrRepositionIfNecessary = () => {
    lastAnchor.get().each((anchor) => {
      const contextBarEle = contextbar.element();
      Css.remove(contextBarEle, 'display');
      if (shouldContextToolbarHide()) {
        Css.set(contextBarEle, 'display', 'none');
      } else {
        Positioning.positionWithinBounds(sink, anchor, contextbar, Option.some(getBounds()));
      }
    });
  };

  const lastAnchor = Cell(Option.none());
  const lastElement = Cell>(Option.none());
  const timer = Cell(null);

  const wrapInPopDialog = (toolbarSpec: AlloySpec) => {
    return {
      dom: {
        tag: 'div',
        classes: ['tox-pop__dialog'],
      },
      components: [toolbarSpec],
      behaviours: Behaviour.derive([
        Keying.config({
          mode: 'acyclic'
        }),

        AddEventsBehaviour.config('pop-dialog-wrap-events', [

// FIX: make a lot nicer.
  const hideOrRepositionIfNecessary = () => {
    lastAnchor.get().each((anchor) => {
      const contextBarEle = contextbar.element();
      Css.remove(contextBarEle, 'display');
      if (shouldContextToolbarHide()) {
        Css.set(contextBarEle, 'display', 'none');
      } else {
        Positioning.positionWithinBounds(sink, anchor, contextbar, Option.some(getBounds()));
      }
    });
  };

  const lastAnchor = Cell(Option.none());
  const lastElement = Cell>(Option.none());
  const timer = Cell(null);

  const wrapInPopDialog = (toolbarSpec: AlloySpec) => {
    return {
      dom: {
        tag: 'div',
        classes: ['tox-pop__dialog'],
      },
      components: [toolbarSpec],
      behaviours: Behaviour.derive([
        Keying.config({
          mode: 'acyclic'
        }),

        AddEventsBehaviour.config('pop-dialog-wrap-events', [
          AlloyEvents.runOnAttached((comp) => {
            editor.shortcuts.add('ctrl+F9', 'focus statusbar', () => Keying.focusIn(comp));

const showDialog = function (editor: Editor) {
  const editorData = getEditorData(editor);
  const currentData = Cell(editorData);
  const initialData = wrap(editorData);

  const getSourceData = (api: Types.Dialog.DialogInstanceApi): MediaData => {
    return unwrap(api.getData());
  };

  const handleSource1 = (prevData: MediaData, api: Types.Dialog.DialogInstanceApi) => {
    const serviceData = getSourceData(api);

    // If a new URL is entered, then clear the embed html and fetch the new data
    if (prevData.source1 !== serviceData.source1) {
      addEmbedHtml(win, editor)({ url: serviceData.source1, html: '' });

      Service.getEmbedHtml(editor, serviceData)
        .then(addEmbedHtml(win, editor))
        .catch(handleError(editor));

const renderImagePanel = (initialUrl: string) => {
  const memBg = Memento.record(
    {
      dom: {
        tag: 'div',
        classes: [ 'tox-image-tools__image-bg' ],
        attributes: {
          role: 'presentation'
        }
      }
    }
  );

  const zoomState = Cell(1);
  const cropRect = Cell(Option.none());
  const rectState = Cell({
    x: 0,
    y: 0,
    w: 1,
    h: 1
  });
  const viewRectState = Cell({
    x: 0,
    y: 0,
    w: 1,
    h: 1
  });

  const repaintImg = (anyInSystem: AlloyComponent, img: Element): void => {
    memContainer.getOpt(anyInSystem).each((panel) => {

const register = (editor: Editor) => {
  registerCommands(editor);
  const lastForeColor = Cell(null);
  const lastBackColor = Cell(null);
  registerTextColorButton(editor, 'forecolor', 'forecolor', 'Text color', lastForeColor);
  registerTextColorButton(editor, 'backcolor', 'hilitecolor', 'Background color', lastBackColor);

  registerTextColorMenuItem(editor, 'forecolor', 'forecolor', 'Text color');
  registerTextColorMenuItem(editor, 'backcolor', 'hilitecolor', 'Background color');
};

PluginManager.add('visualblocks', (editor, pluginUrl) => {
    const enabledState = Cell(false);

    Commands.register(editor, pluginUrl, enabledState);
    Buttons.register(editor, enabledState);
    Bindings.setup(editor, pluginUrl, enabledState);
  });
}

const initData = (): AnnotationListenerData => ({
    listeners: [ ],
    previous: Cell(Option.none())
  });

export const renderTabPanel = <i>(spec: TabPanelFoo<i>, backstage: UiFactoryBackstage): SketchSpec =&gt; {
  const storedValue = Cell({ });

  const updateDataWithForm = (form: AlloyComponent): void =&gt; {
    const formData = Representing.getValue(form);
    const validData = toValidValues(formData).getOr({ });
    const currentData = storedValue.get();
    const newData = Merger.deepMerge(currentData, validData);
    storedValue.set(newData);
  };

  const setDataOnForm = (form: AlloyComponent) =&gt; {
    const tabData = storedValue.get();
    Representing.setValue(form, tabData);
  };

  const oldTab = Cell(null);
</i></i>

PluginManager.add('paste', function (editor) {
    if (DetectProPlugin.hasProPlugin(editor) === false) {
      const draggingInternallyState = Cell(false);
      const pasteFormat = Cell(Settings.isPasteAsTextEnabled(editor) ? 'text' : 'html');
      const clipboard = Clipboard(editor, pasteFormat);
      const quirks = Quirks.setup(editor);

      Buttons.register(editor, clipboard);
      Commands.register(editor, clipboard);
      PrePostProcess.setup(editor);
      CutCopy.register(editor);
      DragDrop.setup(editor, clipboard, draggingInternallyState);

      return Api.get(clipboard, quirks);
    }
  });
}

import { Cell } from '@ephox/katamari';

import { Browser } from '../core/Browser';
import { detect as eagerDetect } from './PlatformDetection';
import { OperatingSystem } from '../core/OperatingSystem';
import { PlatformDetection } from '../core/PlatformDetection';
import { DeviceType } from '../detect/DeviceType';
import * as TouchDetect from '../detect/TouchDetect';

export type Browser = Browser;
export type OperatingSystem = OperatingSystem;
export type DeviceType = DeviceType;

const platform = Cell((() => {
  const platform = eagerDetect();
  return {
    os: platform.os,
    browser: platform.browser,
    deviceType: {
      ...platform.deviceType,
      isTouch: TouchDetect.isTouch
    }
  };
})());

export const detect = (): PlatformDetection => platform.get();

export const override = (overrides: Partial) => {
  platform.set({
    ...platform.get(),