securingsincity/react-ace

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

Open

#392 aberto em 5 de mar. de 2018

Ver no GitHub
 (1 comment) (0 reactions) (0 assignees)JavaScript (615 forks)batch import
bughelp wanted

Métricas do repositório

Stars
 (3.859 stars)
Métricas de merge de PR
 (Nenhuma PRs mesclada em 30d)

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

Guia do colaborador