How to use the prosemirror-model.Fragment.from function in prosemirror-model

const prevNode = $pos.nodeBefore;
  if (!prevNode || prevNode.type !== nodeType) {
    return tr;
  }
  if (node.childCount !== 1) {
    // list item should only have one child (paragraph).
    return tr;
  }

  const paragraphNode = node.firstChild;
  const textNode = schema.text(' ');

  // Delete the list item
  tr = tr.delete(pos - 2, pos + node.nodeSize);
  // Append extra space character to its previous list item.
  tr = tr.insert(pos - 2, Fragment.from(textNode));
  // Move the content to its previous list item.
  tr = tr.insert(pos - 1, Fragment.from(paragraphNode.content));
  tr = tr.setSelection(TextSelection.create(tr.doc, pos - 1, pos - 1));
  return tr;
}

let grandParent = $from.node(-1)
    if (grandParent.type != itemType) return false
    if ($from.parent.content.size == 0) {
      // In an empty block. If this is a nested list, the wrapping
      // list item should be split. Otherwise, bail out and let next
      // command handle lifting.
      if ($from.depth == 2 || $from.node(-3).type != itemType ||
          $from.index(-2) != $from.node(-2).childCount - 1) return false
      if (dispatch) {
        let wrap = Fragment.empty, keepItem = $from.index(-1) > 0
        // Build a fragment containing empty versions of the structure
        // from the outer list item to the parent node of the cursor
        for (let d = $from.depth - (keepItem ? 1 : 2); d >= $from.depth - 3; d--)
          wrap = Fragment.from($from.node(d).copy(wrap))
        // Add a second list item with an empty default start node
        wrap = wrap.append(Fragment.from(itemType.createAndFill()))
        let tr = state.tr.replace($from.before(keepItem ? null : -1), $from.after(-3), new Slice(wrap, keepItem ? 3 : 2, 2))
        tr.setSelection(state.selection.constructor.near(tr.doc.resolve($from.pos + (keepItem ? 3 : 2))))
        dispatch(tr.scrollIntoView())
      }
      return true
    }
    let nextType = $to.pos == $from.end() ? grandParent.contentMatchAt(0).defaultType : null
    let tr = state.tr.delete($from.pos, $to.pos)
    let types = nextType && [null, {type: nextType}]

    // NOTE
    // 
    // still not sure about the logic behind this `nextType` and `types`
    // 
    // seems that
    // 1. cursor at the end of a paragraph

export const toDOM = ({ node, schema, doc }: FromNodeParams): DocumentFragment => {
  const fragment = isDocNode(node, schema) ? node.content : Fragment.from(node);
  return DOMSerializer.fromSchema(schema).serializeFragment(fragment, { document: doc });
};

if (startIndex == 0) {
    return tr;
  }
  let parent = range.parent;
  let nodeBefore = parent.child(startIndex - 1);
  if (nodeBefore.type !== itemType) {
    return tr;
  };

  let nestedBefore =
    nodeBefore.lastChild &&
    nodeBefore.lastChild.type == parent.type;

  let inner = Fragment.from(nestedBefore ? itemType.create() : null);
  let slice = new Slice(
    Fragment.from(itemType.create(null, Fragment.from(parent.copy(inner)))),
    nestedBefore ? 3 : 1,
    0,
  );
  let before = range.start;
  let after = range.end
  tr = tr.step(
    new ReplaceAroundStep(
      before - (nestedBefore ? 3 : 1),
      after,
      before,
      after,
      slice,
      1,
      true,
    ),
  );

let startIndex = range.startIndex
  if (startIndex == 0) {
    return tr;
  }
  let parent = range.parent;
  let nodeBefore = parent.child(startIndex - 1);
  if (nodeBefore.type !== itemType) {
    return tr;
  };

  let nestedBefore =
    nodeBefore.lastChild &&
    nodeBefore.lastChild.type == parent.type;

  let inner = Fragment.from(nestedBefore ? itemType.create() : null);
  let slice = new Slice(
    Fragment.from(itemType.create(null, Fragment.from(parent.copy(inner)))),
    nestedBefore ? 3 : 1,
    0,
  );
  let before = range.start;
  let after = range.end
  tr = tr.step(
    new ReplaceAroundStep(
      before - (nestedBefore ? 3 : 1),
      after,
      before,
      after,
      slice,
      1,
      true,

if (!contentBlocksSelected.length) {
    return tr;
  }

  tr = tr.delete(listNodePos, listNodePos + listNode.nodeSize);

  const listNodeType = listNode.type;
  const attrs = {indent: listNode.attrs.indent, start: 1};

  if (contentBlocksAfter.length) {
    const nodes = contentBlocksAfter.map(block => {
      return listItem.create({}, Fragment.from(block.node));
    });
    const frag = Fragment.from(
      listNodeType.create(attrs, Fragment.from(nodes))
    );
    tr = tr.insert(listNodePos, frag);
  }

  if (contentBlocksSelected.length) {
    const nodes = contentBlocksSelected.map(block => {
      if (unwrapParagraphNode) {
        return unwrapParagraphNode(block.node);
      } else {
        return block.node;
      }
    });
    const frag = Fragment.from(nodes);
    tr = tr.insert(listNodePos, frag);
  }

if (sliceFromPos === null || sliceToPos === null) {
    return tr;
  }

  const sliceSelected = tr.doc.slice(sliceFromPos, sliceToPos);
  const sliceBefore = (sliceFromPos > (listFromPos + 1)) ?
    tr.doc.slice(listFromPos + 1, sliceFromPos) :
    null;

  const sliceAfter = (sliceToPos < (listToPos - 1)) ?
    tr.doc.slice(sliceToPos, listToPos - 1) :
    null;

  if (sliceAfter) {
    const frag = Fragment.from(listNode.copy(sliceAfter.content));
    tr = tr.insert(listToPos, frag);
  }

  if (sliceSelected) {
    const frag = Fragment.from(listNode.copy(sliceSelected.content));
    tr = tr.insert(listToPos, frag);
    tr = tr.setNodeMarkup(listToPos, null, {
      ...listNode.attrs,
      order: 1,
      indent: nextIndent,
    });
  }

  if (sliceBefore) {
    const frag = Fragment.from(listNode.copy(sliceBefore.content));
    tr = tr.insert(listToPos, frag);

return tr;
  }
  const {from, empty} = selection;
  if (!empty) {
    return tr;
  }
  const br = schema.nodes[HARD_BREAK];
  if (!br) {
    return tr;
  }
  const blockquote = schema.nodes[BLOCKQUOTE];
  const result = findParentNodeOfType(blockquote)(selection);
  if (!result) {
    return tr;
  }
  tr = tr.insert(from, Fragment.from(br.create()));
  tr = tr.setSelection(TextSelection.create(tr.doc, from + 1, from + 1));
  return tr;
}

function fitLeftInner($from, depth, placed, placedBelow) {
  let content = Fragment.empty, openEnd = 0, placedHere = placed[depth]
  if ($from.depth > depth) {
    let inner = fitLeftInner($from, depth + 1, placed, placedBelow || placedHere)
    openEnd = inner.openEnd + 1
    content = Fragment.from($from.node(depth + 1).copy(inner.content))
  }

  if (placedHere) {
    content = content.append(placedHere.content)
    openEnd = placedHere.openEnd
  }
  if (placedBelow) {
    content = content.append($from.node(depth).contentMatchAt($from.indexAfter(depth)).fillBefore(Fragment.empty, true))
    openEnd = 0
  }

  return {content, openEnd}
}

const listNodeAttrs = {
      ...listNode.attrs,
      indent: indentNew,
    };
    const listNodeNew = listNodeType.create(
      listNodeAttrs,
      Fragment.from(itemsSelected)
    );
    tr = tr.insert(pos, Fragment.from(listNodeNew));
    tr = mergeSiblingLists(tr, pos);
  }

  if (itemsBefore.length) {
    const listNodeNew = listNodeType.create(
      listNode.attrs,
      Fragment.from(itemsBefore)
    );
    tr = tr.insert(pos, Fragment.from(listNodeNew));
    tr = mergeSiblingLists(tr, pos);
  }
  return tr;
}