New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Cannot dynamically select code #509
Comments
I also have this problem. currently resolved to calling dispatch 2x and with a delay const onChange = (e: any, editorContent: string) => {
for (let i = 0; i < 2; i++) {
setTimeout(() => {
if (!codeMirrorRef.current) return
// ...calculate ranges
codeMirrorRef.current.view?.dispatch({
selection: EditorSelection.single(charactersBeforeCount, charactersBeforeCount + charactersInsideCount),
scrollIntoView: true,
})
}, 200 * i)
}
} |
@tonisives @guillermoamaral https://codesandbox.io/s/react-codemirror-example-codemirror-6-https-github-com-uiwjs-react-codemirror-issues-314-w64xo4 import React, { useRef, useState } from "react";
import CodeMirror from "@uiw/react-codemirror";
import { javascript } from "@codemirror/lang-javascript";
export default function App() {
const $edit = useRef();
const [val, setVal] = useState("console.log('hello world!');");
const onChange = React.useCallback((value, viewUpdate) => {
console.log("value:", value);
}, []);
const onRefChange = () => {
$edit.current.view.dispatch({
changes: { from: 0, to: 12, insert: "test" + new Date() }
});
};
return (
<div>
<button onClick={() => setVal("Time: " + new Date())}>
Change Value
</button>
<button onClick={onRefChange}>Ref Change Value</button>
<CodeMirror
value={val}
ref={$edit}
height="200px"
theme="dark"
extensions={[javascript({ jsx: true })]}
onChange={onChange}
/>
</div>
);
} |
Hi, Thanks for the response @jaywcjlove but I don't see how this can solve the problem. In my case, the component has 2 properties I tried what @tonisives did and it works but I'm not happy either. Thanks in advance! |
@guillermoamaral You can use https://codemirror.net/docs/ref/#state.Transaction.selection |
Hi,
I'm implementing a debugger for which I need to select a portion of the code dynamically: essentialy whenever the user steps over the code I need to select the sentence to be executed. Here is the editor rendering code:
where
source
is part of the state.The component is provided with a 'selectedRange' prop, and it works fine except for the first time. Since there is no option to set the selection in the same way as the value, I have to manage it somewhere else: I did it in componentDidUpdate thinking (naively perhaps) that I needed to have the value updated in order to apply the new selection. Concretely, I have this function:
and I call it from componentDidUpdate.
The point is when selectRange is called, the value of the editor hasn't change yet... it changes a bit after, so the range can fall ouside of the (previous) value.
For example, lets suppose that the current code is:
And the the user changes to a frame (remember that it is a debugger, with a call stack with different frames/methods) where the new code is:
and the selection in the new code should be [anchor: 54, head: 75].
The render call will set the value to the new code but then when componentDidUpdate is called, it will try to apply the selection to the current value (....viewState.state.doc), which is still the previous code, and then the selection transaction will fail.
Any suggestion? Any other way to manage the selection in a "controlled" way?
The text was updated successfully, but these errors were encountered: