Merge pull request editor-js#81 from AndersTornkvist/add-i18n

feat: use editorjs i18n interface for translation of UI strings

README.md

@@ -12,10 +12,10 @@ Image Block for the [Editor.js](https://editorjs.io).
 - Pasting copied content from the web
 - Pasting images by drag-n-drop
 - Pasting files and screenshots from Clipboard
-- Allows to add border, background
-- Allows to stretch image to the container's full-width
+- Allows adding a border, and a background
+- Allows stretching an image to the container's full-width
 
-**Note** This Tool requires server-side implementation for file uploading. See [backend response format](#server-format) for more details.
+**Note** This Tool requires server-side implementation for the file uploading. See [backend response format](#server-format) for more details.
 
 ## Installation
 
@@ -33,7 +33,7 @@ Include module at your application
 import ImageTool from '@editorjs/image';
 ```
 
-### Other methods 
+### Other methods
 
 #### Manual downloading and connecting
 
@@ -42,7 +42,7 @@ import ImageTool from '@editorjs/image';
 
 #### Loading from CDN
 
-You can load specific version of package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@editorjs/image).
+You can load a specific version of package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@editorjs/image).
 
 `https://cdn.jsdelivr.net/npm/@editorjs/[email protected]`
 
@@ -57,7 +57,7 @@ import ImageTool from '@editorjs/image';
 
 // or if you inject ImageTool via standalone script
 const ImageTool = window.ImageTool;
- 
+
 var editor = EditorJS({
   ...
 
@@ -93,7 +93,7 @@ Image Tool supports these configuration parameters:
 | buttonContent | `string` | Allows to override HTML content of «Select file» button |
 | uploader | `{{uploadByFile: function, uploadByUrl: function}}` | Optional custom uploading methods. See details below. |
 
-Note that if you don't implement your custom uploader methods, the `endpoints` param is required. 
+Note that if you don't implement your custom uploader methods, the `endpoints` param is required.
 
 ## Tool's settings
 
@@ -192,15 +192,15 @@ You should save it and return the same response format as described above.
 
 ## Providing custom uploading methods
 
-As mentioned at the Config Params section, you have an ability to provide own custom uploading methods. 
-It is a quite simple: implement `uploadByFile` and `uploadByUrl` methods and pass them via `uploader` config param. 
-Both methods must return a Promise that resolves with response in format that described at the [backend response format](#server-format) section.
+As mentioned at the Config Params section, you have an ability to provide own custom uploading methods.
+It is a quite simple: implement `uploadByFile` and `uploadByUrl` methods and pass them via `uploader` config param.
+Both methods must return a Promise that resolves with response in a format that described at the [backend response format](#server-format) section.
 
 
 | Method         | Arguments | Return value | Description |
 | -------------- | --------- | -------------| ------------|
-| uploadByFile   | `File`    | `{Promise.<{success, file: {url}}>}` | Upload file to the server and return an uploaded image data | 
-| uploadByUrl    | `string`  | `{Promise.<{success, file: {url}}>}` | Send URL-string to the server, that should load image by this URL and return an uploaded image data | 
+| uploadByFile   | `File`    | `{Promise.<{success, file: {url}}>}` | Upload file to the server and return an uploaded image data |
+| uploadByUrl    | `string`  | `{Promise.<{success, file: {url}}>}` | Send URL-string to the server, that should load image by this URL and return an uploaded image data |
 
 Example:
 
@@ -216,7 +216,7 @@ var editor = EditorJS({
       class: ImageTool,
       config: {
         /**
-         * Custom uploader 
+         * Custom uploader
          */
         uploader: {
           /**
@@ -236,7 +236,7 @@ var editor = EditorJS({
               };
             });
           },
-          
+
           /**
            * Send URL-string to the server. Backend should load image by this URL and return an uploaded image data
            * @param {string} url - pasted image URL

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/image",
-  "version": "2.3.5",
+  "version": "2.4.0",
   "keywords": [
     "codex editor",
     "tool",

src/index.js

@@ -107,7 +107,7 @@ export default class ImageTool {
       additionalRequestHeaders: config.additionalRequestHeaders || {},
       field: config.field || 'image',
       types: config.types || 'image/*',
-      captionPlaceholder: config.captionPlaceholder || 'Caption',
+      captionPlaceholder: this.api.i18n.t(config.captionPlaceholder || 'Caption'),
       buttonContent: config.buttonContent || '',
       uploader: config.uploader || undefined,
     };
@@ -346,7 +346,7 @@ export default class ImageTool {
     console.log('Image Tool: uploading failed because of', errorText);
 
     this.api.notifier.show({
-      message: 'Can not upload an image, try another',
+      message: this.api.i18n.t('Can not upload an image, try another'),
       style: 'error',
     });
     this.ui.hidePreloader();

src/tunes.js

@@ -69,9 +69,10 @@ export default class Tunes {
     this.buttons = [];
 
     Tunes.tunes.forEach(tune => {
+      const title = this.api.i18n.t(tune.title);
       const el = make('div', [this.CSS.buttonBase, this.CSS.button], {
         innerHTML: tune.icon,
-        title: tune.title,
+        title,
       });
 
       el.addEventListener('click', () => {
@@ -83,6 +84,10 @@ export default class Tunes {
 
       this.buttons.push(el);
 
+      this.api.tooltip.onHover(el, title, {
+        placement: 'top',
+      });
+
       wrapper.appendChild(el);
     });
 

src/ui.js

@@ -108,7 +108,7 @@ export default class Ui {
   createFileButton() {
     const button = make('div', [ this.CSS.button ]);
 
-    button.innerHTML = this.config.buttonContent || `${buttonIcon} Select an Image`;
+    button.innerHTML = this.config.buttonContent || `${buttonIcon} ${this.api.i18n.t('Select an Image')}`;
 
     button.addEventListener('click', () => {
       this.onSelectFile();