From c19ce094ec58dc93eb2236a9e83a1bbd6cf70370 Mon Sep 17 00:00:00 2001
From: Julian Steinwachs <julian.steinwachs@fau.de>
Date: Thu, 28 Jan 2016 20:08:52 +0100
Subject: [PATCH] wysiwyg markout, yey

---
 build/app-bundle.js        | 21 ++++++++++++++++++++-
 css/main.css               |  7 +++++++
 jsx/common/PostComposer.js | 21 ++++++++++++++++++++-
 3 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/build/app-bundle.js b/build/app-bundle.js
index 29f3a0a..d4e81a7 100644
--- a/build/app-bundle.js
+++ b/build/app-bundle.js
@@ -979,9 +979,28 @@ module.exports = PostComposer = React.createClass({displayName: "PostComposer",
             output+=('<span class="text-primary">'+item.raw+'</span>');
             break;
           default:
-            output+=('<span>'+item.raw+'</span>');
+            output+=(item.raw);
         }
       });
+            
+      var rules = [
+        {regex: /\[([^\[]+)\]\(([^\)]+)\)/g,
+         replacement: '<span class="ghost">[</span><a>$1</a><span class="ghost">]($2)</span>'},        // hyperlink
+        {regex: /(\s?)(\*)(.*?)(\*)(\s?)/g, 
+         replacement: '$1<span class="ghost">*</span><b>$3</b><span class="ghost">*</span>$5'},                         // emphasis
+        {regex: /(\s?)(\~)(.*?)(\~)(\s?)/g, 
+         replacement: '$1<span class="ghost">~</span><i>$3</i><span class="ghost">~</span>$5'},                         // emphasis
+        {regex: /(\s?)(\-)(.*?)(\-)(\s?)/g, 
+         replacement: '$1<span class="ghost">-</span><del>$3</del><span class="ghost">-</span>$5'},                         // emphasis
+        {regex: /(\s?)(\_)(.*?)(\_)(\s?)/g, 
+         replacement: '$1<span class="ghost">_</span><u>$3</u><span class="ghost">_</span>$5'},                         // emphasis
+      ]
+      
+      rules.forEach(function (rule) {
+        output = output.replace(rule.regex, rule.replacement);
+      });
+      
+      console.log(text.slice(0, this.state.maxLength),output)
       
       // text overflow
       if (text.length > this.state.maxLength) {
diff --git a/css/main.css b/css/main.css
index 799319d..33f329f 100755
--- a/css/main.css
+++ b/css/main.css
@@ -100,4 +100,11 @@ body.modal-open {
   vertical-align: text-top;
   margin-left: 0.25em;
   margin-right: 0.125em;
+}
+
+.ghost {
+  display: inline-block; 
+  width: 0; 
+  overflow: hidden; 
+  height: 0;
 }
\ No newline at end of file
diff --git a/jsx/common/PostComposer.js b/jsx/common/PostComposer.js
index 743a653..361a37d 100644
--- a/jsx/common/PostComposer.js
+++ b/jsx/common/PostComposer.js
@@ -162,9 +162,28 @@ module.exports = PostComposer = React.createClass({
             output+=('<span class="text-primary">'+item.raw+'</span>');
             break;
           default:
-            output+=('<span>'+item.raw+'</span>');
+            output+=(item.raw);
         }
       });
+            
+      var rules = [
+        {regex: /\[([^\[]+)\]\(([^\)]+)\)/g,
+         replacement: '<span class="ghost">[</span><a>$1</a><span class="ghost">]($2)</span>'},        // hyperlink
+        {regex: /(\s?)(\*)(.*?)(\*)(\s?)/g, 
+         replacement: '$1<span class="ghost">*</span><b>$3</b><span class="ghost">*</span>$5'},                         // emphasis
+        {regex: /(\s?)(\~)(.*?)(\~)(\s?)/g, 
+         replacement: '$1<span class="ghost">~</span><i>$3</i><span class="ghost">~</span>$5'},                         // emphasis
+        {regex: /(\s?)(\-)(.*?)(\-)(\s?)/g, 
+         replacement: '$1<span class="ghost">-</span><del>$3</del><span class="ghost">-</span>$5'},                         // emphasis
+        {regex: /(\s?)(\_)(.*?)(\_)(\s?)/g, 
+         replacement: '$1<span class="ghost">_</span><u>$3</u><span class="ghost">_</span>$5'},                         // emphasis
+      ]
+      
+      rules.forEach(function (rule) {
+        output = output.replace(rule.regex, rule.replacement);
+      });
+      
+      console.log(text.slice(0, this.state.maxLength),output)
       
       // text overflow
       if (text.length > this.state.maxLength) {