stable section translations (sans ellipsis)

Author: kennethbruskiewicz

lib/Toolbar.js

@@ -452,6 +452,35 @@ class Toolbar {
     $jumpToInput.selectize({
       options: options,
       openOnFocus: true,
+      render: {
+          item: function (data, escape) {
+            // Some `data.text` input is already prepended with spaces, so we replace the translation
+            // ISSUE: a more consistent approach might use a formatter but this is simple. ;[prepend]indent
+            
+            const item_name = data.value.replace(/\. /g, '').trim();
+            const identifier_name = item_name.replace(/ /g, '_');
+            const canonical_name = data.value.match(/ \. /g) ? identifier_name : item_name;
+            const label = data.text.replace(item_name, i18next.t(canonical_name));
+
+            // TODO: not rerendering
+            return `<div data-i18n='${canonical_name}'>` + escape(label) + `</div>`;
+          },
+          option: (data, escape) => {
+            // Some `data.text` input is already prepended with spaces, so we replace the translation
+            // ISSUE: a more consistent approach might use a formatter but this is simple. ;[prepend]indent
+            
+            const item_name = data.value.replace(/\. /g, '').trim();
+            const identifier_name = item_name.replace(/ /g, '_');
+            const canonical_name = data.value.match(/ \. /g) ? identifier_name : item_name;
+            const label = data.text.replace(item_name, i18next.t(canonical_name));
+            
+            let indentation = 12 + label.search(/\S/) * 8; // pixels
+
+            return `<div style="padding-left:${indentation}px" class="option ${
+              data.value === '' ? 'selectize-dropdown-emptyoptionlabel' : ''
+            }" data-i18n='${canonical_name}'>${escape(label)}</div>`;
+          },
+        },
     });
     $jumpToInput.off('change').on('change', (e) => {
       if (!e.target.value) {