Adding starter text - how do I make custom 'default' text editable?

[rlyfun]

I have another query; I have a bunch of texts loaded up under a node.json

Which looks like this:

node: [{"id": "some id",
"content": "long text here"}, ... ]

I have this script that takes the content of the node and loads it as the default text for the code editor.

        const codeMirrorLine = document.querySelector('.CodeMirror-code');

        if (lastNode) {
          codeMirrorLine.innerHTML = '';

          const editorLine = document.createElement('pre');
          editorLine.className = 'CodeMirror-line';

          const editorContent = document.createElement('span');
          editorContent.style.paddingRight = '0.1px';
          editorContent.textContent = lastNode.content;

          codeMirrorLine.appendChild(editorLine);
          editorLine.appendChild(editorContent);
        } else {
          codeMirrorLine.textContent = '';
        }

However, the text is uneditable, and when I enter a new text it replaces whatever default text was loaded.

What part of the cursor / editor element should I edit in addition to creating the custom 'pre' elements in order to load the node Contents by default, and also make them a part of the editable text?