How to use the roosterjs-editor-dom.wrap function in roosterjs-editor-dom

isBegin ? refNode : refNode.nextSibling
                    );
                } else {
                    // if the refNode can have child, use appendChild (which is like to insert as first/last child)
                    // i.e. <div>hello</div>, the content will be inserted before/after hello
                    insertedNode = refNode.insertBefore(node, isBegin ? refNode.firstChild : null);
                }
            } else {
                // No first block, this can happen when editor is empty. Use appendChild to insert the content in contentDiv
                insertedNode = contentDiv.appendChild(node);
            }

            // Final check to see if the inserted node is a block. If not block and the ask is to insert on new line,
            // add a DIV wrapping
            if (insertedNode &amp;&amp; option.insertOnNewLine &amp;&amp; !isBlockElement(insertedNode)) {
                wrap(insertedNode);
            }

            break;
        case ContentPosition.Range:
        case ContentPosition.SelectionStart:
            let { range, rangeToRestore } = getInitialRange(core, option);

            if (!range) {
                return;
            }

            // if to replace the selection and the selection is not collapsed, remove the the content at selection first
            if (option.replaceSelection &amp;&amp; !range.collapsed) {
                range.deleteContents();
            }

isBegin ? refNode : refNode.nextSibling
                    );
                } else {
                    // if the refNode can have child, use appendChild (which is like to insert as first/last child)
                    // i.e. <div>hello</div>, the content will be inserted before/after hello
                    insertedNode = refNode.insertBefore(node, isBegin ? refNode.firstChild : null);
                }
            } else {
                // No first block, this can happen when editor is empty. Use appendChild to insert the content in contentDiv
                insertedNode = contentDiv.appendChild(node);
            }

            // Final check to see if the inserted node is a block. If not block and the ask is to insert on new line,
            // add a DIV wrapping
            if (insertedNode &amp;&amp; option.insertOnNewLine &amp;&amp; !isBlockElement(insertedNode)) {
                wrap(insertedNode);
            }

            break;
        }
        case ContentPosition.DomEnd:
            // Use appendChild to insert the node at the end of the content div.
            let insertedNode = contentDiv.appendChild(node);
            // Final check to see if the inserted node is a block. If not block and the ask is to insert on new line,
            // add a DIV wrapping
            if (insertedNode &amp;&amp; option.insertOnNewLine &amp;&amp; !isBlockElement(insertedNode)) {
                wrap(insertedNode);
            }
            break;
        case ContentPosition.Range:
        case ContentPosition.SelectionStart:
            let { range, rangeToRestore } = getInitialRange(core, option);

)
                    : [];

            if (nodes.length == 0) {
                // Selection is collapsed and blockElement is null, we need to create an empty div.
                // In case of IE and Edge, we insert ZWS to put cursor in the div, otherwise insert BR node.
                nodes = fromHtml(
                    `<div>${Browser.isIEOrEdge ? ZERO_WIDTH_SPACE : '<br>'}</div>`,
                    editor.getDocument()
                );
                editor.insertNode(nodes[0]);
                editor.select(nodes[0], PositionType.Begin);
            } else if (nodes.length == 1) {
                let tag = getTagOfNode(nodes[0]);
                if (tag == 'BR') {
                    nodes = [wrap(nodes[0])];
                } else if (tag == 'LI' || tag == 'TD') {
                    nodes = [].slice.call(nodes[0].childNodes) as Node[];
                }
            } else {
                while (
                    nodes[0] &amp;&amp;
                    editor.contains(nodes[0].parentNode) &amp;&amp;
                    nodes.some(node =&gt; UNWRAPPABLE_NODES.indexOf(getTagOfNode(node)) &gt;= 0)
                ) {
                    nodes = [splitBalancedNodeRange(nodes)];
                }
            }

            result = wrapFunction(nodes);
            (styler || DEFAULT_STYLER)(result);
        }

// Final check to see if the inserted node is a block. If not block and the ask is to insert on new line,
            // add a DIV wrapping
            if (insertedNode && option.insertOnNewLine && !isBlockElement(insertedNode)) {
                wrap(insertedNode);
            }

            break;
        }
        case ContentPosition.DomEnd:
            // Use appendChild to insert the node at the end of the content div.
            let insertedNode = contentDiv.appendChild(node);
            // Final check to see if the inserted node is a block. If not block and the ask is to insert on new line,
            // add a DIV wrapping
            if (insertedNode && option.insertOnNewLine && !isBlockElement(insertedNode)) {
                wrap(insertedNode);
            }
            break;
        case ContentPosition.Range:
        case ContentPosition.SelectionStart:
            let { range, rangeToRestore } = getInitialRange(core, option);

            if (!range) {
                return;
            }

            // if to replace the selection and the selection is not collapsed, remove the the content at selection first
            if (option.replaceSelection && !range.collapsed) {
                range.deleteContents();
            }

            let pos = Position.getStart(range);

// 1. Recursively clear format of all its child nodes
    let allChildrenAreBlock = ([].slice.call(node.childNodes) as Node[])
        .map(n => clearNodeFormat(n, tagsToUnwrap, tagsToStopUnwrap, attributesToPreserve))
        .reduce((previousValue, value) => previousValue && value, true);

    if (!canCollapse(tagsToStopUnwrap, node)) {
        return false;
    }

    let returnBlockElement = isBlockElement(node);

    // 2. If we should unwrap this tag, put it into an array and unwrap it later
    if (tagsToUnwrap.indexOf(getTagOfNode(node)) >= 0 || allChildrenAreBlock) {
        if (returnBlockElement && !allChildrenAreBlock) {
            wrap(node);
        }
        unwrap(node);
    } else {
        // 3. Otherwise, remove all attributes
        clearAttribute(node as HTMLElement, attributesToPreserve);
    }

    return returnBlockElement;
}

editor.addUndoSnapshot(() => {
        let childOfQuote = cacheGetQuoteChild(event, editor);
        let parent: Node;
        if (getTagOfNode(childOfQuote) == QUOTE_TAG) {
            childOfQuote = wrap([].slice.call(childOfQuote.childNodes));
        }
        parent = splitBalancedNodeRange(childOfQuote);
        unwrap(parent);
        editor.select(childOfQuote, PositionType.Begin);
    });
    event.rawEvent.preventDefault();

private showWatermark() {
        let document = this.editor.getDocument();
        let watermarkNode = wrap(
            document.createTextNode(this.watermark),
            `<span id="${WATERMARK_SPAN_ID}"></span>`
        ) as HTMLElement;
        applyFormat(watermarkNode, this.format);
        this.editor.insertNode(watermarkNode, {
            position: ContentPosition.Begin,
            updateCursor: false,
            replaceSelection: false,
            insertOnNewLine: false,
        });
        this.isWatermarkShowing = true;
    }

function wrapFunction(nodes: Node[]): HTMLElement {
    let codeBlock = wrap(nodes, CODE_TAG);
    return wrap(codeBlock, PRE_TAG);
}