CodeMirror and Brackets, Custom Mode with CSS Quick Edit

Question

I'm making a Adobe Brackets Extension to add support for Laravel Blade syntax highlight.

Blade is a template system that runs on top of HTML (more specifically a .php file), without my extension active I can do CTRL+E Quick Edit on a css rule name to quickly find that rule on the stlye.css file. But when I activate the extension, the CTRL+E is not working anymore, but the HTML syntax is working perfectly.

I'm using overlay mode over text/html.

Here is the main.js extension code:

define(function (require, exports, module) {
    'use strict';

    var LanguageManager = brackets.getModule("language/LanguageManager");


    CodeMirror.defineMode("laravelblade", function (config, parserConfig) {
        var mustacheOverlay = {
            token: function (stream, state) {

                var ch;

                //Highlight Comments {{-- --}}
                if (stream.match("{{--")) {
                    while ((ch = stream.next()) != null)
                        if (ch == "}" && stream.next() == "}") break;
                    stream.eat("}");
                    return "comment";
                }
                //--

                //Highlight {{ $var }})
                if (stream.match("{{")) {
                    while ((ch = stream.next()) != null)
                        if (ch == "}" && stream.next() == "}") break;
                    stream.eat("}");
                    return "def";
                }

                //Highlight {% $var %} (Laravel 5)
                else if (stream.match('{%')) {
                    while ((ch = stream.next()) != null)
                        if (ch == "%" && stream.next() == "}") break;
                    stream.eat("}");
                    return "def";
                }

                //Highlight {% $var %} (Laravel 5)
                else if (stream.match('{%')) {
                    while ((ch = stream.next()) != null)
                        if (ch == "%" && stream.next() == "}") break;
                    stream.eat("}");
                    return "def";
                }

                //Return Null if no condition was met.
                else if (stream.next() != null) {
                    return null;
                }
            }
        };
        return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || "php"), mustacheOverlay);
    });


    LanguageManager.defineLanguage("laravelblade", {
        "name": "Laravel Blade",
        "mode": "laravelblade",
        "fileExtensions": ["blade.php"],
        "blockComment": ["{{--", "--}}"]
    });
});

The real question is: How can I add support for Quick Edit on my custom mode and *blade.php files?

Answer 1

I think the problem is this part of your code:

            else if (stream.next() != null) {
                return null;
            }

Looking at CodeMirror's overlay mode demo, it does something slightly different:

  while (stream.next() != null && !stream.match("{{", false)) {}
  return null;

Your code is returning null once for each ignored character, while the demo is only returning null once per contiguous chunk of ignored characters.

Returning separately for every character seems to make CodeMirror break up all of its normal tokens into separate one-char tokens, which the Brackets Quick Edit code can't recognize -- e.g. if your cursor is here - cl|ass - CodeMirror says it's in an attribute token where the name is just "l", while the Brackets code is looking attributes named "class".