securingsincity/react-ace

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

Open

#392 aperta il 5 mar 2018

Vedi su GitHub
 (1 commento) (0 reazioni) (0 assegnatari)JavaScript (615 fork)batch import
bughelp wanted

Metriche repository

Star
 (3859 star)
Metriche merge PR
 (Nessuna PR mergiata in 30 g)

Descrizione

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

Guida contributor