diff --git a/src/editor/components/jgraduate/jQuery.jGraduate.js b/src/editor/components/jgraduate/jQuery.jGraduate.js
index 6e14a3bd..22ef3182 100644
--- a/src/editor/components/jgraduate/jQuery.jGraduate.js
+++ b/src/editor/components/jgraduate/jQuery.jGraduate.js
@@ -1,7 +1,6 @@
 /* eslint-disable no-loop-func */
 /* eslint-disable prefer-destructuring */
 /* eslint-disable no-unsanitized/property */
-/* gl#bals svgEditor */
 /**
  * @file jGraduate 0.4
  *
@@ -189,7 +188,7 @@ function mkElem (name, attrs, newparent) {
 * @param {external:jQuery.fn.jGraduate.CancelCallback} [cancelCallback] Called with no arguments when Cancel is pressed
 * @returns {external:jQuery}
 */
-export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
+export function jGraduateMethod (elem, options, okCallback, cancelCallback, i18next) {
   const $this = elem,
     $settings = Object.assign({}, jGraduateDefaults, options || {}),
     id = $this.getAttribute('id'),
@@ -237,9 +236,9 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
   $this.classList.add('jGraduate_Picker');
   // eslint-disable-next-line no-unsanitized/property
   $this.innerHTML = `<ul class="jGraduate_tabs">
-      <li class="jGraduate_tab_color jGraduate_tab_current" id="jGraduate_tab_color" data-type="col">#svgEditor.i18next.t('config.jgraduate_solid_color')}</li>
-      <li class="jGraduate_tab_lingrad" id="jGraduate_tab_lingrad" data-type="lg">#svgEditor.i18next.t('config.jgraduate_linear_gradient')}</li>
-      <li class="jGraduate_tab_radgrad" id="jGraduate_tab_radgrad" data-type="rg">#svgEditor.i18next.t('config.jgraduate_radial_gradient')}</li>
+      <li class="jGraduate_tab_color jGraduate_tab_current" id="jGraduate_tab_color" data-type="col">${i18next.t('config.jgraduate_solid_color')}</li>
+      <li class="jGraduate_tab_lingrad" id="jGraduate_tab_lingrad" data-type="lg">${i18next.t('config.jgraduate_linear_gradient')}</li>
+      <li class="jGraduate_tab_radgrad" id="jGraduate_tab_radgrad" data-type="rg">${i18next.t('config.jgraduate_radial_gradient')}</li>
     </ul>
     <div class="jGraduate_colPick" id="jGraduate_colPick"></div>
     <div class="jGraduate_gradPick" id="jGraduate_gradPick"></div>
@@ -256,88 +255,88 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
       </div>
       <div class="jGraduate_Form jGraduate_Points jGraduate_lg_field">
         <div class="jGraduate_StopSection">
-          <label class="jGraduate_Form_Heading">#svgEditor.i18next.t('config.jgraduate_begin_point')}</label>
+          <label class="jGraduate_Form_Heading">${i18next.t('config.jgraduate_begin_point')}</label>
           <div class="jGraduate_Form_Section">
             <label>x:</label>
-              <input type="text" id="${id}_jGraduate_x1" size="3" title="#svgEditor.i18next.t('config.jgraduate_enter_starting_x')}"/>
+              <input type="text" id="${id}_jGraduate_x1" size="3" title="${i18next.t('config.jgraduate_enter_starting_x')}"/>
             <label>y:</label>
-            <input type="text" id="${id}_jGraduate_y1" size="3" title="#svgEditor.i18next.t('config.jgraduate_enter_starting_y')}"/>
+            <input type="text" id="${id}_jGraduate_y1" size="3" title="${i18next.t('config.jgraduate_enter_starting_y')}"/>
           </div>
         </div>
         <div class="jGraduate_StopSection">
-          <label class="jGraduate_Form_Heading">#svgEditor.i18next.t('config.jgraduate_end_point')}</label>
+          <label class="jGraduate_Form_Heading">${i18next.t('config.jgraduate_end_point')}</label>
           <div class="jGraduate_Form_Section">
             <label>x:</label>
-            <input type="text" id="${id}_jGraduate_x2" size="3" title="#svgEditor.i18next.t('config.jgraduate_enter_ending_x')}"/>
+            <input type="text" id="${id}_jGraduate_x2" size="3" title="${i18next.t('config.jgraduate_enter_ending_x')}"/>
             <label>y:</label>
-            <input type="text" id="${id}_jGraduate_y2" size="3" title="#svgEditor.i18next.t('config.jgraduate_enter_ending_y')}"/>
+            <input type="text" id="${id}_jGraduate_y2" size="3" title="${i18next.t('config.jgraduate_enter_ending_y')}"/>
           </div>
         </div>
       </div>
       <div class="jGraduate_Form jGraduate_Points jGraduate_rg_field">
         <div class="jGraduate_StopSection">
-          <label class="jGraduate_Form_Heading">#svgEditor.i18next.t('config.jgraduate_center_point')}</label>
+          <label class="jGraduate_Form_Heading">${i18next.t('config.jgraduate_center_point')}</label>
           <div class="jGraduate_Form_Section">
             <label>x:</label>
-            <input type="text" id="${id}_jGraduate_cx" size="3" title="#svgEditor.i18next.t('config.jgraduate_enter_value_x')}"/>
+            <input type="text" id="${id}_jGraduate_cx" size="3" title="${i18next.t('config.jgraduate_enter_value_x')}"/>
             <label>y:</label>
-            <input type="text" id="${id}_jGraduate_cy" size="3" title="#svgEditor.i18next.t('config.jgraduate_enter_value_y')}"/>
+            <input type="text" id="${id}_jGraduate_cy" size="3" title="${i18next.t('config.jgraduate_enter_value_y')}"/>
           </div>
         </div>
         <div class="jGraduate_StopSection">
-          <label class="jGraduate_Form_Heading">#svgEditor.i18next.t('config.jgraduate_focal_point')}</label>
+          <label class="jGraduate_Form_Heading">${i18next.t('config.jgraduate_focal_point')}</label>
           <div class="jGraduate_Form_Section">
-            <label>#svgEditor.i18next.t('config.jgraduate_match_center')} <input type="checkbox" checked="checked" id="${id}_jGraduate_match_ctr"/></label><br/>
+            <label>${i18next.t('config.jgraduate_match_center')} <input type="checkbox" checked="checked" id="${id}_jGraduate_match_ctr"/></label><br/>
             <label>x:</label>
-            <input type="text" id="${id}_jGraduate_fx" size="3" title="#svgEditor.i18next.t('config.jgraduate_enter_focal_x')}"/>
+            <input type="text" id="${id}_jGraduate_fx" size="3" title="${i18next.t('config.jgraduate_enter_focal_x')}"/>
             <label>y:</label>
-            <input type="text" id="${id}_jGraduate_fy" size="3" title="#svgEditor.i18next.t('config.jgraduate_enter_focal_y')}"/>
+            <input type="text" id="${id}_jGraduate_fy" size="3" title="${i18next.t('config.jgraduate_enter_focal_y')}"/>
           </div>
         </div>
       </div>
       <div class="jGraduate_StopSection jGraduate_SpreadMethod">
-        <label class="jGraduate_Form_Heading">#svgEditor.i18next.t('config.jgraduate_spread_method')}</label>
+        <label class="jGraduate_Form_Heading">${i18next.t('config.jgraduate_spread_method')}</label>
         <div class="jGraduate_Form_Section">
           <select class="jGraduate_spreadMethod" id="jGraduate_spreadMethod">
-            <option value=pad selected>#svgEditor.i18next.t('properties.jgraduate_pad')}</option>
-            <option value=reflect>#svgEditor.i18next.t('properties.jgraduate_reflect')}</option>
-            <option value=repeat>#svgEditor.i18next.t('properties.jgraduate_repeat')}</option>
+            <option value=pad selected>${i18next.t('properties.jgraduate_pad')}</option>
+            <option value=reflect>${i18next.t('properties.jgraduate_reflect')}</option>
+            <option value=repeat>${i18next.t('properties.jgraduate_repeat')}</option>
           </select>
         </div>
       </div>
       <div class="jGraduate_Form">
         <div class="jGraduate_Slider jGraduate_RadiusField jGraduate_rg_field">
-          <label class="prelabel">#svgEditor.i18next.t('config.jgraduate_radius')}</label>
-          <div id="${id}_jGraduate_Radius" class="jGraduate_SliderBar jGraduate_Radius" title="#svgEditor.i18next.t('config.jgraduate_set_radius')}">
+          <label class="prelabel">${i18next.t('config.jgraduate_radius')}</label>
+          <div id="${id}_jGraduate_Radius" class="jGraduate_SliderBar jGraduate_Radius" title="${i18next.t('config.jgraduate_set_radius')}">
             <img id="${id}_jGraduate_RadiusArrows" class="jGraduate_RadiusArrows" src="${$settings.images.clientPath}rangearrows2.gif">
           </div>
           <label><input type="text" id="${id}_jGraduate_RadiusInput" size="3" value="100"/>%</label>
         </div>
         <div class="jGraduate_Slider jGraduate_EllipField jGraduate_rg_field">
-          <label class="prelabel">#svgEditor.i18next.t('config.jgraduate_ellip')}</label>
-          <div id="${id}_jGraduate_Ellip" class="jGraduate_SliderBar jGraduate_Ellip" title="#svgEditor.i18next.t('config.jgraduate_set_ellip')}">
+          <label class="prelabel">${i18next.t('config.jgraduate_ellip')}</label>
+          <div id="${id}_jGraduate_Ellip" class="jGraduate_SliderBar jGraduate_Ellip" title="${i18next.t('config.jgraduate_set_ellip')}">
             <img id="${id}_jGraduate_EllipArrows" class="jGraduate_EllipArrows" src="${$settings.images.clientPath}rangearrows2.gif">
           </div>
           <label><input type="text" id="${id}_jGraduate_EllipInput" size="3" value="0"/>%</label>
         </div>
         <div class="jGraduate_Slider jGraduate_AngleField jGraduate_rg_field">
-          <label class="prelabel">#svgEditor.i18next.t('config.jgraduate_angle')}</label>
-          <div id="${id}_jGraduate_Angle" class="jGraduate_SliderBar jGraduate_Angle" title="#svgEditor.i18next.t('config.jgraduate_set_angle')}">
+          <label class="prelabel">${i18next.t('config.jgraduate_angle')}</label>
+          <div id="${id}_jGraduate_Angle" class="jGraduate_SliderBar jGraduate_Angle" title="${i18next.t('config.jgraduate_set_angle')}">
             <img id="${id}_jGraduate_AngleArrows" class="jGraduate_AngleArrows" src="${$settings.images.clientPath}rangearrows2.gif">
           </div>
-          <label><input type="text" id="${id}_jGraduate_AngleInput" size="3" value="0"/>#svgEditor.i18next.t('config.jgraduate_deg')}</label>
+          <label><input type="text" id="${id}_jGraduate_AngleInput" size="3" value="0"/>${i18next.t('config.jgraduate_deg')}</label>
         </div>
         <div class="jGraduate_Slider jGraduate_OpacField">
-          <label class="prelabel">#svgEditor.i18next.t('config.jgraduate_opac')}</label>
-          <div id="${id}_jGraduate_Opac" class="jGraduate_SliderBar jGraduate_Opac" title="#svgEditor.i18next.t('config.jgraduate_set_opac')}">
+          <label class="prelabel">${i18next.t('config.jgraduate_opac')}</label>
+          <div id="${id}_jGraduate_Opac" class="jGraduate_SliderBar jGraduate_Opac" title="${i18next.t('config.jgraduate_set_opac')}">
             <img id="${id}_jGraduate_OpacArrows" class="jGraduate_OpacArrows" src="${$settings.images.clientPath}rangearrows2.gif">
           </div>
           <label><input type="text" id="${id}_jGraduate_OpacInput" size="3" value="100"/>%</label>
         </div>
       </div>
       <div class="jGraduate_OkCancel">
-        <input type="button" id="${id}_jGraduate_Ok" class="jGraduate_Ok" value="#svgEditor.i18next.t("common.ok")}"/>
-        <input type="button" id="${id}_jGraduate_Cancel" class="jGraduate_Cancel" value="#svgEditor.i18next.t("common.cancel")}"/>
+        <input type="button" id="${id}_jGraduate_Ok" class="jGraduate_Ok" value="${i18next.t("common.ok")}"/>
+        <input type="button" id="${id}_jGraduate_Cancel" class="jGraduate_Cancel" value="${i18next.t("common.cancel")}"/>
       </div>`;
   const div = document.createElement('div');
   div.innerHTML = html;
@@ -637,7 +636,9 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
       }, null, function () {
         $this.querySelector('#jGraduate_LightBox').style.display = 'none';
         $this.querySelector('#' + id + '_jGraduate_stopPicker').style.display = 'none';
-      });
+      },
+      i18next
+      );
     });
     const jqStopEls = curGradient.querySelectorAll('stop');
     for (const jqStopEl of jqStopEls) {
@@ -1197,7 +1198,8 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
       okClicked();
     },
     null,
-    function () { cancelClicked(); }
+    function () { cancelClicked(); },
+    i18next
   );
 
   // JFH !!!!
diff --git a/src/editor/components/jgraduate/jQuery.jPicker.js b/src/editor/components/jgraduate/jQuery.jPicker.js
index 61b0190f..b4f6ce55 100755
--- a/src/editor/components/jgraduate/jQuery.jPicker.js
+++ b/src/editor/components/jgraduate/jQuery.jPicker.js
@@ -603,7 +603,7 @@ const { Color, List, ColorMethods } = jPicker; // local copies for YUI compresso
 * @param {module:jPicker.CancelCallback} [cancelCallback]
 * @returns {void}
 */
-export function jPickerMethod (elem, options, commitCallback, liveCallback, cancelCallback) {
+export function jPickerMethod (elem, options, commitCallback, liveCallback, cancelCallback, i18next) {
   let sets = mergeDeep({}, jPickerDefaults); // local copies for YUI compressor
   sets = mergeDeep(sets, options);
 
@@ -632,7 +632,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
     content.innerHTML = `<span class="Icon" id="jq-ae-Icon">
       <span class="Color" id="jq-ae-Color">&nbsp;</span>
       <span class="Alpha" id="jq-ae-Alpha">&nbsp;</span>
-      <span class="Image" id="jq-ae-Image" title="#svgEditor.i18next.t('config.open_color_picker')}">&nbsp;</span>
+      <span class="Image" id="jq-ae-Image" title="${i18next.t('config.open_color_picker')}">&nbsp;</span>
       <span class="Container" id="Container">&nbsp;</span>
     </span>`;
     that.insertAdjacentElement('afterend', content);
@@ -1331,39 +1331,39 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
         <tr>
           <td rowspan="9"><h2 class="Title">${win.title || 'config.jpicker_title'}</h2><div class="Map" id="Map"><span class="Map1" id="MMap1">&nbsp;</span><span class="Map2" id="MMap2">&nbsp;</span><span class="Map3" id="MMap3">&nbsp;</span><img src="${images.clientPath + images.colorMap.arrow.file}" class="Arrow"/></div></td>
           <td rowspan="9"><div class="Bar" id="Bar"><span class="Map1" id="Map1">&nbsp;</span><span class="Map2" id="Map2">&nbsp;</span><span class="Map3" id="Map3">&nbsp;</span><span class="Map4" id="Map4">&nbsp;</span><span class="Map5" id="Map5">&nbsp;</span><span class="Map6" id="Map6">&nbsp;</span><img src="${images.clientPath + images.colorBar.arrow.file}" class="Arrow"/></div></td>
-          <td colspan="2" class="Preview" id="Preview">#svgEditor.i18next.t('config.jpicker_new_color')}<div id="preview-div"><span class="Active" id="Active" title="#svgEditor.i18next.t('config.jpicker_tooltip_colors_new_color')}">&nbsp;</span><span class="Current" id="Current" title="#svgEditor.i18next.t('config.jpicker_tooltip_colors_current_color')}">&nbsp;</span></div>#svgEditor.i18next.t('config.jpicker_current_color')}</td>
-          <td rowspan="9" class="Button" id="Button"><input type="button" class="Ok" id="Ok" value="#svgEditor.i18next.t('common.ok')}" title="#svgEditor.i18next.t('config.jpicker_tooltip_buttons_ok')}"/><input type="button" class="Cancel" id="Cancel" value="#svgEditor.i18next.t('common.cancel')}" title="#svgEditor.i18next.t('config.jpicker_tooltip_buttons_cancel')}"/><hr/><div class="Grid" id="Grid"></div></td>
+          <td colspan="2" class="Preview" id="Preview">${i18next.t('config.jpicker_new_color')}<div id="preview-div"><span class="Active" id="Active" title="${i18next.t('config.jpicker_tooltip_colors_new_color')}">&nbsp;</span><span class="Current" id="Current" title="${i18next.t('config.jpicker_tooltip_colors_current_color')}">&nbsp;</span></div>${i18next.t('config.jpicker_current_color')}</td>
+          <td rowspan="9" class="Button" id="Button"><input type="button" class="Ok" id="Ok" value="${i18next.t('common.ok')}" title="${i18next.t('config.jpicker_tooltip_buttons_ok')}"/><input type="button" class="Cancel" id="Cancel" value="${i18next.t('common.cancel')}" title="${i18next.t('config.jpicker_tooltip_buttons_cancel')}"/><hr/><div class="Grid" id="Grid"></div></td>
         </tr>
         <tr class="Hue">
-          <td class="Radio"><label title="#svgEditor.i18next.t('config.jpicker_tooltip_hue_radio')}"><input type="radio" value="h"${settings.color.mode === 'h' ? ' checked="checked"' : ''}/>H:</label></td>
-          <td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.h : ''}" title="#svgEditor.i18next.t('config.jpicker_tooltip_hue_textbox')}"/>&nbsp;&deg;</td>
+          <td class="Radio"><label title="${i18next.t('config.jpicker_tooltip_hue_radio')}"><input type="radio" value="h"${settings.color.mode === 'h' ? ' checked="checked"' : ''}/>H:</label></td>
+          <td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.h : ''}" title="${i18next.t('config.jpicker_tooltip_hue_textbox')}"/>&nbsp;&deg;</td>
         </tr>
         <tr class="Saturation">
-          <td class="Radio"><label title="#svgEditor.i18next.t('config.jpicker_tooltip_saturation_radio')}"><input type="radio" value="s"${settings.color.mode === 's' ? ' checked="checked"' : ''}/>S:</label></td>
-          <td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.s : ''}" title="#svgEditor.i18next.t('config.jpicker_tooltip_saturation_textbox')}"/>&nbsp;%</td>
+          <td class="Radio"><label title="${i18next.t('config.jpicker_tooltip_saturation_radio')}"><input type="radio" value="s"${settings.color.mode === 's' ? ' checked="checked"' : ''}/>S:</label></td>
+          <td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.s : ''}" title="${i18next.t('config.jpicker_tooltip_saturation_textbox')}"/>&nbsp;%</td>
         </tr>
         <tr class="Value">
-          <td class="Radio"><label title="#svgEditor.i18next.t('config.jpicker_tooltip_value_radio')}"><input type="radio" value="v"${settings.color.mode === 'v' ? ' checked="checked"' : ''}/>V:</label><br/><br/></td>
-          <td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.v : ''}" title="#svgEditor.i18next.t('config.jpicker_tooltip_value_textbox')}"/>&nbsp;%<br/><br/></td>
+          <td class="Radio"><label title="${i18next.t('config.jpicker_tooltip_value_radio')}"><input type="radio" value="v"${settings.color.mode === 'v' ? ' checked="checked"' : ''}/>V:</label><br/><br/></td>
+          <td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.v : ''}" title="${i18next.t('config.jpicker_tooltip_value_textbox')}"/>&nbsp;%<br/><br/></td>
         </tr>
         <tr class="Red">
-          <td class="Radio"><label title="#svgEditor.i18next.t('config.jpicker_tooltip_red_radio')}"><input type="radio" value="r"${settings.color.mode === 'r' ? ' checked="checked"' : ''}/>R:</label></td>
-          <td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.r : ''}" title="#svgEditor.i18next.t('config.jpicker_tooltip_red_textbox')}"/></td>
+          <td class="Radio"><label title="${i18next.t('config.jpicker_tooltip_red_radio')}"><input type="radio" value="r"${settings.color.mode === 'r' ? ' checked="checked"' : ''}/>R:</label></td>
+          <td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.r : ''}" title="${i18next.t('config.jpicker_tooltip_red_textbox')}"/></td>
         </tr>
         <tr class="Green">
-          <td class="Radio"><label title="#svgEditor.i18next.t('config.jpicker_tooltip_green_radio')}"><input type="radio" value="g"${settings.color.mode === 'g' ? ' checked="checked"' : ''}/>G:</label></td>
-          <td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.g : ''}" title="#svgEditor.i18next.t('config.jpicker_tooltip_green_textbox')}"/></td>
+          <td class="Radio"><label title="${i18next.t('config.jpicker_tooltip_green_radio')}"><input type="radio" value="g"${settings.color.mode === 'g' ? ' checked="checked"' : ''}/>G:</label></td>
+          <td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.g : ''}" title="${i18next.t('config.jpicker_tooltip_green_textbox')}"/></td>
         </tr>
         <tr class="Blue">
-          <td class="Radio"><label title="#svgEditor.i18next.t('config.jpicker_tooltip_blue_radio')}"><input type="radio" value="b"${settings.color.mode === 'b' ? ' checked="checked"' : ''}/>B:</label></td>
-          <td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.b : ''}" title="#svgEditor.i18next.t('config.jpicker_tooltip_blue_textbox')}"/></td>
+          <td class="Radio"><label title="${i18next.t('config.jpicker_tooltip_blue_radio')}"><input type="radio" value="b"${settings.color.mode === 'b' ? ' checked="checked"' : ''}/>B:</label></td>
+          <td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.b : ''}" title="${i18next.t('config.jpicker_tooltip_blue_textbox')}"/></td>
         </tr>
         <tr class="Alpha">
-          <td class="Radio">${win.alphaSupport ? `<label title="#svgEditor.i18next.t('config.jpicker_tooltip_alpha_radio')}"><input type="radio" value="a"${settings.color.mode === 'a' ? ' checked="checked"' : ''}/>A:</label>` : '&nbsp;'}</td>
-          <td class="Text">${win.alphaSupport ? `<input type="text" maxlength="${3 + win.alphaPrecision}" value="${!isNullish(all) ? toFixedNumeric((all.a * 100) / 255, win.alphaPrecision) : ''}" title="#svgEditor.i18next.t('config.jpicker_tooltip_alpha_textbox')}"/>&nbsp;%` : '&nbsp;'}</td>
+          <td class="Radio">${win.alphaSupport ? `<label title="${i18next.t('config.jpicker_tooltip_alpha_radio')}"><input type="radio" value="a"${settings.color.mode === 'a' ? ' checked="checked"' : ''}/>A:</label>` : '&nbsp;'}</td>
+          <td class="Text">${win.alphaSupport ? `<input type="text" maxlength="${3 + win.alphaPrecision}" value="${!isNullish(all) ? toFixedNumeric((all.a * 100) / 255, win.alphaPrecision) : ''}" title="${i18next.t('config.jpicker_tooltip_alpha_textbox')}"/>&nbsp;%` : '&nbsp;'}</td>
         </tr>
         <tr class="Hex">
-          <td colspan="2" class="Text"><label title="#svgEditor.i18next.t('config.jpicker_tooltip_hex_textbox')}">#:<input type="text" maxlength="6" class="Hex" value="${!isNullish(all) ? all.hex : ''}"/></label>${win.alphaSupport ? `<input type="text" maxlength="2" class="AHex" value="${!isNullish(all) ? all.ahex.substring(6) : ''}" title="#svgEditor.i18next.t('config.jpicker_tooltip_hex_alpha')}"/></td>` : '&nbsp;'}
+          <td colspan="2" class="Text"><label title="${i18next.t('config.jpicker_tooltip_hex_textbox')}">#:<input type="text" maxlength="6" class="Hex" value="${!isNullish(all) ? all.hex : ''}"/></label>${win.alphaSupport ? `<input type="text" maxlength="2" class="AHex" value="${!isNullish(all) ? all.ahex.substring(6) : ''}" title="${i18next.t('config.jpicker_tooltip_hex_alpha')}"/></td>` : '&nbsp;'}
         </tr>
       </tbody></table>`;
     if (win.expandable) {
diff --git a/src/editor/components/seColorPicker.js b/src/editor/components/seColorPicker.js
index 10d2aad0..55570939 100644
--- a/src/editor/components/seColorPicker.js
+++ b/src/editor/components/seColorPicker.js
@@ -665,6 +665,7 @@ export class SeColorPicker extends HTMLElement {
     this.$label = this._shadowRoot.getElementById('label');
     this.$block = this._shadowRoot.getElementById('block');
     this.paintBox = null;
+    this.i18next = null;
     this.$picker = this._shadowRoot.getElementById('picker');
     this.$color_picker = this._shadowRoot.getElementById('color_picker');
   }
@@ -674,6 +675,7 @@ export class SeColorPicker extends HTMLElement {
    * @returns {void}
    */
    init (i18next) {
+    this.i18next = i18next;
     this.setAttribute('config-change_xxx_color', i18next.t('config.change_xxx_color'));
   }
   /**
@@ -807,7 +809,8 @@ export class SeColorPicker extends HTMLElement {
         },
         () => {
           this.$color_picker.style.display = 'none';
-        }
+        },
+        this.i18next
       );
     });
   }