cleaned up on the fly syntax detection and highlighting in editor

brain/tools/ui/TextEditor.js

@@ -1,15 +1,13 @@
 import * as DataEvent from '../events/DataEvent';
 import DateUtils from '../utilities/DateUtils';
-import
-{
+import {
     position,
     offset
 }
 from 'caret-pos';
 import EventEmitter from '../events/EventEmitter';
 import * as EditorEvent from '../events/EditorEvent';
-class TextEditor extends EventEmitter
-{
+class TextEditor extends EventEmitter {
     /**
      * Text Editor UI Component
      * @constructor
@@ -19,8 +17,7 @@ class TextEditor extends EventEmitter
     //--------------------------
     // constructor
     //--------------------------
-    constructor(textEditor, scrollLimit)
-    {
+    constructor(textEditor, scrollLimit) {
         super();
         hljs.initHighlightingOnLoad();
         this.dateUtils = new DateUtils();
@@ -30,15 +27,11 @@ class TextEditor extends EventEmitter
         this.url = '';
         let self = this;
         this.setInputs();
-        window.addEventListener("scroll", f =>
-        {
+        window.addEventListener("scroll", f => {
             var fixLimit = this.fixLimit;
-            if (window.pageYOffset >= fixLimit)
-            {
+            if (window.pageYOffset >= fixLimit) {
                 document.getElementById('edit-control').style.position = "fixed"
-            }
-            else
-            {
+            } else {
                 document.getElementById('edit-control').style.position = "relative"
             }
         });
@@ -47,17 +40,28 @@ class TextEditor extends EventEmitter
     //--------------------------
     // methods
     //--------------------------
-    setInputs()
-    {
+    setInputs() {
         let self = this;
         var editorButtons = document.querySelectorAll('.editor-button');
-        for (var i = 0, length = editorButtons.length; i < length; i++)
-        {
+        for (var i = 0, length = editorButtons.length; i < length; i++) {
             editorButtons[i].addEventListener('click', e => this.handleEditorOption(e), false);
         }
+
+        this.textEditor.addEventListener('input', e => {
+            let htmlTagRe = /<[a-z][\s\S]*>/g;
+            let text = this.textEditor.innerText;
+            if (e.inputType == "insertParagraph") return //cursor setting gets weird on return, so just back out
+
+            if (text.search(htmlTagRe) > -1) {
+                let caret = position(this.textEditor).pos;
+                self.refresh()
+                position(this.textEditor, caret);
+
+            }
+
+        })
     }
-    refresh()
-    {
+    refresh() {
         var spiffed = hljs.highlight('markdown', this.textEditor.innerText).value;
         spiffed = spiffed.replace(new RegExp('\r?\n', 'g'), '<br>');
         var temp = document.createElement("div");
@@ -65,17 +69,14 @@ class TextEditor extends EventEmitter
         this.textEditor.innerHTML = temp.innerText;
         this.textEditor.style.maxWidth = '900px';
     }
-    notify(type, data)
-    {
-        switch (type)
-        {
+    notify(type, data) {
+        switch (type) {
             case DataEvent.POST_UPDATED:
                 document.getElementById('submit-update').classList.add('icon-hide');
                 document.getElementById('submit-good').classList.remove('icon-hide');
                 document.getElementById('edit-update').classList.remove('submit-start');
                 document.getElementById('edit-update').classList.add('submit-cool');
-                setTimeout(f =>
-                {
+                setTimeout(f => {
                     document.getElementById('submit-update').classList.remove('icon-hide');
                     document.getElementById('submit-good').classList.add('icon-hide');
                     document.getElementById('edit-update').classList.add('submit-start');
@@ -90,8 +91,7 @@ class TextEditor extends EventEmitter
                 var sel, range, pulled;
                 sel = window.getSelection(); //console.log(sel)
                 //console.log(note.message)
-                if (sel.rangeCount)
-                {
+                if (sel.rangeCount) {
                     range = sel.getRangeAt(0);
                     pulled = sel.getRangeAt(0).toString();
                     range.deleteContents();
@@ -100,23 +100,21 @@ class TextEditor extends EventEmitter
                 this.refresh();
                 break;
         }
+
     }
     //--------------------------
     // event handlers
     //--------------------------
-    handleEditorOption(e)
-    {
+    handleEditorOption(e) {
         e.preventDefault();
         var self = this;
         var sel, range, pulled;
         sel = window.getSelection(); //console.log(sel)
-        if (sel.rangeCount)
-        {
+        if (sel.rangeCount) {
             range = sel.getRangeAt(0);
             pulled = sel.getRangeAt(0).toString();
             range.deleteContents();
-            switch (e.target.id)
-            {
+            switch (e.target.id) {
                 case "edit-bold":
                     range.insertNode(document.createTextNode("**" + pulled + "**"));
                     break;
@@ -148,7 +146,6 @@ class TextEditor extends EventEmitter
                     this.emitEvent(EditorEvent.EDITOR_UPDATE);
                     break
                 case "edit-link":
-                    console.log("PULLED", pulled)
                     range.insertNode(document.createTextNode("[" + pulled + "](PASTE URL HERE)"));
                     break;
                 case "edit-delete":

package.json

@@ -6,9 +6,9 @@
   "repository": "https://code.playvicio.us/Are0h/Fipamo",
   "theme": "default-light",
   "scripts": {
-    "start": "pm2 --node-args='-r esm --inspect' start init.js",
+    "start": "pm2 --node-args='-r esm' start init.js",
     "stop": "pm2 stop init.js",
-    "dev": "nodemon -r esm init.js",
+    "dev": "nodemon -r esm init.js --ignore node_modules/ -e js",
     "watch-front-scripts": "parcel watch themes/$npm_package_theme/src/com/Start.jsx --out-dir themes/$npm_package_theme/assets/js --out-file start.min.js --public-url /$npm_package_theme/assets/js",
     "watch-front-styles": "stylus -w -m -o themes/$npm_package_theme/assets/css themes/$npm_package_theme/src/styles/base.styl",
     "build-front-kit": "uglifyjs node_modules/scramble-text/dist/ScrambleText.min.js node_modules/animejs/anime.min.js node_modules/reframe.js/dist/reframe.min.js -c -o themes/$npm_package_theme/assets/js/toolkit.min.js",

themes/dash/assets/js/dash.min.js

@@ -7851,6 +7851,18 @@ function (_EventEmitter) {
           return _this2.handleEditorOption(e);
         }, false);
       }
+
+      this.textEditor.addEventListener('input', function (e) {
+        var htmlTagRe = /<[a-z][\s\S]*>/g;
+        var text = _this2.textEditor.innerText;
+        if (e.inputType == "insertParagraph") return; //cursor setting gets weird on return, so just back out
+
+        if (text.search(htmlTagRe) > -1) {
+          var caret = (0, _caretPos.position)(_this2.textEditor).pos;
+          self.refresh();
+          (0, _caretPos.position)(_this2.textEditor, caret);
+        }
+      });
     }
   }, {
     key: "refresh",
@@ -7957,7 +7969,6 @@ function (_EventEmitter) {
             break;
 
           case "edit-link":
-            console.log("PULLED", pulled);
             range.insertNode(document.createTextNode("[" + pulled + "](PASTE URL HERE)"));
             break;