fix conflicts

dist/editor/images/bold.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<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="18" font-style="normal" font-weight="bold" id="svg_1" stroke="#000000" stroke-width="0" text-anchor="middle" x="11.511492" xml:space="preserve" y="18.011461">B</text>
+ </g>
+</svg>

dist/editor/images/italic.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<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="Times" font-size="18" font-style="italic" font-weight="bold" id="svg_1" stroke="#000000" stroke-width="0" style="cursor: move;" text-anchor="middle" x="11.511492" xml:space="preserve" y="18.011461">i</text>
+ </g>
+</svg>

dist/editor/index.html

@@ -309,8 +309,8 @@
         </div>
         <div id="text_panel">
           <div class="toolset">
-            <div class="tool_button" id="tool_bold" title="Bold Text [B]"><span></span>B</div>
+            <se-button id="tool_bold" title="Bold Text [B]" src="./images/bold.svg" shortcut="B"></se-button>
-            <div class="tool_button" id="tool_italic" title="Italic Text [I]"><span></span>i</div>
+            <se-button id="tool_italic" title="Italic Text [I]" src="./images/italic.svg" shortcut="I"></se-button>
           </div>
           <div class="toolset" id="tool_font_family">
             <label>

dist/editor/svgedit.css

@@ -720,32 +720,11 @@ span.zoom_tool {
   padding-right: 5px;
 }
 
-#tool_bold, #tool_italic {
-  font: bold 2.1em/1.1em serif;
-  text-align: center;
-  padding-left: 2px;
-  position: relative;
-}
-
 #text {
   position: absolute;
   left: -9999px;
 }
 
-#tool_bold span, #tool_italic span {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0; left: 0;
-  background: #000;
-  opacity: 0;
-}
-
-#tool_italic {
-  font-weight: normal;
-  font-style: italic;
-}
-
 #url_notice {
   padding-top: 4px;
   display: none;

dist/editor/system/images/bold.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<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="18" font-style="normal" font-weight="bold" id="svg_1" stroke="#000000" stroke-width="0" text-anchor="middle" x="11.511492" xml:space="preserve" y="18.011461">B</text>
+ </g>
+</svg>

dist/editor/system/images/italic.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<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="Times" font-size="18" font-style="italic" font-weight="bold" id="svg_1" stroke="#000000" stroke-width="0" style="cursor: move;" text-anchor="middle" x="11.511492" xml:space="preserve" y="18.011461">i</text>
+ </g>
+</svg>

dist/editor/system/index.html

@@ -316,8 +316,8 @@
         </div>
         <div id="text_panel">
           <div class="toolset">
-            <div class="tool_button" id="tool_bold" title="Bold Text [B]"><span></span>B</div>
+            <se-button id="tool_bold" title="Bold Text [B]" src="./images/bold.svg" shortcut="B"></se-button>
-            <div class="tool_button" id="tool_italic" title="Italic Text [I]"><span></span>i</div>
+            <se-button id="tool_italic" title="Italic Text [I]" src="./images/italic.svg" shortcut="I"></se-button>
           </div>
           <div class="toolset" id="tool_font_family">
             <label>

dist/editor/system/svgedit.css

@@ -720,32 +720,11 @@ span.zoom_tool {
   padding-right: 5px;
 }
 
-#tool_bold, #tool_italic {
-  font: bold 2.1em/1.1em serif;
-  text-align: center;
-  padding-left: 2px;
-  position: relative;
-}
-
 #text {
   position: absolute;
   left: -9999px;
 }
 
-#tool_bold span, #tool_italic span {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0; left: 0;
-  background: #000;
-  opacity: 0;
-}
-
-#tool_italic {
-  font-weight: normal;
-  font-style: italic;
-}
-
 #url_notice {
   padding-top: 4px;
   display: none;

dist/editor/xdomain-index.html

@@ -309,8 +309,8 @@
         </div>
         <div id="text_panel">
           <div class="toolset">
-            <div class="tool_button" id="tool_bold" title="Bold Text [B]"><span></span>B</div>
+            <se-button id="tool_bold" title="Bold Text [B]" src="./images/bold.svg" shortcut="B"></se-button>
-            <div class="tool_button" id="tool_italic" title="Italic Text [I]"><span></span>i</div>
+            <se-button id="tool_italic" title="Italic Text [I]" src="./images/italic.svg" shortcut="I"></se-button>
           </div>
           <div class="toolset" id="tool_font_family">
             <label>

src/editor/images/bold.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<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="18" font-style="normal" font-weight="bold" id="svg_1" stroke="#000000" stroke-width="0" text-anchor="middle" x="11.511492" xml:space="preserve" y="18.011461">B</text>
+ </g>
+</svg>

src/editor/images/italic.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<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="Times" font-size="18" font-style="italic" font-weight="bold" id="svg_1" stroke="#000000" stroke-width="0" style="cursor: move;" text-anchor="middle" x="11.511492" xml:space="preserve" y="18.011461">i</text>
+ </g>
+</svg>

src/editor/index.html

@@ -309,8 +309,8 @@
         </div>
         <div id="text_panel">
           <div class="toolset">
-            <div class="tool_button" id="tool_bold" title="Bold Text [B]"><span></span>B</div>
+            <se-button id="tool_bold" title="Bold Text [B]" src="./images/bold.svg" shortcut="B"></se-button>
-            <div class="tool_button" id="tool_italic" title="Italic Text [I]"><span></span>i</div>
+            <se-button id="tool_italic" title="Italic Text [I]" src="./images/italic.svg" shortcut="I"></se-button>
           </div>
           <div class="toolset" id="tool_font_family">
             <label>

src/editor/svgedit.css

@@ -720,32 +720,11 @@ span.zoom_tool {
   padding-right: 5px;
 }
 
-#tool_bold, #tool_italic {
-  font: bold 2.1em/1.1em serif;
-  text-align: center;
-  padding-left: 2px;
-  position: relative;
-}
-
 #text {
   position: absolute;
   left: -9999px;
 }
 
-#tool_bold span, #tool_italic span {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0; left: 0;
-  background: #000;
-  opacity: 0;
-}
-
-#tool_italic {
-  font-weight: normal;
-  font-style: italic;
-}
-
 #url_notice {
   padding-top: 4px;
   display: none;

src/editor/svgedit.js

@@ -2057,16 +2057,8 @@ editor.init = () => {
         if (tagName === 'text') {
           $('#text_panel').css('display', 'inline');
           $('#tool_font_size').css('display', 'inline');
-          if (svgCanvas.getItalic()) {
+          $id('tool_italic').pressed = svgCanvas.getItalic();
-            $('#tool_italic').addClass('push_button_pressed').removeClass('tool_button');
+          $id('tool_bold').pressed = svgCanvas.getBold();
-          } else {
-            $('#tool_italic').removeClass('push_button_pressed').addClass('tool_button');
-          }
-          if (svgCanvas.getBold()) {
-            $('#tool_bold').addClass('push_button_pressed').removeClass('tool_button');
-          } else {
-            $('#tool_bold').removeClass('push_button_pressed').addClass('tool_button');
-          }
           $('#font_family').val(elem.getAttribute('font-family'));
           $('#font_size').val(elem.getAttribute('font-size'));
           $('#text').val(elem.textContent);
@@ -4910,6 +4902,9 @@ editor.init = () => {
     $id('layer_down').addEventListener('click', () => moveLayer(1));
     $id('layer_rename').addEventListener('click', layerRename);
 
+    $id('tool_bold').addEventListener('click', clickBold);
+    $id('tool_italic').addEventListener('click', clickItalic);
+
     const toolButtons = [
       {sel: '#tool_clear', fn: clickClear, evt: 'mouseup', key: ['N', true]},
       {sel: '#tool_save', fn () {
@@ -4946,8 +4941,6 @@ editor.init = () => {
       {sel: '#tool_node_link', fn: linkControlPoints, evt: 'click'},
       {sel: '#tool_ungroup', fn: clickGroup, evt: 'click'},
       {sel: '#tool_unlink_use', fn: clickGroup, evt: 'click'},
-      {sel: '#tool_bold', fn: clickBold, evt: 'mousedown'},
-      {sel: '#tool_italic', fn: clickItalic, evt: 'mousedown'},
       {sel: '#sidepanel_handle', fn: toggleSidePanel, key: ['X']},
       {sel: '#copy_save_done', fn: cancelOverlays, evt: 'click'},