Маркер редактора React Ace выделяет всю строку, даже startCol и endCol, определенные для ограничения столбцов

Я использую следующий код для отображения редактора Ace и выделения диапазона текста.

JS:

let markers = [];
markers.push({startRow: 6, startCol: 5, endRow: 7, endCol: 6, className: 'replacement_marker', type: 'text' });

Реагировать на рендер():

    return (
        <div>
            <AceEditor
                mode="java"
                theme="github"
                name="UNIQUE_ID_OF_DIV"
                value={this.state.value}
                markers={markers}
            />
        </div>
    );

CSS:

.replacement_marker {
   position: absolute;
   background-color: #FFFF00;
}

С помощью этого кода редактор выделяет всю строку 6 и 7, не ограничивая выделение столбцами 5–6.

введите здесь описание изображения Как правильно выделить только часть строки, не выделяя всю строку?


reactjs javascript ace-editor react-ace
person Prasad    schedule 01.10.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

В моем случае это произошло из-за плохого пользовательского CSS, переопределяющего значения левой стороны и ширины слоя маркера.

.ace_marker-layer {
  > div:not(.ace_selection){
    width: 100% !important;
    border-radius: unset !important;
    left: 0 !important;
  }
}
person Prasad    schedule 01.10.2018