javascriptreactjsace-editorreact-ace

React Ace editor marker highlight the whole line even startCol and endCol defined to limit the columns

I use the following code to display an Ace editor and highlight a text range.

JS:

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

React render() :

    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;
}

With this code, editor highlights the whole line 6 and 7 without limiting the highlight to column 5 - 6.

enter image description here What is the correct way to highlight just a part of the line without highlighting the whole line?

Solution

  • In my case, this was due to a bad custom CSS overriding the left and width values of the marker layer.

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