How to change the location of cursor to line 3?

[hihl]

I want to set the location of cursor to line 3, but no method found.

[Viijay-Kr]

Assuming you have atleast 3 lines in your editor you can tell the editor to go to a line no

editor.goToLine(3);

[securingsincity]

@hihl does @Vijayk93 's comment solve your issue?

[MarkH817]

Okay, but is there a way to do that via this React component?

[Viijay-Kr]

@MarkH817 By React Component what do you mean exactly?Editor instance is provided by the ace editor.So moving between lines is a job of the editor rather than ReactAce Component instance.I hope this answered your question

[MarkH817]

The code snippet in the FAQ explaining this solution isn't really simple nor complete. It was at least confusing to me since I've never used "refs" in React before.

The below snippet was essentially all that was needed to do this.

someMethod (lineNumber) {
  this.refs.aceEditor.editor.gotoLine(lineNumber)
}

render () {
  // ...
  return (<AceEditor ref='aceEditor' />)
}

[Viijay-Kr]

@MarkH817 'refs' in React are references to the component instance.React basically will let u add a scope instance using refs so that u can use the members of the component(instance) so to say.In the snippet you added Ace editor is gonna let u use the editor object using the refs 'aceEditor' which is passed as the ref prop.As I mentioned before playing around with current editor session is the job of the editor itself rather than overloading your 'AceEditor' parent component by attaching a ref

[securingsincity]

@MarkH817 I would appreciate any help to make the docs more clear for this. Feel free to open a PR to make it more clear.

[CeoFred]

so what happens when such line does not yet exist?? is there a way to move to the next line??

[caespinozaml]

@securingsincity gotoLine function does not exist in the ref, name change?

[nelsonni]

@caespinozaml Is your question about whether gotoLine has been renamed? The gotoLine function comes from ajaxorg/ace-builds; see ace.d.ts#L879. Not much in the way of documentation about this function is available though. (I would also like to know what happens when the referenced line does not exist.)

[EduardoFromTheFuture]

this.refs.aceEditor.editor.gotoLine(lineNumber)

I couldn't make this work. I have an animation that types the characters in the editor, and I'm looking to make the cursor follow the character that is being typed.

It also says that refs is deprecated :/

Here is the code of my attempt:

import React, {Component} from "react";
import AceEditor from "react-ace";
import 'brace/mode/golang';
import 'brace/theme/xcode';

// time in miliseconds between each printed character:
const ANIMATION_DELAY = 10;
// time in minisecconds before starting the animation:
const DELAY = 10;

const SCRIPT = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`


export default class AnimatedCodeSnippet extends Component {

    constructor(props) {
        super(props);
        this.state = {index: 0, code: SCRIPT, interval: null};
    }

    animate = () => {
        const {interval} = this.state;
        if (interval) clearInterval(interval);
        this.setState(
        {
            index: 0,
            interval: null
        },
        () => {
            setTimeout(() => {
                const intervalNew = setInterval(() => {
                    const {index, code} = this.state;
                    this.setState({index: index + 1, interval: intervalNew}, () => {
                        if (index === code.length) {
                            clearInterval(intervalNew);
                        }
                    });

                }, ANIMATION_DELAY)
            }, DELAY);
        });
    };

    render() {
        const {code, index} = this.state;
        
        return (
            <div>
            {
                <AceEditor ref='aceEditor'
                    onChange={this.refs.aceEditor.editor.gotoLine(index)}
                    animatedScroll={true}
                    scrollPastEnd={false}
                    minLines={14}
                    maxLines={14}
                    fontSize={14}
                    focus={true}
                    showGutter={true}
                    fixedWidthGutter={true}
                    highlightActiveLine={false}
                    showPrintMargin={false}
                    mode="golang"
                    theme="xcode"
                    onLoad={this.animate}
                    name="animated_code_snippet"
                    editorProps={{ $blockScrolling: false }}
                    height="15em"
                    setOptions={{
                        showLineNumbers: true,
                        tabSize: 2,
                        autoScrollEditorIntoView: true,
                    }}
                    wrapEnabled={true}
                    readOnly={true}
                    value={code.substr(0, index)}
                />
            }
            </div>
        )
    }
}

[EduardoFromTheFuture]

this.refs.aceEditor.editor.gotoLine(lineNumber)

@MarkH817 'refs' in React are references to the component instance.React basically will let u add a scope instance using refs so that u can use the members of the component(instance) so to say.In the snippet you added Ace editor is gonna let u use the editor object using the refs 'aceEditor' which is passed as the ref prop.As I mentioned before playing around with current editor session is the job of the editor itself rather than overloading your 'AceEditor' parent component by attaching a ref

But how can I access the editor?? For all I know, all I'm writing about is something like return ({ <AceEditor /> })

[nelsonni]

@PinkFromTheFuture String refs are deprecated for React Components (ref: React Docs), so it seems previous code snippets haven't aged well in this project. If you're worried about what aceEditor.editor is, it's defined here:

react-ace/src/ace.tsx

Line 206 in 2b5451d

this.editor = ace.edit(this.refEditor);

[EduardoFromTheFuture]

For future reference, here is the code showing how I solved this on a nextjs project. I left comments to explain the important bits, baiscally three lines, one setting the variable, one setting the reference and one using the reference:

import React, {Component} from "react";
import AceEditor from "react-ace";
import 'brace/mode/golang';
import 'brace/theme/xcode';

// time in miliseconds between each printed character:
const ANIMATION_DELAY = 10;
// time in minisecconds before starting the animation:
const DELAY = 10;

const SCRIPT = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`


export default class AnimatedCodeSnippet extends Component {

    constructor(props) {
        super(props);
        this.state = {index: 0, code: SCRIPT, interval: null};
        // variable to hold the referenced editor in the component:
        this.aceEditor = React.createRef();
    }

    // the function below shows how to access the editor object refenrenced during execution:
    someExampleFunction(index) {
        // check if the reference exists and place the cursor at the end of the text
        if (this.aceEditor.current) {
            this.aceEditor.current.editor.gotoLine(index)
        }
    }


    animate = () => {
        const {interval} = this.state;
        if (interval) clearInterval(interval);
        this.setState(
        {
            index: 0,
            interval: null
        },
        () => {
            setTimeout(() => {
                const intervalNew = setInterval(() => {
                    const {index, code} = this.state;
                    this.setState({index: index + 1, interval: intervalNew}, () => {
                        if (index === code.length) {
                            clearInterval(intervalNew);
                        }
                    });

                }, ANIMATION_DELAY)
            }, DELAY);
        });
    };

    render() {
        const {code, index} = this.state;
        
        return (
            <div>
            {
                {/* The line below is necessary to allow accessing of the editor */}
                <AceEditor ref={this.aceEditor}
                    onChange={this.refs.aceEditor.editor.gotoLine(index)}
                    animatedScroll={true}
                    scrollPastEnd={false}
                    minLines={14}
                    maxLines={14}
                    fontSize={14}
                    focus={true}
                    showGutter={true}
                    fixedWidthGutter={true}
                    highlightActiveLine={false}
                    showPrintMargin={false}
                    mode="golang"
                    theme="xcode"
                    onLoad={this.animate}
                    name="animated_code_snippet"
                    editorProps={{ $blockScrolling: false }}
                    height="15em"
                    setOptions={{
                        showLineNumbers: true,
                        tabSize: 2,
                        autoScrollEditorIntoView: true,
                    }}
                    wrapEnabled={true}
                    readOnly={true}
                    value={code.substr(0, index)}
                />
            }
            </div>
        )
    }
}