Can't paste clipboard content at cursor/caret with custom context menu. Javascript

Question

I have created a custom context menu/right click menu and I have a custom copy function working, but not a paste function. My current paste function pastes at the end of the textarea, not where the user cursor is.

function pasteClip() {
    navigator.clipboard.readText().then((clipText) => (cdocument.value += clipText));
}

<div class="center">
        <div class="content">
            <h1 class="smallh1">New Document</h1>
            <div>
                <textarea id="cdocument" maxlength="5000"></textarea>
            </div>
        </div>
    </div>
    <div id="contextMenu" class="context-menu" style="visibility: hidden;">
        <button class="gbtn cm cmt" onclick="copyAll()">Copy All</button><br>
        <button class="gbtn cm" onclick="deleteAll()">Delete All</button><br>
        <button class="gbtn cm secte" onclick="selectAll()">Select All</button><br>
        <button class="gbtn cm sectb" onclick="copySelected()">Copy <span class="cmtt">(ctrl + c)</span></button><br>
        <button style="color: var(--llg-bg)" class="gbtn cm" onclick="pasteClip()">Paste (ctrl + c)</button><br>
        <button class="gbtn cm cmb" onclick="cutSelected()">Cut <span class="cmtt">(ctrl + c)</span></button><br>
    </div>

`

(cdocument refers to the textarea id.)

I've tried to get the cursor position but I can't paste the clipboard text at the cursor position. I need a base (vanilla) javascript answer.