CodeMirror content outside of 'editor'

Question

First of all, heres an image of the issue: image with problem highlighted

Relevant HTML and JS: https://pastebin.com/hRhB81rg https://pastebin.com/b2VT7BLe

var zwspSupported
function zeroWidthElement(measure) {
  if (zwspSupported == null) {
    var test = elt("span", "\u200b")
    removeChildrenAndAdd(measure, elt("span", [test, document.createTextNode("y")]))
    if (measure.firstChild.offsetHeight != 0)
      { zwspSupported = test.offsetWidth <= 1 && test.offsetHeight > 2 && !(ie && ie_version < 8) }
  }
  var node = zwspSupported ? elt("span", "\u200b") :
    elt("span", "\u00a0", null, "display: inline-block; width: 1px; margin-right: -1px")
  node.setAttribute("cm-text", "")
  return node
}

This part of codemirror.js (supplied by codemirror) is whats returning the 'y' character that can be seen at the very right hand side. Line numbers etc etc arent being displayed on the editor, rather to the very right off of it. I had it working perfect previously, and (sadly) dont have any previous versions that did work (I've learned that lesson now). Hoping someone can spot my issue here. Chrome Console shows no error, no 404's etc. Tried redownloading CodeMirror

Answer 1

I was running into this exact same issue. How I fixed it was I double checked my imports and made sure that I was importing the correct JS and CSS files. I was missing the main codemirror.js and codemirror.css files that are located in the lib directory. Those imports are pretty important.

My imports looked like this:

import CodeMirror from 'codemirror';
import 'codemirror/lib/codemirror';
import 'codemirror/mode/xml/xml';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/darcula.css';
window.CodeMirror = CodeMirror;

Of course if you are importing your stuff directly into the HTML file it would look something like this:

<link href='./lib/codemirror/lib/codemirror.css' rel='stylesheet'>
<link href='./lib/codemirror/theme/darcula.css' rel='stylesheet'>

And the JavaScript:

<script src='./lib/codemirror/lib/codemirror.js'></script>
<script src='./lib/codemirror/mode/xml/xml.js'></script>