commit

.github/FUNDING.yml

@@ -1 +1 @@
-github: [brettz9] # May have up to 4 comma-separated user names
+github: [brettz9 , OptimistikSAS] # May have up to 4 comma-separated user names

.github/ISSUE_TEMPLATE/bug_report.md

@@ -4,7 +4,7 @@ about: Create a report in case we may be able to help
 labels: bug - unconfirmed
 
 ---
-**PLEASE NOTE: This project is not currently being actively developed due to the core developers having moved on, and the only remaining maintainer merely applying occasional minor PRs or tweaks to keep the project alive. While you can file an issue, you should not expect any action, even if we label the issue.**
+**PLEASE NOTE: We are trying to make this project live again. While you can file an issue, we will do our best but you should not expect any action, even if we label the issue. However, we are welcoming new contributors **
 
 **Describe the bug**
 A clear and concise description of what the bug is.

README.md

@@ -71,21 +71,6 @@ You may also obtain URLs for specific [releases](https://github.com/SVG-Edit/svg
     width="100%" height="100%"></iframe>
 ```
 
-Note that if you want support for the following browsers, you will at least
-need some polyfills.
-
-For Android Browser 4.4.3-4.4.4, you will need at least `fetch`.
-
-For the following, you will need at least `URL`, `Promise`, and `fetch`:
-
-- IE <= 11
-- IE Mobile
-- Opera Mini
-- Blackberry Browser <= 10
-
-And for still older browsers (e.g., IE 8), you will at minimum need a
-`querySelector` polyfill.
-
 ### Integrating SVG-edit into your own npm package
 
 These steps are only needed if you wish to set up your own npm package
@@ -202,13 +187,15 @@ incorporating SVGEdit. You will need to have Node.js/npm installed.
     the project team can decide if we should support with the latest version.
 
 ## Further reading and more information
-
+ * Participate in [discussions](https://github.com/SVG-Edit/svgedit/discussions) 
  * See [docs](docs/) for more documentation. See the
     [JSDocs for our latest release](https://svg-edit.github.io/svgedit/releases/latest/docs/jsdoc/index.html).
  * [Acknowledgements](docs/Acknowledgements.md) lists open source projects
     used in svg-edit.
  * See [AUTHORS](AUTHORS) file for authors.
  * [StackOverflow](https://stackoverflow.com/tags/svg-edit) group.
+ 
+## Older references 
  * Join the [svg-edit mailing list](https://groups.google.com/forum/#!forum/svg-edit).
  * Join us on `#svg-edit` on `freenode.net` (or use the
     [web client](https://webchat.freenode.net/?channels=svg-edit)).

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 0h120v20H0zM120 0h102v20H120zM222 0h87v20h-87zM309 0h112v20H309z"/><path fill="url(#smooth)" d="M0 0h421v20H0z"/></g><g id="fg"><text class="shadow" x="5.5" y="15">Statements 52.79%</text><text class="high" x="5" y="14">Statements 52.79%</text><text class="shadow" x="125.5" y="15">Branches 41.6%</text><text class="high" x="125" y="14">Branches 41.6%</text><text class="shadow" x="227.5" y="15">Lines 53.61%</text><text class="high" x="227" y="14">Lines 53.61%</text><text class="shadow" x="314.5" y="15">Functions 60.18%</text><text class="high" x="314" y="14">Functions 60.18%</text></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="428" 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 0h112v20H316z"/><path fill="url(#smooth)" d="M0 0h428v20H0z"/></g><g id="fg"><text class="shadow" x="5.5" y="15">Statements 52.95%</text><text class="high" x="5" y="14">Statements 52.95%</text><text class="shadow" x="125.5" y="15">Branches 41.89%</text><text class="high" x="125" y="14">Branches 41.89%</text><text class="shadow" x="234.5" y="15">Lines 53.76%</text><text class="high" x="234" y="14">Lines 53.76%</text><text class="shadow" x="321.5" y="15">Functions 60.47%</text><text class="high" x="321" y="14">Functions 60.47%</text></g></svg>

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">141/141</text><text class="high" x="46" y="14">141/141</text></g></svg>
+<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">144/144</text><text class="high" x="46" y="14">144/144</text></g></svg>

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

@@ -649,3 +649,411 @@ exports[`use various parts of svg-edit > check tool_polygon #0`] = `
   </g>
 </svg>
 `;
+
+exports[`use various parts of svg-edit > check tool_text_anchor_start #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="middle"
+      xml:space="preserve"
+      fill-opacity="1"
+      stroke-opacity="1"
+      font-=""
+      font-weight="bold"
+    >
+      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>
+    <polygon
+      cx="407"
+      cy="45"
+      id="svg_3"
+      shape="star"
+      point="5"
+      r="13.333333333333334"
+      radialshift=""
+      r2="5.333333333333334"
+      orient="point"
+      fill="#000000"
+      strokecolor="#000000"
+      strokewidth="0"
+      points="407,31.666666666666664 410.1348546788932,40.68524269666695 419.68075355060205,40.87977340833403 412.0723014202408,46.64809063666639 414.83713669723295,55.78689325833263 407,50.333333333333336 399.16286330276705,55.78689325833263 401.9276985797592,46.64809063666639 394.31924644939795,40.87977340833404 403.8651453211068,40.68524269666695 407,31.666666666666664 410.1348546788932,40.68524269666695 "
+      stroke="#000000"
+      stroke-width="0"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></polygon>
+    <polygon
+      cx="457"
+      cy="95"
+      id="svg_4"
+      shape="regularPoly"
+      sides="5"
+      orient="x"
+      edge="6.666666666666667"
+      fill="#000000"
+      strokecolor="#000000"
+      strokewidth="5"
+      points="462.6710053890136,95 458.7524370403971,100.39344662916632 452.4120602650961,98.33333333333333 452.4120602650961,91.66666666666667 458.7524370403971,89.60655337083368 462.6710053890136,95 "
+      stroke="#000000"
+      stroke-width="5"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></polygon>
+    <polygon
+      cx="115"
+      cy="79"
+      id="svg_5"
+      shape="regularPoly"
+      sides="5"
+      orient="x"
+      edge="0"
+      fill="#000000"
+      strokecolor="#000000"
+      strokewidth="5"
+    >
+      <animate
+        attributeName="opacity"
+        begin="indefinite"
+        dur="0.2"
+        fill="freeze"
+        to="1"
+      ></animate>
+    </polygon>
+  </g>
+</svg>
+`;
+
+exports[`use various parts of svg-edit > check tool_text_anchor_middle #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="middle"
+      xml:space="preserve"
+      fill-opacity="1"
+      stroke-opacity="1"
+      font-=""
+      font-weight="bold"
+    >
+      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>
+    <polygon
+      cx="407"
+      cy="45"
+      id="svg_3"
+      shape="star"
+      point="5"
+      r="13.333333333333334"
+      radialshift=""
+      r2="5.333333333333334"
+      orient="point"
+      fill="#000000"
+      strokecolor="#000000"
+      strokewidth="0"
+      points="407,31.666666666666664 410.1348546788932,40.68524269666695 419.68075355060205,40.87977340833403 412.0723014202408,46.64809063666639 414.83713669723295,55.78689325833263 407,50.333333333333336 399.16286330276705,55.78689325833263 401.9276985797592,46.64809063666639 394.31924644939795,40.87977340833404 403.8651453211068,40.68524269666695 407,31.666666666666664 410.1348546788932,40.68524269666695 "
+      stroke="#000000"
+      stroke-width="0"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></polygon>
+    <polygon
+      cx="457"
+      cy="95"
+      id="svg_4"
+      shape="regularPoly"
+      sides="5"
+      orient="x"
+      edge="6.666666666666667"
+      fill="#000000"
+      strokecolor="#000000"
+      strokewidth="5"
+      points="462.6710053890136,95 458.7524370403971,100.39344662916632 452.4120602650961,98.33333333333333 452.4120602650961,91.66666666666667 458.7524370403971,89.60655337083368 462.6710053890136,95 "
+      stroke="#000000"
+      stroke-width="5"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></polygon>
+    <polygon
+      cx="115"
+      cy="79"
+      id="svg_5"
+      shape="regularPoly"
+      sides="5"
+      orient="x"
+      edge="0"
+      fill="#000000"
+      strokecolor="#000000"
+      strokewidth="5"
+      fill-opacity="1"
+      stroke="none"
+      stroke-opacity="1"
+    ></polygon>
+    <polygon
+      cx="115"
+      cy="79"
+      id="svg_6"
+      shape="regularPoly"
+      sides="5"
+      orient="x"
+      edge="0"
+      fill="#000000"
+      strokecolor="none"
+      strokewidth="5"
+    >
+      <animate
+        attributeName="opacity"
+        begin="indefinite"
+        dur="0.2"
+        fill="freeze"
+        to="1"
+      ></animate>
+    </polygon>
+  </g>
+</svg>
+`;
+
+exports[`use various parts of svg-edit > check tool_text_anchor_end #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="middle"
+      xml:space="preserve"
+      fill-opacity="1"
+      stroke-opacity="1"
+      font-=""
+      font-weight="bold"
+    >
+      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>
+    <polygon
+      cx="407"
+      cy="45"
+      id="svg_3"
+      shape="star"
+      point="5"
+      r="13.333333333333334"
+      radialshift=""
+      r2="5.333333333333334"
+      orient="point"
+      fill="#000000"
+      strokecolor="#000000"
+      strokewidth="0"
+      points="407,31.666666666666664 410.1348546788932,40.68524269666695 419.68075355060205,40.87977340833403 412.0723014202408,46.64809063666639 414.83713669723295,55.78689325833263 407,50.333333333333336 399.16286330276705,55.78689325833263 401.9276985797592,46.64809063666639 394.31924644939795,40.87977340833404 403.8651453211068,40.68524269666695 407,31.666666666666664 410.1348546788932,40.68524269666695 "
+      stroke="#000000"
+      stroke-width="0"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></polygon>
+    <polygon
+      cx="457"
+      cy="95"
+      id="svg_4"
+      shape="regularPoly"
+      sides="5"
+      orient="x"
+      edge="6.666666666666667"
+      fill="#000000"
+      strokecolor="#000000"
+      strokewidth="5"
+      points="462.6710053890136,95 458.7524370403971,100.39344662916632 452.4120602650961,98.33333333333333 452.4120602650961,91.66666666666667 458.7524370403971,89.60655337083368 462.6710053890136,95 "
+      stroke="#000000"
+      stroke-width="5"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></polygon>
+    <polygon
+      cx="115"
+      cy="79"
+      id="svg_5"
+      shape="regularPoly"
+      sides="5"
+      orient="x"
+      edge="0"
+      fill="#000000"
+      strokecolor="#000000"
+      strokewidth="5"
+      fill-opacity="1"
+      stroke="none"
+      stroke-opacity="1"
+    ></polygon>
+    <polygon
+      cx="115"
+      cy="79"
+      id="svg_6"
+      shape="regularPoly"
+      sides="5"
+      orient="x"
+      edge="0"
+      fill="#000000"
+      strokecolor="none"
+      strokewidth="5"
+      fill-opacity="1"
+      stroke="none"
+      stroke-opacity="1"
+    ></polygon>
+    <polygon
+      cx="115"
+      cy="79"
+      id="svg_7"
+      shape="regularPoly"
+      sides="5"
+      orient="x"
+      edge="0"
+      fill="#000000"
+      strokecolor="none"
+      strokewidth="5"
+    >
+      <animate
+        attributeName="opacity"
+        begin="indefinite"
+        dur="0.2"
+        fill="freeze"
+        to="1"
+      ></animate>
+    </polygon>
+  </g>
+</svg>
+`;

cypress/integration/ui/accessibility.js

@@ -1,9 +1,12 @@
+import {
+  visitAndApproveStorage
+} from '../../support/ui-test-helper.js';
+
 describe('UI - Accessibility', function () {
   beforeEach(() => {
-    cy.visit('/instrumented/editor/index.html');
+    visitAndApproveStorage();
     cy.injectAxe();
   });
-
   // https://www.npmjs.com/package/cypress-axe
   it('Has no detectable a11y violations on load', () => {
     // Configure aXe and test the page at initial load

cypress/integration/ui/scenario.js

@@ -88,4 +88,22 @@ describe('use various parts of svg-edit', function () {
       .trigger('mouseup', {force: true});
     cy.get('#svgcontent').toMatchSnapshot();
   });
+  it('check tool_text_anchor_start', function () {
+    cy.get('#svg_1').click({force: true});
+    cy.get('#tool_text_anchor_start')
+      .click({force: true});
+    testSnapshot();
+  });
+  it('check tool_text_anchor_middle', function () {
+    cy.get('#svg_1').click({force: true});
+    cy.get('#tool_text_anchor_middle')
+      .click({force: true});
+    testSnapshot();
+  });
+  it('check tool_text_anchor_end', function () {
+    cy.get('#svg_1').click({force: true});
+    cy.get('#tool_text_anchor_end')
+      .click({force: true});
+    testSnapshot();
+  });
 });

dist/editor/index.html

@@ -231,6 +231,9 @@
           <div class="toolset">
             <se-button id="tool_bold" size="small" title="Bold Text [B]" src="./images/bold.svg" shortcut="B"></se-button>
             <se-button id="tool_italic" size="small" title="Italic Text [I]" src="./images/italic.svg" shortcut="I"></se-button>
+            <div class="tool_button" id="tool_text_anchor_start" title="Align the text in start"></div>
+            <div class="tool_button" id="tool_text_anchor_middle" title="Align the text in middle"></div>
+            <div class="tool_button" id="tool_text_anchor_end" title="Align the text in end"></div>
           </div>
           <div class="toolset" id="tool_font_family">
             <label>

package-lock.json

@@ -17461,7 +17461,7 @@
       "dev": true
     },
     "qr-manipulation": {
-      "version": "git+https://github.com/brettz9/qr-manipulation.git#f3dd92f4db007b2195ab1477757db74d598c3fdc",
+      "version": "git+https://github.com/brettz9/qr-manipulation.git#fc28c633c6b4caf3489508dc42c013dd0d8a43f8",
       "from": "git+https://github.com/brettz9/qr-manipulation.git",
       "dev": true
     },

src/editor/images/anchor_end.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" 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-->
+ <g class="layer">
+  <title>Layer 1</title>
+  <text fill="#000000" font-family="serif" font-size="9" id="svg_2" stroke="#000000" stroke-width="0" text-anchor="middle" x="12" xml:space="preserve" y="14.66667">abcd</text>
+  <line fill="none" id="svg_1" stroke="#ff7f00" stroke-width="2" x1="21.46429" x2="21.46429" y1="4.95685" y2="18.62351"/>
+ </g>
+</svg>

src/editor/images/anchor_middle.svg

@@ -0,0 +1,8 @@
+ <svg width="24" height="24" 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-->
+ <g class="layer">
+  <title>Layer 1</title>
+  <text fill="#000000" font-family="serif" font-size="9" id="svg_2" stroke="#000000" stroke-width="0" text-anchor="middle" x="12" xml:space="preserve" y="14.66667">abcd</text>
+  <line fill="none" id="svg_1" stroke="#ff7f00" stroke-width="2" x1="11.75" x2="11.75" y1="4.38542" y2="18.05208"/>
+ </g>
+</svg>

src/editor/images/anchor_start.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" 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-->
+ <g class="layer">
+  <title>Layer 1</title>
+  <text fill="#000000" font-family="serif" font-size="9" id="svg_2" stroke="#000000" stroke-width="0" text-anchor="middle" x="12" xml:space="preserve" y="14.66667">abcd</text>
+  <line fill="none" id="svg_1" stroke="#ff7f00" stroke-width="2" x1="1.5" x2="1.5" y1="5.63542" y2="19.30208"/>
+ </g>
+</svg>

src/editor/index.html

@@ -231,6 +231,9 @@
           <div class="toolset">
             <se-button id="tool_bold" size="small" title="Bold Text [B]" src="./images/bold.svg" shortcut="B"></se-button>
             <se-button id="tool_italic" size="small" title="Italic Text [I]" src="./images/italic.svg" shortcut="I"></se-button>
+            <se-button id="tool_text_anchor_start" size="small" title="Align the text from start" src="./images/anchor_start.svg"></se-button>
+            <se-button id="tool_text_anchor_middle" size="small" title="Align the text from middle" src="./images/anchor_middle.svg"></se-button>
+            <se-button id="tool_text_anchor_end" size="small" title="Align the text from end" src="./images/anchor_end.svg"></se-button>
           </div>
           <div class="toolset" id="tool_font_family">
             <label>

src/editor/locale.js

@@ -288,6 +288,9 @@ export const readLang = function (langData) {
     tool_angle: properties.angle,
     tool_blur: properties.blur,
     tool_bold: properties.bold,
+    tool_text_anchor_start: properties.text_anchor_start,
+    tool_text_anchor_middle: properties.text_anchor_middle,
+    tool_text_anchor_end: properties.text_anchor_end,
     tool_circle: tools.mode_circle,
     tool_clone: tools.clone,
     tool_clone_multi: tools.clone,
@@ -303,6 +306,7 @@ export const readLang = function (langData) {
     tool_link_url: tools.set_link_url,
     tool_image: tools.mode_image,
     tool_italic: properties.italic,
+
     tool_line: tools.mode_line,
     tool_move_bottom: tools.move_bottom,
     tool_move_top: tools.move_top,

src/editor/locale/lang.af.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Lettertipe verander Familie',
     font_size: 'Verandering Lettertipe Grootte',
     bold: 'Vetgedrukte teks',
-    italic: 'Italic Text'
+    italic: 'Italic Text',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.ar.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'تغيير الخط الأسرة',
     font_size: 'تغيير حجم الخط',
     bold: 'نص جريء',
-    italic: 'مائل نص'
+    italic: 'مائل نص',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.az.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Change Font Family',
     font_size: 'Change Font Size',
     bold: 'Bold Text',
-    italic: 'Italic Text'
+    italic: 'Italic Text',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.be.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Змены Сямейства шрыфтоў',
     font_size: 'Змяніць памер шрыфта',
     bold: 'Тоўсты тэкст',
-    italic: 'Нахілены тэкст'
+    italic: 'Нахілены тэкст',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.bg.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Промяна на шрифта Семейство',
     font_size: 'Промени размера на буквите',
     bold: 'Получер текст',
-    italic: 'Курсив текст'
+    italic: 'Курсив текст',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.ca.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Canviar la font Família',
     font_size: 'Change Font Size',
     bold: 'Text en negreta',
-    italic: 'Text en cursiva'
+    italic: 'Text en cursiva',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.cs.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Změnit font',
     font_size: 'Změnit velikost písma',
     bold: 'Tučně',
-    italic: 'Kurzíva'
+    italic: 'Kurzíva',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Hlavní menu',

src/editor/locale/lang.cy.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Newid Font Teulu',
     font_size: 'Newid Maint Ffont',
     bold: 'Testun Bras',
-    italic: 'Italig Testun'
+    italic: 'Italig Testun',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.da.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Skift Font Family',
     font_size: 'Skift skriftstørrelse',
     bold: 'Fed tekst',
-    italic: 'Italic Text'
+    italic: 'Italic Text',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.de.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Schriftart wählen',
     font_size: 'Schriftgröße einstellen',
     bold: 'Fetter Text',
-    italic: 'Kursiver Text'
+    italic: 'Kursiver Text',
+    text_anchor_start: 'Den Text linksbündig ausrichten',
+    text_anchor_middle: 'Den Text zentriert ausrichten',
+    text_anchor_end: 'Den Text rechtsbündig ausrichten'
   },
   tools: {
     main_menu: 'Hauptmenü',

src/editor/locale/lang.el.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Αλλαγή γραμματοσειράς Οικογένεια',
     font_size: 'Αλλαγή μεγέθους γραμματοσειράς',
     bold: 'Bold Text',
-    italic: 'Πλάγιους'
+    italic: 'Πλάγιους',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.en.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Change Font Family',
     font_size: 'Change Font Size',
     bold: 'Bold Text [B]',
-    italic: 'Italic Text [I]'
+    italic: 'Italic Text [I]',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.es.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Tipo de fuente',
     font_size: 'Tamaño de la fuente',
     bold: 'Texto en negrita',
-    italic: 'Texto en cursiva'
+    italic: 'Texto en cursiva',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Menú principal',

src/editor/locale/lang.et.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Muutke Kirjasinperhe',
     font_size: 'Change font size',
     bold: 'Rasvane kiri',
-    italic: 'Kursiiv'
+    italic: 'Kursiiv',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.fa.js

@@ -70,7 +70,10 @@ export default {
     font_family: '‫تغییر خانواده قلم‬',
     font_size: '‫تغییر اندازه قلم‬',
     bold: '‫متن توپر ‬',
-    italic: '‫متن کج ‬'
+    italic: '‫متن کج ‬',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.fi.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Muuta Font Family',
     font_size: 'Muuta fontin kokoa',
     bold: 'Lihavoitu teksti',
-    italic: 'Kursivoitu'
+    italic: 'Kursivoitu',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.fr.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Changer la famille de police',
     font_size: 'Changer la taille de la police',
     bold: 'Texte en gras',
-    italic: 'Texte en italique'
+    italic: 'Texte en italique',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Menu principal',

src/editor/locale/lang.fy.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Lettertype oanpasse',
     font_size: 'Lettergrutte oanpasse',
     bold: 'Fet',
-    italic: 'Skean'
+    italic: 'Skean',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.ga.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Athraigh an Cló Teaghlaigh',
     font_size: 'Athraigh Clómhéid',
     bold: 'Trom Téacs',
-    italic: 'Iodálach Téacs'
+    italic: 'Iodálach Téacs',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.gl.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Cambiar fonte Familia',
     font_size: 'Mudar tamaño de letra',
     bold: 'Bold Text',
-    italic: 'Texto en cursiva'
+    italic: 'Texto en cursiva',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.he.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'שינוי גופן משפחה',
     font_size: 'שנה גודל גופן',
     bold: 'טקסט מודגש',
-    italic: 'טקסט נטוי'
+    italic: 'טקסט נטוי',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.hi.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'बदलें फ़ॉन्ट परिवार',
     font_size: 'फ़ॉन्ट का आकार बदलें',
     bold: 'मोटा पाठ',
-    italic: 'इटैलिक पाठ'
+    italic: 'इटैलिक पाठ',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.hr.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Promjena fontova',
     font_size: 'Change font size',
     bold: 'Podebljani tekst',
-    italic: 'Italic Text'
+    italic: 'Italic Text',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.hu.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Change Betűcsalád',
     font_size: 'Change font size',
     bold: 'Félkövér szöveg',
-    italic: 'Dőlt szöveg'
+    italic: 'Dőlt szöveg',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.hy.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Change Font Family',
     font_size: 'Change Font Size',
     bold: 'Bold Text',
-    italic: 'Italic Text'
+    italic: 'Italic Text',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.id.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Ubah Font Keluarga',
     font_size: 'Ubah Ukuran Font',
     bold: 'Bold Teks',
-    italic: 'Italic Teks'
+    italic: 'Italic Teks',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.is.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Change Leturfjölskylda',
     font_size: 'Breyta leturstærð',
     bold: 'Bold Text',
-    italic: 'Italic Text'
+    italic: 'Italic Text',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.it.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Cambia il tipo di Font',
     font_size: 'Modifica dimensione carattere',
     bold: 'Grassetto',
-    italic: 'Corsivo'
+    italic: 'Corsivo',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Menù principale',

src/editor/locale/lang.ja.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'フォントファミリーの変更',
     font_size: '文字サイズの変更',
     bold: '太字',
-    italic: 'イタリック体'
+    italic: 'イタリック体',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.ko.js

@@ -70,7 +70,10 @@ export default {
     font_family: '글꼴 변경 패밀리',
     font_size: '글꼴 크기 변경',
     bold: '굵은 텍스트',
-    italic: '기울임꼴 텍스트'
+    italic: '기울임꼴 텍스트',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.lt.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Pakeistišriftą Šeima',
     font_size: 'Change font size',
     bold: 'Pusjuodis',
-    italic: 'Kursyvas'
+    italic: 'Kursyvas',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.lv.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Mainīt fonta Family',
     font_size: 'Mainīt fonta izmēru',
     bold: 'Bold Text',
-    italic: 'Kursīvs'
+    italic: 'Kursīvs',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.mk.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Смени фонт Фамилија',
     font_size: 'Изменифонт Големина',
     bold: 'Задебелен текст',
-    italic: 'Italic текст'
+    italic: 'Italic текст',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.ms.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Tukar Font Keluarga',
     font_size: 'Ubah Saiz Font',
     bold: 'Bold Teks',
-    italic: 'Italic Teks'
+    italic: 'Italic Teks',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.mt.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Bidla Font Familja',
     font_size: 'Change font size',
     bold: 'Bold Test',
-    italic: 'Test korsiv'
+    italic: 'Test korsiv',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.nl.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Verander lettertype',
     font_size: 'Verander lettertype grootte',
     bold: 'Vet',
-    italic: 'Cursief'
+    italic: 'Cursief',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Hoofdmenu',

src/editor/locale/lang.no.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Change Font Family',
     font_size: 'Endre skriftstørrelse',
     bold: 'Fet tekst',
-    italic: 'Kursiv tekst'
+    italic: 'Kursiv tekst',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.pl.js

@@ -71,7 +71,10 @@ export default {
     font_family: 'Zmień krój czcionki',
     font_size: 'Zmień rozmiar czcionki',
     bold: 'Pogrubienie textu',
-    italic: 'Kursywa'
+    italic: 'Kursywa',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Menu główne',

src/editor/locale/lang.pt-BR.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Mudar o estilo da fonte',
     font_size: 'Mudar o tamanho da fonte',
     bold: 'Negrito',
-    italic: 'Italico'
+    italic: 'Italico',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Menu Principal',

src/editor/locale/lang.pt-PT.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Alterar fonte Família',
     font_size: 'Alterar tamanho de letra',
     bold: 'Bold Text',
-    italic: 'Texto em itálico'
+    italic: 'Texto em itálico',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.ro.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Modificare familie de fonturi',
     font_size: 'Schimbă dimensiunea fontului',
     bold: 'Text Îngroşat',
-    italic: 'Text Înclinat'
+    italic: 'Text Înclinat',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Menu Principal',

src/editor/locale/lang.ru.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Изменить семейство шрифтов',
     font_size: 'Изменить размер шрифта',
     bold: 'Жирный',
-    italic: 'Курсив'
+    italic: 'Курсив',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Главное меню',

src/editor/locale/lang.sk.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Zmeniť font',
     font_size: 'Zmeniť veľkosť písma',
     bold: 'Tučné',
-    italic: 'Kurzíva'
+    italic: 'Kurzíva',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Hlavné menu',

src/editor/locale/lang.sl.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Spremeni tip pisave',
     font_size: 'Spremeni velikost pisave',
     bold: 'Krepko',
-    italic: 'Poševno'
+    italic: 'Poševno',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Glavni meni',

src/editor/locale/lang.sq.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Ndryshimi Font Family',
     font_size: 'Ndryshimi Font Size',
     bold: 'Bold Text',
-    italic: 'Italic Text'
+    italic: 'Italic Text',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.sr.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Цханге фонт породицу',
     font_size: 'Цханге фонт сизе',
     bold: 'Подебљан текст',
-    italic: 'Италиц текст'
+    italic: 'Италиц текст',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.sv.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Ändra Typsnitt',
     font_size: 'Ändra textstorlek',
     bold: 'Fet text',
-    italic: 'Kursiv text'
+    italic: 'Kursiv text',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.sw.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Change font Family',
     font_size: 'Change font Size',
     bold: 'Bold Nakala',
-    italic: 'Italiki Nakala'
+    italic: 'Italiki Nakala',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.test.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Change Font Family',
     font_size: 'Change Font Size',
     bold: 'Bold Text',
-    italic: 'Italic Text'
+    italic: 'Italic Text',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.th.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'ครอบครัว Change Font',
     font_size: 'เปลี่ยนขนาดตัวอักษร',
     bold: 'ข้อความตัวหนา',
-    italic: 'ข้อความตัวเอียง'
+    italic: 'ข้อความตัวเอียง',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.tl.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Baguhin ang Pamilya ng Font',
     font_size: 'Baguhin ang Laki ng Font',
     bold: 'Bold Text',
-    italic: 'Italic Text'
+    italic: 'Italic Text',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.tr.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Font değiştir Aile',
     font_size: 'Change font size',
     bold: 'Kalın Yazı',
-    italic: 'Italik yazı'
+    italic: 'Italik yazı',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.uk.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Зміни Сімейство шрифтів',
     font_size: 'Змінити розмір шрифту',
     bold: 'Товстий текст',
-    italic: 'Похилий текст'
+    italic: 'Похилий текст',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.vi.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'Thay đổi Font Gia đình',
     font_size: 'Thay đổi cỡ chữ',
     bold: 'Bold Text',
-    italic: 'Italic Text'
+    italic: 'Italic Text',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.yi.js

@@ -70,7 +70,10 @@ export default {
     font_family: 'ענדערן פאָנט פאַמילי',
     font_size: 'בייטן פאָנט גרייס',
     bold: 'דרייסט טעקסט',
-    italic: 'יטאַליק טעקסט'
+    italic: 'יטאַליק טעקסט',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.zh-CN.js

@@ -70,7 +70,10 @@ export default {
     font_family: '更改字体样式',
     font_size: '更改字体大小',
     bold: '粗体',
-    italic: '斜体'
+    italic: '斜体',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: '主菜单',

src/editor/locale/lang.zh-HK.js

@@ -70,7 +70,10 @@ export default {
     font_family: '更改字体家族',
     font_size: '更改字体大小',
     bold: '粗体',
-    italic: '斜体文本'
+    italic: '斜体文本',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/locale/lang.zh-TW.js

@@ -70,7 +70,10 @@ export default {
     font_family: '更改字體',
     font_size: '更改字體大小',
     bold: '粗體',
-    italic: '斜體'
+    italic: '斜體',
+    text_anchor_start: 'Align the text in start',
+    text_anchor_middle: 'Align the text in middle',
+    text_anchor_end: 'Align the text in end'
   },
   tools: {
     main_menu: 'Main Menu',

src/editor/svgedit.js

@@ -515,6 +515,26 @@ editor.init = () => {
           $('#font_family').val(elem.getAttribute('font-family'));
           $('#font_size').val(elem.getAttribute('font-size'));
           $('#text').val(elem.textContent);
+          const textAnchorStart = $id('tool_text_anchor_start');
+          const textAnchorMiddle = $id('tool_text_anchor_middle');
+          const textAnchorEnd = $id('tool_text_anchor_end');
+          switch (elem.getAttribute('text-anchor')) {
+          case 'start':
+            textAnchorStart.pressed = true;
+            textAnchorMiddle.pressed = false;
+            textAnchorEnd.pressed = false;
+            break;
+          case 'middle':
+            textAnchorStart.pressed = false;
+            textAnchorMiddle.pressed = true;
+            textAnchorEnd.pressed = false;
+            break;
+          case 'end':
+            textAnchorStart.pressed = false;
+            textAnchorMiddle.pressed = false;
+            textAnchorEnd.pressed = true;
+            break;
+          }
           if (svgCanvas.addedNew) {
           // Timeout needed for IE9
             setTimeout(() => {
@@ -2535,6 +2555,17 @@ editor.init = () => {
     return false;
   };
 
+  /**
+   *
+   * @param {string} value "start","end" or "middle"
+   * @returns {false}
+   */
+  const clickTextAnchor = (value) => {
+    svgCanvas.setTextAnchor(value);
+    updateContextPanel();
+    return false;
+  };
+
   /**
   *
   * @returns {void}
@@ -3193,6 +3224,10 @@ editor.init = () => {
 
     $id('tool_bold').addEventListener('click', clickBold);
     $id('tool_italic').addEventListener('click', clickItalic);
+    $id('tool_text_anchor_start').addEventListener('click', () => clickTextAnchor('start'));
+    $id('tool_text_anchor_middle').addEventListener('click', () => clickTextAnchor('middle'));
+    $id('tool_text_anchor_end').addEventListener('click', () => clickTextAnchor('end'));
+
     $id('palette').addEventListener('change', handlePalette);
 
     $id('tool_clear').addEventListener('click', clickClear);
@@ -3496,7 +3531,6 @@ editor.init = () => {
     try {
       svgeditClipboard = localStorage.getItem('svgedit_clipboard');
     } catch (err) {}
-    // eslint-disable-next-line max-len
     canvMenu.setAttribute((svgeditClipboard ? 'en' : 'dis') + 'ablemenuitems', '#paste,#paste_in_place');
   }
   enableOrDisableClipboard();

src/svgcanvas/elem-get-set.js

@@ -606,6 +606,24 @@ isNullish(selectedElements[1])) {
     elemContext_.getCanvas().textActions.setCursor();
   }
 };
+
+/**
+ * @function module:svgcanvas.SvgCanvas#setTextAnchorMethod Set the new text anchor
+ * @param {string} value - The text anchor value (start, middle or end)
+ * @returns {void}
+ */
+export const setTextAnchorMethod = function (value) {
+  const selectedElements = elemContext_.getSelectedElements();
+  const selected = selectedElements[0];
+  if (!isNullish(selected) && selected.tagName === 'text' &&
+      isNullish(selectedElements[1])) {
+    elemContext_.getCanvas().changeSelectedAttribute('text-anchor', value);
+  }
+  if (!selectedElements[0].textContent) {
+    elemContext_.getCanvas().textActions.setCursor();
+  }
+};
+
 /**
 * @function module:svgcanvas.SvgCanvas#getFontFamily
 * @returns {string} The current font family

src/svgcanvas/svgcanvas.js

@@ -57,7 +57,7 @@ import {
   setDocumentTitleMethod, setResolutionMethod, getEditorNSMethod, setBBoxZoomMethod,
   setZoomMethod, setColorMethod, setGradientMethod, findDuplicateGradient, setPaintMethod,
   setStrokeWidthMethod, setStrokeAttrMethod, getBoldMethod, setBoldMethod, getItalicMethod,
-  setItalicMethod, getFontFamilyMethod, setFontFamilyMethod, setFontColorMethod, getFontColorMethod,
+  setItalicMethod, setTextAnchorMethod, getFontFamilyMethod, setFontFamilyMethod, setFontColorMethod, getFontColorMethod,
   getFontSizeMethod, setFontSizeMethod, getTextMethod, setTextContentMethod,
   setImageURLMethod, setLinkURLMethod, setRectRadiusMethod, makeHyperlinkMethod,
   removeHyperlinkMethod, setSegTypeMethod, setBackgroundMethod
@@ -2216,6 +2216,14 @@ class SvgCanvas {
 */
     this.setItalic = setItalicMethod;
 
+    /**
+* Set the new text anchor.
+* @function module:svgcanvas.SvgCanvas#setTextAnchor
+* @param {string} textAnchor - The value of the text anchor (start, middle or end)
+* @returns {void}
+*/
+    this.setTextAnchor = setTextAnchorMethod;
+
     /**
 * @function module:svgcanvas.SvgCanvas#getFontFamily
 * @returns {string} The current font family