temporary fix (see comment)

rollup behavior makes svgEditor global variable inaccessible -> dist does not work.
This fix is temporary by removing use of the variable until we solve this rollup config issue or find a different approach

src/editor/dialogs/cmenuDialog.js

@@ -1,4 +1,4 @@
-/* globals svgEditor */
+/* gl#bals svgEditor */
 const template = document.createElement('template');
 // eslint-disable-next-line no-unsanitized/property
 template.innerHTML = `
@@ -68,53 +68,53 @@ template.innerHTML = `
   <ul id="cmenu_canvas" class="contextMenu">
     <li>
       <a href="#cut" id="se-cut">
-      ${svgEditor.i18next.t('tools.cut')}<span class="shortcut">META+X</span>
+      #{svgEditor.i18next.t('tools.cut')}<span class="shortcut">META+X</span>
       </a>
     </li>
     <li>
       <a href="#copy" id="se-copy">
-      ${svgEditor.i18next.t('tools.copy')}<span class="shortcut">META+C</span>
+      #{svgEditor.i18next.t('tools.copy')}<span class="shortcut">META+C</span>
       </a>
     </li>
     <li>
-      <a href="#paste" id="se-paste">${svgEditor.i18next.t('tools.paste')}</a>
+      <a href="#paste" id="se-paste">#{svgEditor.i18next.t('tools.paste')}</a>
     </li>
     <li>
-      <a href="#paste_in_place" id="se-paste-in-place">${svgEditor.i18next.t('tools.paste_in_place')}</a>
+      <a href="#paste_in_place" id="se-paste-in-place">#{svgEditor.i18next.t('tools.paste_in_place')}</a>
     </li>
     <li class="separator">
       <a href="#delete" id="se-delete">
-      ${svgEditor.i18next.t('tools.delete')}<span class="shortcut">BACKSPACE</span>
+      #{svgEditor.i18next.t('tools.delete')}<span class="shortcut">BACKSPACE</span>
       </a>
     </li>
     <li class="separator">
       <a href="#group" id="se-group">
-      ${svgEditor.i18next.t('tools.group')}<span class="shortcut">G</span>
+      #{svgEditor.i18next.t('tools.group')}<span class="shortcut">G</span>
       </a>
     </li>
     <li>
       <a href="#ungroup" id="se-ungroup">
-      ${svgEditor.i18next.t('tools.ungroup')}<span class="shortcut">G</span>
+      #{svgEditor.i18next.t('tools.ungroup')}<span class="shortcut">G</span>
       </a>
     </li>
     <li class="separator">
       <a href="#move_front" id="se-move-front">
-      ${svgEditor.i18next.t('tools.move_front')}<span class="shortcut">CTRL+SHFT+]</span>
+      #{svgEditor.i18next.t('tools.move_front')}<span class="shortcut">CTRL+SHFT+]</span>
       </a>
     </li>
     <li>
       <a href="#move_up" id="se-move-up">
-      ${svgEditor.i18next.t('tools.move_up')}<span class="shortcut">CTRL+]</span>
+      #{svgEditor.i18next.t('tools.move_up')}<span class="shortcut">CTRL+]</span>
       </a>
     </li>
     <li>
       <a href="#move_down" id="se-move-down">
-      ${svgEditor.i18next.t('tools.move_down')}<span class="shortcut">CTRL+[</span>
+      #{svgEditor.i18next.t('tools.move_down')}<span class="shortcut">CTRL+[</span>
       </a>
     </li>
     <li>
       <a href="#move_back" id="se-move-back">
-      ${svgEditor.i18next.t('tools.move_back')}<span class="shortcut">CTRL+SHFT+[</span>
+      #{svgEditor.i18next.t('tools.move_back')}<span class="shortcut">CTRL+SHFT+[</span>
       </a>
     </li> 
   </ul>

src/editor/dialogs/cmenuLayersDialog.js

@@ -1,4 +1,4 @@
-/* globals svgEditor */
+/* gl#bals svgEditor */
 const template = document.createElement('template');
 // eslint-disable-next-line no-unsanitized/property
 template.innerHTML = `
@@ -66,10 +66,10 @@ template.innerHTML = `
   }  
   </style>
   <ul id="cmenu_layers" class="contextMenu">
-    <li><a href="#dupe" id="se-dupe">${svgEditor.i18next.t('layers.dupe')}</a></li>
-    <li><a href="#delete" id="se-layer-delete">${svgEditor.i18next.t('layers.del')}</a></li>
-    <li><a href="#merge_down" id="se-merge-down">${svgEditor.i18next.t('layers.merge_down')}</a></li>
-    <li><a href="#merge_all" id="se-merge-all">${svgEditor.i18next.t('layers.merge_all')}</a></li>
+    <li><a href="#dupe" id="se-dupe">#{svgEditor.i18next.t('layers.dupe')}</a></li>
+    <li><a href="#delete" id="se-layer-delete">#{svgEditor.i18next.t('layers.del')}</a></li>
+    <li><a href="#merge_down" id="se-merge-down">#{svgEditor.i18next.t('layers.merge_down')}</a></li>
+    <li><a href="#merge_all" id="se-merge-all">#{svgEditor.i18next.t('layers.merge_all')}</a></li>
   </ul>
 `;
 /**

src/editor/dialogs/editorPreferencesDialog.js

@@ -1,4 +1,4 @@
-/* globals svgEditor */
+/* gl#bals svgEditor */
 const template = document.createElement('template');
 // eslint-disable-next-line no-unsanitized/property
 template.innerHTML = `
@@ -150,16 +150,16 @@ template.innerHTML = `
     <div id="svg_prefs_container">
       <div id="tool_prefs_back" class="toolbar_button">
         <button id="tool_prefs_save">
-          ${svgEditor.i18next.t('common.ok')}
+          #{svgEditor.i18next.t('common.ok')}
         </button>
         <button id="tool_prefs_cancel">
-          ${svgEditor.i18next.t('common.cancel')}
+          #{svgEditor.i18next.t('common.cancel')}
         </button>
       </div>
       <fieldset>
-        <legend id="svginfo_editor_prefs">${svgEditor.i18next.t('config.editor_prefs')}</legend>
+        <legend id="svginfo_editor_prefs">#{svgEditor.i18next.t('config.editor_prefs')}</legend>
         <label>
-          <span id="svginfo_lang">${svgEditor.i18next.t('config.language')}</span>
+          <span id="svginfo_lang">#{svgEditor.i18next.t('config.language')}</span>
           <!-- Source: https://en.wikipedia.org/wiki/Language_names -->
           <select id="lang_select">
             <option id="lang_ar" value="ar">العربية</option>
@@ -185,46 +185,46 @@ template.innerHTML = `
           </select>
         </label>
         <label>
-          <span id="svginfo_icons">${svgEditor.i18next.t('config.icon_size')}</span>
+          <span id="svginfo_icons">#{svgEditor.i18next.t('config.icon_size')}</span>
           <select id="iconsize">
-            <option id="icon_small" value="s">${svgEditor.i18next.t('config.icon_small')}</option>
-            <option id="icon_medium" value="m" selected="selected">${svgEditor.i18next.t('config.icon_medium')}</option>
-            <option id="icon_large" value="l">${svgEditor.i18next.t('config.icon_large')}</option>
-            <option id="icon_xlarge" value="xl">${svgEditor.i18next.t('config.icon_xlarge')}</option>
+            <option id="icon_small" value="s">#{svgEditor.i18next.t('config.icon_small')}</option>
+            <option id="icon_medium" value="m" selected="selected">#{svgEditor.i18next.t('config.icon_medium')}</option>
+            <option id="icon_large" value="l">#{svgEditor.i18next.t('config.icon_large')}</option>
+            <option id="icon_xlarge" value="xl">#{svgEditor.i18next.t('config.icon_xlarge')}</option>
           </select>
         </label>
         <fieldset id="change_background">
-          <legend id="svginfo_change_background">${svgEditor.i18next.t('config.background')}</legend>
+          <legend id="svginfo_change_background">#{svgEditor.i18next.t('config.background')}</legend>
           <div id="bg_blocks"></div>
           <label>
-            <span id="svginfo_bg_url">${svgEditor.i18next.t('common.url')}</span>
+            <span id="svginfo_bg_url">#{svgEditor.i18next.t('common.url')}</span>
             <input type="text" id="canvas_bg_url" />
           </label>
-          <p id="svginfo_bg_note">${svgEditor.i18next.t('config.editor_bg_note')}</p>
+          <p id="svginfo_bg_note">#{svgEditor.i18next.t('config.editor_bg_note')}</p>
         </fieldset>
         <fieldset id="change_grid">
-          <legend id="svginfo_grid_settings">${svgEditor.i18next.t('config.grid')}</legend>
+          <legend id="svginfo_grid_settings">#{svgEditor.i18next.t('config.grid')}</legend>
           <label for="svginfo_snap_onoff">
-            <span id="svginfo_snap_onoff">${svgEditor.i18next.t('config.snapping_onoff')}</span>
+            <span id="svginfo_snap_onoff">#{svgEditor.i18next.t('config.snapping_onoff')}</span>
             <input type="checkbox" value="snapping_on" id="grid_snapping_on" />
           </label>
           <label for="grid_snapping_step">
-            <span id="svginfo_snap_step">${svgEditor.i18next.t('config.snapping_stepsize')}</span>
+            <span id="svginfo_snap_step">#{svgEditor.i18next.t('config.snapping_stepsize')}</span>
             <input type="text" id="grid_snapping_step" size="3" value="10" />
           </label>
           <label>
-            <span id="svginfo_grid_color">${svgEditor.i18next.t('config.grid_color')}</span>
+            <span id="svginfo_grid_color">#{svgEditor.i18next.t('config.grid_color')}</span>
             <input type="text" id="grid_color" size="3" value="#000" />
           </label>
         </fieldset>
         <fieldset id="units_rulers">
-          <legend id="svginfo_units_rulers">${svgEditor.i18next.t('config.units_and_rulers')}</legend>
+          <legend id="svginfo_units_rulers">#{svgEditor.i18next.t('config.units_and_rulers')}</legend>
           <label>
-            <span id="svginfo_rulers_onoff">${svgEditor.i18next.t('config.show_rulers')}</span>
+            <span id="svginfo_rulers_onoff">#{svgEditor.i18next.t('config.show_rulers')}</span>
             <input id="show_rulers" type="checkbox" value="show_rulers" checked="checked" />
           </label>
           <label>
-            <span id="svginfo_unit">${svgEditor.i18next.t('config.base_unit')}</span>
+            <span id="svginfo_unit">#{svgEditor.i18next.t('config.base_unit')}</span>
             <select id="base_unit">
               <option value="px">Pixels</option>
               <option value="cm">Centimeters</option>

src/editor/dialogs/exportDialog.js

@@ -1,4 +1,4 @@
-/* globals svgEditor */
+/* gl#bals svgEditor */
 import './se-elix/define/NumberSpinBox.js';
 
 const template = document.createElement('template');
@@ -59,7 +59,7 @@ template.innerHTML = `
     <div id="dialog_container">
       <div id="dialog_content">
         <p class="se-select">
-          ${svgEditor.i18next.t('ui.export_type_label')} 
+          #{svgEditor.i18next.t('ui.export_type_label')} 
         </p>
         <p class="se-select">
         <select id="se-storage-pref">
@@ -70,14 +70,14 @@ template.innerHTML = `
           <option value="PDF">PDF</option>
         </select> 
         </p>
-        <p id="se-quality">${svgEditor.i18next.t('ui.quality')}<elix-number-spin-box min="-1" max="101" step="5" value="100"></elix-number-spin-box></p>
+        <p id="se-quality">#{svgEditor.i18next.t('ui.quality')}<elix-number-spin-box min="-1" max="101" step="5" value="100"></elix-number-spin-box></p>
       </div>
       <div id="dialog_buttons">
         <button id="export_ok">
-          ${svgEditor.i18next.t('common.ok')}
+          #{svgEditor.i18next.t('common.ok')}
         </button>
         <button id="export_cancel">
-          ${svgEditor.i18next.t('common.cancel')}
+          #{svgEditor.i18next.t('common.cancel')}
         </button>
       </div>
     </div>

src/editor/dialogs/imagePropertiesDialog.js

@@ -1,4 +1,4 @@
-/* globals svgEditor */
+/* gl#bals svgEditor */
 import { isValidUnit } from '../../common/units.js';
 
 const template = document.createElement('template');
@@ -71,46 +71,46 @@ template.innerHTML = `
   <elix-dialog id="svg_docprops" aria-label="Sample dialog" closed>
     <div id="svg_docprops_container">
       <div id="tool_docprops_back" class="toolbar_button">
-        <button id="tool_docprops_save">${svgEditor.i18next.t('common.ok')}</button>
-        <button id="tool_docprops_cancel">${svgEditor.i18next.t('common.cancel')}</button>
+        <button id="tool_docprops_save">#{svgEditor.i18next.t('common.ok')}</button>
+        <button id="tool_docprops_cancel">#{svgEditor.i18next.t('common.cancel')}</button>
       </div>
       <fieldset id="svg_docprops_docprops">
-        <legend id="svginfo_image_props">${svgEditor.i18next.t('config.image_props')}</legend>
+        <legend id="svginfo_image_props">#{svgEditor.i18next.t('config.image_props')}</legend>
         <label>
-          <span id="svginfo_title">${svgEditor.i18next.t('config.doc_title')}</span>
+          <span id="svginfo_title">#{svgEditor.i18next.t('config.doc_title')}</span>
           <input type="text" id="canvas_title" />
         </label>
         <fieldset id="change_resolution">
-          <legend id="svginfo_dim">${svgEditor.i18next.t('config.doc_dims')}</legend>
+          <legend id="svginfo_dim">#{svgEditor.i18next.t('config.doc_dims')}</legend>
           <label>
-            <span id="svginfo_width">${svgEditor.i18next.t('common.width')}</span>
+            <span id="svginfo_width">#{svgEditor.i18next.t('common.width')}</span>
             <input type="text" id="canvas_width" size="6" />
           </label>
           <label>
-            <span id="svginfo_height">${svgEditor.i18next.t('common.height')}</span>
+            <span id="svginfo_height">#{svgEditor.i18next.t('common.height')}</span>
             <input type="text" id="canvas_height" size="6" />
           </label>
           <label>
             <select id="resolution">
-              <option id="selectedPredefined" selected="selected">${svgEditor.i18next.t('config.select_predefined')}</option>
+              <option id="selectedPredefined" selected="selected">#{svgEditor.i18next.t('config.select_predefined')}</option>
               <option>640x480</option>
               <option>800x600</option>
               <option>1024x768</option>
               <option>1280x960</option>
               <option>1600x1200</option>
-              <option id="fitToContent" value="content">${svgEditor.i18next.t('tools.fitToContent')}</option>
+              <option id="fitToContent" value="content">#{svgEditor.i18next.t('tools.fitToContent')}</option>
             </select>
           </label>
         </fieldset>
         <fieldset id="image_save_opts">
-          <legend id="includedImages">${svgEditor.i18next.t('config.included_images')}</legend>
+          <legend id="includedImages">#{svgEditor.i18next.t('config.included_images')}</legend>
           <label>
             <input type="radio" id="image_embed" name="image_opt" value="embed" checked="checked" />
-            <span id="image_opt_embed">${svgEditor.i18next.t('config.image_opt_embed')}</span>
+            <span id="image_opt_embed">#{svgEditor.i18next.t('config.image_opt_embed')}</span>
           </label>
           <label>
             <input type="radio" id="image_ref" name="image_opt" value="ref" />
-            <span id="image_opt_ref">${svgEditor.i18next.t('config.image_opt_ref')}</span>
+            <span id="image_opt_ref">#{svgEditor.i18next.t('config.image_opt_ref')}</span>
           </label>
         </fieldset>
       </fieldset>

src/editor/dialogs/svgSourceDialog.js

@@ -1,4 +1,4 @@
-/* globals svgEditor */
+/* gl#bals svgEditor */
 const template = document.createElement('template');
 // eslint-disable-next-line no-unsanitized/property
 template.innerHTML = `
@@ -63,17 +63,17 @@ template.innerHTML = `
     <div id="svg_source_container">
       <div id="tool_source_back" class="toolbar_button">
         <button id="tool_source_save">
-          ${svgEditor.i18next.t('tools.source_save')}
+          #{svgEditor.i18next.t('tools.source_save')}
         </button>
         <button id="tool_source_cancel">
-          ${svgEditor.i18next.t('common.cancel')}
+          #{svgEditor.i18next.t('common.cancel')}
         </button>
       </div>
       <div id="save_output_btns">
         <p id="copy_save_note">
-          ${svgEditor.i18next.t('notification.source_dialog_note')}
+          #{svgEditor.i18next.t('notification.source_dialog_note')}
         </p>
-        <button id="copy_save_done">${svgEditor.i18next.t('config.done')}</button>
+        <button id="copy_save_done">#{svgEditor.i18next.t('config.done')}</button>
       </div>
       <form>
         <textarea id="svg_source_textarea" spellcheck="false" rows="5" cols="80"></textarea>