Html elements autocomplete tags

hello new user here. But ran into a problem html element autocomplete won’t work for me as i use the following code:

CodeMirror.commands.autocomplete = function h(cm) {

  var doc = cm.getDoc();

  var POS = doc.getCursor();

  var mode = CodeMirror.innerMode(cm.getMode(), cm.getTokenAt(POS).state);

  if (mode == 'html') {

    //html depends on xml          

    CodeMirror.showHint(cm, CodeMirror.hint.html);

  } else if (mode == 'javascript') {

    CodeMirror.showHint(cm, CodeMirror.hint.javascript);

  }else if (mode == 'css') {

    CodeMirror.showHint(cm, CodeMirror.hint.css);

  }else if (mode == 'show') {


  }else if (mode == 'anyword') {

    CodeMirror.showHint(cm, CodeMirror.hint.anyword);



the instance i made is following:

let editor = CodeMirror.fromTextArea(document.querySelector('#editor'), {

    mode: 'htmlmixed',

    theme: 'material-palenight',

    styleActiveLine: true,

    lineNumbers: true,

    lineWrapping: true,

    indentUnit: 2,

    tabSize: 2,

    matchBrackets: true,

    validationEvent: true,

    highlightSelectionMatches: true,

    extraKeys: {

      ".": "autocomplete",

        "F11": function (cm) {

            cm.setOption("fullScreen", !cm.getOption("fullScreen"));


        "Esc": function (cm) {

            if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);


        "Ctrl-J": "toMatchingTag"


    addModeClass: true,

    matchTags: {bothTags: true},

    lineSeparator: "\n",

    activeLine: true,

    indentWithTabs: true,

    smartIndent: true,

    electricChars: true,

    autoCloseTags: true,

    autoCloseBrackets: true,

    alignWithWord: true,

    // foldGutter: true,

    gutters: {

      className: "CodeMirror-foldgutter",

      indicatorOpen: "CodeMirror-foldgutter-open",

      indicatorFolded: "CodeMirror-foldgutter-folded",


    'rulers': 'rulers', `Preformatted text`

    profile: 'xhtml'


kindly check this and let me know where i made the mistake

I don’t know what’s wrong with the code. But you shouldn’t need to build your own language-based dispatch like that, since the default hint source will already use getHelpers to find the appropriate hint function for the active language. Make sure you have all the scripts that implement the hinters loaded, but I assume you already checked that.