base64unicode encoding (#95)

Co-authored-by: Mikhail Maluyk <[email protected]>

Author: hlomzik

src/tags/object/HyperText.js

@@ -3,6 +3,7 @@ import React, { Component } from "react";
 import { observer, inject } from "mobx-react";
 import { types, getType, getRoot } from "mobx-state-tree";
 
+import Utils from "../../utils";
 import ObjectBase from "./Base";
 import ObjectTag from "../../components/Tags/Object";
 import RegionsMixin from "../../mixins/Regions";
@@ -22,7 +23,7 @@ import InfoModal from "../../components/Infomodal/Infomodal";
  * @param {string} name - name of the element
  * @param {string} value - value of the element
  * @param {boolean} [showLabels=false] - show labels next to the region
- * @param {string} [encoding=string|base64] - provide the html as an escaped string or base64 encoded string
+ * @param {string} [encoding=none|base64|base64unicode]  - decode value from encoded string
  */
 const TagAttrs = types.model("HyperTextModel", {
   name: types.maybeNull(types.string),
@@ -31,7 +32,7 @@ const TagAttrs = types.model("HyperTextModel", {
   highlightcolor: types.maybeNull(types.string),
   showlabels: types.optional(types.boolean, false),
 
-  encoding: types.optional(types.string, "string"),
+  encoding: types.optional(types.enumeration(["none", "base64", "base64unicode"]), "none"),
 });
 
 const Model = types
@@ -134,13 +135,7 @@ const Model = types
     },
   }));
 
-const HyperTextModel = types.compose(
-  "HyperTextModel",
-  RegionsMixin,
-  TagAttrs,
-  Model,
-  ObjectBase,
-);
+const HyperTextModel = types.compose("HyperTextModel", RegionsMixin, TagAttrs, Model, ObjectBase);
 
 class HtxHyperTextView extends Component {
   render() {
@@ -253,6 +248,7 @@ class HyperTextPieceView extends Component {
 
     let val = runTemplate(item.value, store.task.dataObj);
     if (item.encoding === "base64") val = atob(val);
+    if (item.encoding === "base64unicode") val = Utils.Checkers.atobUnicode(val);
 
     return (
       <ObjectTag item={item}>

src/tags/object/Text.js

@@ -27,7 +27,7 @@ import InfoModal from "../../components/Infomodal/Infomodal";
  * @param {string} [highlightColor]          - hex string with highlight color, if not provided uses the labels color
  * @param {symbol|word} [granularity=symbol] - control per symbol or word selection
  * @param {boolean} [showLabels=true]        - show labels next to the region
- * @param {string} [encoding=string|base64]  - decode value from a plain or base64 encoded string
+ * @param {string} [encoding=none|base64|base64unicode]  - decode value from encoded string
  */
 const TagAttrs = types.model("TextModel", {
   name: types.maybeNull(types.string),
@@ -46,7 +46,8 @@ const TagAttrs = types.model("TextModel", {
   showlabels: types.optional(types.boolean, true),
 
   granularity: types.optional(types.enumeration(["symbol", "word", "sentence", "paragraph"]), "symbol"),
-  encoding: types.optional(types.string, "string"),
+
+  encoding: types.optional(types.enumeration(["none", "base64", "base64unicode"]), "none"),
 });
 
 const Model = types
@@ -114,6 +115,8 @@ const Model = types
     loadedValue(val) {
       self.loaded = true;
       if (self.encoding === "base64") val = atob(val);
+      if (self.encoding === "base64unicode") val = Utils.Checkers.atobUnicode(val);
+
       self._value = val;
 
       self._regionsCache.forEach(({ region, completion }) => {
@@ -219,13 +222,7 @@ const Model = types
     },
   }));
 
-const TextModel = types.compose(
-  "TextModel",
-  RegionsMixin,
-  TagAttrs,
-  Model,
-  ObjectBase,
-);
+const TextModel = types.compose("TextModel", RegionsMixin, TagAttrs, Model, ObjectBase);
 
 class HtxTextView extends Component {
   render() {
@@ -248,6 +245,7 @@ class TextPieceView extends Component {
 
     let val = runTemplate(item.value, store.task.dataObj);
     if (item.encoding === "base64") val = atob(val);
+    if (item.encoding === "base64unicode") val = Utils.Checkers.atobUnicode(val);
 
     return val;
   }

src/utils/utilities.js

@@ -82,3 +82,15 @@ export function hashCode(str) {
   }
   return hash + "";
 }
+
+export function atobUnicode(str) {
+  // Going backwards: from bytestream, to percent-encoding, to original string.
+  return decodeURIComponent(
+    atob(str)
+      .split("")
+      .map(function(c) {
+        return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
+      })
+      .join(""),
+  );
+}