fix: infinite update loop with vue2.2.5+

dist/vue-html5-editor.js

@@ -1,7 +1,7 @@
 /**
- * Vue-html5-editor 1.0.2
+ * Vue-html5-editor 1.0.3
  * https://github.com/PeakTai/vue-html5-editor
- * build at Tue Mar 14 2017 18:41:09 GMT+0800 (CST)
+ * build at Fri Apr 07 2017 10:40:34 GMT+0800 (CST)
  */
 
 (function (global, factory) {
@@ -476,7 +476,7 @@ var dashboard$4 = {
     template: template$4,
     data: function data(){
         return {
-            version: "1.0.2"
+            version: "1.0.3"
         }
     }
 };
@@ -1103,7 +1103,7 @@ RangeHandler.prototype.execCommand = function execCommand (command, arg) {
 
 __$styleInject(".vue-html5-editor{font-size:14px;line-height:1.5;background-color:#fff;color:#333;border:1px solid #ddd;text-align:left;border-radius:5px;overflow:hidden;box-sizing:border-box}.vue-html5-editor.full-screen{position:fixed!important;top:0!important;left:0!important;bottom:0!important;right:0!important;border-radius:0}.vue-html5-editor>.toolbar{position:relative;background-color:inherit}.vue-html5-editor>.toolbar>ul{list-style:none;padding:0;margin:0;border-bottom:1px solid #ddd}.vue-html5-editor>.toolbar>ul>li{display:inline-block;cursor:pointer;text-align:center;line-height:36px;padding:0 10px}.vue-html5-editor>.toolbar>ul>li .icon{height:16px;width:16px;display:inline-block;vertical-align:middle}.vue-html5-editor>.toolbar>.dashboard{background-color:inherit;border-bottom:1px solid #ddd;padding:10px;position:absolute;top:100%;left:0;right:0;overflow:auto}.vue-html5-editor>.toolbar>.dashboard input[type=text],.vue-html5-editor>.toolbar>.dashboard input[type=number],.vue-html5-editor>.toolbar>.dashboard select{padding:6px 12px;color:inherit;background-color:transparent;border:1px solid #ddd;border-radius:5px}.vue-html5-editor>.toolbar>.dashboard input[type=text]:hover,.vue-html5-editor>.toolbar>.dashboard input[type=number]:hover,.vue-html5-editor>.toolbar>.dashboard select:hover{border-color:#bebebe}.vue-html5-editor>.toolbar>.dashboard input[type=text][disabled],.vue-html5-editor>.toolbar>.dashboard input[type=text][readonly],.vue-html5-editor>.toolbar>.dashboard input[type=number][disabled],.vue-html5-editor>.toolbar>.dashboard input[type=number][readonly],.vue-html5-editor>.toolbar>.dashboard select[disabled],.vue-html5-editor>.toolbar>.dashboard select[readonly]{background-color:#eee;opacity:1}.vue-html5-editor>.toolbar>.dashboard input[type=text][disabled],.vue-html5-editor>.toolbar>.dashboard input[type=number][disabled],.vue-html5-editor>.toolbar>.dashboard select[disabled]{cursor:not-allowed}.vue-html5-editor>.toolbar>.dashboard button{color:inherit;background-color:inherit;padding:6px 12px;white-space:nowrap;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid #ddd;border-radius:5px;margin-right:4px;margin-bottom:4px}.vue-html5-editor>.toolbar>.dashboard button:hover{border-color:#bebebe}.vue-html5-editor>.toolbar>.dashboard button[disabled]{cursor:not-allowed;opacity:.68}.vue-html5-editor>.toolbar>.dashboard button:last-child{margin-right:0}.vue-html5-editor>.toolbar>.dashboard label{font-weight:bolder}.vue-html5-editor>.content{overflow:auto;padding:10px}.vue-html5-editor>.content:focus{outline:0}",undefined);
 
-var template$9 = "<div class=\"vue-html5-editor\" :class=\"{'full-screen':fullScreen}\" :style=\"{'z-index':zIndex}\"> <div class=\"toolbar\" :style=\"{'z-index':zIndex+1}\" ref=\"toolbar\"> <ul> <template v-for=\"module in modules\"> <li :title=\"locale[module.i18n]\" @click=\"activeModule(module)\"> <span class=\"icon\" :class=\"module.icon\"></span> <template v-if=\"showModuleName === undefined ? defaultShowModuleName : showModuleName\"> &nbsp;{{locale[module.i18n]}} </template> </li> </template> </ul> <div class=\"dashboard\" v-show=\"dashboard\" :style=\"dashboardStyle\"> <keep-alive> <div v-if=\"dashboard\" :is=\"dashboard\"></div> </keep-alive> </div> </div> <div class=\"content\" ref=\"content\" :style=\"contentStyle\" contenteditable @click=\"toggleDashboard(dashboard)\"> </div> </div>";
+var template$9 = "<div class=\"vue-html5-editor\" :class=\"{'full-screen':fullScreen}\" :style=\"{'z-index':zIndex}\"> <div class=\"toolbar\" :style=\"{'z-index':zIndex+1}\" ref=\"toolbar\"> <ul> <template v-for=\"module in modules\"> <li :title=\"locale[module.i18n]\" @click=\"activeModule(module)\"> <span class=\"icon\" :class=\"module.icon\"></span> <template v-if=\"showModuleName === undefined ? defaultShowModuleName : showModuleName\"> &nbsp;{{locale[module.i18n]}} </template> </li> </template> </ul> <div class=\"dashboard\" v-show=\"dashboard\" v-ref=\"dashboard\"> <keep-alive> <div v-show=\"dashboard\" :is=\"dashboard\"></div> </keep-alive> </div> </div> <div class=\"content\" ref=\"content\" :style=\"contentStyle\" contenteditable @click=\"toggleDashboard(dashboard)\"> </div> </div>";
 
 /**
  * Created by peak on 2017/2/9.
@@ -1139,8 +1139,7 @@ var editor = {
             // locale: {},
             // modules:{},
             fullScreen: false,
-            dashboard: null,
-            dashboardStyle: {}
+            dashboard: null
         }
     },
     watch: {
@@ -1287,7 +1286,10 @@ var editor = {
         window.addEventListener('touchend', this.touchHandler, false);
     },
     updated: function updated(){
-        this.dashboardStyle = {'max-height': ((this.$refs.content.clientHeight) + "px")};
+        // update dashboard style
+        if (this.$refs.dashboard){
+            this.$refs.dashboard.style.minHeight = (this.$refs.content.clientHeight) + "px";
+        }
     },
     beforeDestroy: function beforeDestroy(){
         var this$1 = this;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-html5-editor",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A WYSIWYG text editor base on html5 and vue",
   "repository": {
     "type": "git",

src/editor.html

@@ -10,9 +10,9 @@
                 </li>
             </template>
         </ul>
-        <div class="dashboard" v-show="dashboard" :style="dashboardStyle">
+        <div class="dashboard" v-show="dashboard" v-ref="dashboard">
             <keep-alive>
-                <div v-if="dashboard" :is="dashboard"></div>
+                <div v-show="dashboard" :is="dashboard"></div>
             </keep-alive>
         </div>
     </div>

src/editor.js

@@ -35,8 +35,7 @@ export default {
             // locale: {},
             // modules:{},
             fullScreen: false,
-            dashboard: null,
-            dashboardStyle: {}
+            dashboard: null
         }
     },
     watch: {
@@ -177,7 +176,10 @@ export default {
         window.addEventListener('touchend', this.touchHandler, false)
     },
     updated(){
-        this.dashboardStyle = {'max-height': `${this.$refs.content.clientHeight}px`}
+        // update dashboard style
+        if (this.$refs.dashboard){
+            this.$refs.dashboard.style.minHeight = `${this.$refs.content.clientHeight}px`
+        }
     },
     beforeDestroy(){
         window.removeEventListener('touchend', this.touchHandler)