Added error message for tempalte and model components. Added React su…

…pport.

src/sb/components/model/model.controller.js

@@ -47,12 +47,19 @@ class ModelController {
   }
 
   render(event, component) {
+
     // We need original template for prevent changes
     // So store original component
     this.originalComponent = component;
 
-    // Store model 
-    this.model = JSON.stringify(component.model, null, Number(4));
+    try {
+      // Store model 
+      this.model = JSON.stringify(component.model, null, Number(4));
+      this.renderError = false;
+    } catch (e) {
+      this.renderError = true;
+    }
+
   }
 
 }

src/sb/components/model/model.html

@@ -1 +1,4 @@
-<div ui-ace="vm.settings" ng-model="vm.model" flex></div>
+<div ng-if="!vm.renderError" ui-ace="vm.settings" ng-model="vm.model" flex></div>
+<div class="error__message" ng-if="vm.renderError" flex>
+    Unable to load the model. Are you pass correct object?
+</div>

src/sb/components/template/template.controller.js

@@ -3,16 +3,24 @@ class TemplateController {
 
     this.$rootScope = $rootScope;
 
-    // Listen for new component data and render it
-    this.listener = $rootScope.$on('render', (event, component) => {
-      this.render(event, component);
-    });
+    if (process && process.env && process.env.TYPE === 'react') {
+      this.errorMessage = 'Sorry but for now SB not support live component editor for React. We work on this. Stay tuned!';
+    } else {
+
+      // Listen for new component data and render it
+      this.listener = $rootScope.$on('render', (event, component) => {
+        this.render(event, component);
+      });
+
+      // ACE editor settings
+      this.settings = {
+        mode: 'html',
+        useWrapMode: true,
+        onLoad: this.onEditorChange.bind(this)
+      }
+
+      this.errorMessage = 'Unable to load template. Are you pass it with string?'; 
 
-    // ACE editor settings
-    this.settings = {
-      mode: 'html',
-      useWrapMode: true,
-      onLoad: this.onEditorChange.bind(this)
     }
 
   }
@@ -45,13 +53,20 @@ class TemplateController {
     // Try to render new template 
     try {
       this.$rootScope.$broadcast('template', this.component);
-    } catch (e) { 
-      console.log(`Can't render template: ${e}`) 
+    } catch (e) {
+      console.log(`Can't render template: ${e}`)
     }
   }
 
   render(event, component) {
-
+
+    if (typeof component.template !== 'string') {
+      this.renderError = true;
+      return;
+    }
+
+    this.renderError = false;
+
     // We need original template for prevent changes
     // So store original component
     this.originalComponent = component;

src/sb/components/template/template.partial.html

@@ -1 +1,2 @@
-<div ui-ace="vm.settings" ng-model="vm.component.template" flex></div>
+<div ng-if="!vm.renderError" ui-ace="vm.settings" ng-model="vm.component.template" flex></div>
+<div class="error__message" ng-if="vm.renderError" flex ng-bing="vm.errorMessage"></div>

src/sb/styles/app.less

@@ -1 +1,9 @@
-@import "./highlight.less"; 
+@import "./highlight.less"; 
+
+.error__message {
+    font-size: 18px;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    color: rgba(0, 0, 0, 0.54);
+}