`Cursor in ACE Editor jumping to start of the line`

Question

`Cursor in ACE Editor jumping to start of the line`

Having a strange issue with my editor. Every time I type something, it automatically gets reversed because the cursor keeps jumping back to the beginning of the line.

For example, if I type 'Say this', it appears as:

:siht ekil puS

On pressing enter, it becomes:

gniht ot desaerc siht nI

:siht ekil puS

Below is the code for my client side:

const editor = ace.edit("editor");
editor.setTheme("ace/theme/cobalt");
editor.getSession().setMode("ace/mode/javascript");

// Rest of the code goes here...

Spent half an hour trying to resolve this issue :(

javascript html css socket.io ace-editor

Answer 1

Answer №1

editor.setValue() resets the selection, including the caret position, by default. So, it is crucial to consider this when incorporating code:

var currentCode = editor.getValue();
var currentSelection = editor.selection.toJSON();
editor.setValue(currentCode + "\nNewLine");
editor.selection.fromJSON(currentSelection);

You may also need to handle saving and restoring session.getScrollLeft() / session.getScrollTop() values as well as folds using session.getAllFolds().

In collaborative programming scenarios, utilizing deltas with

editor.commands.on("afterExec", handler)

for synchronization rather than solely syncing the editor content is often recommended. I suggest exploring how others typically approach this for more insights.

Answer 2

editor.setValue() resets the selection, including the caret position, by default. So, it is crucial to consider this when incorporating code:

var currentCode = editor.getValue();
var currentSelection = editor.selection.toJSON();
editor.setValue(currentCode + "\nNewLine");
editor.selection.fromJSON(currentSelection);

You may also need to handle saving and restoring session.getScrollLeft() / session.getScrollTop() values as well as folds using session.getAllFolds().

In collaborative programming scenarios, utilizing deltas with

editor.commands.on("afterExec", handler)

for synchronization rather than solely syncing the editor content is often recommended. I suggest exploring how others typically approach this for more insights.

Answer 3

Answer №2

Consider storing the cursor position in a global variable when setting initial json and updating it after editing is completed.

//Global variable to save cursor position.
var cursorPosition = editor.aceEditor.getCursorPosition();

const options = {
            'mode': 'code',
            onChangeText: function (jsonString) {
                //update cursor position
                cursorPosition = editor.aceEditor.getCursorPosition();
                let json = JSON.parse(jsonString.replaceAll("^\"|\"$", ""));
                editor.set(json);
                //set the editor with the new cursor position during initial edit.
                editor.aceEditor.moveCursorToPosition(cursorPosition);
            }
        }

const editor = new JSONEditor(container, options)

Answer 4

Consider storing the cursor position in a global variable when setting initial json and updating it after editing is completed.

//Global variable to save cursor position.
var cursorPosition = editor.aceEditor.getCursorPosition();

const options = {
            'mode': 'code',
            onChangeText: function (jsonString) {
                //update cursor position
                cursorPosition = editor.aceEditor.getCursorPosition();
                let json = JSON.parse(jsonString.replaceAll("^\"|\"$", ""));
                editor.set(json);
                //set the editor with the new cursor position during initial edit.
                editor.aceEditor.moveCursorToPosition(cursorPosition);
            }
        }

const editor = new JSONEditor(container, options)

`Cursor in ACE Editor jumping to start of the line`

Answer №1

Answer №2

Similar questions

MongooseServerSelectionError: encountered ECONNRESET while attempting to read the server selection

Preventing Continuous Scrolling When a Popup Appears

Prevent HTML from being escaped in data-binding while utilizing repeat-templates in Polymer

When the parent div overflows, the child div remains hidden within the boundaries of the parent div

Utilizing the `filterBy` function with a custom select list that changes dynamically

What is the best approach for handling asynchronous responses within a callback function?

Leveraging the jQuery live() function to optimize heavy usage of Ajax on a website

Is it possible to have text links styled, but without any actual hyperlinking?

Utilizing Robot Framework to select CSS attributes

What exactly does the statement if(item.some((item) => !item.available) represent in typescript?

Attempting to retrieve the key of an object nested within a JSON structure

I am facing issues with getting the delete function to properly function in my React

"Exploring the interactivity of touch events on JavaScript

Is Polymer more of a comprehensive framework compared to just a library? What is the best way to implement web components in a modular fashion

What is the best way to ensure that my theme button changer has an impact on all pages throughout my website, not only on the

Utilize MySQL/Javascript to determine percentages

Using JQuery and JavaScript to store and dynamically apply functions

Background image not looping in SQL database filepath

What's the best way to get rid of the one-pixel gap between these elements on high-resolution displays like

Storing images in Firebase using React JS upon form submission