adding formating to nodes and more work on Emojis

src/components/JoinMicrocosm.vue

@@ -147,7 +147,7 @@ export default {
 
   methods: {
     setName(name) {
-      // format name so no spaces or dashes PouchDB/ CouchDB dont like them
+      // format name so no spaces or dashes PouchDB/ CouchDB doesn't like them
       var lowercasename = this.name.toLowerCase()
       var spacesremoved = lowercasename.split(' ').join('')
       this.nameFormatted = spacesremoved.split('-').join('')
@@ -162,7 +162,7 @@ export default {
     setMicrocosm() {
       if (this.nameSet == true) {
         this.$router.push({ path: '/collect' })
-        // format microcosm so no spaces or dashes PouchDB/ CouchDB dont like them
+        // format microcosm so no spaces or dashes PouchDB/ CouchDB doesn't like them
         var lowercasemicrocosm = this.microcosm.toLowerCase()
         var spacesremoved = lowercasemicrocosm.split(' ').join('')
         this.microcosmFormatted = spacesremoved.split('-').join('')

src/components/MyNodes.vue

@@ -17,7 +17,17 @@
           @mouseup="getSelected($event)"
         ></textarea>
         <p class="info">*markdown supported &amp; autosaves</p>
-
+        <div>
+          <button @click.prevent="makeH1">Header 1</button>
+          <button @click.prevent="makeH2">Header 2</button>
+          <button @click.prevent="makeH3">Header 3</button>
+        </div>
+        <div>
+          <button @click.prevent="makeBold">Bold</button>
+          <button @click.prevent="makeItalic">Italic</button>
+          <button @click.prevent="makeLink">Link</button>
+          <button @click.prevent="makeImage">Image</button>
+        </div>
         <VSwatches
           v-model="nodes.node_color"
           :swatches="swatches"
@@ -82,6 +92,10 @@ export default {
 
   data() {
     return {
+      nodeid: String,
+      start: String,
+      end: String,
+      selection: String,
       myArray: [],
       shapes: 'circles',
       // swatches: [{ color: '#F493A7', showBorder: true }],
@@ -121,17 +135,89 @@ export default {
   methods: {
     marked,
 
-    // TODO: take this information and wrap with a ** and replace in place
     getSelected(e) {
-      var selection = e.target.value.substring(
+      this.selection = e.target.value.substring(
         e.target.selectionStart,
         e.target.selectionEnd
       )
-      // the word
-      console.log(selection)
-      // the positions
-      console.log(e.target.selectionStart)
-      console.log(e.target.selectionEnd)
+      this.start = e.target.selectionStart
+      this.end = e.target.selectionEnd
+      this.nodeid = e.target.id
+    },
+
+    makeH1() {
+      const symbol = '# '
+      var text = `${symbol}${this.selection}`
+      var textarea = document.getElementById(this.nodeid)
+      textarea.setRangeText(text, this.start, this.end, 'select')
+      this.editNodeStyle(this.nodeid, textarea.value)
+    },
+
+    makeH2() {
+      const symbol = '## '
+      var text = `${symbol}${this.selection}`
+      var textarea = document.getElementById(this.nodeid)
+      textarea.setRangeText(text, this.start, this.end, 'select')
+      this.editNodeStyle(this.nodeid, textarea.value)
+    },
+
+    makeH3() {
+      const symbol = '### '
+      var text = `${symbol}${this.selection}`
+      var textarea = document.getElementById(this.nodeid)
+      textarea.setRangeText(text, this.start, this.end, 'select')
+      this.editNodeStyle(this.nodeid, textarea.value)
+    },
+
+    makeBold() {
+      const symbol = '**'
+      var text = `${symbol}${this.selection}${symbol}`
+      var textarea = document.getElementById(this.nodeid)
+      textarea.setRangeText(text, this.start, this.end, 'select')
+      this.editNodeStyle(this.nodeid, textarea.value)
+    },
+
+    makeItalic() {
+      const symbol = '*'
+      var text = `${symbol}${this.selection}${symbol}`
+      var textarea = document.getElementById(this.nodeid)
+      textarea.setRangeText(text, this.start, this.end, 'select')
+      this.editNodeStyle(this.nodeid, textarea.value)
+    },
+
+    makeLink() {
+      const one = '['
+      const two = ']'
+      const three = '('
+      const four = ')'
+
+      var text = `${one}${
+        this.selection
+      }${two}${three}${'https://urlhere'}${four}`
+      var textarea = document.getElementById(this.nodeid)
+      textarea.setRangeText(text, this.start, this.end, 'select')
+      this.editNodeStyle(this.nodeid, textarea.value)
+      var cursorplace = this.end + 3
+      console.log(cursorplace)
+      textarea.focus()
+      textarea.setSelectionRange(cursorplace, cursorplace + 15)
+    },
+
+    makeImage() {
+      const one = '!['
+      const two = ']'
+      const three = '('
+      const four = ')'
+      var text = `${one}${
+        this.selection
+      }${two}${three}${'imagelinkhere'}${four}`
+      var textarea = document.getElementById(this.nodeid)
+      textarea.setRangeText(text, this.start, this.end, 'select')
+      this.editNodeStyle(this.nodeid, textarea.value)
+      var cursorplace = this.end + 4
+      console.log(cursorplace)
+      textarea.focus()
+      textarea.setSelectionRange(cursorplace, cursorplace + 13)
     },
 
     loadData() {
@@ -142,6 +228,10 @@ export default {
       this.myArray = nodesFiltered.reverse()
     },
 
+    editNodeStyle(nodeid, nodetext) {
+      this.$store.dispatch('editNode', { nodeid, nodetext })
+    },
+
     editNode(e) {
       var nodeid = e.target.id
       var nodetext = e.target.value

src/components/OtherNodes.vue

@@ -12,15 +12,24 @@
       :id="nodes.node_id"
       v-html="marked(nodes.node_text)"
     ></p>
-    <button @click="openEmoji" class="emojiopen">☺️</button>
+    <button @click="openEmoji">
+      <svg
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M0 0h24v24H0z" fill="none" />
+        <path
+          d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"
+        />
+      </svg>
+    </button>
     <VuemojiPicker
       v-show="showEmoji"
       class="emojipicker"
-      @emojiClick="handleEmojiClick"
-      :pickerStyle="{
-        borderSize: '0',
-        background: nodes.node_color,
-      }"
+      @emojiClick="($event) => handleEmojiClick($event, nodes.node_id)"
+      :pickerStyle="{}"
     />
   </div>
 </template>
@@ -54,6 +63,7 @@ export default {
   computed: {
     ...mapState({
       otherNodes: (state) => state.otherNodes,
+      configEmoji: (state) => state.configEmoji,
     }),
   },
 
@@ -64,8 +74,12 @@ export default {
   },
 
   methods: {
-    handleEmojiClick(detail) {
+    getNodeid(nodeid) {
+      this.nodeid = nodeid
+    },
+    handleEmojiClick(detail, nodeid) {
       console.log(detail)
+      console.log(nodeid)
     },
 
     openEmoji() {
@@ -85,7 +99,8 @@ export default {
   border: 2px solid black;
 }
 
-.emojiopen {
-  font-size: 1.5em;
+button {
+  background: none;
+  border: none;
 }
 </style>

src/store/modules/allEmoji.js

+export const state = {}
+
+export const mutations = {}
+
+export const actions = {}
+
+export const getters = {}

src/store/store.js

@@ -3,6 +3,7 @@ import { createStore } from 'vuex'
 import * as setup from '@/store/modules/setup.js'
 import * as myNodes from '@/store/modules/myNodes.js'
 import * as otherNodes from '@/store/modules/otherNodes.js'
+import * as allEmoji from '@/store/modules/allEmoji.js'
 
 export const store = createStore({
   //
@@ -10,6 +11,7 @@ export const store = createStore({
     setup,
     myNodes,
     otherNodes,
+    allEmoji,
   },
 
   actions: {},