Added I18n

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@recogito/recogito-client-core",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -2633,7 +2633,6 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
       "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
-      "dev": true,
       "requires": {
         "object-keys": "^1.0.12"
       }
@@ -2968,7 +2967,6 @@
       "version": "1.17.5",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.5.tgz",
       "integrity": "sha512-BR9auzDbySxOcfog0tLECW8l28eRGpDpU3Dm3Hp4q/N+VtLTmyj4EUN088XZWQDW/hzj6sYRDXeOFsaAODKvpg==",
-      "dev": true,
       "requires": {
         "es-to-primitive": "^1.2.1",
         "function-bind": "^1.1.1",
@@ -2987,7 +2985,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
       "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
-      "dev": true,
       "requires": {
         "is-callable": "^1.1.4",
         "is-date-object": "^1.0.1",
@@ -3497,6 +3494,14 @@
         "debug": "=3.1.0"
       }
     },
+    "for-each": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
+      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "requires": {
+        "is-callable": "^1.1.3"
+      }
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -4187,8 +4192,7 @@
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
-      "dev": true
     },
     "gauge": {
       "version": "2.7.4",
@@ -4409,7 +4413,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1"
       }
@@ -4432,8 +4435,7 @@
     "has-symbols": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz",
-      "integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==",
+      "integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg=="
-      "dev": true
     },
     "has-unicode": {
       "version": "2.0.1",
@@ -4842,8 +4844,7 @@
     "is-callable": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.5.tgz",
-      "integrity": "sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==",
+      "integrity": "sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q=="
-      "dev": true
     },
     "is-data-descriptor": {
       "version": "0.1.4",
@@ -4868,8 +4869,7 @@
     "is-date-object": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.2.tgz",
-      "integrity": "sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==",
+      "integrity": "sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g=="
-      "dev": true
     },
     "is-descriptor": {
       "version": "0.1.6",
@@ -4983,7 +4983,6 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.5.tgz",
       "integrity": "sha512-vlKW17SNq44owv5AQR3Cq0bQPEb8+kF3UKZ2fiZNOWtztYE5i0CzCZxFDwO58qAOWtxdBRVO/V5Qin1wjCqFYQ==",
-      "dev": true,
       "requires": {
         "has": "^1.0.3"
       }
@@ -4998,7 +4997,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.3.tgz",
       "integrity": "sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==",
-      "dev": true,
       "requires": {
         "has-symbols": "^1.0.1"
       }
@@ -6074,6 +6072,17 @@
       "integrity": "sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA=",
       "dev": true
     },
+    "node-polyglot": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/node-polyglot/-/node-polyglot-2.4.0.tgz",
+      "integrity": "sha512-KRzKwzMWm3wSAjOSop7/WwNyzaMkCe9ddkwXTQsIZEJmvEnqy/bCqLpAVw6xBszKfy4iLdYVA0d83L+cIkYPbA==",
+      "requires": {
+        "for-each": "^0.3.3",
+        "has": "^1.0.3",
+        "string.prototype.trim": "^1.1.2",
+        "warning": "^4.0.3"
+      }
+    },
     "node-releases": {
       "version": "1.1.53",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.53.tgz",
@@ -6231,8 +6240,7 @@
     "object-inspect": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.7.0.tgz",
-      "integrity": "sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw==",
+      "integrity": "sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw=="
-      "dev": true
     },
     "object-is": {
       "version": "1.0.2",
@@ -6243,8 +6251,7 @@
     "object-keys": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
-      "dev": true
     },
     "object-visit": {
       "version": "1.0.1",
@@ -6259,7 +6266,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.0.tgz",
       "integrity": "sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==",
-      "dev": true,
       "requires": {
         "define-properties": "^1.1.2",
         "function-bind": "^1.1.1",
@@ -8204,11 +8210,20 @@
         "strip-ansi": "^3.0.0"
       }
     },
+    "string.prototype.trim": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.1.tgz",
+      "integrity": "sha512-MjGFEeqixw47dAMFMtgUro/I0+wNqZB5GKXGt1fFr24u3TzDXCPu7J9Buppzoe3r/LqkSDLDDJzE15RGWDGAVw==",
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.0-next.1",
+        "function-bind": "^1.1.1"
+      }
+    },
     "string.prototype.trimend": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.0.tgz",
       "integrity": "sha512-EEJnGqa/xNfIg05SxiPSqRS7S9qwDhYts1TSLR1BQfYUfPe1stofgGKvwERK9+9yf+PpfBMlpBaCHucXGPQfUA==",
-      "dev": true,
       "requires": {
         "define-properties": "^1.1.3",
         "es-abstract": "^1.17.5"
@@ -8218,7 +8233,6 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/string.prototype.trimleft/-/string.prototype.trimleft-2.1.2.tgz",
       "integrity": "sha512-gCA0tza1JBvqr3bfAIFJGqfdRTyPae82+KTnm3coDXkZN9wnuW3HjGgN386D7hfv5CHQYCI022/rJPVlqXyHSw==",
-      "dev": true,
       "requires": {
         "define-properties": "^1.1.3",
         "es-abstract": "^1.17.5",
@@ -8229,7 +8243,6 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/string.prototype.trimright/-/string.prototype.trimright-2.1.2.tgz",
       "integrity": "sha512-ZNRQ7sY3KroTaYjRS6EbNiiHrOkjihL9aQE/8gfQ4DtAC/aEBRHFJa44OmoWxGGqXuJlfKkZW4WcXErGr+9ZFg==",
-      "dev": true,
       "requires": {
         "define-properties": "^1.1.3",
         "es-abstract": "^1.17.5",
@@ -8240,7 +8253,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.0.tgz",
       "integrity": "sha512-iCP8g01NFYiiBOnwG1Xc3WZLyoo+RuBymwIlWncShXDDJYWN6DbnM3odslBJdgCdRlq94B5s63NWAZlcn2CS4w==",
-      "dev": true,
       "requires": {
         "define-properties": "^1.1.3",
         "es-abstract": "^1.17.5"
@@ -8828,6 +8840,14 @@
       "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==",
       "dev": true
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.1.tgz",

package.json

@@ -41,6 +41,7 @@
   },
   "dependencies": {
     "axios": "^0.19.0",
+    "node-polyglot": "^2.4.0",
     "preact": "^10.4.1",
     "react-contenteditable": "^3.3.3",
     "react-transition-group": "^4.3.0",

src/editor/Editor.jsx

@@ -1,6 +1,7 @@
 import React from 'preact/compat';
 import { useState, useRef, useEffect } from 'preact/hooks';
 import setPosition from './setPosition';
+import i18n from '../i18n';
 
 /** We need to compare bounds by value, not by object ref **/
 const bounds = elem => {
@@ -112,17 +113,17 @@ const Editor = props => {
           <div className="footer">
             <button
               className="r6o-btn" 
-              onClick={props.onCancel}>Close</button>
+              onClick={props.onCancel}>{i18n.t('Close')}</button>
           </div>
         ) : (
           <div className="footer">
             <button 
               className="r6o-btn outline"
-              onClick={props.onCancel}>Cancel</button>
+              onClick={props.onCancel}>{i18n.t('Cancel')}</button>
 
             <button 
               className="r6o-btn "
-              onClick={onOk}>Ok</button>
+              onClick={onOk}>{i18n.t('Ok')}</button>
           </div>
         )}
       </div>

src/editor/widgets/comment/CommentWidget.jsx

@@ -1,6 +1,7 @@
 import React from 'preact/compat';
 import Comment from './Comment';
 import TextEntryField from './TextEntryField';
+import i18n from '../../../i18n';
 
 /**
  * Comments are TextualBodies where the purpose field is either 
@@ -65,7 +66,7 @@ const CommentWidget = props => {
           <TextEntryField
             content={draftReply.value}
             editable={true}
-            placeholder={comments.length > 0 ? 'Add a reply...' : 'Add a comment...'}
+            placeholder={comments.length > 0 ? i18n.t('Add a reply...') : i18n.t('Add a comment...')}
             onChange={onEditReply}
             onSaveAndClose={() => props.onSaveAndClose()}
           /> 

src/editor/widgets/comment/DropdownMenu.jsx

@@ -1,6 +1,7 @@
 import React from 'preact/compat';
 import { useRef } from 'preact/hooks';
 import useClickOutside from '../../useClickOutside';
+import i18n from '../../../i18n';
 
 const DropdownMenu = props => {
 
@@ -11,8 +12,8 @@ const DropdownMenu = props => {
 
   return (
     <ul ref={ref} className="comment-dropdown-menu">
-      <li onClick={props.onEdit}>Edit</li>
+      <li onClick={props.onEdit}>{i18n.t('Edit')}</li>
-      <li onClick={props.onDelete}>Delete</li>
+      <li onClick={props.onDelete}>{i18n.t('Delete')}</li>
     </ul>
   )
 

src/editor/widgets/comment/TextEntryField.jsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'preact/compat';
 import ContentEditable from 'react-contenteditable';
+import i18n from '../../../i18n';
 
 /** 
  * A basic text entry field, for reuse in different widgets.
@@ -28,7 +29,7 @@ export default class TextEntryField extends Component {
         innerRef={this.onRender}
         className="r6o-editable-text" 
         html={this.props.content}
-        data-placeholder={this.props.placeholder || "Add a comment..."}
+        data-placeholder={this.props.placeholder || i18n.t('Add a comment...')}
         disabled={!this.props.editable}
         onChange={this.props.onChange}
         onKeyDown={this.onKeyDown} />

src/editor/widgets/tag/TagWidget.jsx

@@ -2,6 +2,7 @@ import React from 'preact/compat';
 import { useState } from 'preact/hooks';
 import { CSSTransition } from 'react-transition-group';
 import { CloseIcon } from '../../../Icons';
+import i18n from '../../../i18n';
 
 /** The basic freetext tag control from original Recogito **/
 const TagWidget = props => {
@@ -58,7 +59,7 @@ const TagWidget = props => {
           value={newTag} 
           onChange={evt => setNewTag(evt.target.value)} 
           onKeyDown={onKeyDown}
-          placeholder="Add tag..." />
+          placeholder={i18n.t('Add tag...')} />
       }
     </div>
   )

src/i18n/index.js

@@ -0,0 +1,10 @@
+import * as Polyglot from 'node-polyglot';
+
+const i18n = new Polyglot({ allowMissing: true });
+
+i18n.init = lang => {
+  i18n.locale(lang);
+  i18n.extend(require(`./messages_${lang}.json`));
+}
+
+export default i18n;

src/i18n/messages_de.json

@@ -0,0 +1,8 @@
+{
+  "Ok": "Ok",
+  "Cancel": "Abbrechen",
+  "Close": "Schliessen",
+  "Add a comment...": "Kommentar schreiben...",
+  "Add a reply...": "Antwort schreiben...",
+  "Add tag...": "Tag..." 
+}

src/index.js

@@ -3,6 +3,7 @@ export { default as WebAnnotation } from './WebAnnotation';
 
 export * from './editor';
 export * from './highlighter';
+export * from './i18n';
 export * from './relations';
 export * from './selection';
 export * from './utils';