[Feature] i18n

dist/editor.js.LICENSE

@@ -32,6 +32,15 @@
    * @author CodeX-Team <https://ifmo.su>
    */
 
+/**
+ * Base Paragraph Block for the Editor.js.
+ * Represents simple paragraph
+ *
+ * @author CodeX ([email protected])
+ * @copyright CodeX 2018
+ * @license The MIT License (MIT)
+ */
+
 /*!
  * Codex JavaScript Notification module
  * https://github.com/codex-team/js-notifier
@@ -45,15 +54,6 @@
  * @version 1.1.1
  */
 
-/**
- * Base Paragraph Block for the Editor.js.
- * Represents simple paragraph
- *
- * @author CodeX ([email protected])
- * @copyright CodeX 2018
- * @license The MIT License (MIT)
- */
-
 /*!
  * CodeX.Tooltips
  * 

docs/api.md

@@ -1,5 +1,12 @@
 # Editor.js API
 
+---
+Most actual API described by [this interface](../types/api/index.d.ts).
+
+---
+📃 See official API documentation [https://editorjs.io/api](https://editorjs.io/api)
+
+---
 
 Blocks have access to the public methods provided by Editor.js API Module. Plugin and Tune Developers
 can use Editor\`s API as they want.
@@ -42,7 +49,7 @@ use 'move' instead)
 
 `stretchBlock(index: number, status: boolean)` - make Block stretched
 
-`insertNewBlock()` - __Deprecated__ insert new Block after working place 
+`insertNewBlock()` - __Deprecated__ insert new Block after working place
 
 `insert(type?: string, data?: BlockToolData, config?: ToolConfig, index?: number, needToFocus?: boolean)` - insert new Block with passed parameters
 
@@ -100,11 +107,11 @@ Each method accept `position` and `offset` parameters. `Offset` should be used t
 
 `Position` can be one of the following values:
 
-| Value     | Description 
-| --------- | ----------- 
+| Value     | Description
+| --------- | -----------
 | `start`   | Caret will be set at the Block's beginning
 | `end`     | Caret will be set at the Block end
-| `default` | More or less emulates browser behaviour, in most cases behaves as `start`  
+| `default` | More or less emulates browser behaviour, in most cases behaves as `start`
 
 Each method returns `boolean` value: true if caret is set successfully or false otherwise (e.g. when there is no Block at index);
 
@@ -148,7 +155,7 @@ this.api.notifier.show({
 ![](https://capella.pics/14fcdbe4-d6eb-41d4-b66e-e0e86ccf1a4b.jpg)
 
 
-Check out [`codex-notifier` package page](https://github.com/codex-team/js-notifier) on GitHub to find docs, params and examples. 
+Check out [`codex-notifier` package page](https://github.com/codex-team/js-notifier) on GitHub to find docs, params and examples.
 
 ### Destroy API
 
@@ -173,28 +180,28 @@ Methods for showing Tooltip helper near your elements. Parameters are the same a
 #### Show
 
 Method shows tooltip with custom content on passed element
- 
+
 ```js
 this.api.tooltip.show(element, content, options);
-``` 
+```
 
 | parameter | type | description |
 | -- | -- | -- |
 | `element` | _HTMLElement_ | Tooltip will be showed near this element |
 | `content` | _String_ or _Node_ | Content that will be appended to the Tooltip |
 | `options` | _Object_ | Some displaying options, see below |
 
-Available showing options 
+Available showing options
 
 | name | type | action |
 | -- | -- | -- |
-| placement | `top`, `bottom`, `left`, `right` | Where to place the tooltip. Default value is `bottom' | 
-| marginTop | _Number_ | Offset above the tooltip with `top` placement | 
-| marginBottom | _Number_ | Offset below the tooltip with `bottom` placement | 
-| marginLeft | _Number_ | Offset at left from the tooltip with `left` placement | 
-| marginRight | _Number_ | Offset at right from the tooltip with `right` placement | 
-| delay | _Number_ | Delay before showing, in ms. Default is `70` | 
-| hidingDelay | _Number_ | Delay before hiding, in ms. Default is `0` | 
+| placement | `top`, `bottom`, `left`, `right` | Where to place the tooltip. Default value is `bottom' |
+| marginTop | _Number_ | Offset above the tooltip with `top` placement |
+| marginBottom | _Number_ | Offset below the tooltip with `bottom` placement |
+| marginLeft | _Number_ | Offset at left from the tooltip with `left` placement |
+| marginRight | _Number_ | Offset at right from the tooltip with `right` placement |
+| delay | _Number_ | Delay before showing, in ms. Default is `70` |
+| hidingDelay | _Number_ | Delay before hiding, in ms. Default is `0` |
 
 #### Hide
 
@@ -206,15 +213,15 @@ this.api.tooltip.hide();
 
 #### onHover
 
-Decorator for showing tooltip near some element by "mouseenter" and hide by "mouseleave". 
+Decorator for showing tooltip near some element by "mouseenter" and hide by "mouseleave".
 
 ```js
 this.api.tooltip.onHover(element, content, options);
 ```
 
 ### API Shorthands
 
-Editor`s API provides some shorthands for API methods. 
+Editor`s API provides some shorthands for API methods.
 
 | Alias    | Method          |
 | ------   | --------------- |

example/example-dev.html

@@ -276,9 +276,87 @@
       },
       onChange: function() {
         console.log('something changed');
-      }
+      },
+      i18n: {
+        rtl: true,
+        messages: {
+          /**
+           * Section for translation Tool Names: both block and inline tools
+           */
+          "toolNames": {
+            "Text": "Параграф",
+            "Heading": "Заголовок",
+            "List": "Список",
+            "Warning": "Замечание",
+            "Checklist": "Чеклист",
+            "Quote": "Цитата",
+            "Code": "Код",
+            "Delimiter": "Разделитель",
+            "Raw HTML": "HTML фрагмент",
+            "Table": "Таблица",
+            "Link": "Ссылка",
+            "Marker": "Маркер",
+            "Bold": "Полужирный",
+            "Italic": "Курсив",
+            "InlineCode": "Моноширинный",
+          },
+
+          /**
+           * Section for passing translations to the external tools classes
+           */
+          "tools": {
+            "warning": {
+              "Title": "Название",
+              "Message": "Сообщение",
+            },
+            "link": {
+              "Add a link": "Вставьте ссылку"
+            },
+            "stub": {
+              'The block can not be displayed correctly.': 'Блок не может быть отображен'
+            }
+          },
+
+          /**
+           * Section allows to translate Block Tunes
+           */
+          "blockTunes": {
+            "delete": {
+              "Delete": "Удалить"
+            },
+            "moveUp": {
+              "Move up": "Переместить вверх"
+            },
+            "moveDown": {
+              "Move down": "Переместить вниз"
+            }
+          },
+          /**
+           * Other below: translation of different UI components of the editor.js core
+           */
+          "ui": {
+            "blockTunes": {
+              "toggler": {
+                "Click to tune": "Нажмите, чтобы настроить",
+                "or drag to move": "или перетащите"
+              },
+            },
+            "inlineToolbar": {
+              "converter": {
+                "Convert to": "Конвертировать в"
+              }
+            },
+            "toolbar": {
+              "toolbox": {
+                "Add": "Добавить"
+              }
+            }
+          },
+        }
+      },
     });
 
+
     /**
      * Saving example
      */

src/components/block-tunes/block-tune-delete.ts

@@ -70,7 +70,7 @@ export default class DeleteTune implements BlockTune {
     /**
      * Enable tooltip module
      */
-    this.api.tooltip.onHover(this.nodes.button, 'Delete');
+    this.api.tooltip.onHover(this.nodes.button, this.api.i18n.tn('Delete'));
 
     return this.nodes.button;
   }

src/components/block-tunes/block-tune-move-down.ts

@@ -56,7 +56,7 @@ export default class MoveDownTune implements BlockTune {
     /**
      * Enable tooltip module on button
      */
-    this.api.tooltip.onHover(moveDownButton, 'Move down');
+    this.api.tooltip.onHover(moveDownButton, this.api.i18n.tn('Move down'));
 
     return moveDownButton;
   }

src/components/block-tunes/block-tune-move-up.ts

@@ -57,7 +57,7 @@ export default class MoveUpTune implements BlockTune {
     /**
      * Enable tooltip module on button
      */
-    this.api.tooltip.onHover(moveUpButton, 'Move up');
+    this.api.tooltip.onHover(moveUpButton, this.api.i18n.tn('Move up'));
 
     return moveUpButton;
   }

src/components/block.ts

@@ -1,5 +1,4 @@
 import {
-  API,
   BlockTool,
   BlockToolConstructable,
   BlockToolData,
@@ -12,6 +11,13 @@ import {
 import { SavedData } from '../types-internal/block-data';
 import $ from './dom';
 import * as _ from './utils';
+import ApiModule from './../components/modules/api';
+/** Import default tunes */
+import MoveUpTune from './block-tunes/block-tune-move-up';
+import DeleteTune from './block-tunes/block-tune-delete';
+import MoveDownTune from './block-tunes/block-tune-move-down';
+import SelectionUtils from './selection';
+import { toolTypes } from './modules/tools';
 
 /**
  * @class Block
@@ -22,12 +28,6 @@ import * as _ from './utils';
  *
  */
 
-/** Import default tunes */
-import MoveUpTune from './block-tunes/block-tune-move-up';
-import DeleteTune from './block-tunes/block-tune-delete';
-import MoveDownTune from './block-tunes/block-tune-move-down';
-import SelectionUtils from './selection';
-
 /**
  * Available Block Tool API methods
  */
@@ -360,9 +360,9 @@ export default class Block {
   private cachedInputs: HTMLElement[] = [];
 
   /**
-   * Editor`s API
+   * Editor`s API module
    */
-  private readonly api: API;
+  private readonly api: ApiModule;
 
   /**
    * Focused input index
@@ -408,20 +408,20 @@ export default class Block {
    * @param {object} toolInstance — passed Tool`s instance that rendered the Block
    * @param {object} toolClass — Tool's class
    * @param {object} settings - default settings
-   * @param {object} apiMethods - Editor API
+   * @param {ApiModule} apiModule - Editor API module for pass it to the Block Tunes
    */
   constructor(
     toolName: string,
     toolInstance: BlockTool,
     toolClass: BlockToolConstructable,
     settings: ToolConfig,
-    apiMethods: API
+    apiModule: ApiModule
   ) {
     this.name = toolName;
     this.tool = toolInstance;
     this.class = toolClass;
     this.settings = settings;
-    this.api = apiMethods;
+    this.api = apiModule;
     this.holder = this.compose();
 
     this.mutationObserver = new MutationObserver(this.didMutated);
@@ -520,12 +520,25 @@ export default class Block {
    * @returns {BlockTune[]}
    */
   public makeTunes(): BlockTune[] {
-    const tunesList = [MoveUpTune, DeleteTune, MoveDownTune];
+    const tunesList = [
+      {
+        name: 'moveUp',
+        Tune: MoveUpTune,
+      },
+      {
+        name: 'delete',
+        Tune: DeleteTune,
+      },
+      {
+        name: 'moveDown',
+        Tune: MoveDownTune,
+      }
+    ];
 
     // Pluck tunes list and return tune instances with passed Editor API and settings
-    return tunesList.map((Tune: BlockTuneConstructable) => {
+    return tunesList.map(({ name, Tune }: {name: string; Tune: BlockTuneConstructable}) => {
       return new Tune({
-        api: this.api,
+        api: this.api.getMethodsForTool(name, toolTypes.TUNE),
         settings: this.settings,
       });
     });

src/components/core.ts

@@ -3,6 +3,7 @@ import * as _ from './utils';
 import { EditorConfig, OutputData, SanitizerConfig } from '../../types';
 import { EditorModules } from '../types-internal/editor-modules';
 import { LogLevels } from './utils';
+import I18n from "./i18n";
 
 /**
  * @typedef {Core} Core - editor core class
@@ -199,6 +200,10 @@ export default class Core {
         this.config.data.blocks = [ initialBlockData ];
       }
     }
+
+    if (config.i18n && config.i18n.messages) {
+      I18n.setDictionary(config.i18n.messages);
+    }
   }
 
   /**