How to use the @ephox/sugar.Element.fromTag function in @ephox/sugar

const insertBlock = (root: Element, forward: boolean, blockName: string, attrs: Record) => {
  const block = Element.fromTag(blockName);
  const br = Element.fromTag('br');

  Attr.setAll(block, attrs);
  Insert.append(block, br);
  insertElement(root, block, forward);

  return rangeBefore(br);
};

const createItem = (scope: Document, attr: Record, content: Element[]): Element => {
  const item = Element.fromTag('li', scope);
  Attr.setAll(item, attr);
  InsertAll.append(item, content);
  return item;
};

const makeAnnotation = (eDoc: Document, { uid = Id.generate('mce-annotation'), ...data }, annotationName: string, decorate: Decorator): Element => {
  const master = Element.fromTag('span', eDoc);
  Class.add(master, Markings.annotation());
  Attr.set(master, `${Markings.dataAnnotationId()}`, uid);
  Attr.set(master, `${Markings.dataAnnotation()}`, annotationName);

  const { attributes = { }, classes = [ ] } = decorate(uid, data);
  Attr.setAll(master, attributes);
  Classes.add(master, classes);
  return master;
};

const insertBlock = (root: Element, forward: boolean, blockName: string, attrs: Record) => {
  const block = Element.fromTag(blockName);
  const br = Element.fromTag('br');

  Attr.setAll(block, attrs);
  Insert.append(block, br);
  insertElement(root, block, forward);

  return rangeBefore(br);
};

const createSegment = (scope: Document, listType: ListType): Segment => {
  const segment: Segment = {
    list: Element.fromTag(listType, scope),
    item: Element.fromTag('li', scope)
  };
  Insert.append(segment.list, segment.item);
  return segment;
};

const createSegment = (scope: Document, listType: ListType): Segment => {
  const segment: Segment = {
    list: Element.fromTag(listType, scope),
    item: Element.fromTag('li', scope)
  };
  Insert.append(segment.list, segment.item);
  return segment;
};