div(v-if="sane")
// Display the children of this element
.content-children(v-if="element && element.children", :class="showDropAreas ? 'c-show-drop-areas' : ''")
div(v-if="extraDebug")
| <content-children>
br
//.my-children-debug(v-if="pageEditMode=='debug'") {{element.children && element.children.length}} children
// Display each child
//- div(v-for="(child, index) in element.children" v-bind:key="child.id")
template(v-for="(child, index) in element.children")
// children is an array, so it is possible for a child to be null
template(v-if="child")
// Drop area for adding before this child
// https://www.npmjs.com/package/vue-drag-drop#events
drop(v-if="showDropAreas" @drop="handleDrop(element, child, ...arguments)")
template(slot-scope="props")
.droparea(v-bind:class="[props.transferData ? 'dropover' : '']", contenteditable="true", @paste="onPaste($event, index)", @input="onInput")
// Hack - does not display children without this.
// | {{''}}
// Display this child
component(v-if="componentNameForElement(child)", v-bind:is="componentNameForElement(child)", :element="child", :context="context")
template(v-else)
| Unknown element type '{{child.type}}'
br
template(v-else)
| Missing child {{index}}
br
// Drop area for adding after last child
// https://www.npmjs.com/package/vue-drag-drop#events
drop(v-if="showDropAreas" @drop="handleDrop(element, null, ...arguments)")
template(slot-scope="props")
.droparea(v-bind:class="[props.transferData ? 'dropover' : '']", contenteditable="true", @paste="onPaste($event,'last')", @input="onInput")