Added letter spacing to text formatting tools

cypress/integration/ui/__snapshots__/scenario.js.snap

@@ -493,6 +493,7 @@ exports[`use various parts of svg-edit > check tool_star #0`] = `
       font-style="italic"
       font-weight="bold"
       text-decoration=" underline overline line-through"
+      letter-spacing="150"
     >
       B
     </text>
@@ -585,6 +586,7 @@ exports[`use various parts of svg-edit > check tool_polygon #0`] = `
       font-style="italic"
       font-weight="bold"
       text-decoration=" underline overline line-through"
+      letter-spacing="150"
     >
       B
     </text>
@@ -1044,3 +1046,70 @@ exports[`use various parts of svg-edit > check tool_text_decoration_linethrough
   </g>
 </svg>
 `;
+
+exports[`use various parts of svg-edit > check tool_letter_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"
+    >
+      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

@@ -106,6 +106,14 @@ describe('use various parts of svg-edit', function () {
       .click({force: true});
     testSnapshot();
   });
+  it('check tool_letter_spacing', function () {
+    cy.get('#svg_1').click({force: true});
+    cy.get('#letter_spacing')
+      .type('{selectall}', {force: true})
+      .type('150', {force: true})
+      .type('{enter}', {force: true});
+    testSnapshot();
+  });
   it('check tool_star', function () {
     cy.get('#tool_star')
       .click({force: true});

cypress/integration/unit/sanitize.js

@@ -16,4 +16,34 @@ describe('sanitize', function () {
     assert.equal(rect.getAttribute('stroke'), 'blue');
     assert.equal(rect.getAttribute('stroke-width'), '40');
   });
+
+  it('Test sanitizeSvg() does not strip letter-spacing attribute from text', function () {
+    const text = document.createElementNS(NS.SVG, 'text');
+    text.setAttribute('letter-spacing', '150');
+    svg.append(text);
+
+    sanitize.sanitizeSvg(text);
+
+    assert.equal(text.getAttribute('letter-spacing'), '150');
+  });
+
+  it('Test sanitizeSvg() does not strip text-anchor attribute from text', function () {
+    const text = document.createElementNS(NS.SVG, 'text');
+    text.setAttribute('text-anchor', 'end');
+    svg.append(text);
+
+    sanitize.sanitizeSvg(text);
+
+    assert.equal(text.getAttribute('text-anchor'), 'end');
+  });
+
+  it('Test sanitizeSvg() does not strip text-decoration attribute from text', function () {
+    const text = document.createElementNS(NS.SVG, 'text');
+    text.setAttribute('text-decoration', 'underline');
+    svg.append(text);
+
+    sanitize.sanitizeSvg(text);
+
+    assert.equal(text.getAttribute('text-decoration'), 'underline');
+  });
 });