Редактор Monaco предотвращает расширение линейных украшений

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

Например, когда я создаю редактор Monaco (в React) и создаю экземпляр оформления линии с помощью следующего кода: `js

import { createStyles } from "@mantine/styles";
import Editor from "@monaco-editor/react";
import monaco from "monaco-editor/esm/vs/editor/editor.api";
import { useRef, useState } from "react";

const DecoratedEditor = () => {
    const { classes } = useStyles();

    const [code, setCode] = useState(`#include <iostream>
using namespace std;

//press enter on my end to see decoration expand

int main() {
    cout << "Hello World!";
    return 0;
}`);

    const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);

    return (
        <Editor
            value = {code}
            language = "cpp"
            theme = "vs-dark"
            onChange = {(newValue) => {
                if (!newValue) return;
                setCode(newValue);
            }}
            beforeMount = {(monaco) => {}}
            onMount = {(editor, monaco) => {
                editorRef.current = editor;

                editor.getModel()?.deltaDecorations(
                    [],
                    [
                        {
                            range: new monaco.Range(4, 1, 4, 47),
                            options: {
                                inlineClassName: classes.lineDecoration,
                            },
                        },
                    ]
                );
            }}
            height = {400}
        />
    );
};
export default DecoratedEditor;

const useStyles = createStyles((theme) => {
    return {
        lineDecoration: {
            width: "10px !important ",
            backgroundColor: "rgb(255, 0, 0, 0.4)",
        },
    };
});

Я получаю следующий вывод: Обычный редактор с обычным оформлением

Но, если я нажму "Enter" в конце украшения в строке 4 и напишу в следующей строке, то я получаю это: Новое украшение

Есть ли способ предотвратить расширение украшения? Спасибо.

Я уже искал варианты в документации редактора Monaco, чтобы этого не произошло, но я не нашел ничего, что могло бы удовлетворить мои потребности.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
57
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я был там.

Это также поможет вам выполнить работу.

То есть

stickiness: 1

В вашем случае вы можете добавить еще один вариант в список.

options: {
    inlineClassName: classes.lineDecoration,
    stickiness: 1
}

липкость 1 это AlwaysGrowsWhenTypingAtEdges

/**
* Describes the behavior of decorations when typing/editing near their edges.
* Note: Please do not edit the values, as they very carefully match `DecorationRangeBehavior`
*/

export enum TrackedRangeStickiness {
     AlwaysGrowsWhenTypingAtEdges = 0,
     NeverGrowsWhenTypingAtEdges = 1,
     GrowsOnlyWhenTypingBefore = 2,
     GrowsOnlyWhenTypingAfter = 3
}

На всякий случай фрагмент кода выглядит так (вы можете использовать его по своему усмотрению):

decorations = editor.deltaDecorations([],
            [
                {
                    range: new monaco.Range(1, 1, 4, 4),
                    options: {
                        stickiness: 1,  // NeverGrowsWhenTypingAtEdges
                    }
                }
            ])
        }

Другие вопросы по теме