Markers shift if there is a maxLines property is set for longer line content · securingsincity/react-ace#392

(1 评论) (0 反应) (0 负责人)JavaScript (3,859 star) (615 fork)batch import

bughelp wanted

描述

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

贡献者指南

技术栈: reactjavascript
领域: frontend
议题类型: bug
难度: 2
预计时间: 1-3 hours
活动状态: stale
清晰度: mostly clear
前置要求: basic Reactfamiliarity with Ace editor
新手友好度: 50
研究方向: 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.