The editor is now refreshed when in a newly expanded builder block. Fixes #77

Author: sylvainjule

index.js

@@ -13,6 +13,35 @@ export default {
         blank: Boolean,
         invisibles: Boolean,
         kirbytags: Array,
+    },
+    // below, code to refresh input within a newly expanded builder block
+    computed: {
+        builderBlock() {
+            return this.getParentComponent('builder-block')
+        },
+        builderExpanded() {
+            return this.builderBlock && this.builderBlock.expanded
+        }
+    },
+    watch: {
+        builderExpanded(newVal, oldVal) {
+            if (newVal === true) {
+                this.$root.$emit('md-refresh' + this._uid)
+            }
+        },
+    },
+    methods: {
+        getParentComponent(componentName) {
+            let component = null
+            let parent = this.$parent
+            while (parent && !component) {
+                if (parent.$options._componentTag === componentName) {
+                    component = parent
+                }
+                parent = parent.$parent
+            }
+            return component
+        },
     }
 };
 </script>

src/components/field/Markdown.vue

@@ -46,10 +46,10 @@ export default {
             skipNextChangeEvent: false,
             currentDialog: null,
             currentTokenType: null,
-            id: '',
         }
     },
     props: {
+        id: Number,
         autofocus: Boolean,
         modals: Boolean,
         blank: Boolean,
@@ -90,15 +90,17 @@ export default {
             return this.$store.state.languages.current
         }
     },
-    created() {
-        this.id = this._uid
-    },
     mounted() {
         this.editor = CodeMirror.fromTextArea(this.$refs.input, this.options);
         this.editor.setValue(this.value || '');
 
         // force refresh after setValue, else some text might not be rendered before the editor is clicked
-        this.$nextTick(() => this.editor.refresh())
+        this.refresh()
+
+        // event triggered from parent
+        this.$root.$on('md-refresh' + this.id, () => {
+            this.refresh()
+        })
 
         // Custom autofocus: place the cursor at the end of current value
         if(this.autofocus) {
@@ -180,10 +182,13 @@ export default {
                 this.editor.scrollTo(scrollInfo.left, scrollInfo.top)
             }
             // force refresh
-            this.$nextTick(() => this.editor.refresh())
+            this.refresh()
         },
     },
     methods: {
+        refresh() {
+            this.$nextTick(() => this.editor.refresh())
+        },
         /**
          * Close any open dialog and bring focus back to the editor
          */