codemirror.setOption('mode',val) isnt working

Question

I am trying to make a text editor with firepad and codemirror, everything works perfectly on page loading, but when I try to change the mode on button click, the function gets called but

codemirror.setOption('mode',val);//should change mode
CodeMirror.autoLoadMode(editor, mode);//should reload codemirror

doesn't seem to work. I am calling the following code on the onload event of the body (works perfectly):

var firepadRef = getExampleRef();
codeMirror = CodeMirror(document.getElementById('firepad-container'), {
    lineNumbers: true,
    mode: 'javascript'
});
var firepad = Firepad.fromCodeMirror(firepadRef, codeMirror, {
    defaultText: '// Welcome'
});

function getExampleRef() {
  var ref = database.ref('Firepad');
  var hash = window.location.hash.replace(/#/g, '');
  if (hash) {
    ref = ref.child(hash);
  } else {
    ref = ref.push(); // generate unique location.
    window.location = window.location + '#' + ref.key;
  }
  if (typeof console !== 'undefined') {
    console.log('Firebase data: ', ref.toString());
  }
  return ref;
}

on button click event I am calling the following code (problem here!):

console.log('Button Clicked');
CodeMirror.modeURL = "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.0/mode/%N/%N.js";
var editor = CodeMirror(document.getElementById('firepad-container'), {
  lineNumbers: true
});
console.log("started changing");
var val ="xml",mode,spec;
mode=spec=val;
editor.setOption("mode", spec);//isn't changing mode!!
CodeMirror.autoLoadMode(editor, mode);//isn't reloading editor!!

This is just a miniaturized sample of the code (the relevant one).

I am using as a resources for the mode reloading and for firebase with codemirror the following:

https://firepad.io/docs/

https://codemirror.net/demo/loadmode.html#

Scripts and stylesheets being called are the following (the relevant ones only):

<link rel="stylesheet" href="codemirror-dark.css">
<link rel="stylesheet" href="https://cdn.firebase.com/libs/firepad/1.4.0/firepad.css">

<script src="https://www.gstatic.com/firebasejs/5.0.4/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.2.0/firebase-database.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.0/codemirror.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.0/addon/mode/loadmode.js"></script>
<script src="https://cdn.firebase.com/libs/firepad/1.4.0/firepad.min.js"></script>

I am using Firefox and there is no errors on the developper console(it is just neither changing nor reloading). So what am I missing ?? Thanks in advance.

Answer 1

codemirror doesn't accept "xml" as a mode type. What you're looking for is "application/xml" or "text/xml".

according to the documentation on CodeMirrors site, you need to call codemirror.findModeByExtension on your filename string's extension to get an info object. You call CM_OBJ.setOption("mode",info.mime) first, then CodeMirror.autoLoadMode(editor,info.mode) if you want to use simpler and less specific typing strings.

this works for me on firefox and chrome from the inspect page. source: https://codemirror.net/demo/loadmode.html