How to use the @ephox/sugar.SelectorFind.descendant function in @ephox/sugar

const getInlineBounds = (editor: Editor, contentAreaBox: Bounds, viewportBounds: Bounds): Bounds => {
  const { x, width } = getHorizontalBounds(contentAreaBox, viewportBounds);
  const container = Element.fromDom(editor.getContainer());
  const header = SelectorFind.descendant(container, '.tox-editor-header').getOr(container);
  const headerBox = Boxes.box(header);

  const vpHeight = viewportBounds.height();
  const vpTop = viewportBounds.y();

  // Fixed toolbar container allows the toolbar to be above or below
  // so we need to constrain the overflow based on that
  if (headerBox.y() >= contentAreaBox.bottom()) {
    // Toolbar is below, so allow overflowing the top
    const bottom = Math.min(vpHeight + vpTop, headerBox.y());
    const height = bottom - vpTop;
    return Boxes.bounds(x, vpTop, width, height);
  } else {
    // Toolbar is above, so allow overflowing the bottom
    const y = Math.max(vpTop, headerBox.bottom());
    const height = vpHeight - (y - vpTop);

SelectorFind.ancestor(dialogBody, '[role="dialog"]').each((dialog) => {
    SelectorFind.descendant(dialog, '[role="tablist"]').each((tablist) => {
      maxTabHeight.get().map((height) => {
        // Set the tab view height to 0, so we can calculate the max tabview height, without worrying about overflows
        Css.set(tabview, 'height', '0');
        Css.set(tabview, 'flex-basis', '0');
        return Math.min(height, getMaxTabviewHeight(dialog, tabview, tablist));
      }).each((height) => {
        setTabviewHeight(tabview, height);
      });
    });
  });
};

return Arr.last(rows).bind(function (last) {
    return SelectorFind.descendant(last, 'td,th').map(function (first) {
      return getCellFirstCursorPosition(editor, first);
    });
  });
};

const insert = (editor: Editor, columns: number, rows: number): HTMLElement => {
  const defaultStyles = getDefaultStyles(editor);
  const options: TableRender.RenderOptions = {
    styles: defaultStyles,
    attributes: getDefaultAttributes(editor),
    percentages: isPercentage(defaultStyles.width) && !isPixelsForced(editor)
  };

  const table = TableRender.render(rows, columns, 0, 0, options);
  Attr.set(table, 'data-mce-id', '__mce');

  const html = Html.getOuter(table);
  editor.insertContent(html);

  return SelectorFind.descendant(Util.getBody(editor), 'table[data-mce-id="__mce"]').map((table) => {
    if (isPixelsForced(editor)) {
      Css.set(table, 'width', Css.get(table, 'width'));
    }
    Attr.remove(table, 'data-mce-id');
    fireEvents(editor, table);
    selectFirstCellInTable(editor, table);
    return table.dom();
  }).getOr(null);
};

const getTabview = (dialog: Element) => SelectorFind.descendant(dialog, '[role="tabpanel"]');

const selectFirstCellInTable = (editor: Editor, tableElm) => {
  SelectorFind.descendant(tableElm, 'td,th').each(Fun.curry(placeCaretInCell, editor));
};

const reposition = function (dialog, message) {
    SelectorFind.descendant(dialog.element(), '.' + Styles.resolve('serialised-dialog-chain')).each(function (parent) {
      Css.set(parent, 'left', (-spec.state.currentScreen.get() * message.width) + 'px');
    });
  };