CodeMirror 和括号，使用 CSS 快速编辑的自定义模式

Question

我正在制作一个 Adob​​e Brackets 扩展来添加对 Laravel Blade 语法高亮的支持。

Blade 是一个在 HTML（更具体地说是 .php 文件）之上运行的模板系统，如果没有激活我的扩展，我可以在 css 规则名称上执行 CTRL+E Quick Edit 快速查找stlye.css 文件中的该规则。 但是当我激活扩展时，CTRL+E 不再工作了，但 HTML 语法工作正常。

我在 text/html 上使用覆盖模式。

这是 main.js 扩展代码：

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": ["{{--", "--}}"]
    });
});

真正的问题是： 如何在我的自定义模式和 *blade.php 文件上添加对快速编辑的支持？

Answer 1

我认为问题在于您的这部分代码：

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

看看CodeMirror's overlay mode demo，它做的事情略有不同：

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

您的代码为每个被忽略的字符返回一次 null，而演示只为每个 连续块 的被忽略字符返回一次 null。

为每个字符单独返回似乎使 CodeMirror 将其所有正常标记分解为单独的单字符标记，括号快速编辑代码无法识别 - 例如如果您的光标在这里 - cl|ass - CodeMirror 说它位于名称只是“l”的属性标记中，而括号代码正在查找名为“class”的属性。