Text inserts/deletions/new lines are not performed where cursor is indicated

[ssolders]

I've wrapped Brace in a component in my Vue app and get a weird behaviour (I got the same behaviour when I tried the vue-wrapper https://www.npmjs.com/package/vue2-brace-editor).

When my component has mounted, I setup my brace editor according to documentation:

var ace = require('brace');
require('brace/mode/json');
require('brace/theme/chrome');

const AceEditorWrapper = {
    name: 'ace-editor-wrapper',
    mounted() {
        var editor = ace.edit('ace-editor-container');
        editor.setOptions({
            theme: 'ace/theme/textmate',
            mode: 'ace/mode/json'
        });

        const json = {
            test1: 'lorem ipsum dolor name',
            test2: 'consectetur adipiscing elit. Donec ut interdum risus',
        }

        editor.setValue(JSON.stringify(json, null, 4))
    },
    render: function (h) {
        return (
            <div id='ace-editor-container' style='height: 600px; width: 100%;'  />
        )
    }
}

export default AceEditorWrapper

Everything looks correct but when I start editing my json the following behavior occurs:

• I've tried using another mode (javascript, java, html), same problem.
• The mode is working, I get different syntax highlighting when switching
• I'm at 100% browser zoom
• I use Chrome, same behaviour in FF + Safari
• Same behaviour when not formatting my json in the stringify method (null, 4)
• Have tried mixturing with tab-size, wrapModes

[ssolders]

Okay so a nights sleep did the job. Was using a web-font that wasn't Monospaced.

Switching to a monosized font like Time new roman does the job:

font-family: "Times New Roman", Times, serif

[kate-hall]

If anyone else is finding this, it pointed me in the direction of setting this:

    font-feature-settings: normal;

I had ligatures turned on for my whole project, which was affecting even the monospaced font and causing a similar issue to OP's.