securingsincity/react-ace

Markers shift if there is a maxLines property is set for longer line content

Open

#392 opened on Mar 5, 2018

View on GitHub
 (1 comment) (0 reactions) (0 assignees)JavaScript (3,859 stars) (615 forks)batch import
bughelp wanted

Description

If maxLines is set at a number less than the content of the editor and there are markers set, markers shift on scroll.

Sample code to reproduce your issue

./index.css

body {
  margin: 0;
  padding: 0;
  background-color: #dcdcdc;
  font-family: sans-serif;
}

.added {
  width: 100%!important;
  background-color: #e8ffe8
}

.removed {
  width: 100%!important;
  background-color: #f1c2c2
}

./index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { render } from 'react-dom';
import AceEditor from 'react-ace';
import brace from 'brace';
import 'brace/mode/yaml'
import 'brace/theme/github';

const data = `

-this line got removed
-this line got removed


+this line got added
+this line got added
+this line got added
+this line got added
+this line got added
+this line got added
+this line got added
+this line got added
+this line got added
+this line got added
+this line got added
+this line got added

-this line got removed
-this line got removed
-this line got removed
+this line got added
+this line got added
+this line got added
+this line got added
+this line got added
+this line got added

-this line got removed
`
const markers = [
  {startRow: 1, startCol: 0, endRow: 2, endCol: 2000, type: "background", className: "neutral"},
  {startRow: 1, startCol: 0, endRow: 2, endCol: 2000, type: "background", className: "removed"},
  {startRow: 1, startCol: 0, endRow: 2, endCol: 2000, type: "background", className: "neutral"},
  {startRow: 1, startCol: 0, endRow: 12, endCol: 2000, type: "background", className: "added"},
  {startRow: 1, startCol: 0, endRow: 1, endCol: 2000, type: "background", className: "neutral"},
  {startRow: 1, startCol: 0, endRow: 3, endCol: 2000, type: "background", className: "removed"},
  {startRow: 1, startCol: 0, endRow: 6, endCol: 2000, type: "background", className: "added"},
  {startRow: 1, startCol: 0, endRow: 1, endCol: 2000, type: "background", className: "neutral"},
  {startRow: 1, startCol: 0, endRow: 1, endCol: 2000, type: "background", className: "removed"}
]

class App extends Component {
  render() {
    return (
      <div className="App">
        <h2>Shifting Marker</h2>
        <AceEditor
          mode="yaml"
          theme="github"
          value={data2}
          name="blah1"
          maxLines={20}
          markers={markers2}
          editorProps={{
            $blockScrolling: Infinity
          }}
        />
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Screen record:

shifting_markers

Contributor guide

Tech stack
reactjavascript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
basic Reactfamiliarity with Ace editor
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50
Research direction
The issue occurs when maxLines is set and markers shift on scroll. The reproduction code is provided in index.js and index.css. Examine the react ace component's handling of markers in relation to the Ace editor's scrolling logic when maxLines is applied. Look at the component source code to see how markers are attached and if their positions relative to line numbers change when the editor's visible line range changes due to maxLines. The one comment (if any) might provide clues, but no linked PRs or maintainer response. The fix likely involves computing marker positions based on the actual line offsets after maxLines truncation.