search

uiwjs / react-codemirror

CodeMirror 6 component for React. @codemirror https://uiwjs.github.io/react-codemirror/
https://uiwjs.github.io/react-codemirror/
MIT License
1.69k stars 134 forks source link

Unable to use browser's selection API when text in the editor is long enough #637

Open OmriGLevy opened 8 months ago

OmriGLevy commented 8 months ago

When passing long enough text to the CodeMirror component, it will only create certain DOM elements based on the height of the CodeMirror component, therefore, when the text is too long, using the browser’s Selection API will be impossible since the actual selection will be the virtualized version of the text, and therefore the selection will be truncated. My text is 355 lines long, and contains 18,238 characters. The CodeMirror component wraps the a text area element, the element does contain the full text , I am using "@uiw/react-codemirror": “^4.21.21”. I could did not find anything in the documentation regarding the pattern. when the text is not long everything works fine.

jaywcjlove commented 8 months ago

@OmriGLevy This is the CodeMirror lazy loading feature, providing a smooth user experience for loading lengthy text.

OmriGLevy commented 8 months ago

@OmriGLevy This is the CodeMirror lazy loading feature, providing a smooth user experience for loading lengthy text.

Indeed the virtualisation of the full text is helpful for smoother experience, but when we use the Selection API we do not want to get truncated output. But what would be the solution for using the browser's Selection API on the full text in a correct way ? Right now using the Selection API of the browser will output truncated version of the text. Is there a way to configure internal cursor or manipulate the lazy loading feature?

jaywcjlove commented 8 months ago

@OmriGLevy This is the CodeMirror lazy loading feature, providing a smooth user experience for loading lengthy text.

Indeed the virtualisation of the full text is helpful for smoother experience, but when we use the Selection API we do not want to get truncated output. But what would be the solution for using the browser's Selection API on the full text in a correct way ? Right now using the Selection API of the browser will output truncated version of the text. Is there a way to configure internal cursor or manipulate the lazy loading feature?

@OmriGLevy You can use CodeMirror's selection plugin to address this issue.