codex-team · neSpecc · Aug 27, 2020 · Apr 11, 2020 · Apr 18, 2020 · Apr 20, 2020
@@ -2,6 +2,7 @@
 
 ### 2.19
 
+- `New` - RTL mode added [#670](https://github.com/codex-team/editor.js/issues/670)
 - `Fix` — Fix problem with types usage [#1183](https://github.com/codex-team/editor.js/issues/1183)
 - `Fix` - Fixed issue with Spam clicking the "Click to tune" button duplicates the icons on FireFox. [#1273](https://github.com/codex-team/editor.js/issues/1273)
 - `Fix` - Fixed issue with `editor.blocks.delete(index)` method which throws an error when Editor.js is not focused, even after providing a valid index. [#1182](https://github.com/codex-team/editor.js/issues/1182)

@@ -0,0 +1,235 @@
+<!--
+ Use this page for debugging purposes.
+ Editor Tools are loaded as git-submodules.
+ You can pull modules by running `yarn pull_tools` and start experimenting.
+ -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Editor.js 🤩🧦🤨 example</title>
+  <link href="https://fonts.googleapis.com/css?family=PT+Mono" rel="stylesheet">
+  <link href="assets/demo.css" rel="stylesheet">
+  <script src="assets/json-preview.js"></script>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+</head>
+<body>
+<div class="ce-example">
+  <div class="ce-example__header">
+    <a class="ce-example__header-logo" href="https://codex.so/editor">Editor.js 🤩🧦🤨</a>
+
+    <div class="ce-example__header-menu">
+      <a href="https://github.com/editor-js" target="_blank">Plugins</a>
+      <a href="https://editorjs.io/usage" target="_blank">Usage</a>
+      <a href="https://editorjs.io/configuration" target="_blank">Configuration</a>
+      <a href="https://editorjs.io/creating-a-block-tool" target="_blank">API</a>
+    </div>
+  </div>
+  <div class="ce-example__content _ce-example__content--small">
+    <div id="editorjs"></div>
+    <div id="hint" style="text-align: center;">
+      No submodules found. Run <code class="inline-code">yarn pull_tools</code>
+    </div>
+    <div class="ce-example__button" id="saveButton">
+      editor.save()
+    </div>
+  </div>
+  <div class="ce-example__output">
+    <pre class="ce-example__output-content" id="output"></pre>
+
+    <div class="ce-example__output-footer">
+      <a href="https://codex.so" style="font-weight: bold;">Made by CodeX</a>
+    </div>
+  </div>
+</div>
+
+<!-- Load Tools -->
+<!--
+ You can upload Tools to your project's directory and use as in example below.
+ Also you can load each Tool from CDN or use NPM/Yarn packages.
+ Read more in Tool's README file. For example:
+ https://github.com/editor-js/header#installation
+ -->
+<script src="./tools/header/dist/bundle.js" onload="document.getElementById('hint').hidden = true"></script><!-- Header -->
+<script src="./tools/simple-image/dist/bundle.js"></script><!-- Image -->
+<script src="./tools/delimiter/dist/bundle.js"></script><!-- Delimiter -->
+<script src="./tools/list/dist/bundle.js"></script><!-- List -->
+<script src="./tools/checklist/dist/bundle.js"></script><!-- Checklist -->
+<script src="./tools/quote/dist/bundle.js"></script><!-- Quote -->
+<script src="./tools/code/dist/bundle.js"></script><!-- Code -->
+<script src="./tools/embed/dist/bundle.js"></script><!-- Embed -->
+<script src="./tools/table/dist/bundle.js"></script><!-- Table -->
+<script src="./tools/link/dist/bundle.js"></script><!-- Link -->
+<script src="./tools/raw/dist/bundle.js"></script><!-- Raw -->
+<script src="./tools/warning/dist/bundle.js"></script><!-- Warning -->
+
+<script src="./tools/marker/dist/bundle.js"></script><!-- Marker -->
+<script src="./tools/inline-code/dist/bundle.js"></script><!-- Inline Code -->
+
+<!-- Load Editor.js's Core -->
+<script src="../dist/editor.js"></script>
+
+<!-- Initialization -->
+<script>
+  /**
+   * Saving button
+   */
+  const saveButton = document.getElementById('saveButton');
+
+  /**
+   * To initialize the Editor, create a new instance with configuration object
+   * @see docs/installation.md for mode details
+   */
+  var editor = new EditorJS({
+    /**
+     * Wrapper of Editor
+     */
+    holder: 'editorjs',
+    i18n: {
+
+      /**
+       * Text direction
+       */
+      direction: 'rtl',
+    },
+
+    /**
+     * Tools list
+     */
+    tools: {
+      /**
+       * Each Tool is a Plugin. Pass them via 'class' option with necessary settings {@link docs/tools.md}
+       */
+      header: {
+        class: Header,
+        inlineToolbar: ['link'],
+        config: {
+          placeholder: 'Header'
+        },
+        shortcut: 'CMD+SHIFT+H'
+      },
+
+      /**
+       * Or pass class directly without any configuration
+       */
+      image: {
+        class: SimpleImage,
+        inlineToolbar: ['link'],
+      },
+
+      list: {
+        class: List,
+        inlineToolbar: true,
+        shortcut: 'CMD+SHIFT+L'
+      },
+
+      checklist: {
+        class: Checklist,
+        inlineToolbar: true,
+      },
+
+      quote: {
+        class: Quote,
+        inlineToolbar: true,
+        config: {
+          quotePlaceholder: 'Enter a quote',
+          captionPlaceholder: 'Quote\'s author',
+        },
+        shortcut: 'CMD+SHIFT+O'
+      },
+
+      warning: Warning,
+
+      marker: {
+        class:  Marker,
+        shortcut: 'CMD+SHIFT+M'
+      },
+
+      code: {
+        class:  CodeTool,
+        shortcut: 'CMD+SHIFT+C'
+      },
+
+      delimiter: Delimiter,
+
+      inlineCode: {
+        class: InlineCode,
+        shortcut: 'CMD+SHIFT+C'
+      },
+
+      linkTool: LinkTool,
+
+      raw: RawTool,
+
+      embed: Embed,
+
+      table: {
+        class: Table,
+        inlineToolbar: true,
+        shortcut: 'CMD+ALT+T'
+      },
+
+    },
+
+    /**
+     * This Tool will be used as default
+     */
+    // initialBlock: 'paragraph',
+
+    /**
+     * Initial Editor data
+     */
+    data: {
+      blocks: [
+        {
+          type: "header",
+          data: {
+            text: "محرر.js",
+            level: 2
+          }
+        },
+        {
+          type : 'paragraph',
+          data : {
+            text : 'مرحبا! تعرف على المحرر الجديد. في هذه الصفحة ، يمكنك رؤيتها في العمل - حاول تحرير هذا النص.'
+          }
+        },
+        {
+          type: "header",
+          data: {
+            text: "دلائل الميزات",
+            level: 3
+          }
+        },
+        {
+          type : 'list',
+          data : {
+            items : [
+              'وهو محرر بنمط الكتلة',
+              'تقوم بإرجاع إخراج بيانات نظيفة في JSON',
+              'مصممة لتكون قابلة للتوسيع والتوصيل مع واجهة برمجة تطبيقات بسيطة'
+            ],
+            style: 'unordered'
+          }
+        }
+      ]
+    },
+    onReady: function(){
+      saveButton.click();
+    },
+    onChange: function() {
+      console.log('something changed');
+    }
+  });
+
+  /**
+   * Saving example
+   */
+  saveButton.addEventListener('click', function () {
+    editor.save().then((savedData) => {
+      cPreview.show(savedData, document.getElementById("output"));
+    });
+  });
+</script>
+</body>
+</html>
@@ -46,4 +46,12 @@ export default class Module {
   public set state(Editor: EditorModules) {
     this.Editor = Editor;
   }
+
+  /**
+   * Returns true if current direction is RTL (Right-To-Left)
+   */
+  protected get isRtl(): boolean {
+    return this.config.i18n.direction === 'rtl';
+  }
+
 }
@@ -210,9 +210,18 @@ export default class Core {
     /**
      * Adjust i18n
      */
-    if (config.i18n && config.i18n.messages) {
+    if (config.i18n?.messages) {
       I18n.setDictionary(config.i18n.messages);
     }
+
+    /**
+     * Text direction. If not set, uses ltr
+     */
+    if (config.i18n?.direction) {
+      this.config.i18n = {
+        direction: config.i18n?.direction || 'ltr',
+      };
+    }
   }
 
   /**

@@ -426,7 +426,10 @@ export default class BlockEvents extends Module {
       return;
     }
 
-    if (this.Editor.Caret.navigateNext()) {
+    const navigateNext = event.keyCode === _.keyCodes.UP || (event.keyCode === _.keyCodes.RIGHT && !this.isRtl);
+    const isNavigated = navigateNext ? this.Editor.Caret.navigateNext() : this.Editor.Caret.navigatePrevious();
+
+    if (isNavigated) {
       /**
        * Default behaviour moves cursor by 1 character, we need to prevent it
        */
@@ -481,7 +484,10 @@ export default class BlockEvents extends Module {
       return;
     }
 
-    if (this.Editor.Caret.navigatePrevious()) {
+    const navigatePrevious = event.keyCode === _.keyCodes.UP || (event.keyCode === _.keyCodes.LEFT && !this.isRtl);
+    const isNavigated = navigatePrevious ? this.Editor.Caret.navigatePrevious() : this.Editor.Caret.navigateNext();
+
+    if (isNavigated) {
       /**
        * Default behaviour moves cursor by 1 character, we need to prevent it
        */

@@ -65,7 +65,10 @@ export default class ConversionToolbar extends Module {
    * Create UI of Conversion Toolbar
    */
   public make(): HTMLElement {
-    this.nodes.wrapper = $.make('div', ConversionToolbar.CSS.conversionToolbarWrapper);
+    this.nodes.wrapper = $.make('div', [
+      ConversionToolbar.CSS.conversionToolbarWrapper,
+      ...(this.isRtl ? [this.Editor.UI.CSS.editorRtlFix] : []),
+    ]);
     this.nodes.tools = $.make('div', ConversionToolbar.CSS.conversionToolbarTools);
 
     const label = $.make('div', ConversionToolbar.CSS.conversionToolbarLabel, {
@@ -158,7 +161,7 @@ export default class ConversionToolbar extends Module {
    *
    * @param {string} replacingToolName - name of Tool which replaces current
    */
-  public async replaceWithBlock(replacingToolName: string): Promise <void> {
+  public async replaceWithBlock(replacingToolName: string): Promise<void> {
     /**
      * At first, we get current Block data
      *
@@ -295,8 +298,8 @@ export default class ConversionToolbar extends Module {
    * @param {string} title - button title
    */
   private addTool(toolName: string, toolIcon: string, title: string): void {
-    const tool = $.make('div', [ ConversionToolbar.CSS.conversionTool ]);
-    const icon = $.make('div', [ ConversionToolbar.CSS.conversionToolIcon ]);
+    const tool = $.make('div', [ConversionToolbar.CSS.conversionTool]);
+    const icon = $.make('div', [ConversionToolbar.CSS.conversionToolIcon]);
 
     tool.dataset.tool = toolName;
     icon.innerHTML = toolIcon;
@@ -307,7 +310,7 @@ export default class ConversionToolbar extends Module {
     $.append(this.nodes.tools, tool);
     this.tools[toolName] = tool;
 
-    this.Editor.Listeners.on(tool, 'click', async () => {
+    this.Editor.Listeners.on(tool, 'click', async() => {
       await this.replaceWithBlock(toolName);
     });
   }

@@ -32,7 +32,7 @@ export default class InlineToolbar extends Module {
     focusedButton: 'ce-inline-tool--focused',
     conversionToggler: 'ce-inline-toolbar__dropdown',
     conversionTogglerHidden: 'ce-inline-toolbar__dropdown--hidden',
-    conversionTogglerContent: 'ce-inline-toolbar__dropdown-content',
+    conversionTogglerContent: 'ce-inline-toolbar__dropdown-content'
   };
 
   /**
@@ -116,7 +116,10 @@ export default class InlineToolbar extends Module {
    * Making DOM
    */
   public make(): void {
-    this.nodes.wrapper = $.make('div', this.CSS.inlineToolbar);
+    this.nodes.wrapper = $.make('div', [
+      this.CSS.inlineToolbar,
+      ...(this.isRtl ? [this.Editor.UI.CSS.editorRtlFix] : []),
+    ]);
     this.nodes.buttons = $.make('div', this.CSS.buttonsWrapper);
     this.nodes.actions = $.make('div', this.CSS.actionsWrapper);
 
@@ -569,7 +572,7 @@ export default class InlineToolbar extends Module {
 
         return (toolClass as ToolSettings).class[Tools.INTERNAL_SETTINGS.IS_INLINE];
       })
-      .map(([ name ]: [string, InlineToolConstructable | ToolSettings]) => name);
+      .map(([name]: [string, InlineToolConstructable | ToolSettings]) => name);
 
     /**
      * 1) For internal tools, check public getter 'shortcut'