From 7d546a8f608c03ae32939c8fb32ce2cfe4b4750f Mon Sep 17 00:00:00 2001
From: Martin Raifer <martin@raifer.tech>
Date: Fri, 24 Jun 2022 19:31:41 +0200
Subject: [PATCH] refactor further modules to not rely on html injection

---
 modules/core/localizer.js           | 4 +++-
 modules/renderer/tile_layer.js      | 4 +++-
 modules/ui/commit_warnings.js       | 2 +-
 modules/ui/entity_editor.js         | 3 ++-
 modules/ui/preset_list.js           | 3 ++-
 modules/ui/sections/feature_type.js | 7 ++++---
 6 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/modules/core/localizer.js b/modules/core/localizer.js
index 15f185844..375d359ea 100644
--- a/modules/core/localizer.js
+++ b/modules/core/localizer.js
@@ -376,7 +376,7 @@ export function coreLocalizer() {
 
     // Adds localized text wrapped as an HTML span element with locale info to the DOM
     localizer.t.append = function(stringId, replacements, locale) {
-      return function(selection) {
+      const ret = function(selection) {
         const info = localizer.tInfo(stringId, replacements, locale);
         return selection.append('span')
             .attr('class', 'localized-text')
@@ -385,6 +385,8 @@ export function coreLocalizer() {
                 + info.text
                 + (replacements &&replacements.suffix || ''));
       };
+      ret.stringId = stringId;
+      return ret;
     };
 
     localizer.languageName = (code, options) => {
diff --git a/modules/renderer/tile_layer.js b/modules/renderer/tile_layer.js
index bd9c719f1..1ab3d398e 100644
--- a/modules/renderer/tile_layer.js
+++ b/modules/renderer/tile_layer.js
@@ -250,7 +250,9 @@ export function rendererTileLayer(context) {
                         if (result && result.vintage && result.vintage.range) {
                           span.text(result.vintage.range);
                         } else {
-                          span.html(t.html('info_panels.background.vintage') + ': ' + t.html('info_panels.background.unknown'));
+                          span.call(t.append('info_panels.background.vintage'));
+                          span.append('span').text(': ');
+                          span.call(t.append('info_panels.background.unknown'));
                         }
                     });
                 });
diff --git a/modules/ui/commit_warnings.js b/modules/ui/commit_warnings.js
index d919f6aeb..71c9f8a4e 100644
--- a/modules/ui/commit_warnings.js
+++ b/modules/ui/commit_warnings.js
@@ -34,7 +34,7 @@ export function uiCommitWarnings(context) {
 
             containerEnter
                 .append('h3')
-                .html(severity === 'warning' ? t.html('commit.warnings') : t.html('commit.errors'));
+                .call(severity === 'warning' ? t.append('commit.warnings') : t.append('commit.errors'));
 
             containerEnter
                 .append('ul')
diff --git a/modules/ui/entity_editor.js b/modules/ui/entity_editor.js
index f94641fdf..316e9bd26 100644
--- a/modules/ui/entity_editor.js
+++ b/modules/ui/entity_editor.js
@@ -65,7 +65,8 @@ export function uiEntityEditor(context) {
             .merge(headerEnter);
 
         header.selectAll('h2')
-            .html(_entityIDs.length === 1 ? t.html('inspector.edit') : t.html('inspector.edit_features'));
+            .text('')
+            .call(_entityIDs.length === 1 ? t.append('inspector.edit') : t.append('inspector.edit_features'));
 
         header.selectAll('.preset-reset')
             .on('click', function() {
diff --git a/modules/ui/preset_list.js b/modules/ui/preset_list.js
index ba9b0bf4f..c06275dd5 100644
--- a/modules/ui/preset_list.js
+++ b/modules/ui/preset_list.js
@@ -399,10 +399,11 @@ export function uiPresetList(context) {
             ].filter(Boolean);
 
             label.selectAll('.namepart')
-                .data(nameparts)
+                .data(nameparts, d => d.stringId)
                 .enter()
                 .append('div')
                 .attr('class', 'namepart')
+                .text('')
                 .each(function(d) { d(d3_select(this)); });
 
             wrap.call(item.reference.button);
diff --git a/modules/ui/sections/feature_type.js b/modules/ui/sections/feature_type.js
index 7939a7605..d93c4f020 100644
--- a/modules/ui/sections/feature_type.js
+++ b/modules/ui/sections/feature_type.js
@@ -96,11 +96,11 @@ export function uiSectionFeatureType(context) {
         var names = _presets.length === 1 ? [
             _presets[0].nameLabel(),
             _presets[0].subtitleLabel()
-        ].filter(Boolean) : [t('inspector.multiple_types')];
+        ].filter(Boolean) : [ t.append('inspector.multiple_types') ];
 
         var label = selection.select('.label-inner');
         var nameparts = label.selectAll('.namepart')
-            .data(names, function(d) { return d; });
+            .data(names, d => d.stringId);
 
         nameparts.exit()
             .remove();
@@ -109,7 +109,8 @@ export function uiSectionFeatureType(context) {
             .enter()
             .append('div')
             .attr('class', 'namepart')
-            .each(function(d) { return d(d3_select(this)); });
+            .text('')
+            .each(function(d) { d(d3_select(this)); });
     }
 
     section.entityIDs = function(val) {