Added Text Decoration options

2022-01-04 10:42:22 +01:00 · 2022-01-04 10:42:22 +01:00 · 69e485352a
parent 959ac047d9
commit 69e485352a
68 changed files with 385 additions and 1 deletions
--- a/cypress/integration/ui/snapshots/scenario.js.snap
+++ b/cypress/integration/ui/snapshots/scenario.js.snap
@ -637,3 +637,96 @@ exports[`use various parts of svg-edit > check tool_text_change_font_family #0`]
  </svg>
 </body>
 `;
+
+exports[`use various parts of svg-edit > check tool_text_decoration_underline #0`] = `
+<body>
+  <svg
+    width="640"
+    height="480"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:svg="http://www.w3.org/2000/svg"
+  >
+    <g class="layer">
+      <title>Layer 1</title>
+      <text
+        fill="#bf0000"
+        font-family="Serif"
+        font-size="34"
+        font-style="italic"
+        font-weight="bold"
+        id="svg_1"
+        stroke="#0000bf"
+        text-anchor="middle"
+        text-decoration="underline"
+        x="46"
+        xml:space="preserve"
+        y="35"
+      >
+        AB
+      </text>
+    </g>
+  </svg>
+</body>
+`;
+
+exports[`use various parts of svg-edit > check tool_text_decoration_linethrough #0`] = `
+<body>
+  <svg
+    width="640"
+    height="480"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:svg="http://www.w3.org/2000/svg"
+  >
+    <g class="layer">
+      <title>Layer 1</title>
+      <text
+        fill="#bf0000"
+        font-family="Serif"
+        font-size="34"
+        font-style="italic"
+        font-weight="bold"
+        id="svg_1"
+        stroke="#0000bf"
+        text-anchor="middle"
+        text-decoration="underline line-through"
+        x="46"
+        xml:space="preserve"
+        y="35"
+      >
+        AB
+      </text>
+    </g>
+  </svg>
+</body>
+`;
+
+exports[`use various parts of svg-edit > check tool_text_decoration_overline #0`] = `
+<body>
+  <svg
+    width="640"
+    height="480"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:svg="http://www.w3.org/2000/svg"
+  >
+    <g class="layer">
+      <title>Layer 1</title>
+      <text
+        fill="#bf0000"
+        font-family="Serif"
+        font-size="34"
+        font-style="italic"
+        font-weight="bold"
+        id="svg_1"
+        stroke="#0000bf"
+        text-anchor="middle"
+        text-decoration="underline line-through overline"
+        x="46"
+        xml:space="preserve"
+        y="35"
+      >
+        AB
+      </text>
+    </g>
+  </svg>
+</body>
+`;
--- a/cypress/integration/ui/scenario.js
+++ b/cypress/integration/ui/scenario.js
@ -163,4 +163,22 @@ describe('use various parts of svg-edit', function () {
    cy.get('#tool_font_family').shadow().find('select').select('Serif')
    testSnapshot()
  })
+  it('check tool_text_decoration_underline', function () {
+    cy.get('#svg_1').click({ force: true })
+    cy.get('#tool_text_decoration_underline')
+    .click({ force: true })
+    testSnapshot()
+  })
+  it('check tool_text_decoration_linethrough', function () {
+    cy.get('#svg_1').click({ force: true })
+    cy.get('#tool_text_decoration_linethrough')
+    .click({ force: true })
+    testSnapshot()
+  })
+  it('check tool_text_decoration_overline', function () {
+    cy.get('#svg_1').click({ force: true })
+    cy.get('#tool_text_decoration_overline')
+    .click({ force: true })
+    testSnapshot()
+  })
 })
--- a/src/editor/images/text_decoration_linethrough.svg
+++ b/src/editor/images/text_decoration_linethrough.svg
@ -0,0 +1,6 @@
+<?xml version="1.0"?>
+<svg width="31" height="28" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+  <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit-->
+  <text fill="#000000" font-family="serif" font-size="24" id="svg_1" stroke="#000000" stroke-width="0" text-anchor="middle" text-decoration="0" x="16" xml:space="preserve" y="21.5">ab</text>
+  <line fill="none" id="svg_2" stroke="#f9bc01" stroke-width="2" x1="1" x2="29.70526" y1="14" y2="14"/>
+</svg>
--- a/src/editor/images/text_decoration_overline.svg
+++ b/src/editor/images/text_decoration_overline.svg
@ -0,0 +1,6 @@
+<?xml version="1.0"?>
+<svg width="31" height="28" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+  <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit-->
+  <text fill="#000000" font-family="serif" font-size="24" id="svg_1" stroke="#000000" stroke-width="0" text-anchor="middle" text-decoration="0" x="16" xml:space="preserve" y="21.5">ab</text>
+  <line fill="none" id="svg_2" stroke="#f9bc01" stroke-width="2" x1="1" x2="29.70526" y1="2" y2="2"/>
+</svg>
--- a/src/editor/images/text_decoration_underline.svg
+++ b/src/editor/images/text_decoration_underline.svg
@ -0,0 +1,6 @@
+<?xml version="1.0"?>
+<svg width="31" height="28" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+  <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit-->
+  <text fill="#000000" font-family="serif" font-size="24" id="svg_1" stroke="#000000" stroke-width="0" text-anchor="middle" text-decoration="0" x="16" xml:space="preserve" y="21.5">ab</text>
+  <line fill="none" id="svg_2" stroke="#f9bc01" stroke-width="2" x1="1" x2="29.70526" y1="24" y2="24"/>
+</svg>
--- a/src/editor/locale/lang.af.js
+++ b/src/editor/locale/lang.af.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Lettertipe verander Familie',
    font_size: 'Verandering Lettertipe Grootte',
    bold: 'Vetgedrukte teks',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Italic Text',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.ar.js
+++ b/src/editor/locale/lang.ar.js
@ -73,6 +73,9 @@ export default {
    font_family: 'تغيير الخط الأسرة',
    font_size: 'تغيير حجم الخط',
    bold: 'نص جريء',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'مائل نص',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.az.js
+++ b/src/editor/locale/lang.az.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Change Font Family',
    font_size: 'Change Font Size',
    bold: 'Bold Text',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Italic Text',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.be.js
+++ b/src/editor/locale/lang.be.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Змены Сямейства шрыфтоў',
    font_size: 'Змяніць памер шрыфта',
    bold: 'Тоўсты тэкст',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Нахілены тэкст',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.bg.js
+++ b/src/editor/locale/lang.bg.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Промяна на шрифта Семейство',
    font_size: 'Промени размера на буквите',
    bold: 'Получер текст',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Курсив текст',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.ca.js
+++ b/src/editor/locale/lang.ca.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Canviar la font Família',
    font_size: 'Change Font Size',
    bold: 'Text en negreta',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Text en cursiva',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.cs.js
+++ b/src/editor/locale/lang.cs.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Změnit font',
    font_size: 'Změnit velikost písma',
    bold: 'Tučně',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Kurzíva',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.cy.js
+++ b/src/editor/locale/lang.cy.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Newid Font Teulu',
    font_size: 'Newid Maint Ffont',
    bold: 'Testun Bras',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Italig Testun',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.da.js
+++ b/src/editor/locale/lang.da.js
@ -72,6 +72,9 @@ export default {
    font_family: 'Skift Font Family',
    font_size: 'Skift skriftstørrelse',
    bold: 'Fed tekst',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Italic Text',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.de.js
+++ b/src/editor/locale/lang.de.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Schriftart wählen',
    font_size: 'Schriftgröße einstellen',
    bold: 'Fetter Text',
+    text_decoration_underline: 'Unterstrichen',
+    text_decoration_linethrough: 'Durchgestrichen',
+    text_decoration_overline: 'Überstrichen',
    italic: 'Kursiver Text',
    text_anchor_start: 'Den Text linksbündig ausrichten',
    text_anchor_middle: 'Den Text zentriert ausrichten',
--- a/src/editor/locale/lang.el.js
+++ b/src/editor/locale/lang.el.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Αλλαγή γραμματοσειράς Οικογένεια',
    font_size: 'Αλλαγή μεγέθους γραμματοσειράς',
    bold: 'Bold Text',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Πλάγιους',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.en.js
+++ b/src/editor/locale/lang.en.js
@ -74,6 +74,9 @@ export default {
    font_family: 'Change Font Family',
    font_size: 'Change Font Size',
    bold: 'Bold Text',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Italic Text',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.es.js
+++ b/src/editor/locale/lang.es.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Tipo de fuente',
    font_size: 'Tamaño de la fuente',
    bold: 'Texto en negrita',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Texto en cursiva',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.et.js
+++ b/src/editor/locale/lang.et.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Muutke Kirjasinperhe',
    font_size: 'Change font size',
    bold: 'Rasvane kiri',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Kursiiv',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.fa.js
+++ b/src/editor/locale/lang.fa.js
@ -73,6 +73,9 @@ export default {
    font_family: '‫تغییر خانواده قلم‬',
    font_size: '‫تغییر اندازه قلم‬',
    bold: '‫متن توپر ‬',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: '‫متن کج ‬',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.fi.js
+++ b/src/editor/locale/lang.fi.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Muuta Font Family',
    font_size: 'Muuta fontin kokoa',
    bold: 'Lihavoitu teksti',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Kursivoitu',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.fr.js
+++ b/src/editor/locale/lang.fr.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Changer la famille de police',
    font_size: 'Changer la taille de la police',
    bold: 'Texte en gras',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Texte en italique',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.fy.js
+++ b/src/editor/locale/lang.fy.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Lettertype oanpasse',
    font_size: 'Lettergrutte oanpasse',
    bold: 'Fet',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Skean',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.ga.js
+++ b/src/editor/locale/lang.ga.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Athraigh an Cló Teaghlaigh',
    font_size: 'Athraigh Clómhéid',
    bold: 'Trom Téacs',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Iodálach Téacs',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.gl.js
+++ b/src/editor/locale/lang.gl.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Cambiar fonte Familia',
    font_size: 'Mudar tamaño de letra',
    bold: 'Bold Text',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Texto en cursiva',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.he.js
+++ b/src/editor/locale/lang.he.js
@ -73,6 +73,9 @@ export default {
    font_family: 'שינוי גופן משפחה',
    font_size: 'שנה גודל גופן',
    bold: 'טקסט מודגש',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'טקסט נטוי',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.hi.js
+++ b/src/editor/locale/lang.hi.js
@ -73,6 +73,9 @@ export default {
    font_family: 'बदलें फ़ॉन्ट परिवार',
    font_size: 'फ़ॉन्ट का आकार बदलें',
    bold: 'मोटा पाठ',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'इटैलिक पाठ',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.hr.js
+++ b/src/editor/locale/lang.hr.js
@ -72,6 +72,9 @@ export default {
    font_family: 'Promjena fontova',
    font_size: 'Change font size',
    bold: 'Podebljani tekst',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Italic Text',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.hu.js
+++ b/src/editor/locale/lang.hu.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Change Betűcsalád',
    font_size: 'Change font size',
    bold: 'Félkövér szöveg',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Dőlt szöveg',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.hy.js
+++ b/src/editor/locale/lang.hy.js
@ -73,6 +73,9 @@ export default {
    font_family_label: 'Font:',
    font_size: 'Change Font Size',
    bold: 'Bold Text',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Italic Text',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.id.js
+++ b/src/editor/locale/lang.id.js
@ -73,6 +73,9 @@ export default {
    font_family_label: 'Font:',
    font_size: 'Ubah Ukuran Font',
    bold: 'Bold Teks',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Italic Teks',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.is.js
+++ b/src/editor/locale/lang.is.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Change Leturfjölskylda',
    font_size: 'Breyta leturstærð',
    bold: 'Bold Text',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Italic Text',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.it.js
+++ b/src/editor/locale/lang.it.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Cambia il tipo di Font',
    font_size: 'Modifica dimensione carattere',
    bold: 'Grassetto',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Corsivo',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.ja.js
+++ b/src/editor/locale/lang.ja.js
@ -73,6 +73,9 @@ export default {
    font_family: 'フォントファミリーの変更',
    font_size: '文字サイズの変更',
    bold: '太字',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'イタリック体',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.ko.js
+++ b/src/editor/locale/lang.ko.js
@ -73,6 +73,9 @@ export default {
    font_family: '글꼴 변경 패밀리',
    font_size: '글꼴 크기 변경',
    bold: '굵은 텍스트',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: '기울임꼴 텍스트',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.lt.js
+++ b/src/editor/locale/lang.lt.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Pakeistišriftą Šeima',
    font_size: 'Change font size',
    bold: 'Pusjuodis',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Kursyvas',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.lv.js
+++ b/src/editor/locale/lang.lv.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Mainīt fonta Family',
    font_size: 'Mainīt fonta izmēru',
    bold: 'Bold Text',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Kursīvs',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.mk.js
+++ b/src/editor/locale/lang.mk.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Смени фонт Фамилија',
    font_size: 'Изменифонт Големина',
    bold: 'Задебелен текст',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Italic текст',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.ms.js
+++ b/src/editor/locale/lang.ms.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Tukar Font Keluarga',
    font_size: 'Ubah Saiz Font',
    bold: 'Bold Teks',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Italic Teks',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.mt.js
+++ b/src/editor/locale/lang.mt.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Bidla Font Familja',
    font_size: 'Change font size',
    bold: 'Bold Test',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Test korsiv',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.nl.js
+++ b/src/editor/locale/lang.nl.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Verander lettertype',
    font_size: 'Verander lettertype grootte',
    bold: 'Vet',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Cursief',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.no.js
+++ b/src/editor/locale/lang.no.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Change Font Family',
    font_size: 'Endre skriftstørrelse',
    bold: 'Fet tekst',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Kursiv tekst',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.pl.js
+++ b/src/editor/locale/lang.pl.js
@ -74,6 +74,9 @@ export default {
    font_family: 'Zmień krój czcionki',
    font_size: 'Zmień rozmiar czcionki',
    bold: 'Pogrubienie textu',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Kursywa',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.pt-BR.js
+++ b/src/editor/locale/lang.pt-BR.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Mudar o estilo da fonte',
    font_size: 'Mudar o tamanho da fonte',
    bold: 'Negrito',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Italico',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.pt-PT.js
+++ b/src/editor/locale/lang.pt-PT.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Alterar fonte Família',
    font_size: 'Alterar tamanho de letra',
    bold: 'Bold Text',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Texto em itálico',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.ro.js
+++ b/src/editor/locale/lang.ro.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Modificare familie de fonturi',
    font_size: 'Schimbă dimensiunea fontului',
    bold: 'Text Îngroşat',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Text Înclinat',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.ru.js
+++ b/src/editor/locale/lang.ru.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Изменить семейство шрифтов',
    font_size: 'Изменить размер шрифта',
    bold: 'Жирный',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Курсив',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.sk.js
+++ b/src/editor/locale/lang.sk.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Zmeniť font',
    font_size: 'Zmeniť veľkosť písma',
    bold: 'Tučné',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Kurzíva',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.sl.js
+++ b/src/editor/locale/lang.sl.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Spremeni tip pisave',
    font_size: 'Spremeni velikost pisave',
    bold: 'Krepko',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Poševno',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.sq.js
+++ b/src/editor/locale/lang.sq.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Ndryshimi Font Family',
    font_size: 'Ndryshimi Font Size',
    bold: 'Bold Text',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Italic Text',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.sr.js
+++ b/src/editor/locale/lang.sr.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Цханге фонт породицу',
    font_size: 'Цханге фонт сизе',
    bold: 'Подебљан текст',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Италиц текст',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.sv.js
+++ b/src/editor/locale/lang.sv.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Ändra Typsnitt',
    font_size: 'Ändra textstorlek',
    bold: 'Fet text',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Kursiv text',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.sw.js
+++ b/src/editor/locale/lang.sw.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Change font Family',
    font_size: 'Change font Size',
    bold: 'Bold Nakala',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Italiki Nakala',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.test.js
+++ b/src/editor/locale/lang.test.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Change Font Family',
    font_size: 'Change Font Size',
    bold: 'Bold Text',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Italic Text',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.th.js
+++ b/src/editor/locale/lang.th.js
@ -73,6 +73,9 @@ export default {
    font_family: 'ครอบครัว Change Font',
    font_size: 'เปลี่ยนขนาดตัวอักษร',
    bold: 'ข้อความตัวหนา',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'ข้อความตัวเอียง',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.tl.js
+++ b/src/editor/locale/lang.tl.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Baguhin ang Pamilya ng Font',
    font_size: 'Baguhin ang Laki ng Font',
    bold: 'Bold Text',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Italic Text',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.tr.js
+++ b/src/editor/locale/lang.tr.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Font değiştir Aile',
    font_size: 'Change font size',
    bold: 'Kalın Yazı',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Italik yazı',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.uk.js
+++ b/src/editor/locale/lang.uk.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Зміни Сімейство шрифтів',
    font_size: 'Змінити розмір шрифту',
    bold: 'Товстий текст',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Похилий текст',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.vi.js
+++ b/src/editor/locale/lang.vi.js
@ -73,6 +73,9 @@ export default {
    font_family: 'Thay đổi Font Gia đình',
    font_size: 'Thay đổi cỡ chữ',
    bold: 'Bold Text',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'Italic Text',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.yi.js
+++ b/src/editor/locale/lang.yi.js
@ -73,6 +73,9 @@ export default {
    font_family: 'ענדערן פאָנט פאַמילי',
    font_size: 'בייטן פאָנט גרייס',
    bold: 'דרייסט טעקסט',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: 'יטאַליק טעקסט',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.zh-CN.js
+++ b/src/editor/locale/lang.zh-CN.js
@ -73,6 +73,9 @@ export default {
    font_family: '更改字体样式',
    font_size: '更改字体大小',
    bold: '粗体',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: '斜体',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.zh-HK.js
+++ b/src/editor/locale/lang.zh-HK.js
@ -73,6 +73,9 @@ export default {
    font_family: '更改字体家族',
    font_size: '更改字体大小',
    bold: '粗体',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: '斜体文本',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/locale/lang.zh-TW.js
+++ b/src/editor/locale/lang.zh-TW.js
@ -73,6 +73,9 @@ export default {
    font_family: '更改字體',
    font_size: '更改字體大小',
    bold: '粗體',
+    text_decoration_underline: 'Underline',
+    text_decoration_linethrough: 'Line-Through',
+    text_decoration_overline: 'Overline',
    italic: '斜體',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
--- a/src/editor/panels/TopPanel.html
+++ b/src/editor/panels/TopPanel.html
@ -129,8 +129,13 @@
    </se-spin-input>
  </div>
  <div class="text_panel">
+    <!-- Text styles -->
    <se-button id="tool_bold" title="properties.bold" src="bold.svg" shortcut="B"></se-button>
    <se-button id="tool_italic" title="properties.italic" src="italic.svg" shortcut="I"></se-button>
+    <se-button id="tool_text_decoration_underline" title="properties.text_decoration_underline" src="text_decoration_underline.svg"></se-button>
+    <se-button id="tool_text_decoration_linethrough" title="properties.text_decoration_linethrough" src="text_decoration_linethrough.svg"></se-button>
+    <se-button id="tool_text_decoration_overline" title="properties.text_decoration_overline" src="text_decoration_overline.svg"></se-button>
+
    <!-- Font Size-->
    <se-select id="tool_font_family" label="properties.font_family_label"
               options="properties.serif,properties.sans_serif,properties.cursive,properties.fantasy,properties.monospace,properties.courier,properties.helvetica,properties.times"
@ -144,6 +149,7 @@
      <se-list-item id="tool_text_anchor_middle" value="middle" title="properties.text_anchor_middle" src="anchor_middle.svg" img-height="25px"></se-list-item>
      <se-list-item id="tool_text_anchor_end" value="end" title="properties.text_anchor_end" src="anchor_end.svg" img-height="25px"></se-list-item>
    </se-list>
+
  </div>
  <!-- Not visible, but still used -->
  <input id="text" type="text" size="35"/>
--- a/src/editor/panels/TopPanel.js
+++ b/src/editor/panels/TopPanel.js
@ -352,6 +352,9 @@ class TopPanel {
          this.displayTool('text_panel')
          $id('tool_italic').pressed = this.editor.svgCanvas.getItalic()
          $id('tool_bold').pressed = this.editor.svgCanvas.getBold()
+          $id('tool_text_decoration_underline').pressed = this.editor.svgCanvas.hasTextDecoration('underline')
+          $id('tool_text_decoration_linethrough').pressed = this.editor.svgCanvas.hasTextDecoration('line-through')
+          $id('tool_text_decoration_overline').pressed = this.editor.svgCanvas.hasTextDecoration('overline')
          $id('tool_font_family').setAttribute('value', elem.getAttribute('font-family'))
          $id('tool_text_anchor').setAttribute('value', elem.getAttribute('text-anchor'))
          $id('font_size').value = elem.getAttribute('font-size')
@ -744,6 +747,22 @@ class TopPanel {
    return false
  }

+  /**
+   * Handles the click on the text decoration buttons
+   *
+   * @param value The text decoration value
+   * @returns {boolean} false
+   */
+  clickTextDecoration(value) {
+    if(this.editor.svgCanvas.hasTextDecoration(value)) {
+      this.editor.svgCanvas.removeTextDecoration(value)
+    } else {
+      this.editor.svgCanvas.addTextDecoration(value)
+    }
+    this.updateContextPanel();
+    return false;
+  }
+
  /**
   * Sets the text anchor value
   *
@ -869,6 +888,9 @@ class TopPanel {
    $id('tool_ungroup').addEventListener('click', this.clickGroup.bind(this))
    $id('tool_bold').addEventListener('click', this.clickBold.bind(this))
    $id('tool_italic').addEventListener('click', this.clickItalic.bind(this))
+    $id('tool_text_decoration_underline').addEventListener('click', () => this.clickTextDecoration.bind(this)('underline'))
+    $id('tool_text_decoration_linethrough').addEventListener('click', () => this.clickTextDecoration.bind(this)('line-through'))
+    $id('tool_text_decoration_overline').addEventListener('click', () => this.clickTextDecoration.bind(this)('overline'))
    $id('tool_text_anchor').addEventListener('change', (evt) => this.clickTextAnchor.bind(this)(evt))
    $id('tool_unlink_use').addEventListener('click', this.clickGroup.bind(this))
    $id('image_url').addEventListener('change', (evt) => { this.setImageURL(evt.currentTarget.value) });
--- a/src/svgcanvas/elem-get-set.js
+++ b/src/svgcanvas/elem-get-set.js
@ -593,6 +593,56 @@ export const setBoldMethod = function (b) {
  }
 }

+/**
+ * Check whether selected element has the given text decoration value or not.
+ * @returns {boolean} Indicates whether or not element has the text decoration value
+ */
+export const hasTextDecorationMethod = function (value) {
+  const selectedElements = svgCanvas.getSelectedElements();
+  const selected = selectedElements[0];
+
+  if (!isNullish(selected) && selected.tagName === 'text' && isNullish(selectedElements[1])) {
+    const attribute = selected.getAttribute('text-decoration') || '';
+    return attribute.includes(value);
+  }
+
+  return false;
+}
+
+/**
+ * Adds the given text decoration value
+ * @param value The text decoration value
+ * @returns {void}
+ */
+export const addTextDecorationMethod = function (value) {
+  const selectedElements = svgCanvas.getSelectedElements();
+  const selected = selectedElements[0];
+  if (!isNullish(selected) && selected.tagName === 'text' && isNullish(selectedElements[1])) {
+    const oldValue = selected.getAttribute('text-decoration') || '';
+    svgCanvas.changeSelectedAttribute('text-decoration', (oldValue + ' ' + value).trim())
+  }
+  if (selectedElements.length > 0 && !selectedElements[0].textContent) {
+    svgCanvas.textActions.setCursor()
+  }
+}
+
+/**
+ * Removes the given text decoration value
+ * @param value The text decoration value
+ * @returns {void}
+ */
+export const removeTextDecorationMethod = function (value) {
+  const selectedElements = svgCanvas.getSelectedElements();
+  const selected = selectedElements[0];
+  if (!isNullish(selected) && selected.tagName === 'text' && isNullish(selectedElements[1])) {
+    const actualValues = selected.getAttribute('text-decoration') || '';
+    svgCanvas.changeSelectedAttribute('text-decoration', actualValues.replace(value, '').trim())
+  }
+  if (selectedElements.length > 0 && !selectedElements[0].textContent) {
+    svgCanvas.textActions.setCursor()
+  }
+}
+
 /**
 * Check whether selected element is in italics or not.
 * @function module:svgcanvas.SvgCanvas#getItalic
--- a/src/svgcanvas/sanitize.js
+++ b/src/svgcanvas/sanitize.js
@ -56,7 +56,7 @@ const svgWhiteList_ = {
  svg: ['clip-path', 'clip-rule', 'enable-background', 'filter', 'height', 'mask', 'preserveAspectRatio', 'requiredFeatures', 'systemLanguage', 'version', 'viewBox', 'width', 'x', 'xmlns', 'xmlns:se', 'xmlns:xlink', 'xmlns:oi', 'oi:animations', 'y', 'stroke-linejoin', 'fill-rule', 'aria-label', 'stroke-width', 'fill-rule', 'xml:space'],
  switch: ['requiredFeatures', 'systemLanguage'],
  symbol: ['fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'opacity', 'overflow', 'preserveAspectRatio', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'viewBox', 'width', 'height'],
-  text: ['clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'text-anchor', 'x', 'xml:space', 'y'],
+  text: ['clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'text-anchor', 'text-decoration', 'x', 'xml:space', 'y'],
  textPath: ['method', 'requiredFeatures', 'spacing', 'startOffset', 'systemLanguage', 'xlink:href'],
  title: [],
  tspan: ['clip-path', 'clip-rule', 'dx', 'dy', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'mask', 'opacity', 'requiredFeatures', 'rotate', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'text-anchor', 'textLength', 'x', 'xml:space', 'y'],
--- a/src/svgcanvas/svgcanvas.js
+++ b/src/svgcanvas/svgcanvas.js
@ -923,6 +923,9 @@ class SvgCanvas {
    this.setBold = elemGetSet.setBoldMethod // Make the selected element bold or normal.
    this.getItalic = elemGetSet.getItalicMethod // Check whether selected element is in italics or not.
    this.setItalic = elemGetSet.setItalicMethod // Make the selected element italic or normal.
+    this.hasTextDecoration = elemGetSet.hasTextDecorationMethod // Check whether the selected element has the given text decoration or not.
+    this.addTextDecoration = elemGetSet.addTextDecorationMethod // Adds the given value to the text decoration
+    this.removeTextDecoration = elemGetSet.removeTextDecorationMethod // Removes the given value from the text decoration
    this.setTextAnchor = elemGetSet.setTextAnchorMethod // Set the new text anchor.
    this.getFontFamily = elemGetSet.getFontFamilyMethod // The current font family
    this.setFontFamily = elemGetSet.setFontFamilyMethod // Set the new font family.