Настройка Sora Editor

Привет, Хабр

В статье хочу показать как настроить SoraEditor от Resomoe. А конкретно то цветовую схему, язык и простые сниппеты. Так как я не нашел статей по этой теме, а также оффициальная документация в некоторых местах противоречива и не доделана, я решил написать данную статью. Весь код в статье будет на Java.

Про tree sitter и другие прелести с кодом писать не буду, так как об этом хорошо написано в документации.

Сайт документации.

Подключение...

Для начало добавляем библиотеку в зависимости.

Gradle

dependencies {
  implementation(platform("io.github.Rosemoe.sora-editor:bom:0.23.4"))
  implementation("io.github.Rosemoe.sora-editor:editor")
  implementation("io.github.Rosemoe.sora-editor:language-textmate")
}

Maven

<dependencies>
  <dependency>
    <groupId>io.github.Rosemoe.sora-editor</groupId>
    <artifactId>bom</artifactId>
    <version>0.23.4</version>
    <type>pom</type>
    <scope>import</scope>
  </dependency>
  <dependency>
    <groupId>io.github.Rosemoe.sora-editor</groupId>
    <artifactId>editor</artifactId>
  </dependency>
  <dependency>
    <groupId>io.github.Rosemoe.sora-editor</groupId>
    <artifactId>language-textmate</artifactId>
 </dependency>
</dependencies>

Нам понадобятся только эти базовые зависимости, где находится сам редактор, и textmate для подсветки синтаксиса.

Далее, обезательно ставим версию JDK 17 или выше, в файле app/build.gradle.

Также, если мы хотим хранить сниппеты в JSON как и остальной кинфиг редактора, нам понадобится библиотека Gson. Она создна для сериализации и десериализации обьектов JSON.

gradle

dependencies {
  implementation 'com.google.code.gson:gson:2.11.0'
}

Maven

<dependency>
  <groupId>com.google.code.gson</groupId>
  <artifactId>gson</artifactId>
  <version>2.11.0</version>
</dependency>

Можем синхронизировать проект.

Создание обьекта редактора

Я буду делать все через код, как создать редактор в разметке смотрите в оффициальной документации. Мой редактор будет как корневой элемент активности.

CodeEditor editor;

// onCreate(Bundle)
editor = new CodeEditor(this);
setContentView(editor);

Также, переопределяем метод onDestroy, и в нем вызываем метод release() для освобождения ресурсов.

@Override
public void onDestroy() {
  super.onDestroy();
  editor.release();
}

Подсветка синтакиса & язык

Если вам нужна абстрактная подсветка, сниппеты и тема для Java, то можете подключить модуль language-java. Далее использовать его так, если вам нужен другой язык, и больше гибкости, то можете читать статью дальше. Примео использования language-java

editor.setEditorLanguage(new JavaLanguage());

Создаем такое дерево файлов и папок в ассетах:

.
└─ textmate
   ├─ lua
   │  ├─ lua.tmLanguage.json
   │  └─ language-configuration.json
   ├─ langs.json
   └─ dercula.json // схема

Язык и тему, можно можно выбрать любую, но она должна создана именно для textmate, в формате JSON. Вы также сами можете делать темы и языки в ручную.

Вы можете как вам угодно размещать папки и файлы, главное не забыть поменять пути на новые в файле langs.json.

Пример textmate/langs.json:

{
  "languages": [
    {
      "grammar": "textmate/lua/lua.tmLanguage.json",
      "name": "lua",
      "scopeName": "source.lua",
      "languageConfiguration": "textmate/lua/language-configuration.json"
    }
  ]
}

А, ну и все необходимые ресурсы можете скачать сдесь: VSCode Extensions.

Цветовая схема редактора

Я сразу предоставлю код который будет настраивать схему, так как в документации об этом подробно написано. Предоставлю в качестве метода.

public static void initSchemes(Context context) {
  FileProviderRegistry.getInstance()
    .addFileProvider(new AssetsFileResolver(context.getAssets()));
  var themeRegistry = ThemeRegistry.getInstance();
  String name = "darcula";
  String themeAssetsPath = "textmate/" + name + ".json";
  ThemeModel model =
    new ThemeModel(
      IThemeSource.fromInputStream(
        FileProviderRegistry.getInstance()
          .tryGetInputStream(themeAssetsPath),
        themeAssetsPath,
      null),
  name);
  try {
    themeRegistry.loadTheme(model);
  } catch (Exception err) {
    err.printStackTrace();
  }
  GrammarRegistry.getInstance().loadGrammars("textmate/langs.json");
}

Далее нужно установить собственно тему и язык в редактор. Так как там очень мало кода, помещу в 1 фрагмент.

// устанавливаем тему
ThemeRegistry
  .getInstance()
  .setTheme("Darcula");

// устанавливаем язык
String languageScopeName 
  = "source.lua";
try {
  TextMateLanguage language = 
    new TextMateLanguage(languageScopeName);
  editor.setEditorLanguage(language);
} catch (Exception e) {
  e.printStackTrace();
}

Сниппеты

Этого в документации вобще нет, так что думаю будет трудновато самому об этом узнать. Сделаем простейшие сниппеты, а далее можно самому разбираться, так как у SoraEditor открытый исодный код на гитхабе.

Для начало создадим файл snippets.json, со следующим содержанием.

[
  {
    "prefix": "var",
    "body": [
      "local a = 0"
    ],
    "description": "create variable",
    "length": 3
  }
  // Другие сниппеты
]

На самом деле вы можете сделать любую свою структуру сниппета, так, как вам будет удобно. Я буду ориентировать именно на такую структуру.

Далее создадим наследник класса TextMateLanguage, я назову его TML, пример кода:

public class TML extends TextMateLanguage {
  private String scope;

  public TextMateLanguage(String scopeName) {
    super(
      GrammarRegistry.getInstance().findGrammar(scopeName),
      GrammarRegistry.getInstance().findLanguageConfiguration(scopeName),
      GrammarRegistry.getInstance(),
      ThemeRegistry.getInstance(),
      true);
    scope = scopeName;
  }
}

Что за что отвечает можете посмотреть в исходниках в модуле textmate.

Переопределяем метод requireAutoComplete:

public class TML extends TextMateLanguage {

  // ... конструктор
  
  @Override
  public void requireAutoComplete(
    ContentReference content,
    CharPosition position,
    CompletionPublisher publisher,
    Bundle extraArguments) {
    super.requireAutoComplete(content, position, publisher, extraArguments);
    
    for (SnippetReader.Snippet s : SnippetReader.read(context, "lua")) {
      publisher.addItem(
        new SimpleCompletionItem(
          s.prefix, 
          s.description, 
          s.length, 
          s.text)
      );
    }
    CompletionHelper.computePrefix(content, position, MyCharacter::isJavaIdentifierPart);
    }
}

SnippetReader - кастомный класс для чтения сниппетов из ассетов. Немного позже разберем этот класс.

Будем делать сниппеты с помощью обьекта pulisher и класса SimpleComplectionItem, у него довольно много конструкторов, мы будем использовать такой:

SimpleCompletionItem(
  label, 
  desc, 
  prefixLength, 
  textToInsert)

Остальное можете просто скопировать.

Класс SnippetReader

Вобщем не вижу смысла тянуть, сразу дам код. Если что, для чтения ассетов использую свою библиотеку под названием Assets++.

public class SnippetReader {
  public static Snippet[] read(Context c, String langName) {
    String json =
      Assets.from(c).asset(
        String.format(
          "textmate/%s/snippets.json", 
          langName))
      .readAsset();
    Type snippetsListType = new TypeToken<Snippet[]>() {}.getType();
    Snippet[] snippets = new Gson().fromJson(json, snippetsListType);
    for(Snippet s : snippets) {
      s.text = String.join("n", s.body);      
    }
    return snippets;
  }

  public static class Snippet {
    @SerializedName("prefix")
    public String prefix;

    @SerializedName("body")
    public String body;

    @SerializedName("description")
    public String description;

    @SerializedName("length")
    public int length;

    public String text;
  }
}

Завершение

По итогу, мы настроили тему для редактора, язык а также простые сниппеты. Вопросы, поправки, предложения пишите ниже.