Search code examples
codemirror

Codemirror 3 multiplexing modes using simpleHint


So I'm trying to make an SCXML editor which is basically XML (state machine) with JavaScript blocks in it. I'm close, but I'm having trouble adding hints. It seems to boil down to I don't know the editing mode I'm in when it comes time to hint. I've looked in the CodeMirror object for clues but I'm not seeing it. I'm doing the multiplexing like so:

CodeMirror.defineMode("scxml", function (config) {
    return CodeMirror.multiplexingMode(
      CodeMirror.getMode(config, "text/xml"),
      {
          open: "<script>", close: "</script>",
          mode: CodeMirror.getMode(config, "text/javascript"),
          delimStyle: "delimit"
      }
    );
});

editorXml = CodeMirror.fromTextArea(document.getElementById("editXmlFile"), {
    lineNumbers: true,
    mode: 'scxml',
    indentUnit: 4,
    autoCloseTags: true,
    matchBrackets: true,
    extraKeys: {
        "'>'": function (cm) { cm.closeTag(cm, '>'); },
        "'/'": function (cm) { cm.closeTag(cm, '/'); },
        "' '": function (cm) { CodeMirror.xmlHint(cm, ' '); },
        "'<'": function (cm) { CodeMirror.xmlHint(cm, '<'); },
        "Ctrl-Space": function (cm) { CodeMirror.xmlHint(cm, ''); }
    }
});

Note in the extraKeys where the XML hinting is working, how do I get the JavaScript hinting in there? From the JavaScript hinting help, it appears I'd do something along the lines of:

  CodeMirror.commands.autocomplete = function(cm) {
    CodeMirror.simpleHint(cm, CodeMirror.javascriptHint);
  }

  ... extraKeys: {"Ctrl-Space": "autocomplete"} ...

But either way, I need to know the mode I'm in (XML or JavaScript) to know to use simpleHint versus xmlHint. Anyone know how this might be done?

EDIT: cm.getMode().name and cm.getOption('mode') just return scxml when I'm in either section

Thanks!


Solution

  • I think you should be able to dispatch on CodeMirror.innerMode(cm.getMode(), cm.getTokenAt(POS).state).mode.name, where POS is the {line, ch} position that you're interested in. It will return a name like "xml" or "javascript", describing the inner mode at that position.