How to use the @ephox/sugar.Height.get function in @ephox/sugar

let maxHeight;
  if (isFixed) {
    maxHeight = Math.max(documentElement.clientHeight, window.innerHeight);
  } else {
    maxHeight = Math.max(documentElement.offsetHeight, documentElement.scrollHeight);
  }

  // Determine the current height taken up by the tabview panel
  const tabviewHeight = Height.get(tabview);
  const isTabListBeside = tabview.dom().offsetLeft >= tablist.dom().offsetLeft + Width.get(tablist);
  const currentTabHeight = isTabListBeside ? Math.max(Height.get(tablist), tabviewHeight) : tabviewHeight;

  // Get the dialog height, making sure to account for any margins on the dialog
  const dialogTopMargin = parseInt(Css.get(dialog, 'margin-top'), 10) || 0;
  const dialogBottomMargin = parseInt(Css.get(dialog, 'margin-bottom'), 10) || 0;
  const dialogHeight = Height.get(dialog) + dialogTopMargin + dialogBottomMargin;

  const chromeHeight = dialogHeight - currentTabHeight;
  return maxHeight - chromeHeight;
};

const getGreenzone = function (socket, dropup) {
  const outerWindow = Traverse.owner(socket).dom().defaultView;
  // Include the dropup for this calculation because it represents the total viewable height.
  const viewportHeight = Height.get(socket) + Height.get(dropup);
  const acc = accountableKeyboardHeight(outerWindow);
  return viewportHeight - acc;
};

const offset = split ? toolbar.fold(() => 0, (tbar) => {
      // If we have an overflow toolbar, we need to offset the positioning by the height of the overflow toolbar
      return tbar.components().length > 1 ? Height.get(tbar.components()[1].element()) : 0;
    }) : 0;

const getMaxTabviewHeight = (dialog: Element, tabview: Element, tablist: Element) => {
  const documentElement = Traverse.documentElement(dialog).dom();
  const rootElm = SelectorFind.ancestor(dialog, '.tox-dialog-wrap').getOr(dialog) as Element;
  const isFixed = Css.get(rootElm, 'position') === 'fixed';

  // Get the document or window/viewport height
  let maxHeight;
  if (isFixed) {
    maxHeight = Math.max(documentElement.clientHeight, window.innerHeight);
  } else {
    maxHeight = Math.max(documentElement.offsetHeight, documentElement.scrollHeight);
  }

  // Determine the current height taken up by the tabview panel
  const tabviewHeight = Height.get(tabview);
  const isTabListBeside = tabview.dom().offsetLeft >= tablist.dom().offsetLeft + Width.get(tablist);
  const currentTabHeight = isTabListBeside ? Math.max(Height.get(tablist), tabviewHeight) : tabviewHeight;

  // Get the dialog height, making sure to account for any margins on the dialog
  const dialogTopMargin = parseInt(Css.get(dialog, 'margin-top'), 10) || 0;
  const dialogBottomMargin = parseInt(Css.get(dialog, 'margin-bottom'), 10) || 0;
  const dialogHeight = Height.get(dialog) + dialogTopMargin + dialogBottomMargin;

  const chromeHeight = dialogHeight - currentTabHeight;
  return maxHeight - chromeHeight;
};

const documentElement = Traverse.documentElement(dialog).dom();
  const rootElm = SelectorFind.ancestor(dialog, '.tox-dialog-wrap').getOr(dialog) as Element;
  const isFixed = Css.get(rootElm, 'position') === 'fixed';

  // Get the document or window/viewport height
  let maxHeight;
  if (isFixed) {
    maxHeight = Math.max(documentElement.clientHeight, window.innerHeight);
  } else {
    maxHeight = Math.max(documentElement.offsetHeight, documentElement.scrollHeight);
  }

  // Determine the current height taken up by the tabview panel
  const tabviewHeight = Height.get(tabview);
  const isTabListBeside = tabview.dom().offsetLeft >= tablist.dom().offsetLeft + Width.get(tablist);
  const currentTabHeight = isTabListBeside ? Math.max(Height.get(tablist), tabviewHeight) : tabviewHeight;

  // Get the dialog height, making sure to account for any margins on the dialog
  const dialogTopMargin = parseInt(Css.get(dialog, 'margin-top'), 10) || 0;
  const dialogBottomMargin = parseInt(Css.get(dialog, 'margin-bottom'), 10) || 0;
  const dialogHeight = Height.get(dialog) + dialogTopMargin + dialogBottomMargin;

  const chromeHeight = dialogHeight - currentTabHeight;
  return maxHeight - chromeHeight;
};

const updateChromePosition = (toolbar: Option) => {
    // Calculate the toolbar offset when using a split toolbar drawer
    const offset = split ? toolbar.fold(() => 0, (tbar) => {
      // If we have an overflow toolbar, we need to offset the positioning by the height of the overflow toolbar
      return tbar.components().length > 1 ? Height.get(tbar.components()[1].element()) : 0;
    }) : 0;

    // The float container/editor may not have been rendered yet, which will cause it to have a non integer based positions
    // so we need to round this to account for that.
    const location = Location.absolute(targetElm);
    const top = location.top() - Height.get(floatContainer.element()) + offset;
    Css.setAll(uiComponents.outerContainer.element(), {
      position: 'absolute',
      top: Math.round(top) + 'px',
      left: Math.round(location.left()) + 'px'
    });

    // Update the max width of the inline toolbar
    const maxWidth = editorMaxWidthOpt.getOrThunk(() => {
      // No max width, so use the body width, minus the left pos as the maximum
      const bodyMargin = Utils.parseToInt(Css.get(Body.body(), 'margin-left')).getOr(0);
      return Width.get(Body.body()) - location.left() + bodyMargin;
    });
    Css.set(floatContainer.element(), 'max-width', maxWidth + 'px');
  };

memContainer.getOpt(anyInSystem).each((panel) => {
      const zoom = zoomState.get();

      const panelW = Width.get(panel.element());
      const panelH = Height.get(panel.element());
      const width = img.dom().naturalWidth * zoom;
      const height = img.dom().naturalHeight * zoom;
      const left = Math.max(0, panelW / 2 - width / 2);
      const top = Math.max(0, panelH / 2 - height / 2);

      const css = {
        left: left.toString() + 'px',
        top: top.toString() + 'px',
        width: width.toString() + 'px',
        height: height.toString() + 'px',
        position: 'absolute'
      };

      Css.setAll(img, css);
      memBg.getOpt(panel).each((bg) => {
        Css.setAll(bg.element(), css);

memContainer.getOpt(anyInSystem).each((panel) => {
      const panelW = Width.get(panel.element());
      const panelH = Height.get(panel.element());
      const width = img.dom().naturalWidth;
      const height = img.dom().naturalHeight;
      const zoom = Math.min((panelW) / width, (panelH) / height);

      if (zoom >= 1) {
        zoomState.set(1);
      } else {
        zoomState.set(zoom);
      }
    });
  };