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

[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 ‫
‫
Symbol Name:    Right-To-Left Embedding
Html Entity:    
Hex Code:   ‫
Decimal Code:   ‫
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>

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

[nightwing]

This appears to be a regression introduced between versions https://raw.githack.com/ajaxorg/ace/v1.4.14/kitchen-sink.html and https://raw.githack.com/ajaxorg/ace/v1.5.0/kitchen-sink.html

blinking placeholder being shown on line start with rtl also seems to be a bug.

[marinsokol5]

I cannot seem to trigger it. @nightwing do you have explicit steps?

Is this only affecting right-to-left editors?

[nightwing]

Yes, enable RTL and Line based RTL switching checkboxes in kitchen-sink

[marinsokol5]

I see the dot now, looks quite a bad experience indeed, gonna put it as P1.

[whazor]

Seems to be the following PR: https://github.com/ajaxorg/ace/pull/4693

[whazor]

The PR added a mechanism for detecting 'hidden unicode characters' that could introduce security vulnerabilities. Obviously when using RTL this would be a legitimate use case. So the solution would be to undo these checks when RTL is enabled.

LRE     U+202A  Left-to-Right Embedding     Try treating following text as left-to-right.
RLE     U+202B  Right-to-Left Embedding     Try treating following text as right-to-left.
LRO     U+202D  Left-to-Right Override  Force treating following text as left-to-right
RLO     U+202E  Right-to-Left Override  Force treating following text as right-to-left.
LRI     U+2066  Left-to-Right Isolate   Force treating following text as left-to-right without affecting adjacent text.
RLI     U+2067  Right-to-Left Isolate   Force treating following text as right-to-left without affecting adjacent text.

[whazor]

I created a PR: #5434

@arLevi would you be able to verify yourself or with someone you know whether U+202B for new line is the only wished character? Or are there more nuances we should know about.

[arLevi]

For now, it's the only thing that I saw. Not sure if the "numeric column" also intended to be on the right/left side ( it's on the left ) - but it doesn't bother me much ...

meanwhile, i noticed another issue, not sure if it's for a another "ticket" See this, I preload the text into the editor with .setValue(sometext) but then i start to delete the entire text (backspace) the first character remains, i cannot delete it.

The only way to delete it - is to "select all" (ctrl+a) and then delete... Attaching image of the remained character i cannot delete:

I don't see something "special" when I request the value of the entire text, this is the only character remains ( no other hidden characters )

[whazor]

I created a new issue for that problem (#5436). The current PR can be reviewed, and this issue could be resolved after it is merged.