wip

app/src/components/ListLayer.vue

 <template>
   <div>
-    <div v-if="deleted == false">
-      <form class="nodes">
-        <div v-for="value in $options.myArray" v-bind:key="value.node_id">
-          <textarea
-            v-if="nodeid == value.node_id"
-            @focus="editTrue(true)"
-            @blur="editTrue(false)"
-            autofocus
-            v-model="value.node_text"
-            @input="editNode"
-            :id="value.node_id"
-            ref="nodetext"
-            placeholder="Idea goes here!"
-          ></textarea>
-        </div>
-
-        <!-- <div v-if="localreadmode == true && deleted == false">
-          <p class="read" :id="nodeid" :inner-html.prop="nodetext | marked"></p>
-        </div> -->
-        <div class="allemoji">
-          <div
-            class="eachemoji"
-            v-for="(emojis, index) in configEmoji"
-            :key="index"
-          >
-            <p v-if="nodeid == emojis.node_id">
-              {{ emojis.emoji_text }}
-            </p>
+    <div v-for="(value, index) in configPositions" v-bind:key="index">
+      <div v-if="nodeid == value.node_id && deleted == false">
+        <form class="nodes">
+          <div v-if="value.read_mode == false">
+            <div v-for="value in $options.myArray" v-bind:key="value.node_id">
+              <textarea
+                v-if="nodeid == value.node_id"
+                @focus="editTrue(true)"
+                @blur="editTrue(false)"
+                autofocus
+                v-model="value.node_text"
+                @input="editNode"
+                :id="nodeid"
+                ref="nodetext"
+                placeholder="Idea goes here!(auto saved every keystroke)"
+              ></textarea>
+            </div>
           </div>
-        </div>
-        <p class="info">*markdown supported &amp; autosaves</p>
-        <div class="btn-row">
-          <BaseButton buttonClass="danger" @click="deleteFlag()"
-            >Discard</BaseButton
-          >
-          <!-- <div v-if="localreadmode == true && deleted == false">
-            <BaseButton class="read" buttonClass="action" @click="readFlag()"
-              >Edit Mode
-            </BaseButton>
+          <div v-if="value.read_mode && deleted == false">
+            <p
+              class="read"
+              :id="nodeid"
+              :inner-html.prop="nodetext | marked"
+            ></p>
           </div>
-          <div v-else>
-            <BaseButton class="read" buttonClass="action" @click="readFlag()"
-              >Read Mode</BaseButton
+
+          <div class="allemoji">
+            <div
+              class="eachemoji"
+              v-for="(emojis, index) in configEmoji"
+              :key="index"
+            >
+              <p v-if="nodeid == emojis.node_id">
+                {{ emojis.emoji_text }}
+              </p>
+            </div>
+          </div>
+          <p class="info">*markdown supported &amp; autosaves</p>
+          <div class="btn-row">
+            <BaseButton buttonClass="danger" @click="deleteFlag()"
+              >Discard</BaseButton
             >
-          </div> -->
-        </div>
-      </form>
+            <div v-if="value.read_mode == true && deleted == false">
+              <BaseButton class="read" buttonClass="action" @click="readFlag()"
+                >Edit Mode
+              </BaseButton>
+            </div>
+            <div v-else>
+              <BaseButton class="read" buttonClass="action" @click="readFlag()"
+                >Read Mode</BaseButton
+              >
+            </div>
+          </div>
+        </form>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-//var readmode
+import marked from 'marked'
+var readmode
 export default {
   name: 'ListLayer',
 
   data: function () {
     return {
-      // localreadmode: false,
+      localreadmode: false,
     }
   },
 
@@ -70,7 +79,7 @@ export default {
   },
 
   filters: {
-    // marked: marked,
+    marked: marked,
   },
 
   computed: mapState({
@@ -105,26 +114,26 @@ export default {
       }
     },
 
-    // readFlag(e) {
-    //   e = this.nodeid
-
-    //   var i
-    //   for (i = 0; i < Object.keys(this.configPositions).length; i++) {
-    //     if (this.configPositions[i].node_id == this.nodeid) {
-    //       this.localreadmode = this.configPositions[i].read_mode
-    //     }
-    //   }
-
-    //   if (this.localreadmode == true) {
-    //     readmode = false
-    //     this.$store.dispatch('readFlag', { e, readmode })
-    //     this.mode = 'Read'
-    //   } else {
-    //     readmode = true
-    //     this.$store.dispatch('readFlag', { e, readmode })
-    //     this.mode = 'Edit'
-    //   }
-    // },
+    readFlag(e) {
+      e = this.nodeid
+
+      var i
+      for (i = 0; i < Object.keys(this.configPositions).length; i++) {
+        if (this.configPositions[i].node_id == this.nodeid) {
+          this.localreadmode = this.configPositions[i].read_mode
+        }
+      }
+
+      if (this.localreadmode == true) {
+        readmode = false
+        this.$store.dispatch('readFlag', { e, readmode })
+        this.mode = 'Read'
+      } else {
+        readmode = true
+        this.$store.dispatch('readFlag', { e, readmode })
+        this.mode = 'Edit'
+      }
+    },
   },
 }
 </script>
@@ -147,6 +156,7 @@ textarea {
   height: 175px;
   resize: none;
   box-sizing: border-box;
+  font-size: 18px;
   font-family: 'Inter var', Helvetica, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

app/src/components/ModesCard.vue

@@ -67,6 +67,8 @@ export default {
     hideTips() {
       this.tipsplease = false
     },
+
+    
   },
 }
 </script>

app/src/components/NodesLayer.vue

@@ -413,6 +413,7 @@ textarea {
   width: 100%;
   height: 175px;
   resize: none;
+  font-size: 18px;
   box-sizing: border-box;
   font-family: 'Inter var', Helvetica, sans-serif;
   -webkit-font-smoothing: antialiased;

app/src/store/index.js

@@ -168,6 +168,7 @@ const store = new Vuex.Store({
             // if (doc.nodes[i].deleted == true) {
             //   //  doc.nodes.splice(i, 1)
             // }
+
             state.myNodes = doc.nodes
           }
         })

app/src/views/List.vue

@@ -108,7 +108,6 @@ export default {
 
     editTrue(e) {
       this.$store.dispatch('shortcutState', e)
-      console.log(this.shortcutstate)
     },
   },
   components: {