ayanova/src/components/wiki-control.vue

@@ -8,15 +8,15 @@
         <v-icon>{{ visibleIcon() }}</v-icon>
       </v-btn>
     </div>
-    <v-btn x-large icon v-if="canEdit" text @click="toggleEditMode()">
-      <v-icon>fa-edit</v-icon></v-btn
-    >
-    <v-sheet
-      v-if="wikiVisible && !designerVisible"
-      elevation="2"
-      v-html="compiledOutput()"
-      class="aywiki pa-2 pa-sm-6 mt-2"
-    >
+
+    <v-sheet v-if="wikiVisible" elevation="2" class="aywiki pa-2 pa-sm-6 mt-2">
+      <v-btn x-large icon v-if="canEdit" text @click="editMode = !editMode">
+        <v-icon>fa-edit</v-icon></v-btn
+      >
+      <div v-if="!editMode" v-html="compiledOutput()"></div>
+      <div v-if="editMode">
+        DESIGN MODE
+      </div>
     </v-sheet>
   </div>
 </template>
@@ -27,7 +27,7 @@ export default {
   data() {
     return {
       wikiVisible: false,
-      designerVisible: false
+      editMode: false
     };
   },
   props: {
@@ -35,7 +35,6 @@ export default {
     canEdit: Boolean
   },
   methods: {
-    toggleEditMode() {},
     visibleIcon() {
       return this.wikiVisible ? "fa-eye-slash" : "fa-eye";
     },