Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
arLevi opened this issue Dec 12, 2023 · 10 comments
Open

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

arLevi opened this issue Dec 12, 2023 · 10 comments

Comments

@arLevi
Copy link

arLevi commented Dec 12, 2023

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

@nightwing
Copy link
Member

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
Copy link
Contributor

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

Is this only affecting right-to-left editors?

@nightwing
Copy link
Member

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

@marinsokol5
Copy link
Contributor

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

@whazor
Copy link
Contributor

whazor commented Dec 20, 2023

Seems to be the following PR: #4693

@whazor
Copy link
Contributor

whazor commented Dec 20, 2023

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
Copy link
Contributor

whazor commented Dec 20, 2023

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
Copy link
Author

arLevi commented Dec 20, 2023

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:
Screen Shot 2023-12-20 at 13 56 24

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 )
Screen Shot 2023-12-20 at 13 59 45

@whazor
Copy link
Contributor

whazor commented Dec 27, 2023

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.

Copy link

This issue has not received any attention in 1 year. If you want to keep this issue open, please leave a comment below and auto-close will be canceled.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants