textanalyser: switch to div, update to create blue and red spans (Fixes #118 almost entirely)

Missing:
 - no placeholder text now (since div doesn't support it). Will need to
   implement it myself, there are plenty of examples

And code wise:
 - need to split out a component graph_input.js which will hide
   the underlying implementation.

2 files changed, 16 insertions, 1 deletions

diff --git a/res/templates/index.html b/res/templates/index.html
index 70022b3f..ac9258d8 100644
--- a/res/templates/index.html
+++ b/res/templates/index.html
@@ -72,7 +72,7 @@ var rz_config = { // set as a global variable
         <div id="search-suggestion" class="suggestion" style="display: none"></div>
       </div>
       <div class="input-container" id="input-container__graph-input">
-          <input class="input-bar" id="textanalyser" placeholder="Add nodes or links" autofocus/>
+          <div contentEditable="true" class="input input-bar" id="textanalyser" placeholder="Add nodes or links" autofocus ></div>
           <button id="btn_add"></button>
         <div id="input-suggestion" class="suggestion" style="display: none"></div>
       </div>
diff --git a/src/client/textanalysis.ui.js b/src/client/textanalysis.ui.js
index 95c9903f..913395cc 100644
--- a/src/client/textanalysis.ui.js
+++ b/src/client/textanalysis.ui.js
@@ -245,6 +245,21 @@ var analyze_element_text = function()
         finalize: false,
     });
     input.push({where: consts.INPUT_WHERE_TEXTANALYSIS, input: text});
+    selection_start = selectionStart(element_raw);
+    value(element_raw, ''); // this removes span elements as well
+    // here we stop treating the element as an input, this only works on a div/other "normal" element
+    base_parts = spaced_text.split(/  /)
+    parts = base_parts.slice(0, base_parts.length - 1).map(function (l) { return l + '  '; });
+    if (base_parts[base_parts.length - 1].length != 0) {
+        parts.push(base_parts[base_parts.length - 1]);
+    }
+    function span(text, color) {
+        return $('<span style="color: ' + color + '">' + text.replace(/ /g, nbsp) + '</span>');
+    }
+    parts.map(function (part, index) {
+        element.append(span(part, index % 2 == 0 ? 'blue' : 'red'));
+    });
+    setSelection(element_raw, selection_start, selection_start);
     stretch_input_to_text_size();
 }