markdown parsing on insertion only

build/botui.js

@@ -1,5 +1,5 @@
 /*
- * botui 0.1.2
+ * botui 0.1.4
  * A JS library to build the UI for your bot
  * https://botui.moin.im
  *
@@ -141,9 +141,11 @@
     	}
     };
 
-    root.Vue.directive('botui-markdown', function (el, binding) {
-      if(binding.value == 'false') return;
-      el.innerHTML = _parseMarkDown(el.textContent);
+    root.Vue.directive('botui-markdown', {
+      inserted: function (el, binding) {
+        if(binding.value == 'false') return;
+        el.innerHTML = _parseMarkDown(el.textContent);
+      }
     });
 
     root.Vue.directive('botui-scroll', {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "botui",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "A JS library to build the UI for your bot",
   "main": "build/botui.min.js",
   "devDependencies": {

src/scripts/botui.js

@@ -132,9 +132,11 @@
     	}
     };
 
-    root.Vue.directive('botui-markdown', function (el, binding) {
-      if(binding.value == 'false') return;
-      el.innerHTML = _parseMarkDown(el.textContent);
+    root.Vue.directive('botui-markdown', {
+      inserted: function (el, binding) {
+        if(binding.value == 'false') return;
+        el.innerHTML = _parseMarkDown(el.textContent);
+      }
     });
 
     root.Vue.directive('botui-scroll', {

src/styles/botui.scss

@@ -27,6 +27,7 @@
 
     .botui-message-content {
       width: auto;
+      max-width: 85%;
       display: inline-block;
 
       &.human {

src/styles/themes/default.scss

@@ -36,6 +36,10 @@ $primary-color: #919292;
         background-color: $primary-color;
       }
 
+      &.text {
+        line-height: 1.3;
+      }
+
       &.embed {
         padding: 5px;
         border-radius: 5px;