Fix RTL (#1196)

* chore :wrench: : 更新代码风格&包管理工具

* chore :wrench: : 更新代码风格工具

* chore :wrench: : 更新代码风格工具配置

* chore :wrench: : 更新代码风格配置

* chore :wrench: : remove tslint

* chore :wrench: : 修复js代码风格检测忽略

* chore :wrench: : update package.json

* fix :bug: : fix RTL

* docs :pencil: : Update README for RTL mode

README.md

@@ -194,6 +194,7 @@ Markdown 输出的 HTML 所展现的外观。内置 ant-design, light，dark，w
 |   | 说明 | 默认值 |
 | - | - | - |
 | i18n | 多语言，参见 ITips | - |
+| rtl | 支持 RTL 模式，对阿拉伯等文字进行支持优化 | false |
 | undoDelay | 历史记录间隔 | - |
 | after | 编辑器异步渲染完成后的回调方法 | - |
 | height | 编辑器总高度 | 'auto' |

README_en_US.md

@@ -171,6 +171,7 @@ Can be filled with element `id` or element itself` HTMLElement`
 |   | Explanation | Default |
 | - | - | - |
 | i18n | I18n, more details see ITips | - |
+| rtl | Support RTL layout, optimize for the languages like Arabic | false |
 | undoDelay | Undo interval | - |
 | after | Callback method after editor asynchronous rendering is completed | - |
 | height | Total editor height | 'auto' |

pnpm-lock.yaml

@@ -2317,7 +2317,6 @@ packages:
       fraction.js: 4.1.3
       normalize-range: 0.1.2
       picocolors: 1.0.0
-      postcss: 8.4.12
       postcss-value-parser: 4.2.0
     dev: true
 
@@ -2585,7 +2584,6 @@ packages:
       node-int64: 0.4.0
     dev: true
 
-  /buffer-crc32/0.2.13:
     resolution: {integrity: sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=}
     dev: true
 
@@ -6131,6 +6129,7 @@ packages:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
     dev: true
 
+
   /postcss/8.4.12:
     resolution: {integrity: sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==}
     engines: {node: ^10 || ^12 || >=14}

src/ts/ui/initUI.ts

@@ -14,6 +14,10 @@ declare global {
 export const initUI = (vditor: IVditor) => {
     vditor.element.innerHTML = "";
     vditor.element.classList.add("vditor");
+    // 支持 RTL
+    if (vditor.options.rtl) {
+        vditor.element.setAttribute("dir", "rtl")
+    }
     setTheme(vditor);
     setContentTheme(vditor.options.preview.theme.current, vditor.options.preview.theme.path);
     if (typeof vditor.options.height === "number") {

src/ts/util/Options.ts

@@ -4,6 +4,7 @@ import { merge } from "./merge";
 export class Options {
     public options: IOptions;
     private defaultOptions: IOptions = {
+        rtl: false,
         after: undefined,
         cache: {
             enable: true,
@@ -148,6 +149,10 @@ export class Options {
             if (this.options.comment) {
                 this.defaultOptions.comment = this.options.comment;
             }
+            // 支持 RTL
+            if (this.options.rtl) {
+                this.defaultOptions.rtl = this.options.rtl;
+            }
         }
 
         const mergedOptions = merge(this.defaultOptions, this.options);

types/index.d.ts

@@ -564,6 +564,8 @@ interface IResize {
 
 /** @link https://ld246.com/article/1549638745630#options */
 interface IOptions {
+    /** RTL */
+    rtl?: boolean;
     /** 历史记录间隔 */
     undoDelay?: number;
     /** 内部调试时使用 */