'Dynamically change the text direction in ace editor

I am trying to update the text direction dynamically in the ace editor to "LTR" or "RTL" depending on what is entered by the user.

I am listening to change event on the ace editor and writing the following code after going through the ace.js

scope.editor.session.$bidiHandler.setTextDir(_isNewValueRTL);
scope.editor.session.$bidiHandler.updateBidiMap();

_isNewValueRTL is a boolean. I don't see it working.

Any help will be appreciated

ace-editor


Solution 1:[1]

Try adding this CSS to your ace_line class

.ace_line {
    direction: ltr;
    unicode-bidi: bidi-override;
}

This sould change the direction of the text

Solution 2:[2]

Ace currently doesn't have setTextDir method, it has support for line based direction https://github.com/ajaxorg/ace/pull/3400 that works by adding 'RIGHT-TO-LEFT EMBEDDING' (U+202B) to the line

to use that include ext-rtl.js

editor.setOption("rtlText", true)

then to change the direction of cursor line call

<script src=https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ace.js ></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ext-rtl.js ></script>

 
<script>
debugger
editor = ace.edit(null, {
  value: " left\n\u202B right\n\n try press ctrl-alt-shift-r or ctrl-alt-shift-l ",
  rtlText: true,
})
document.body.appendChild(editor.container)
editor.container.style.cssText = "height: 150px; width: 400px; outline: solid"
 
</script>
editor.session.$bidiHandler.setRtlDirection(editor, true)

If you need some other functionality then open a feature request to ace https://github.com/ajaxorg/ace/issues/new

Solution 3:[3]

editor.setOption("rtlText", true) if rtlText doesn't work, just use rtl editor.setOption("rtl", true)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Harsha pps
Solution 2
Solution 3 vincentyang

Related Questions