can not find rtl option

[am0029]

can not find rtl option

[jaywcjlove]

@am0029 You can define your own styles to override the default styles.

Use rtl for languages written from right to left (like Hebrew or Arabic)

direction: rtl; ?

[am0029]

I test this code but error : rtl is not defined

<MDEditor value={body} onChange={setBody} dirction:rtl //direction={rtl} />

maybe i am doing wrong can u help me

[jaywcjlove]

You can use css(direction:rtl) to define it yourself

Currently there is no such API

@am0029

[munafio]

@jaywcjlove I don't know why not to support such important thing! as an editor, it's a MUST to have option for RTL support.

Anyway, it can be solved just in a few modification on css classes as following: first, put the editor inside a wrapper div and set its className to any name (e.g. md-editor-rtl). then put the following styles in your global css file:

.md-editor-rtl {
  direction: rtl;
  text-align: right;
}
.md-editor-rtl .w-md-editor-preview {
  box-shadow: none !important;
  border-right: 1px solid var(--color-border-default);
  right: unset !important;
  left: 0;
  text-align: right !important;
}
.md-editor-rtl .w-md-editor-text {
  text-align: right !important;
}

Preview: https://i.postimg.cc/13znR79S/Screen-Shot-2022-12-15-at-7-35-52-PM.png

[jaywcjlove]

I think they should not write code like this.

I'm not sure it's correct.

@munafio

[jaywcjlove]

I've added direction:rtl, but not sure it's the right one, would appreciate help.

@munafio @am0029

[munafio]

@jaywcjlove RTL is not for English or related languages uses same direction which is LTR, RTL is only languages/texts in Arabic, Urdu, Persian...etc.

Arabic for example starts from Right to Left, so you need to do same as I mentioned above to make it compatible with RTL languages.

[am0029]

do you know my problem is i am new devloper . i just want editor for my react app with rtl option . itestes all editors from github

none of them not working or documentation is just plain javascript or typscript files . but my app is mern stack

i used simple-mde-react . it was so nice the code that work was like this

import SimpleMDE from "react-simplemde-editor"; {/* <SimpleMDE value={body} onChange={setBody} required /> */}

with this 2 line code it works like a charm . but it does not have rtl . and i ask on their github . half of the worl rtl .how this possible u not make your editor rtl option ?

and i removed it .

now i am using jodi react . but does not have code section like react-md-editor and preview section like your editor.

the only option left is react-md-editor if possible show me the code of like simpld mde react i connect this ediotor with rtl option to my react app without

[munafio]

do you know my problem is i am new devloper . i just want editor for my react app with rtl option . itestes all editors from github

none of them not working or documentation is just plain javascript or typscript files . but my app is mern stack

i used simple-mde-react . it was so nice the code that work was like this

` import SimpleMDE from "react-simplemde-editor";

          {/* <SimpleMDE value={body} onChange={setBody} required /> */}

`

with this 2 line code it works like a charm . but it does not have rtl . and i ask on their github . half of the worl rtl .how this possible u not make your editor rtl option ?

and i removed it .

now i am using jodi react . but does not have code section like react-md-editor and preview section like your editor.

the only option left is react-md-editor

if possible show me the code of like simpld mde react

i connect this ediotor with rtl option to my react app without

Have you tried the solution above?!

[am0029]

yes it becomes rtl but when u try write english you can not add code . it becomes impossible to write english code when css is rtl just like u said . i can not belieave this my site not working just because this mistake that u said me . but it is ok

[munafio]

@am0029 Naah, you can also solve this issue .. by adding a styles to code html tag, because Markdown code will be converted to code html tag on preview side .. example:

.my-md-editor code {
     direction: ltr !important;
     text-align: left !important 
}

with the above answer and this answer will make your md component supports rtl and ltr for code.

[am0029]

this souloution is too good if work but not working I do not know why maybe the name is not code ?

see this is my code

 <div className="md-editor-rtl ">
                <MDEditor
                  value={body}
                  onChange={setBody}
                  textareaProps={{
                    placeholder: "اینجا تایپ کنید"
                />
              </div>

and this is css

.md-editor-rtl {
    direction: rtl;
    text-align: right;
  }
  .md-editor-rtl .w-md-editor-preview {
    box-shadow: none !important;
    border-right: 1px solid var(--color-border-default);
    right: unset !important;
    left: 0;
    text-align: right !important;
  }
  .md-editor-rtl .w-md-editor-text {
    text-align: right !important;
  }

  .my-editor-rtl code {
    direction: ltr !important;
    text-align: left !important 
}

Sorry it workes . it workes . the class name was wrong . it works now my problem solved

[am0029]

@am0029 Naah, you can also solve this issue .. by adding a styles to code html tag, because Markdown code will be converted to code html tag on preview side .. example:

.my-md-editor code {
     direction: ltr !important;
     text-align: left !important 
}

with the above answer and this answer will make your md component supports rtl and ltr for code.

there is one more problem the code section is ltr right in preview mode but in right side when u wrihte symbols it goes end of line

i mean the preview mode is show correctly . but in right side it write opposite and post opposite

like this can u see

@font-face : {


 ;font-style:none

  ;font-weight:900

  ;src:url(../fonts/Vazir.tff)

}

is this also fixable ? can u understand me or i explain more please fix this last issue if u can my dear friend

see this picture @font-face code . in preview ws ok but when i post it become like this

font-face@ {

}

i mean in review mode when posting was ok . but it just was for preview not for the real post how can i fix this please tell me it is so painfull working with this editor

every single line i should copy and paste @ from other side to other side

think 100 line it take 2 days

can u do something in the right side it also become ltr in codeblock ?

[am0029]

just try to write @font-face:{} u will see prblem becasue it is rtl .

i do not know what should i do

[munafio]

@am0029 This is the only thing that you can not change or fix, because the text input field can be on one specific side and in your case you made it RTL and text align to right so all the text will follow theses styles and we can not apply multiple direction on a text input field.

you can write your code in your editor (e.g. vs code) then copy/paste the code into the markdown editor.

[am0029]

@munafio itryied copy paste the code but after posting in blog not showing correctly can u say markdown editor that works fine except joditeditor because it is not working . tryied simple mde not working trying react-draft-wysig not working . what markdown editor is fine with react and rtl ? please

[munafio]

@am0029 you can either select text input's direction to Left or Right, you can not select them both according to your Language you type .. none of React MD libraries support this feature.

you can use it as we discussed and it doesn't matter what it shows in the text field, what really matters is the preview side. have a nice day.

[am0029]

@munafio Even after I did all of them back to ltr

u can not copy paste code see this picture after copy paste code

https://postimg.cc/0Mp4h8Hz

all symbols not showing correctly

i think them problem is the editor sadly waste of time

[theyarestories]

@munafio Great solution. Thank you