How to insert text on a CodeMirror editor via onclick of a button?

Question

I have a textarea where if a user clicks on a button, it will insert a specified text in the textarea.

However, I needed to use CodeMirror to take advantage of its many built-in functionalities, but my code no longer works inside it.

For example, here's my previous textarea without CodeMirror:

var isChrome = !!window.chrome && !!window.chrome.webstore;
var mapObj = {

'added':' added',
'deleted':' deleted',

'(a)':' (a)',
'(b)':' (b)',
'(c)':' (c)'

}

jQuery(".cbtn").on("click", function(event) {
var currButtonId = jQuery(event.target).attr('id');
var mappedText = mapObj[currButtonId];

    jQuery("#textarea3").focus();
    document.execCommand('insertText', false, mappedText);
});

<script src="https://ixscripts.netlify.app/_global-externals/scripts/jquery-3.5.1.min.js"></script>

<form class="mr-2" name="editorial">
    <textarea class="form-control mt-1 textarea-bg" id="textarea3" rows="10"></textarea>
</form>

<button id='added' class="cbtn">added</button>

<button id='deleted'class="cbtn">deleted</button>

<button id='(a)' class="cbtn">(a)</button>

<button id='(b)' class="cbtn">(b)</button>

<button id='(c)' class="cbtn">(c)</button>

Now, this code is simple but its important functions are:

1. To insert text on caret placement
2. Be able to undo (Ctrl + z) and redo the inserted text

Then the CodeMirror one looks like this:

var editor = CodeMirror.fromTextArea(document.getElementById("codemirror-highlighter"), {
    mode: "text/html",
    theme: "ayu-dark",
    lineNumbers: true,
    lineWrapping: true,
    matchTags: {bothTags: true},

    extraKeys: {
        "Ctrl-J": "toMatchingTag"
        ,
        "Ctrl-Q": function(cm){ 
        cm.foldCode(cm.getCursor()); 
        },
        "F11": function(cm) {
        cm.setOption("fullScreen", !cm.getOption("fullScreen"));
        },
        "Esc": function(cm) {
        if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
        }
    },
    foldGutter: true,
    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
});
 
var isChrome = !!window.chrome && !!window.chrome.webstore;
var mapObj = {

'added':' added',
'deleted':' deleted',

'(a)':' (a)',
'(b)':' (b)',
'(c)':' (c)'

}

jQuery(".cbtn").on("click", function(event) {
var currButtonId = jQuery(event.target).attr('id');
var mappedText = mapObj[currButtonId];

jQuery("#codemirror-highlighter").focus();
document.execCommand('insertText', false, mappedText);
});

    * {margin: 0; background: #111;}
    .CodeMirror { border: 1px solid silver; }
    .CodeMirror-empty { outline: 1px solid #c22; }
    .CodeMirror-empty.CodeMirror-focused { outline: none; }
    .CodeMirror pre.CodeMirror-placeholder { color: #999; }

    .cbtn{background-color: #fafafa;}

<link rel="stylesheet" href="https://ixscripts.netlify.app/eden/_externals/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="https://ixscripts.netlify.app/eden/_externals/codemirror/addon/display/fullscreen.css">
<link rel="stylesheet" href="https://ixscripts.netlify.app/eden/_externals/codemirror/theme/ayu-dark.css">
<script src="https://ixscripts.netlify.app/eden/_externals/codemirror/lib/codemirror.js"></script>
<script src="https://ixscripts.netlify.app/eden/_externals/codemirror/mode/xml/xml.js"></script>
<script src="https://ixscripts.netlify.app/eden/_externals/codemirror/addon/display/fullscreen.js"></script>
<script src="https://ixscripts.netlify.app/eden/_externals/codemirror/addon/edit/matchtags.js"></script>
<link rel="stylesheet" href="https://ixscripts.netlify.app/eden/_externals/codemirror/addon/fold/foldgutter.css" />
<script src="https://ixscripts.netlify.app/eden/_externals/codemirror/addon/fold/foldcode.js"></script>
<script src="https://ixscripts.netlify.app/eden/_externals/codemirror/addon/fold/foldgutter.js"></script>
<script src="https://ixscripts.netlify.app/eden/_externals/codemirror/addon/fold/brace-fold.js"></script>
<script src="https://ixscripts.netlify.app/eden/_externals/codemirror/addon/fold/xml-fold.js"></script>
<script src="https://ixscripts.netlify.app/eden/_externals/codemirror/addon/fold/indent-fold.js"></script>
<script src="https://ixscripts.netlify.app/eden/_externals/codemirror/addon/fold/markdown-fold.js"></script>
<script src="https://ixscripts.netlify.app/eden/_externals/codemirror/addon/fold/comment-fold.js"></script>
<script src="https://ixscripts.netlify.app/eden/_externals/codemirror/addon/display/placeholder.js"></script>
<script src="https://ixscripts.netlify.app/_global-externals/scripts/jquery-3.5.1.min.js"></script>

<textarea id="codemirror-highlighter" placeholder="Paste some XML tags here..."></textarea>

<button id='added' class="cbtn">added</button>

<button id='deleted'class="cbtn">deleted</button>

<button id='(a)' class="cbtn">(a)</button>

<button id='(b)' class="cbtn">(b)</button>

<button id='(c)' class="cbtn">(c)</button>

I've seen the documentation and several posts including this: Insert Text at Caret on CodeMirror Textarea

The problem is I'm still learning JavaScript, and can't really follow it all to apply on my code...

That's all. Thank you in advance to anyone who'd be willing to help me move on from this problem.

Answer 1

I've created a function that I hope will help you.. take a look

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://codemirror.net/lib/codemirror.css" rel="stylesheet"/>
<script src="https://codemirror.net/lib/codemirror.js"></script>
<input type="text" id="origin_field" value="NEW TEXT COPIED">
<button onclick="copy('origin_field')">Click to copy</button>
<script>
function copy(id_source)
{

 val_capt = document.getElementById(id_source).value;

var cm = $(".CodeMirror")[0].CodeMirror;
    var doc = cm.getDoc();
    var cursor = doc.getCursor(); // gets the line number in the cursor position
    var line = doc.getLine(cursor.line); // get the line contents
    var pos = {
        line: cursor.line
    };

        doc.replaceRange(val_capt , cursor);

}    
</script>
<BR><BR>
<textarea id="editor" name="editor">insert the cursos where is to insert the text</textarea>
<script>
    var editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
      lineNumbers: true,
  
  

    });
  </script>