CodeMirror 및 대괄호, CSS가 포함 된 사용자 지정 모드 Quick Edit

Question

Laravel Blade 구문 강조에 대한 지원을 추가하기 위해 Adobe Brackets Extension을 만들고 있습니다.

Blade는 내 확장 프로그램을 사용하지 않고 HTML (더 구체적으로 .php 파일)에서 실행되는 템플릿 시스템입니다. CTRL + E 빠른 편집을 CSS 규칙 이름으로 빠르게 찾아 해당 규칙을 찾습니다. 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 파일을 내 사용자 지정 모드에서 빠른 편집에 대한 지원을 추가 할 수 있습니까?

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

당신의 코드가 각 무시 문자에 대해 한 번 null을 반환 : 그것은 약간 다른 무언가를,

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

가 CodeMirror's overlay mode demo에서 상대 :

Answer 1

나는 문제가 코드의 일부라고 생각합니다 데모는 개의 연속 된 청크 당 1 회만 null을 반환하는 반면 무시 된 문자는입니다.

모든 문자에 대해 개별적으로 반환하면 CodeMirror가 모든 일반 토큰을 별개의 1 문자 토큰으로 분리하는 것으로 보입니다. 대괄호 빠른 편집 코드는이를 인식 할 수 없습니다. 커서가 여기에있는 경우 - cl|ass - CodeMirror는 이름이 "l"인 속성 토큰에 있음을 나타내지 만 대괄호 코드는 "class"라는 속성을 찾습니다.