Skip to content

ace.js: placing a red dot when clicking "enter" #5423

Closed
@arLevi

Description

@arLevi

Describe the bug

This is the options i'm using for loading the editor

<div id="editor"></div>
<script>
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/monokai");
        editor.setOptions({
            useWorker: false,
            highlightActiveLine: true,
            rtl: true,
            rtlText: true,
            enableBasicAutocompletion: false,
            enableSnippets: false,
            enableLiveAutocompletion: false,
            fontSize: "20px",
            showPrintMargin: false,
            showGutter: false,

        })
        editor.session.setMode("ace/mode/javascript");
    </script>

When I click "enter" a red dot appears, this is the element:

<span class="ace_invisible ace_invisible_space ace_invalid">·</span>

I don't want a live syntax checking, so I disabled the worker: useWorker: false
What else am I missing in the config to make it stop ?

After switching to the src/ files, i've edited manually the ace.js file and saw that this code creates it:

else if (controlCharacter) {
     console.log(`controlCharacter: (${controlCharacter})`);
     var span = this.dom.createElement("span");
     span.className = "ace_invisible ace_invisible_space ace_invalid";
     span.textContent = lang.stringRepeat(self.SPACE_CHAR, controlCharacter.length);
     valueFragment.appendChild(span);
}

As you can see I tried to log to console the problematic char - but it's giving a strange result:

console.log(`controlCharacter: (${controlCharacter})`);

# Gives in the Console tab in Firefox:
controlCharacter: (‫)

So I printed its code instead:

console.log(`controlCharacter: (${controlCharacter.charCodeAt(0)})`);

# Output
controlCharacter: (8235)

Which according to the web this is a right-to-left thing ( which I am using )

Unicode Decimal Code &#8235;
‫
Symbol Name:    Right-To-Left Embedding
Html Entity:    
Hex Code:   &#x202b;
Decimal Code:   &#8235;
Unicode Group:  General Punctuation

I'm loading:

<script src="/js/ace-builds/src/ext-rtl.js" type="text/javascript" charset="utf-8"></script>

How can I solve this ?

Expected Behavior

No dot should appear

Current Behavior

There's a dot with the following span inside the line

<span class="ace_invisible ace_invisible_space ace_invalid">·</span>
Screen Shot 2023-12-12 at 23 27 27

Reproduction Steps

I'm using a demo code like so:

<div id="editor"></div>
<script src="/js/libs/ace-builds/src/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/libs/ace-builds/src/ext-rtl.js" type="text/javascript" charset="utf-8"></script>
    
    <script>
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/monokai");
        editor.setOptions({
            useWorker: false,
            highlightActiveLine: true,
            rtl: true,
            rtlText: true,
            enableBasicAutocompletion: false,
            enableSnippets: false,
            enableLiveAutocompletion: false,
            fontSize: "20px",
            showPrintMargin: false,
            showGutter: false,
            spellcheck: false,          
            showSpaces: false,  
            
        })
        editor.session.setMode("ace/mode/javascript");

Possible Solution

I removed the rtlText: true, but the blinking placeholder is at the left after starting a new line vs right ... so it's not ideal

Additional Information/Context

No response

Ace Version / Browser / OS / Keyboard layout

Ace version: exports.version = "1.32.1", browser: Firefox, OS: MacOSX Monterey, Keyboard layout: hebrew

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions