CodeMirror value is correct, but not displaying

I have been messing with this for the last day and I am out of ideas. If I do a reload on the page, the file comes through fine in code mirror, however on load, it will only show the default text in my text area. I am implementing a file “swapper” I change the url to reflect which file I am in for other parts of my application and would prefer to not have to rely on a page refresh.

The first file loaded always works fine, however when I switch I see nothing but the text in my html text area, even though when I run a getValue() on my code mirror, it is correct.

// Load code - called on page load, and when I load new file
      vm.loadCode = function (data)  {
          vm.myCodeMirror.setValue(data);
          vm.refreshCodeView();
      }

// Refresh
      vm.refreshCodeView = function () {
          $timeout(function () {
                vm.myCodeMirror.refresh();
                console.log(vm.myCodeMirror.getValue()); //this shows the correct data
          }, 100);
      }

Here is my options if that has anything to do with it…

// My Code Mirror
vm.mode = getMode();
          var codeMirrorOptions = {
              mode: vm.mode,
              lineNumbers: true,
              lineWrapping: true,
              theme: 'default',
              autoFocus: true,
              foldGutter: true,
              json: (vm.mode == "application/json"),
              lint: (vm.mode == "application/json"),
              extraKeys: {
                "Ctrl-Q": function(cm)
                { 
                  cm.foldCode(cm.getCursor());
                }
              },
              gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"]
              
          };
          vm.myCodeMirror = CodeMirror.fromTextArea(document.getElementById('html-code-view'), codeMirrorOptions);

          vm.myCodeMirror.setSize("100%", "100%");


My text area

<div id="html-codeview-content" class="row">
			 <p>
                <textarea style="overflow: scroll" id="html-code-view" >
                    Will be replaced by file contents...
                </textarea>
			</p>
	   </div>
1 Like

CodeMirror.fromTextArea doesn’t save changes back to the textarea during editing, since that’s too expensive for big documents. You can call the editor’s save method to force a save.