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

(focusNode == core.contentDiv ||
            (focusNode.nodeType == NodeType.Text && focusNode.parentNode == core.contentDiv))
    ) {
        let editorSelection = new EditorSelection(
            core.contentDiv,
            selectionRange,
            core.inlineElementFactory
        );
        let blockElement = editorSelection.startBlockElement;
        if (!blockElement) {
            // Only reason we don't get the selection block is that we have an empty content div
            // which can happen when users removes everything (i.e. select all and DEL, or backspace from very end to begin)
            // The fix is to add a DIV wrapping, apply default format and move cursor over
            let nodes = fromHtml('<div><br></div>', core.document);
            let element = core.contentDiv.appendChild(nodes[0]) as HTMLElement;
            applyFormat(element, core.defaultFormat);
            // element points to a wrapping node we added "<div><br></div>". We should move the selection left to <br>
            selectEditorPoint(core, element.firstChild, NodeBoundary.Begin);
        } else if (blockElement.getStartNode().parentNode == blockElement.getEndNode().parentNode) {
            // Only fix the balanced start-end block where start and end node is under same parent
            // The focus node could be pointing to the content div, normalize it to have it point to a child first
            let focusOffset = selectionRange.startOffset;
            let editorPoint = normalizeEditorPoint(focusNode, focusOffset);
            let element = wrapAll(blockElement.getContentNodes()) as HTMLElement;
            if (getTagOfNode(blockElement.getStartNode()) == 'BR') {
                // if the block is just BR, apply default format
                // Otherwise, leave it as it is as we don't want to change the style for existing data
                applyFormat(element, core.defaultFormat);
            }
            // Last restore the selection using the normalized editor point
            selectEditorPoint(core, editorPoint.containerNode, editorPoint.offset);
        }

Browser.isEdge ? '<div><span><br></span></div>' : '<div><br></div>',
                this.editor.getDocument()
            )[0] as HTMLElement;
            this.editor.insertNode(formatNode, {
                position: ContentPosition.End,
                updateCursor: false,
                replaceSelection: false,
                insertOnNewLine: false,
            });

            // element points to a wrapping node we added "<div><br></div>". We should move the selection left to <br>
            result = new Position(formatNode.firstChild, PositionType.Begin);
        }

        if (formatNode) {
            applyFormat(formatNode, this.editor.getDefaultFormat(), this.editor.isDarkMode());
        }

        return result;
    }

(focusNode.nodeType == NodeType.Text &&
                    focusNode.parentNode == this.core.contentDiv))
        ) {
            let editorSelection = new EditorSelection(
                this.core.contentDiv,
                selectionRange,
                this.core.inlineElementFactory
            );
            let blockElement = editorSelection.startBlockElement;
            if (!blockElement) {
                // Only reason we don't get the selection block is that we have an empty content div
                // which can happen when users removes everything (i.e. select all and DEL, or backspace from very end to begin)
                // The fix is to add a DIV wrapping, apply default format and move cursor over
                let nodes = fromHtml('<div><br></div>', this.core.document);
                let element = this.core.contentDiv.appendChild(nodes[0]) as HTMLElement;
                applyFormat(element, this.core.defaultFormat);
                // element points to a wrapping node we added "<div><br></div>". We should move the selection left to <br>
                this.selectEditorPoint(element.firstChild, NodeBoundary.Begin);
            } else if (
                blockElement.getStartNode().parentNode == blockElement.getEndNode().parentNode
            ) {
                // Only fix the balanced start-end block where start and end node is under same parent
                // The focus node could be pointing to the content div, normalize it to have it point to a child first
                let focusOffset = selectionRange.startOffset;
                let editorPoint = normalizeEditorPoint(focusNode, focusOffset);
                let element = wrapAll(blockElement.getContentNodes()) as HTMLElement;
                if (getTagOfNode(blockElement.getStartNode()) == 'BR') {
                    // if the block is just BR, apply default format
                    // Otherwise, leave it as it is as we don't want to change the style for existing data
                    applyFormat(element, this.core.defaultFormat);
                }
                // Last restore the selection using the normalized editor point

// The fix is to add a DIV wrapping, apply default format and move cursor over
            let nodes = fromHtml('<div><br></div>', core.document);
            let element = core.contentDiv.appendChild(nodes[0]) as HTMLElement;
            applyFormat(element, core.defaultFormat);
            // element points to a wrapping node we added "<div><br></div>". We should move the selection left to <br>
            selectEditorPoint(core, element.firstChild, NodeBoundary.Begin);
        } else if (blockElement.getStartNode().parentNode == blockElement.getEndNode().parentNode) {
            // Only fix the balanced start-end block where start and end node is under same parent
            // The focus node could be pointing to the content div, normalize it to have it point to a child first
            let focusOffset = selectionRange.startOffset;
            let editorPoint = normalizeEditorPoint(focusNode, focusOffset);
            let element = wrapAll(blockElement.getContentNodes()) as HTMLElement;
            if (getTagOfNode(blockElement.getStartNode()) == 'BR') {
                // if the block is just BR, apply default format
                // Otherwise, leave it as it is as we don't want to change the style for existing data
                applyFormat(element, core.defaultFormat);
            }
            // Last restore the selection using the normalized editor point
            selectEditorPoint(core, editorPoint.containerNode, editorPoint.offset);
        }
    }
}

if (!firstBlock) {
            // No first block, let's create one
            let nodes = fromHtml('<div><br></div>', this.core.document);
            defaultFormatBlockElement = this.core.contentDiv.appendChild(nodes[0]) as HTMLElement;
        } else if (firstBlock instanceof NodeBlockElement) {
            // There is a first block and it is a Node (P, DIV etc.) block
            // Check if it is empty block and apply default format if so
            // TODO: what about first block contains just an image? testing getTextContent won't tell that
            // Probably it is no harm since apply default format on an image block won't change anything for the image
            if (firstBlock.getTextContent() == '') {
                defaultFormatBlockElement = firstBlock.getStartNode() as HTMLElement;
            }
        }

        if (defaultFormatBlockElement) {
            applyFormat(defaultFormatBlockElement, this.core.defaultFormat);
        }
    }
    //#endregion

if (!firstBlock) {
        // No first block, let's create one
        let nodes = fromHtml('<div><br></div>', core.document);
        defaultFormatBlockElement = core.contentDiv.appendChild(nodes[0]) as HTMLElement;
    } else if (firstBlock instanceof NodeBlockElement) {
        // There is a first block and it is a Node (P, DIV etc.) block
        // Check if it is empty block and apply default format if so
        // TODO: what about first block contains just an image? testing getTextContent won't tell that
        // Probably it is no harm since apply default format on an image block won't change anything for the image
        if (firstBlock.getTextContent() == '') {
            defaultFormatBlockElement = firstBlock.getStartNode() as HTMLElement;
        }
    }

    if (defaultFormatBlockElement) {
        applyFormat(defaultFormatBlockElement, core.defaultFormat);
    }
}

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;
    }