Merge pull request #4176 from plotly/scattermapbox-text-br

Properly handle <br> and \n in scattermapbox text

Author: etpinard

src/lib/svg_text_utils.js

@@ -259,7 +259,7 @@ var ZERO_WIDTH_SPACE = '\u200b';
  */
 var PROTOCOLS = ['http:', 'https:', 'mailto:', '', undefined, ':'];
 
-var NEWLINES = /(\r\n?|\n)/g;
+var NEWLINES = exports.NEWLINES = /(\r\n?|\n)/g;
 
 var SPLIT_TAGS = /(<[^<>]*>)/;
 

src/traces/scattermapbox/convert.js

@@ -20,6 +20,9 @@ var makeBubbleSizeFn = require('../scatter/make_bubble_size_func');
 var subTypes = require('../scatter/subtypes');
 var convertTextOpts = require('../../plots/mapbox/convert_text_opts');
 
+var NEWLINES = require('../../lib/svg_text_utils').NEWLINES;
+var BR_TAG_ALL = require('../../lib/svg_text_utils').BR_TAG_ALL;
+
 module.exports = function convert(gd, calcTrace) {
     var trace = calcTrace[0].trace;
 
@@ -234,14 +237,13 @@ function makeSymbolGeoJSON(calcTrace, gd) {
 
     var marker = trace.marker || {};
     var symbol = marker.symbol;
-    var text = trace.text;
 
     var fillSymbol = (symbol !== 'circle') ?
         getFillFunc(symbol) :
         blankFillFunc;
 
     var fillText = subTypes.hasText(trace) ?
-        getFillFunc(text) :
+        getFillFunc(trace.text) :
         blankFillFunc;
 
     var features = [];
@@ -261,6 +263,9 @@ function makeSymbolGeoJSON(calcTrace, gd) {
             calcPt.txt = Lib.texttemplateString(txti, {}, gd._fullLayout._d3locale, calcPt, trace._meta || {});
         }
 
+        var text = txt ? calcPt.txt : fillText(calcPt.tx);
+        if(text) text = text.replace(NEWLINES, '').replace(BR_TAG_ALL, '\n');
+
         features.push({
             type: 'Feature',
             geometry: {
@@ -269,7 +274,7 @@ function makeSymbolGeoJSON(calcTrace, gd) {
             },
             properties: {
                 symbol: fillSymbol(calcPt.mx),
-                text: txt ? calcPt.txt : fillText(calcPt.tx)
+                text: text
             }
         });
     }

test/image/baselines/mapbox_bubbles-text.png

@@ -27,8 +27,8 @@
       },
       "text": [
         "A",
-        "B",
-        "C"
+        "B \n b",
+        "C <br> c"
       ],
       "textposition": "top left",
       "textfont": {

test/image/mocks/mapbox_bubbles-text.json

@@ -493,6 +493,32 @@ describe('scattermapbox convert', function() {
         expect(actualText).toEqual(['A', 'B', 'C', 'F', '']);
     });
 
+    it('should convert \\n to \'\' and <br> to \\n', function() {
+        var opts = _convert(Lib.extendFlat({}, base, {
+            mode: 'text',
+            text: ['one\nline', 'two<br>lines', 'three<BR>lines<br />yep']
+        }));
+
+        var actualText = opts.symbol.geojson.features.map(function(f) {
+            return f.properties.text;
+        });
+
+        expect(actualText).toEqual(['oneline', 'two\nlines', 'three\nlines\nyep', undefined, undefined]);
+    });
+
+    it('should convert \\n to \'\' and <br> to \\n - texttemplate case', function() {
+        var opts = _convert(Lib.extendFlat({}, base, {
+            mode: 'text',
+            texttemplate: ['%{lon}\none\nline', '%{lat}<br>two<br>lines', '%{lon}\n%{lat}<br>more<br>lines']
+        }));
+
+        var actualText = opts.symbol.geojson.features.map(function(f) {
+            return f.properties.text;
+        });
+
+        expect(actualText).toEqual(['10oneline', '20\ntwo\nlines', '3010\nmore\nlines', '', '']);
+    });
+
     it('should generate correct output for texttemplate', function() {
         var mock = {
             'type': 'scattermapbox',