Редактор-декоратор Монако
В прошлой статье (https://medium.com/@lyuda.dzyubinska/monaco-editor-code-lens-provider-133ac9a13f84) мы говорили о том, как использовать CodeLensProvider. Давайте добавим выделение текста на основе нашего предыдущего кода, так как станет более очевидным, какие фрагменты текста использовались для выбора.
Для этого воспользуемся функцией редактора deltaDecorations ( https://github.com/Microsoft/monaco-editor/blob/3acd0a1/monaco.d.ts ):
Новый декоратор включает: диапазон - позиции строк и столбцов и параметры - список, который вы можете найти здесь - https://github.com/Microsoft/monaco-editor/blob/3acd0a1/monaco.d.ts#L1215 . Интерфейс модели:
Это все, что нам нужно знать, чтобы приступить к практической реализации. Изменения должны быть внесены в функцию componentDidMount
Во-первых, давайте установим пустой массив в качестве значения по умолчанию для переменной decorator. Создайте новый объект (первый декоратор должен покрывать область от начала строки до начала нового текста) и назначьте ему класс, который будет окрашивать фон в зеленый цвет, аналогично тексту, полученному при вводе.
В результате появляются две выделенные области, которые делают выбор более очевидным.
Полный пример кода вы можете найти здесь - https://github.com/lyudad/content-compare-monaco-editor
В нашем следующем примере мы рассмотрим добавление команд в контекстное меню редактора.
