Description
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