Finished up some chat stuff

resources/[system]/chat/html/App.js

@@ -139,7 +139,6 @@ window.APP = {
             message: this.message,
           }));
           this.oldMessages.unshift(this.message);
-          this.message = '';
           this.oldMessagesIndex = -1;
           this.hideInput();
         } else {
@@ -151,6 +150,7 @@ window.APP = {
       if (canceled) {
         post('http://chat/chatResult', JSON.stringify({ canceled }));
       }
+      this.message = '';
       this.showInput = false;
       clearInterval(this.focusTimer);
       this.resetShowWindowTimer();

resources/[system]/chat/html/Message.js

@@ -29,13 +29,23 @@ Vue.component('message', {
       return `<span style="color: rgb(${this.color[0]}, ${this.color[1]}, ${this.color[2]})">${str}</span>`
     },
     colorize(str) {
-      const s = "<span>" + (str.replace(/\^([0-9]+)([\*\_\~r])|\^([0-9]+)|\^([\*\_\~r])/g,
-        (match, color1, style1, color2, style2) => {
-          const color = (color1 || color2) ? `color-${color1 || color2} ` : '';
-          const style = (style1 || style2) ? `style-${style1 || style2} ` : '';
-          return `</span><span class="${color}${style}">`;
-        }
-      )) + "</span>";
+      let s = "<span>" + (str.replace(/\^([0-9]+)/g, (str, color) => `</span><span class="color-${color}">`)) + "</span>";
+
+      const styleDict = {
+        '*': 'font-weight: bold;',
+        '_': 'text-decoration: underline;',
+        '~': 'text-decoration: line-through;',
+        '=': 'text-decoration: underline line-through;',
+        'r': 'text-decoration: none;font-weight: normal;',
+      };
+
+      const styleRegex = /\^(\_|\*|\=|\~|\/|r)(.*?)(?=$|\^r|<\/em>)/;
+      while (s.match(styleRegex)) { //Any better solution would be appreciated :P
+        s = s.replace(styleRegex, (str, style, inner) => `<em style="${styleDict[style]}">${inner}</em>`)
+      }
+
+      console.log(s);
+
       return s.replace(/<span[^>]*><\/span[^>]*>/g, '');
     },
     escape(unsafe) {

resources/[system]/chat/html/index.css

@@ -8,14 +8,6 @@
 .color-8{color: #cc0000;}
 .color-9{color: #cc0068;}
 
-.style-\*{font-weight: bold;}
-.style-\_{text-decoration: underline;}
-.style-\~{text-decoration: line-through;}
-.style-r {
-  text-decoration: none;
-  font-weight: normal;
-}
-
 * {
   font-family: 'Lato', sans-serif;
   margin: 0;
@@ -26,6 +18,10 @@
   flex-grow: 0;
 }
 
+em {
+  font-style: normal;
+}
+
 #app {
   font-family: 'Lato', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;