Fix bug 1215874: Markup   and other special spaces (#526)

mozilla · Jan 12, 2017 · 840e7eb · 840e7eb
1 parent 3857f7d
commit 840e7eb
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 10 deletions.
diff --git a/pontoon/base/static/js/main.js b/pontoon/base/static/js/main.js
@@ -79,7 +79,25 @@ var Pontoon = (function (my) {
      * string String that has to be displayed as is instead of rendered
      */
     doNotRender: function (string) {
-      return $('<div/>').text(string).html()
+      return $('<div/>').text(string).html();
+    },
+
+    /*
+     * Markup placeables
+     */
+    markPlaceables: function (string) {
+      function markup(string, regex, title) {
+        return string.replace(regex, '<mark class="placeable" title="' + title + '">$&</mark>');
+      }
+
+      string = this.doNotRender(string);
+
+      // Pontoon.doNotRender() replaces \u00A0 with &nbsp;
+      string = markup(string, /&nbsp;/gi, 'Non-breaking space');
+      string = markup(string, /[\u202F]/gi, 'Narrow non-breaking space');
+      string = markup(string, /[\u2009]/gi, 'Thin space');
+
+      return string;
     },
 
     /*
@@ -156,7 +174,7 @@ var Pontoon = (function (my) {
             '</header>' +
             '<p class="original">' + self.doNotRender(data.original || '') + '</p>' +
             '<p class="translation" dir="auto" lang="' + self.locale.code + '">' +
-              self.doNotRender(data.translation) +
+              self.markPlaceables(data.translation) +
             '</p>' +
           '</li>');
           ul.append(li);

diff --git a/pontoon/base/static/js/translate.js b/pontoon/base/static/js/translate.js
@@ -36,7 +36,7 @@ var Pontoon = (function (my) {
         '<p class="string-wrapper">' +
           '<span class="source-string">' + source_string + '</span>' +
           '<span class="translation-string" dir="auto" lang="' + self.locale.code + '">' +
-            self.doNotRender(entity.translation[0].string || '') +
+            self.markPlaceables(entity.translation[0].string || '') +
           '</span>' +
         '</p>' +
         '<span class="arrow fa fa-chevron-right fa-lg"></span>' +
@@ -130,10 +130,10 @@ var Pontoon = (function (my) {
         success: function(data) {
           if (data.length) {
             $.each(data, function() {
-              list.append('<li class="suggestion" title="Copy Into Translation (Tab)">' +
+              list.append('<li class="suggestion" title="Copy Into Translation (Tab)" data-clipboard-text="' + self.doNotRender(this.string) + '">' +
                 '<header>' + this.locale__name + '<span class="stress">' + this.locale__code + '</span></header>' +
                 '<p class="translation" dir="auto" lang="' + this.locale__code + '">' +
-                  self.doNotRender(this.string) +
+                  self.markPlaceables(this.string) +
                 '</p>' +
               '</li>');
 
@@ -248,7 +248,7 @@ var Pontoon = (function (my) {
           if (data.length) {
             $.each(data, function() {
               list.append(
-                '<li data-id="' + this.id + '" class="suggestion ' +
+                '<li data-id="' + this.id + '" data-clipboard-text="' + self.doNotRender(this.translation) + '" class="suggestion ' +
                 (this.approved ? 'translated' : this.fuzzy ? 'fuzzy' : 'suggested') +
                 '" title="Copy Into Translation (Tab)">' +
                   '<header class="clearfix' +
@@ -268,7 +268,7 @@ var Pontoon = (function (my) {
                     '</menu>' +
                   '</header>' +
                   '<p class="translation" dir="auto" lang="' + self.locale.code + '">' +
-                    self.doNotRender(this.translation) +
+                    self.markPlaceables(this.translation) +
                   '</p>' +
                 '</li>');
             });
@@ -1749,8 +1749,7 @@ var Pontoon = (function (my) {
           return;
         }
 
-        var translation = $(this).find('.translation').text(),
-            source = translation;
+        var source = $(this).data('clipboard-text');
 
         $('#translation').val(source).focus();
         self.moveCursorToBeginning();
@@ -2191,7 +2190,7 @@ var Pontoon = (function (my) {
         .removeClass('translated suggested fuzzy partial')
         .addClass(status)
         .find('.translation-string')
-          .html(self.doNotRender(translation || ''));
+          .html(self.markPlaceables(translation || ''));
 
       self.updateProgress(entity);
     },