ayanova/src/components/wiki-control.vue

@@ -3,7 +3,16 @@
     <span class="v-label v-label--active theme--light">
       Wiki
     </span>
+    <div>
+      <v-btn x-large icon @click="wikiVisible = !wikiVisible">
+        <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"
@@ -15,11 +24,21 @@
 import marked from "marked";
 import DOMPurify from "dompurify";
 export default {
-  data: () => ({}),
+  data() {
+    return {
+      wikiVisible: false,
+      designerVisible: false
+    };
+  },
   props: {
-    value: String
+    value: String,
+    canEdit: Boolean
   },
   methods: {
+    toggleEditMode() {},
+    visibleIcon() {
+      return this.wikiVisible ? "fa-eye-slash" : "fa-eye";
+    },
     compiledOutput() {
       return DOMPurify.sanitize(marked(this.value));
     }
@@ -29,13 +48,21 @@ export default {
 /**
 todo:
 
-figure out why parts are fucked (blockquote)
-remove extra spacing on sides in xs mode (gutters maybe on column or row?)
+
 Show/hide/edit control
 eyeball icon like password reveal
 
+
+if can't edit and no content then don't show at all
+  - does it need to have a column wrapper then and remove it from the parent form?
+
+
 baseurl setting for local images:
 https://marked.js.org/#/USING_ADVANCED.md#options
 
+
+Clean up the example markdown, go through and use mine and sprinkle in the marked sample stuff where it differs
+
+
  */
 </script>