How to use the roosterjs-editor-types.ContentPosition.Begin function in roosterjs-editor-types

option = option || {
        position: ContentPosition.SelectionStart,
        insertOnNewLine: false,
        updateCursor: true,
        replaceSelection: true,
    };
    let contentDiv = core.contentDiv;

    if (option.updateCursor) {
        core.api.focus(core);
    }

    switch (option.position) {
        case ContentPosition.Begin:
        case ContentPosition.End: {
            let isBegin = option.position == ContentPosition.Begin;
            let block = getFirstLastBlockElement(contentDiv, isBegin);
            let insertedNode: Node;
            if (block) {
                let refNode = isBegin ? block.getStartNode() : block.getEndNode();
                if (
                    option.insertOnNewLine ||
                    refNode.nodeType == NodeType.Text ||
                    isVoidHtmlElement(refNode)
                ) {
                    // For insert on new line, or refNode is text or void html element (HR, BR etc.)
                    // which cannot have children, i.e. <div>hello<br>world</div>. 'hello', 'world' are the
                    // first and last node. Insert before 'hello' or after 'world', but still inside DIV
                    insertedNode = refNode.parentNode.insertBefore(
                        node,
                        isBegin ? refNode : refNode.nextSibling
                    );

option = option || {
        position: ContentPosition.SelectionStart,
        insertOnNewLine: false,
        updateCursor: true,
        replaceSelection: true,
    };
    let contentDiv = core.contentDiv;

    if (option.updateCursor) {
        core.api.focus(core);
    }

    switch (option.position) {
        case ContentPosition.Begin:
        case ContentPosition.End:
            let isBegin = option.position == ContentPosition.Begin;
            let block = getFirstLastBlockElement(contentDiv, isBegin);
            let insertedNode: Node;
            if (block) {
                let refNode = isBegin ? block.getStartNode() : block.getEndNode();
                if (
                    option.insertOnNewLine ||
                    refNode.nodeType == NodeType.Text ||
                    isVoidHtmlElement(refNode)
                ) {
                    // For insert on new line, or refNode is text or void html element (HR, BR etc.)
                    // which cannot have children, i.e. <div>hello<br>world</div>. 'hello', 'world' are the
                    // first and last node. Insert before 'hello' or after 'world', but still inside DIV
                    insertedNode = refNode.parentNode.insertBefore(
                        node,
                        isBegin ? refNode : refNode.nextSibling
                    );

public getStartInlineElement(): InlineElement {
        if (this.block) {
            switch (this.startFrom) {
                case ContentPosition.Begin:
                case ContentPosition.End:
                case ContentPosition.DomEnd:
                    return getFirstLastInlineElementFromBlockElement(
                        this.block,
                        this.startFrom == ContentPosition.Begin
                    );
                case ContentPosition.SelectionStart:
                    // Get the inline before selection start point, and ensure it falls in the selection block
                    let startInline = getInlineElementAfter(this.rootNode, this.position);
                    return startInline && this.block.contains(startInline.getContainerNode())
                        ? startInline
                        : new EmptyInlineElement(this.position, this.block);
            }
        }

        return null;

                                onClick={() => this.setPosition(ContentPosition.Begin)}
                            />

<textarea value="{this.state.content}"> this.setState({ content: this.html.current.value })}
                        /&gt;
                    &lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;Insert at&lt;/td&gt;
                    &lt;td&gt;
                        &lt;div&gt;
                            &lt;input
                                type="radio"
                                name="position"
                                checked={this.state.position == ContentPosition.Begin}
                                id="insertBegin"
                                onClick={() =&gt; this.setPosition(ContentPosition.Begin)}
                            /&gt;
                            &lt;label htmlFor="insertBegin"&gt;Begin&lt;/label&gt;
                        &lt;/div&gt;
                        &lt;div&gt;
                            &lt;input
                                type="radio"
                                name="position"
                                checked={this.state.position == ContentPosition.End}
                                id="insertEnd"
                                onClick={() =&gt; this.setPosition(ContentPosition.End)}
                            /&gt;
                            &lt;label htmlFor="insertEnd"&gt;End&lt;/label&gt;
                        &lt;/div&gt;
                        &lt;div&gt;
</textarea>

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