Added word spacing to text formatting tools

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>
+`;

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});

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');
+  });
 });