No innerHTML and pseudo-html cleanup

src/components/annotations/draw.js

@@ -203,7 +203,6 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
 
     var annText = annTextGroupInner.append('text')
         .classed('annotation-text', true)
-        .attr('data-unformatted', options.text)
         .text(options.text);
 
     function textLayout(s) {
@@ -693,7 +692,6 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
             .call(textLayout)
             .on('edit', function(_text) {
                 options.text = _text;
-                this.attr({'data-unformatted': options.text});
                 this.call(textLayout);
 
                 var update = {};

src/components/drawing/index.js

@@ -615,11 +615,17 @@ var savedBBoxesCount = 0;
 var maxSavedBBoxes = 10000;
 
 drawing.bBox = function(node) {
-    // cache elements we've already measured so we don't have to
+    // Cache elements we've already measured so we don't have to
     // remeasure the same thing many times
+    // We have a few bBox callers though who pass a node larger than
+    // a <text> or a MathJax <g>, such as an axis group containing many labels.
+    // These will not generate a hash (unless we figure out an appropriate
+    // hash key for them) and thus we will not hash them.
     var hash = nodeHash(node);
-    var out = drawing.savedBBoxes[hash];
-    if(out) return Lib.extendFlat({}, out);
+    if(hash) {
+        var out = drawing.savedBBoxes[hash];
+        if(out) return Lib.extendFlat({}, out);
+    }
 
     var tester = drawing.tester.node();
 
@@ -659,7 +665,7 @@ drawing.bBox = function(node) {
     }
 
     // cache this bbox
-    drawing.savedBBoxes[hash] = bb;
+    if(hash) drawing.savedBBoxes[hash] = bb;
     savedBBoxesCount++;
 
     return Lib.extendFlat({}, bb);
@@ -683,7 +689,10 @@ drawing.bBox = function(node) {
 //   return h;
 // }
 function nodeHash(node) {
-    return node.innerHTML +
+    var inputText = node.getAttribute('data-unformatted');
+    if(inputText === null) return;
+    return inputText + '~' +
+        node.getAttribute('data-math') +
         node.getAttribute('text-anchor') +
         node.getAttribute('style');
 }

src/components/legend/draw.js

@@ -390,8 +390,6 @@ function drawTexts(g, gd) {
         text.call(svgTextUtils.makeEditable, {gd: gd})
             .call(textLayout)
             .on('edit', function(text) {
-                this.attr({'data-unformatted': text});
-
                 this.text(text)
                     .call(textLayout);
 

src/components/titles/index.js

@@ -193,17 +193,15 @@ Titles.draw = function(gd, titleClass, options) {
         }
     }
 
-    el.attr({'data-unformatted': txt})
-        .call(titleLayout);
+    el.call(titleLayout);
 
     var placeholderText = 'Click to enter ' + name + ' title';
 
     function setPlaceholder() {
         opacity = 0;
         isplaceholder = true;
         txt = placeholderText;
-        el.attr({'data-unformatted': txt})
-            .text(txt)
+        el.text(txt)
             .on('mouseover.opacity', function() {
                 d3.select(this).transition()
                     .duration(interactConstants.SHOW_PLACEHOLDER).style('opacity', 1);

src/lib/svg_text_utils.js

@@ -40,18 +40,23 @@ exports.convertToTspans = function(_context, gd, _callback) {
     svgClass += '-math';
     parent.selectAll('svg.' + svgClass).remove();
     parent.selectAll('g.' + svgClass + '-group').remove();
-    _context.style({visibility: null});
+    _context.style({visibility: null})
+        .attr({
+            // some callers use data-unformatted *from the <text> element* in 'cancel'
+            // so we need it here even if we're going to turn it into math
+            // these two (plus style and text-anchor attributes) form the key we're
+            // going to use for Drawing.bBox
+            'data-unformatted': str,
+            'data-math': ''
+        });
 
     function showText() {
         if(!parent.empty()) {
             svgClass = _context.attr('class') + '-math';
             parent.select('svg.' + svgClass).remove();
         }
         _context.text('')
-            .style({
-                visibility: 'inherit',
-                'white-space': 'pre'
-            });
+            .style('white-space', 'pre');
 
         var hasLink = buildSVGText(_context.node(), str);
 
@@ -84,7 +89,11 @@ exports.convertToTspans = function(_context, gd, _callback) {
 
                 var mathjaxGroup = parent.append('g')
                     .classed(svgClass + '-group', true)
-                    .attr({'pointer-events': 'none'});
+                    .attr({
+                        'pointer-events': 'none',
+                        'data-unformatted': str,
+                        'data-math': 'Y'
+                    });
 
                 mathjaxGroup.node().appendChild(newSvg.node());
 

src/plot_api/plot_api.js

@@ -480,9 +480,10 @@ function plotPolar(gd, data, layout) {
         .call(titleLayout);
 
     if(gd._context.editable) {
-        title.attr({'data-unformatted': txt});
         if(!txt || txt === placeholderText) {
             opacity = 0.2;
+            // placeholder is not going through convertToTspans
+            // so needs explicit data-unformatted
             title.attr({'data-unformatted': placeholderText})
                 .text(placeholderText)
                 .style({opacity: opacity})
@@ -500,8 +501,7 @@ function plotPolar(gd, data, layout) {
             this.call(svgTextUtils.makeEditable, {gd: gd})
                 .on('edit', function(text) {
                     gd.framework({layout: {title: text}});
-                    this.attr({'data-unformatted': text})
-                        .text(text)
+                    this.text(text)
                         .call(titleLayout);
                     this.call(setContenteditable);
                 })

src/snapshot/tosvg.js

@@ -86,7 +86,7 @@ module.exports = function toSVG(gd, format) {
     svg.node().style.background = '';
 
     svg.selectAll('text')
-        .attr('data-unformatted', null)
+        .attr({'data-unformatted': null, 'data-math': null})
         .each(function() {
             var txt = d3.select(this);