From 69bf3d9d8197ab211d4c1c5d23ac829c01fcddcd Mon Sep 17 00:00:00 2001
From: Timo Dittmann <timo.dittmann@kaufland.com>
Date: Mon, 25 Jan 2021 13:25:22 +0100
Subject: [PATCH] Added word spacing to text formatting tools

---
 badges/coverage-badge.svg                     |  2 +-
 badges/tests-badge.svg                        |  2 +-
 .../ui/__snapshots__/scenario.js.snap         | 70 +++++++++++++++++++
 cypress/integration/ui/scenario.js            |  8 +++
 cypress/integration/unit/sanitize.js          | 10 +++
 src/editor/images/svg_edit_icons.svg          | 18 +++++
 src/editor/index.html                         | 14 ++++
 src/editor/locale.js                          |  1 +
 src/editor/locale/lang.af.js                  |  3 +-
 src/editor/locale/lang.ar.js                  |  3 +-
 src/editor/locale/lang.az.js                  |  3 +-
 src/editor/locale/lang.be.js                  |  3 +-
 src/editor/locale/lang.bg.js                  |  3 +-
 src/editor/locale/lang.ca.js                  |  3 +-
 src/editor/locale/lang.cs.js                  |  3 +-
 src/editor/locale/lang.cy.js                  |  3 +-
 src/editor/locale/lang.da.js                  |  3 +-
 src/editor/locale/lang.de.js                  |  3 +-
 src/editor/locale/lang.el.js                  |  3 +-
 src/editor/locale/lang.en.js                  |  1 +
 src/editor/locale/lang.es.js                  |  3 +-
 src/editor/locale/lang.et.js                  |  3 +-
 src/editor/locale/lang.fa.js                  |  3 +-
 src/editor/locale/lang.fi.js                  |  3 +-
 src/editor/locale/lang.fr.js                  |  3 +-
 src/editor/locale/lang.fy.js                  |  3 +-
 src/editor/locale/lang.ga.js                  |  3 +-
 src/editor/locale/lang.gl.js                  |  3 +-
 src/editor/locale/lang.he.js                  |  3 +-
 src/editor/locale/lang.hi.js                  |  3 +-
 src/editor/locale/lang.hr.js                  |  3 +-
 src/editor/locale/lang.hu.js                  |  3 +-
 src/editor/locale/lang.hy.js                  |  3 +-
 src/editor/locale/lang.id.js                  |  3 +-
 src/editor/locale/lang.is.js                  |  3 +-
 src/editor/locale/lang.it.js                  |  3 +-
 src/editor/locale/lang.ja.js                  |  3 +-
 src/editor/locale/lang.ko.js                  |  3 +-
 src/editor/locale/lang.lt.js                  |  3 +-
 src/editor/locale/lang.lv.js                  |  3 +-
 src/editor/locale/lang.mk.js                  |  3 +-
 src/editor/locale/lang.ms.js                  |  3 +-
 src/editor/locale/lang.mt.js                  |  3 +-
 src/editor/locale/lang.nl.js                  |  3 +-
 src/editor/locale/lang.no.js                  |  3 +-
 src/editor/locale/lang.pl.js                  |  3 +-
 src/editor/locale/lang.pt-BR.js               |  3 +-
 src/editor/locale/lang.pt-PT.js               |  3 +-
 src/editor/locale/lang.ro.js                  |  3 +-
 src/editor/locale/lang.ru.js                  |  3 +-
 src/editor/locale/lang.sk.js                  |  3 +-
 src/editor/locale/lang.sl.js                  |  3 +-
 src/editor/locale/lang.sq.js                  |  3 +-
 src/editor/locale/lang.sr.js                  |  3 +-
 src/editor/locale/lang.sv.js                  |  3 +-
 src/editor/locale/lang.sw.js                  |  3 +-
 src/editor/locale/lang.test.js                |  3 +-
 src/editor/locale/lang.th.js                  |  3 +-
 src/editor/locale/lang.tl.js                  |  3 +-
 src/editor/locale/lang.tr.js                  |  3 +-
 src/editor/locale/lang.uk.js                  |  3 +-
 src/editor/locale/lang.vi.js                  |  3 +-
 src/editor/locale/lang.yi.js                  |  1 +
 src/editor/locale/lang.zh-CN.js               |  3 +-
 src/editor/locale/lang.zh-HK.js               |  3 +-
 src/editor/locale/lang.zh-TW.js               |  3 +-
 src/editor/svgedit.js                         | 32 +++++++++
 src/svgcanvas/elem-get-set.js                 | 32 +++++++++
 src/svgcanvas/sanitize.js                     |  2 +-
 src/svgcanvas/svgcanvas.js                    | 20 +++++-
 70 files changed, 320 insertions(+), 61 deletions(-)

diff --git a/badges/coverage-badge.svg b/badges/coverage-badge.svg
index 24d5755f..b9a72568 100644
--- a/badges/coverage-badge.svg
+++ b/badges/coverage-badge.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="421" height="20"><defs><style>text{font-size:11px;font-family:Verdana,DejaVu Sans,Geneva,sans-serif}text.shadow{fill:#010101;fill-opacity:.3}text.high{fill:#fff}</style><linearGradient id="smooth" x2="0" y2="100%"><stop offset="0" stop-color="#aaa" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="round"><rect width="100%" height="100%" rx="3" fill="#fff"/></mask></defs><g id="bg" mask="url(#round)"><path fill="green" stroke="#000" d="M0 0h113v20H0zM113 0h109v20H113zM222 0h87v20h-87zM309 0h112v20H309z"/><path fill="url(#smooth)" d="M0 0h421v20H0z"/></g><g id="fg"><text class="shadow" x="5.5" y="15">Statements 53.1%</text><text class="high" x="5" y="14">Statements 53.1%</text><text class="shadow" x="118.5" y="15">Branches 41.93%</text><text class="high" x="118" y="14">Branches 41.93%</text><text class="shadow" x="227.5" y="15">Lines 53.92%</text><text class="high" x="227" y="14">Lines 53.92%</text><text class="shadow" x="314.5" y="15">Functions 60.63%</text><text class="high" x="314" y="14">Functions 60.63%</text></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="421" height="20"><defs><style>text{font-size:11px;font-family:Verdana,DejaVu Sans,Geneva,sans-serif}text.shadow{fill:#010101;fill-opacity:.3}text.high{fill:#fff}</style><linearGradient id="smooth" x2="0" y2="100%"><stop offset="0" stop-color="#aaa" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="round"><rect width="100%" height="100%" rx="3" fill="#fff"/></mask></defs><g id="bg" mask="url(#round)"><path fill="green" stroke="#000" d="M0 0h120v20H0zM120 0h109v20H120zM229 0h87v20h-87zM316 0h105v20H316z"/><path fill="url(#smooth)" d="M0 0h421v20H0z"/></g><g id="fg"><text class="shadow" x="5.5" y="15">Statements 53.21%</text><text class="high" x="5" y="14">Statements 53.21%</text><text class="shadow" x="125.5" y="15">Branches 42.09%</text><text class="high" x="125" y="14">Branches 42.09%</text><text class="shadow" x="234.5" y="15">Lines 54.02%</text><text class="high" x="234" y="14">Lines 54.02%</text><text class="shadow" x="321.5" y="15">Functions 60.7%</text><text class="high" x="321" y="14">Functions 60.7%</text></g></svg>
diff --git a/badges/tests-badge.svg b/badges/tests-badge.svg
index 3c631ddc..054a703a 100644
--- a/badges/tests-badge.svg
+++ b/badges/tests-badge.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="97" height="20"><defs><style>text{font-size:11px;font-family:Verdana,DejaVu Sans,Geneva,sans-serif}text.shadow{fill:#010101;fill-opacity:.3}text.high{fill:#fff}</style><linearGradient id="smooth" x2="0" y2="100%"><stop offset="0" stop-color="#aaa" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="round"><rect width="100%" height="100%" rx="3" fill="#fff"/></mask></defs><g id="bg" mask="url(#round)"><path fill="#696969" d="M0 0h41v20H0z"/><path fill="#4c1" d="M41 0h56v20H41z"/><path fill="url(#smooth)" d="M0 0h97v20H0z"/></g><g id="fg"><text class="shadow" x="5.5" y="15">Tests</text><text class="high" x="5" y="14">Tests</text><text class="shadow" x="46.5" y="15">151/151</text><text class="high" x="46" y="14">151/151</text></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="97" height="20"><defs><style>text{font-size:11px;font-family:Verdana,DejaVu Sans,Geneva,sans-serif}text.shadow{fill:#010101;fill-opacity:.3}text.high{fill:#fff}</style><linearGradient id="smooth" x2="0" y2="100%"><stop offset="0" stop-color="#aaa" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="round"><rect width="100%" height="100%" rx="3" fill="#fff"/></mask></defs><g id="bg" mask="url(#round)"><path fill="#696969" d="M0 0h41v20H0z"/><path fill="#4c1" d="M41 0h56v20H41z"/><path fill="url(#smooth)" d="M0 0h97v20H0z"/></g><g id="fg"><text class="shadow" x="5.5" y="15">Tests</text><text class="high" x="5" y="14">Tests</text><text class="shadow" x="46.5" y="15">153/153</text><text class="high" x="46" y="14">153/153</text></g></svg>
\ No newline at end of file
diff --git a/cypress/integration/ui/__snapshots__/scenario.js.snap b/cypress/integration/ui/__snapshots__/scenario.js.snap
index 16495423..aef0794a 100644
--- a/cypress/integration/ui/__snapshots__/scenario.js.snap
+++ b/cypress/integration/ui/__snapshots__/scenario.js.snap
@@ -494,6 +494,7 @@ exports[`use various parts of svg-edit > check tool_star #0`] = `
       font-weight="bold"
       text-decoration=" underline overline line-through"
       letter-spacing="150"
+      word-spacing="10"
     >
       B
     </text>
@@ -587,6 +588,7 @@ exports[`use various parts of svg-edit > check tool_polygon #0`] = `
       font-weight="bold"
       text-decoration=" underline overline line-through"
       letter-spacing="150"
+      word-spacing="10"
     >
       B
     </text>
@@ -1113,3 +1115,71 @@ exports[`use various parts of svg-edit > check tool_letter_spacing #0`] = `
   </g>
 </svg>
 `;
+
+exports[`use various parts of svg-edit > check tool_word_spacing #0`] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  width="640"
+  height="480"
+  id="svgcontent"
+  overflow="visible"
+  x="640"
+  y="480"
+  viewBox="0 0 640 480"
+>
+  <g class="layer">
+    <title>Layer 1</title>
+    <rect
+      id="rect"
+      fill="#FF0000"
+      height="70"
+      stroke="#000000"
+      stroke-width="5"
+      width="94"
+      x="69.5"
+      y="51.5"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></rect>
+    <text
+      fill="#ffff00"
+      stroke="#000000"
+      stroke-width="0"
+      x="116"
+      y="87"
+      id="svg_1"
+      font-size="24"
+      font-family="serif"
+      text-anchor="end"
+      xml:space="preserve"
+      fill-opacity="1"
+      stroke-opacity="1"
+      font-=""
+      font-weight="bold"
+      text-decoration=" underline overline line-through"
+      letter-spacing="150"
+      word-spacing="10"
+    >
+      B
+    </text>
+    <text
+      fill="#000000"
+      stroke="#000000"
+      stroke-width="0"
+      x="136"
+      y="107"
+      font-size="24"
+      font-family="serif"
+      text-anchor="middle"
+      xml:space="preserve"
+      fill-opacity="1"
+      stroke-opacity="1"
+      id="svg_2"
+      transform="matrix(1 0 0 1 0 0)"
+    >
+      B
+    </text>
+  </g>
+</svg>
+`;
diff --git a/cypress/integration/ui/scenario.js b/cypress/integration/ui/scenario.js
index fb6ddec9..f634450a 100644
--- a/cypress/integration/ui/scenario.js
+++ b/cypress/integration/ui/scenario.js
@@ -114,6 +114,14 @@ describe('use various parts of svg-edit', function () {
       .type('{enter}', {force: true});
     testSnapshot();
   });
+  it('check tool_word_spacing', function () {
+    cy.get('#svg_1').click({force: true});
+    cy.get('#word_spacing')
+      .type('{selectall}', {force: true})
+      .type('10', {force: true})
+      .type('{enter}', {force: true});
+    testSnapshot();
+  });
   it('check tool_star', function () {
     cy.get('#tool_star')
       .click({force: true});
diff --git a/cypress/integration/unit/sanitize.js b/cypress/integration/unit/sanitize.js
index 5842eea4..82726ee3 100644
--- a/cypress/integration/unit/sanitize.js
+++ b/cypress/integration/unit/sanitize.js
@@ -46,4 +46,14 @@ describe('sanitize', function () {
 
     assert.equal(text.getAttribute('text-decoration'), 'underline');
   });
+
+  it('Test sanitizeSvg() does not strip word-spacing attribute from text', function () {
+    const text = document.createElementNS(NS.SVG, 'text');
+    text.setAttribute('word-spacing', '10');
+    svg.append(text);
+
+    sanitize.sanitizeSvg(text);
+
+    assert.equal(text.getAttribute('word-spacing'), '10');
+  });
 });
diff --git a/src/editor/images/svg_edit_icons.svg b/src/editor/images/svg_edit_icons.svg
index 37b1070b..82f68a7c 100644
--- a/src/editor/images/svg_edit_icons.svg
+++ b/src/editor/images/svg_edit_icons.svg
@@ -1093,6 +1093,24 @@
   </svg>
 </g>
 
+<g id="wordspacing">
+  <svg width="44" height="18" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+    <defs>
+      <marker id="se_marker_start_svg_2" markerHeight="5" markerWidth="5" orient="auto" refX="50" refY="50" viewBox="0 0 100 100">
+        <path d="m0,50l100,40l-30,-40l30,-40l-100,40z" fill="#ff7f00" id="svg_3" stroke="#ff7f00" stroke-width="10"/>
+      </marker>
+      <marker id="se_marker_end_svg_2" markerHeight="5" markerWidth="5" orient="auto" refX="50" refY="50" viewBox="0 0 100 100">
+        <path d="m100,50l-100,40l30,-40l-30,-40l100,40z" fill="#ff7f00" id="svg_4" stroke="#ff7f00" stroke-width="10"/>
+      </marker>
+    </defs>
+    <g class="layer">
+      <title>Layer 1</title>
+      <text fill="#000000" font-family="serif" font-size="15" id="svg_1" stroke="#000000" stroke-width="0" text-anchor="middle" x="21.78779" xml:space="preserve" y="14.00814">A      B</text>
+      <line fill="none" id="svg_2" marker-end="url(#se_marker_end_svg_2)" marker-start="url(#se_marker_start_svg_2)" stroke="#ff7f00" x1="15.19377" x2="28.36873" y1="8.75" y2="8.75"/>
+    </g>
+  </svg>
+</g>
+
 <g id="svg_eof"/>
 
 </svg>
diff --git a/src/editor/index.html b/src/editor/index.html
index fda522c3..a6f4a341 100644
--- a/src/editor/index.html
+++ b/src/editor/index.html
@@ -344,6 +344,20 @@
               </ul>
             </div>
           </div>
+          <div class="toolset" id="tool_word_spacing" title="Change the word spacing of the text">
+            <label>
+              <span id="word_spacing_icon" class="icon_label"></span>
+              <input id="word_spacing" size="3" value="0" type="text" />
+            </label>
+            <div id="word_spacing_dropdown" class="dropdown">
+              <button></button>
+              <ul>
+                <li class="special">
+                  <div id="word_spacing_slider"></div>
+                </li>
+              </ul>
+            </div>
+          </div>
           <div class="toolset" id="tool_font_family">
             <label>
               <!-- Font family -->
diff --git a/src/editor/locale.js b/src/editor/locale.js
index 40e24e0a..14c050b8 100644
--- a/src/editor/locale.js
+++ b/src/editor/locale.js
@@ -307,6 +307,7 @@ export const readLang = function (langData) {
     tool_image: tools.mode_image,
     tool_italic: properties.italic,
     tool_letter_spacing: properties.letter_spacing,
+    tool_word_spacing: properties.word_spacing,
 
     tool_line: tools.mode_line,
     tool_move_bottom: tools.move_bottom,
diff --git a/src/editor/locale/lang.af.js b/src/editor/locale/lang.af.js
index 012c107a..83cd8929 100644
--- a/src/editor/locale/lang.af.js
+++ b/src/editor/locale/lang.af.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.ar.js b/src/editor/locale/lang.ar.js
index 4dde1d96..19cddf77 100644
--- a/src/editor/locale/lang.ar.js
+++ b/src/editor/locale/lang.ar.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.az.js b/src/editor/locale/lang.az.js
index 5dc2a7c5..42278cb2 100644
--- a/src/editor/locale/lang.az.js
+++ b/src/editor/locale/lang.az.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.be.js b/src/editor/locale/lang.be.js
index 922b9441..4e51fd86 100644
--- a/src/editor/locale/lang.be.js
+++ b/src/editor/locale/lang.be.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.bg.js b/src/editor/locale/lang.bg.js
index b969021c..493d435c 100644
--- a/src/editor/locale/lang.bg.js
+++ b/src/editor/locale/lang.bg.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.ca.js b/src/editor/locale/lang.ca.js
index 2488df06..22276f3c 100644
--- a/src/editor/locale/lang.ca.js
+++ b/src/editor/locale/lang.ca.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.cs.js b/src/editor/locale/lang.cs.js
index dca220c8..53c70753 100644
--- a/src/editor/locale/lang.cs.js
+++ b/src/editor/locale/lang.cs.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Hlavní menu',
diff --git a/src/editor/locale/lang.cy.js b/src/editor/locale/lang.cy.js
index c6ee9406..5f64fb72 100644
--- a/src/editor/locale/lang.cy.js
+++ b/src/editor/locale/lang.cy.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.da.js b/src/editor/locale/lang.da.js
index 26f2927c..ca05cb86 100644
--- a/src/editor/locale/lang.da.js
+++ b/src/editor/locale/lang.da.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.de.js b/src/editor/locale/lang.de.js
index db12d7a8..51d0b9c0 100644
--- a/src/editor/locale/lang.de.js
+++ b/src/editor/locale/lang.de.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Den Text linksbündig ausrichten',
     text_anchor_middle: 'Den Text zentriert ausrichten',
     text_anchor_end: 'Den Text rechtsbündig ausrichten',
-    letter_spacing: 'Den Abstand zwischen den Buchstabend anpassen'
+    letter_spacing: 'Den Abstand zwischen den Buchstaben anpassen',
+    word_spacing: 'Den Abstand zwischen den einzelnen Wörtern anpassen'
   },
   tools: {
     main_menu: 'Hauptmenü',
diff --git a/src/editor/locale/lang.el.js b/src/editor/locale/lang.el.js
index 7a46debb..8b5da3b2 100644
--- a/src/editor/locale/lang.el.js
+++ b/src/editor/locale/lang.el.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.en.js b/src/editor/locale/lang.en.js
index b2ae64c5..379fe097 100644
--- a/src/editor/locale/lang.en.js
+++ b/src/editor/locale/lang.en.js
@@ -75,6 +75,7 @@ export default {
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
     letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing',
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.es.js b/src/editor/locale/lang.es.js
index 1b1a9e1a..ad3d81b4 100644
--- a/src/editor/locale/lang.es.js
+++ b/src/editor/locale/lang.es.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Menú principal',
diff --git a/src/editor/locale/lang.et.js b/src/editor/locale/lang.et.js
index b9ab674c..3d97745c 100644
--- a/src/editor/locale/lang.et.js
+++ b/src/editor/locale/lang.et.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.fa.js b/src/editor/locale/lang.fa.js
index 3bfc9c16..f19ca400 100644
--- a/src/editor/locale/lang.fa.js
+++ b/src/editor/locale/lang.fa.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.fi.js b/src/editor/locale/lang.fi.js
index dca523ee..3fbdb9c0 100644
--- a/src/editor/locale/lang.fi.js
+++ b/src/editor/locale/lang.fi.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.fr.js b/src/editor/locale/lang.fr.js
index 5ca502ed..25d6c44f 100644
--- a/src/editor/locale/lang.fr.js
+++ b/src/editor/locale/lang.fr.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Menu principal',
diff --git a/src/editor/locale/lang.fy.js b/src/editor/locale/lang.fy.js
index df420906..dc39a2ad 100644
--- a/src/editor/locale/lang.fy.js
+++ b/src/editor/locale/lang.fy.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.ga.js b/src/editor/locale/lang.ga.js
index a3fb2965..cad4838a 100644
--- a/src/editor/locale/lang.ga.js
+++ b/src/editor/locale/lang.ga.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.gl.js b/src/editor/locale/lang.gl.js
index 8f035374..5288fb80 100644
--- a/src/editor/locale/lang.gl.js
+++ b/src/editor/locale/lang.gl.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.he.js b/src/editor/locale/lang.he.js
index db4cb438..65badcb2 100755
--- a/src/editor/locale/lang.he.js
+++ b/src/editor/locale/lang.he.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.hi.js b/src/editor/locale/lang.hi.js
index b79747e1..0db61dab 100644
--- a/src/editor/locale/lang.hi.js
+++ b/src/editor/locale/lang.hi.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.hr.js b/src/editor/locale/lang.hr.js
index cea62049..fa1572ea 100644
--- a/src/editor/locale/lang.hr.js
+++ b/src/editor/locale/lang.hr.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.hu.js b/src/editor/locale/lang.hu.js
index 161dea9e..93165a2c 100644
--- a/src/editor/locale/lang.hu.js
+++ b/src/editor/locale/lang.hu.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.hy.js b/src/editor/locale/lang.hy.js
index df6756f4..3e7847bf 100644
--- a/src/editor/locale/lang.hy.js
+++ b/src/editor/locale/lang.hy.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.id.js b/src/editor/locale/lang.id.js
index 84261b91..dcca6a06 100644
--- a/src/editor/locale/lang.id.js
+++ b/src/editor/locale/lang.id.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.is.js b/src/editor/locale/lang.is.js
index 8187d76c..a2713c9b 100644
--- a/src/editor/locale/lang.is.js
+++ b/src/editor/locale/lang.is.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.it.js b/src/editor/locale/lang.it.js
index d7c934f6..669ce4e9 100644
--- a/src/editor/locale/lang.it.js
+++ b/src/editor/locale/lang.it.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Menù principale',
diff --git a/src/editor/locale/lang.ja.js b/src/editor/locale/lang.ja.js
index 6f9e4e82..a58c18b8 100644
--- a/src/editor/locale/lang.ja.js
+++ b/src/editor/locale/lang.ja.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.ko.js b/src/editor/locale/lang.ko.js
index 9b178de5..a8b92d97 100644
--- a/src/editor/locale/lang.ko.js
+++ b/src/editor/locale/lang.ko.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.lt.js b/src/editor/locale/lang.lt.js
index 89d38b8c..d4b86522 100644
--- a/src/editor/locale/lang.lt.js
+++ b/src/editor/locale/lang.lt.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.lv.js b/src/editor/locale/lang.lv.js
index d235f080..539c9afd 100644
--- a/src/editor/locale/lang.lv.js
+++ b/src/editor/locale/lang.lv.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.mk.js b/src/editor/locale/lang.mk.js
index 8505d0fe..719cd0c4 100644
--- a/src/editor/locale/lang.mk.js
+++ b/src/editor/locale/lang.mk.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.ms.js b/src/editor/locale/lang.ms.js
index 83a3b013..5589df48 100644
--- a/src/editor/locale/lang.ms.js
+++ b/src/editor/locale/lang.ms.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.mt.js b/src/editor/locale/lang.mt.js
index 6547afdd..80503c6a 100644
--- a/src/editor/locale/lang.mt.js
+++ b/src/editor/locale/lang.mt.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.nl.js b/src/editor/locale/lang.nl.js
index 9e7fe993..8c661f98 100644
--- a/src/editor/locale/lang.nl.js
+++ b/src/editor/locale/lang.nl.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Hoofdmenu',
diff --git a/src/editor/locale/lang.no.js b/src/editor/locale/lang.no.js
index ae5f1ca4..f1be4342 100644
--- a/src/editor/locale/lang.no.js
+++ b/src/editor/locale/lang.no.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.pl.js b/src/editor/locale/lang.pl.js
index b1f1fd53..e1f669a9 100644
--- a/src/editor/locale/lang.pl.js
+++ b/src/editor/locale/lang.pl.js
@@ -75,7 +75,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Menu główne',
diff --git a/src/editor/locale/lang.pt-BR.js b/src/editor/locale/lang.pt-BR.js
index 8d874095..a1764f50 100644
--- a/src/editor/locale/lang.pt-BR.js
+++ b/src/editor/locale/lang.pt-BR.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Menu Principal',
diff --git a/src/editor/locale/lang.pt-PT.js b/src/editor/locale/lang.pt-PT.js
index d2e9830b..e035d719 100644
--- a/src/editor/locale/lang.pt-PT.js
+++ b/src/editor/locale/lang.pt-PT.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.ro.js b/src/editor/locale/lang.ro.js
index 1a06c524..aaf7b583 100644
--- a/src/editor/locale/lang.ro.js
+++ b/src/editor/locale/lang.ro.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Menu Principal',
diff --git a/src/editor/locale/lang.ru.js b/src/editor/locale/lang.ru.js
index 81e2a5af..8c947ce7 100644
--- a/src/editor/locale/lang.ru.js
+++ b/src/editor/locale/lang.ru.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Главное меню',
diff --git a/src/editor/locale/lang.sk.js b/src/editor/locale/lang.sk.js
index 27085c5f..85be41c2 100644
--- a/src/editor/locale/lang.sk.js
+++ b/src/editor/locale/lang.sk.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Hlavné menu',
diff --git a/src/editor/locale/lang.sl.js b/src/editor/locale/lang.sl.js
index 992cb143..c8b252f6 100644
--- a/src/editor/locale/lang.sl.js
+++ b/src/editor/locale/lang.sl.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Glavni meni',
diff --git a/src/editor/locale/lang.sq.js b/src/editor/locale/lang.sq.js
index 5d6f1c51..e9f0424a 100644
--- a/src/editor/locale/lang.sq.js
+++ b/src/editor/locale/lang.sq.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.sr.js b/src/editor/locale/lang.sr.js
index c1f004f3..2ce3c079 100644
--- a/src/editor/locale/lang.sr.js
+++ b/src/editor/locale/lang.sr.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.sv.js b/src/editor/locale/lang.sv.js
index 9c4f3520..3bd6ed10 100644
--- a/src/editor/locale/lang.sv.js
+++ b/src/editor/locale/lang.sv.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.sw.js b/src/editor/locale/lang.sw.js
index 5d4489e5..6dd59b89 100644
--- a/src/editor/locale/lang.sw.js
+++ b/src/editor/locale/lang.sw.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.test.js b/src/editor/locale/lang.test.js
index df148b3d..44d16045 100644
--- a/src/editor/locale/lang.test.js
+++ b/src/editor/locale/lang.test.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.th.js b/src/editor/locale/lang.th.js
index 44b775e7..5d4ecb37 100644
--- a/src/editor/locale/lang.th.js
+++ b/src/editor/locale/lang.th.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.tl.js b/src/editor/locale/lang.tl.js
index 4e8c9cd5..c0aab0f3 100644
--- a/src/editor/locale/lang.tl.js
+++ b/src/editor/locale/lang.tl.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.tr.js b/src/editor/locale/lang.tr.js
index bda65dcc..5d1bd168 100644
--- a/src/editor/locale/lang.tr.js
+++ b/src/editor/locale/lang.tr.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.uk.js b/src/editor/locale/lang.uk.js
index 6119d30e..08b092de 100644
--- a/src/editor/locale/lang.uk.js
+++ b/src/editor/locale/lang.uk.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.vi.js b/src/editor/locale/lang.vi.js
index 33b610e3..81489396 100644
--- a/src/editor/locale/lang.vi.js
+++ b/src/editor/locale/lang.vi.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.yi.js b/src/editor/locale/lang.yi.js
index f6bb934b..cdee59a5 100644
--- a/src/editor/locale/lang.yi.js
+++ b/src/editor/locale/lang.yi.js
@@ -75,6 +75,7 @@ export default {
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
     letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing',
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.zh-CN.js b/src/editor/locale/lang.zh-CN.js
index 08760206..3b8208d5 100644
--- a/src/editor/locale/lang.zh-CN.js
+++ b/src/editor/locale/lang.zh-CN.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: '主菜单',
diff --git a/src/editor/locale/lang.zh-HK.js b/src/editor/locale/lang.zh-HK.js
index 5f166b60..4711eb16 100644
--- a/src/editor/locale/lang.zh-HK.js
+++ b/src/editor/locale/lang.zh-HK.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/locale/lang.zh-TW.js b/src/editor/locale/lang.zh-TW.js
index 32a5ede5..c3242ab1 100644
--- a/src/editor/locale/lang.zh-TW.js
+++ b/src/editor/locale/lang.zh-TW.js
@@ -74,7 +74,8 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
   },
   tools: {
     main_menu: 'Main Menu',
diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js
index 5983c641..e23a36d4 100644
--- a/src/editor/svgedit.js
+++ b/src/editor/svgedit.js
@@ -1204,6 +1204,7 @@ editor.init = () => {
         '#text_anchor_icon': 'anchor_middle',
         '#text_decoration_icon': 'textdecoration',
         '#letter_spacing_icon': 'letterspacing',
+        '#word_spacing_icon': 'wordspacing',
 
         '.flyout_arrow_horiz': 'arrow_right',
         '.dropdown button, #main_button .dropdown': 'arrow_down',
@@ -2329,6 +2330,9 @@ editor.init = () => {
           const letterSpacingValue = svgCanvas.getLetterSpacing(elem);
           $('#letter_spacing').val(letterSpacingValue);
           $('#letter_spacing_slider').slider('option', 'value', letterSpacingValue);
+          const wordSpacingValue = svgCanvas.getWordSpacing(elem);
+          $('#word_spacing').val(wordSpacingValue);
+          $('#word_spacing_slider').slider('option', 'value', wordSpacingValue);
           $('#font_family').val(elem.getAttribute('font-family'));
           $('#font_size').val(elem.getAttribute('font-size'));
           $('#text').val(elem.textContent);
@@ -3955,6 +3959,31 @@ editor.init = () => {
     svgCanvas.setLetterSpacing(val);
   };
 
+  editor.addDropDown('#word_spacing_dropdown', $.noop);
+
+  $('#word_spacing_slider').slider({
+    step: 1,
+    stop (evt, ui) {
+      changeWordSpacing(ui);
+      $('#word_spacing_dropdown li').show();
+      $(window).mouseup();
+    },
+    slide (evt, ui) {
+      changeWordSpacing(ui, null);
+    }
+  });
+
+  const changeWordSpacing = function (ctl, val) {
+    if (Utils.isNullish(val)) { val = ctl.value; }
+    $('#word_spacing').val(val);
+
+    if (!ctl || !ctl.handle) {
+      $('#word_spacing_slider').slider('option', 'value', val);
+    }
+
+    svgCanvas.setWordSpacing(val);
+  };
+
   /*
 
   When a flyout icon is selected
@@ -5838,6 +5867,9 @@ editor.init = () => {
   $('#letter_spacing').SpinButton({
     min: -1000, step: 1, stateObj, callback: changeLetterSpacing
   });
+  $('#word_spacing').SpinButton({
+    min: -1000, step: 1, stateObj, callback: changeWordSpacing
+  });
   $('#zoom').SpinButton({
     min: 0.001, max: 10000, step: 50, stepfunc: stepZoom,
     stateObj, callback: changeZoom
diff --git a/src/svgcanvas/elem-get-set.js b/src/svgcanvas/elem-get-set.js
index 12b7be23..6ca9fa08 100644
--- a/src/svgcanvas/elem-get-set.js
+++ b/src/svgcanvas/elem-get-set.js
@@ -717,6 +717,38 @@ export const setLetterSpacingMethod = function (value) {
   }
 };
 
+/**
+ * Returns the word spacing value
+ * @function module:svgcanvas.SvgCanvas#getWordSpacing
+ * @returns {string} The word spacing value
+ */
+export const getWordSpacingMethod = function () {
+  const selectedElements = elemContext_.getSelectedElements();
+  const selected = selectedElements[0];
+  if (!isNullish(selected) && selected.tagName === 'text' && isNullish(selectedElements[1])) {
+    return selected.getAttribute('word-spacing') || 0;
+  }
+  return null;
+};
+
+/**
+ * Set the new word spacing.
+ * @function module:svgcanvas.SvgCanvas#setWordSpacing
+ * @param {string} value - The word spacing
+ * @returns {void}
+ */
+export const setWordSpacingMethod = function (value) {
+  const selectedElements = elemContext_.getSelectedElements();
+  const selected = selectedElements[0];
+  if (!isNullish(selected) && selected.tagName === 'text' &&
+    isNullish(selectedElements[1])) {
+    elemContext_.getCanvas().changeSelectedAttribute('word-spacing', value);
+  }
+  if (!selectedElements[0].textContent) {
+    elemContext_.getCanvas().textActions.setCursor();
+  }
+};
+
 /**
 * @function module:svgcanvas.SvgCanvas#getFontFamily
 * @returns {string} The current font family
diff --git a/src/svgcanvas/sanitize.js b/src/svgcanvas/sanitize.js
index 49731f5d..3a4702ef 100644
--- a/src/svgcanvas/sanitize.js
+++ b/src/svgcanvas/sanitize.js
@@ -49,7 +49,7 @@ const svgWhiteList_ = {
   svg: ['class', 'clip-path', 'clip-rule', 'filter', 'id', 'height', 'mask', 'preserveAspectRatio', 'requiredFeatures', 'style', 'systemLanguage', 'viewBox', 'width', 'x', 'xmlns', 'xmlns:se', 'xmlns:xlink', 'y'],
   switch: ['class', 'id', 'requiredFeatures', 'systemLanguage'],
   symbol: ['class', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'id', 'opacity', 'preserveAspectRatio', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform', 'viewBox'],
-  text: ['class', 'clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'id', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'text-decoration', 'letter-spacing', 'style', 'systemLanguage', 'text-anchor', 'transform', 'x', 'xml:space', 'y', 'display'],
+  text: ['class', 'clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'id', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'text-decoration', 'letter-spacing', 'word-spacing', 'style', 'systemLanguage', 'text-anchor', 'transform', 'x', 'xml:space', 'y', 'display'],
   textPath: ['class', 'id', 'method', 'requiredFeatures', 'spacing', 'startOffset', 'style', 'systemLanguage', 'transform', 'xlink:href', 'display'],
   title: [],
   tspan: ['class', 'clip-path', 'clip-rule', 'dx', 'dy', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'id', 'mask', 'opacity', 'requiredFeatures', 'rotate', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'text-anchor', 'textLength', 'transform', 'x', 'xml:space', 'y', 'display'],
diff --git a/src/svgcanvas/svgcanvas.js b/src/svgcanvas/svgcanvas.js
index e1683a31..8848acbf 100644
--- a/src/svgcanvas/svgcanvas.js
+++ b/src/svgcanvas/svgcanvas.js
@@ -58,7 +58,8 @@ import {
   setZoomMethod, setColorMethod, setGradientMethod, findDuplicateGradient, setPaintMethod,
   setStrokeWidthMethod, setStrokeAttrMethod, getBoldMethod, setBoldMethod, getItalicMethod,
   setItalicMethod, hasTextDecorationMethod, addTextDecorationMethod, removeTextDecorationMethod, setLetterSpacingMethod,
-  getLetterSpacingMethod, setTextAnchorMethod, getFontFamilyMethod, setFontFamilyMethod, setFontColorMethod, getFontColorMethod,
+  getLetterSpacingMethod, setWordSpacingMethod, getWordSpacingMethod, setTextAnchorMethod,
+  getFontFamilyMethod, setFontFamilyMethod, setFontColorMethod, getFontColorMethod,
   getFontSizeMethod, setFontSizeMethod, getTextMethod, setTextContentMethod,
   setImageURLMethod, setLinkURLMethod, setRectRadiusMethod, makeHyperlinkMethod,
   removeHyperlinkMethod, setSegTypeMethod, setBackgroundMethod
@@ -2248,7 +2249,6 @@ class SvgCanvas {
      */
     this.getLetterSpacing = getLetterSpacingMethod;
 
-
     /**
      * Changes the letter spacing.
      * @function module:svgcanvas.SvgCanvas#setLetterSpacing
@@ -2257,6 +2257,22 @@ class SvgCanvas {
      */
     this.setLetterSpacing = setLetterSpacingMethod;
 
+    /**
+     * Returns the word spacing.
+     * @function module:svgcanvas.SvgCanvas#getWordSpacing
+     * @param {string} value - The value that should be set
+     * @returns {string} The word spacing value
+     */
+    this.getWordSpacing = getWordSpacingMethod;
+
+    /**
+     * Changes the word spacing.
+     * @function module:svgcanvas.SvgCanvas#setWordSpacing
+     * @param {string} value - The value that should be set
+     * @returns {void}
+     */
+    this.setWordSpacing = setWordSpacingMethod;
+
     /**
 * Set the new text anchor.
 * @function module:svgcanvas.SvgCanvas#setTextAnchor