Matching HTML tags in custom overlay htmlmixed mode

Greetings,

I have been trying to enable tag matching using this example with custom overlay mode on htmlmixed and usnig matchTags: {bothTags: true} in the editor initialisation settings, however I am not able to get it to work with my custom mode,

const cmInitialSettings = {
          value:"",matchTags: {bothTags: true}, autoCloseTags:true,
          extraKeys: {"Ctrl-Space": "autocomplete", "Ctrl-/": "toggleComment", "Ctrl-J": "toMatchingTag"},
          lineNumbers: true, styleActiveLine: true,
          matchBrackets: true, tabSize:2, lineWrapping: true, addModeClass: true,
          foldGutter: true, autofocus:false,
          gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
        }
const cme = CodeMirror(document.getElementById("cf7-codemirror"),cmInitialSettings);
CodeMirror.defineMode("shortcode", function(config, parserConfig) {
        let scOverlay = {
          token: function(stream, state) {
            let ch;
            if (stream.match(/^\[([a-zA-Z0-9_]+)\*?\s?/)) {
              while ((ch = stream.next()) != null){
                if (ch == "]" ) {
                  //stream.eat("]");
                  return "shortcode";
                }
              }
            }else if(stream.match(/data-([a-z0-9_]+)/)){
              while ((ch = stream.next()) != null){
                if (ch == '=' ) {
                  //stream.eat("]");
                  return "cf7sg-attr";
                }
              }
            }
            while (stream.next() != null && !stream.match(/^\[([a-zA-Z0-9_]+)\*?\s?/, false) && !stream.match(/data-([a-z0-9_]+)/,false) ) {}
            return null;
          }
        };
        return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || "htmlmixed"), scOverlay);
      });

cme.setOption('mode','shortcode');

Any idea how I can get the tags to match/highlight?

So I finally got the matching HTML elements to work, and the issue in unrelated to the custom mode.

I load my Codemirror instance using an inline script var at the time of page load in order customise the initial options on the server side,

<?php

wp_add_inline_script('cf7-codemirror-js',
        'const cmInitialSettings = {
          value:"",autoCloseTags:true,
          extraKeys: {"Ctrl-Space": "autocomplete", "Ctrl-/": "toggleComment", "Ctrl-J": "toMatchingTag"},
          lineNumbers: true, styleActiveLine: true,
          matchBrackets: true, tabSize:2, lineWrapping: true, addModeClass: true,
          foldGutter: true, autofocus:false,
          gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
        }
        const codeMirror_5_32 = CodeMirror(document.getElementById("cf7-codemirror"),cmInitialSettings);
     ');

//I enqueue all the requires js/css files as well

?>

In my js file, I load the instantiated codemirror object,

(function( $, cme ) {
  ...
  //I need to set the matchtags option after instantiation to make it work,
  cme.setOption('matchTags', {bothTags: true});
  ...
})( jQuery, codeMirror_5_32)

The reason it was not working previously is because I was instantiating the CodeMirror object with the ‘MatchTags’ option before the matchtags.js dependency functionality was loaded. The code loads funcitonality that gets executed on the option at initialisation, and therefore this code was being loaded after my object.

using setOption() function to configure the CodeMirror instance after initialisation allows this dependecy functionality to be loaded prior to loading HTML content into the editor… et voila!