Merge branch 'emoji' into main

CHANGELOG.md

+# 0.2.5
+
+_10th Septemeber 2021_
+
+## Added
+
+- various formatting buttons to format your node text with markdown
+- emojis "voting" is now working on other nodes
+
 # 0.2.4
 
 _6th Septemeber 2021_

package.json

 {
   "name": "nodenogg.in",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -16,6 +16,7 @@
     "vue": "^3.2.8",
     "vue-router": "^4.0.0",
     "vue3-swatches": "^1.0.3",
+    "vuemoji-picker": "^0.0.7",
     "vuex": "^4.0.0"
   },
   "devDependencies": {

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

@@ -14,9 +14,20 @@
           ref="textentry"
           placeholder="Type your thoughts and ideas here! (auto saved every keystroke)"
           rows="5"
+          @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"
@@ -81,6 +92,10 @@ export default {
 
   data() {
     return {
+      nodeid: String,
+      start: String,
+      end: String,
+      selection: String,
       myArray: [],
       shapes: 'circles',
       // swatches: [{ color: '#F493A7', showBorder: true }],
@@ -119,6 +134,92 @@ export default {
 
   methods: {
     marked,
+
+    getSelected(e) {
+      this.selection = e.target.value.substring(
+        e.target.selectionStart,
+        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() {
       var nodesFiltered = this.myNodes.myNodes.filter(
         (nodes) => nodes.node_deleted == false
@@ -127,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,6 +12,36 @@
       :id="nodes.node_id"
       v-html="marked(nodes.node_text)"
     ></p>
+    <div class="allemoji">
+      <div
+        class="eachemoji"
+        v-for="(emojis, index) in allEmoji.allEmoji"
+        :key="index"
+      >
+        <p v-if="nodes.node_id == emojis.node_id">
+          {{ emojis.emoji_unicode }}
+        </p>
+      </div>
+    </div>
+    <button @click="openEmoji(nodes.node_id)">
+      <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-if="showEmoji === nodes.node_id"
+      class="emojipicker"
+      @emojiClick="($event) => handleEmojiClick(nodes.node_id, $event)"
+      :pickerStyle="{}"
+    />
   </div>
 </template>
 
@@ -19,25 +49,76 @@
 // @ is an alias to /src
 import { mapState } from 'vuex'
 import marked from 'marked'
+import { VuemojiPicker } from 'vuemoji-picker'
 
 export default {
   name: 'OtherNodes',
 
+  props: {
+    // these are for the emoji styling
+    // https://github.com/wobsoriano/vuemoji-picker
+    // isDark: Boolean,
+    pickerStyle: Object,
+  },
+
+  data: function () {
+    return {
+      showEmoji: String,
+    }
+  },
+
+  components: {
+    VuemojiPicker,
+  },
+
   computed: {
     ...mapState({
       otherNodes: (state) => state.otherNodes,
+      allEmoji: (state) => state.allEmoji,
     }),
   },
 
   mounted() {
     this.$store.dispatch('getOthernodes')
     setTimeout(this.loadData, 500)
+    // this is to get the last letter typed if no space
+    // this also loads in new Emoji
+    // May need to EDIT
     setInterval(this.loadData, 5000)
   },
 
   methods: {
+    getNodeid(nodeid) {
+      this.nodeid = nodeid
+    },
+    handleEmojiClick(nodeid, detail) {
+      console.log(nodeid)
+
+      var unicode = detail.emoji.unicode
+      var annotation = detail.emoji.annotation
+      var skinTone = detail.skinTone
+      var emoticon = detail.emoji.emoticon
+
+      this.$store.dispatch('addEmoji', {
+        nodeid,
+        unicode,
+        annotation,
+        skinTone,
+        emoticon,
+      })
+    },
+
+    openEmoji(nodeid) {
+      if (this.showEmoji == nodeid) {
+        this.showEmoji = null
+      } else {
+        this.showEmoji = nodeid
+      }
+    },
+
     loadData() {
       this.$store.dispatch('setOthernodes')
+      this.$store.dispatch('getEmoji')
     },
     marked,
   },
@@ -48,4 +129,16 @@ export default {
 .nodes {
   border: 2px solid black;
 }
+
+button {
+  background: none;
+  border: none;
+}
+
+.allemoji {
+  font-size: 1.5em;
+  padding: 0em;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(0, auto));
+}
 </style>

src/store/modules/allEmoji.js

+var pouchdb
+
+export const state = {
+  docName: 'emojis',
+  allEmoji: [],
+}
+
+export const mutations = {
+  GET_EMOJI(state) {
+    pouchdb
+      .get(state.docName)
+      .then(function (doc) {
+        state.allEmoji = doc.emojis
+      })
+      .catch(function (err) {
+        if (err.status == 404) {
+          return pouchdb.put({
+            _id: state.docName,
+            emojis: [],
+          })
+        }
+      })
+  },
+  ADD_EMOJI(state, e) {
+    var uniqueid =
+      Math.random().toString(36).substring(2, 15) +
+      Math.random().toString(36).substring(2, 15)
+    pouchdb.get(state.docName).then(function (doc) {
+      doc.emojis.push({
+        emoji_id: uniqueid,
+        node_id: e.nodeid,
+        emoji_unicode: e.unicode,
+        emoji_annotation: e.annotation,
+        emoji_skintone: e.skinTone,
+        emoji_emoticon: e.emoticon,
+      })
+      return pouchdb
+        .put({
+          _id: state.docName,
+          _rev: doc._rev,
+          emojis: doc.emojis,
+        })
+        .catch(function () {})
+    })
+  },
+}
+
+export const actions = {
+  getEmoji: ({ commit }) => {
+    commit('GET_EMOJI')
+  },
+
+  addEmoji: (
+    { commit },
+    { nodeid, unicode, annotation, skinTone, emoticon }
+  ) => {
+    commit('ADD_EMOJI', {
+      nodeid,
+      unicode,
+      annotation,
+      skinTone,
+      emoticon,
+    })
+  },
+
+  getMicrocosm(vuexContext) {
+    pouchdb = vuexContext.rootState.setup.pouchdb
+  },
+}
+
+export const getters = {}

src/store/modules/otherNodes.js

 var pouchdb
 var deviceName
+var docName
 
 export const state = {
   allNodes: [],
@@ -27,7 +28,10 @@ export const mutations = {
     var j
 
     for (i = 0; i < Object.keys(state.allNodes).length; i++) {
-      if (state.allNodes[i].id != deviceName) {
+      if (
+        state.allNodes[i].id != deviceName &&
+        state.allNodes[i].id != docName
+      ) {
         for (j = 0; j < Object.keys(state.allNodes[i].doc.nodes).length; j++) {
           const newNode = {
             node_id: state.allNodes[i].doc.nodes[j].node_id,
@@ -55,6 +59,7 @@ export const actions = {
   getMicrocosm(vuexContext) {
     deviceName = vuexContext.rootState.setup.deviceName
     pouchdb = vuexContext.rootState.setup.pouchdb
+    docName = vuexContext.rootState.allEmoji.docName
   },
 }
 

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: {},

yarn.lock

@@ -3099,6 +3099,11 @@ elliptic@^6.5.3:
     minimalistic-assert "^1.0.1"
     minimalistic-crypto-utils "^1.0.1"
 
+emoji-picker-element@^1.6.5:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/emoji-picker-element/-/emoji-picker-element-1.8.1.tgz#3b832b6b60b4f5543c7b7021fd9b669d2478ea44"
+  integrity sha512-ibliBMR74JuoPOJXGDX/RtyW1BULENfDoAY9V2mpbfcnEiqElZ9EdUrtQbwyjjHZzYS+W5nngwcI8UNNCDh6cw==
+
 emoji-regex@^7.0.1:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
@@ -7632,6 +7637,11 @@ vm-browserify@^1.0.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
 
+vue-demi@^0.11.2:
+  version "0.11.4"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.11.4.tgz#6101992fe4724cf5634018a16e953f3052e94e2a"
+  integrity sha512-/3xFwzSykLW2HiiLie43a+FFgNOcokbBJ+fzvFXd0r2T8MYohqvphUyDQ8lbAwzQ3Dlcrb1c9ykifGkhSIAk6A==
+
 vue-eslint-parser@^7.10.0:
   version "7.10.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.10.0.tgz#ea4e4b10fd10aa35c8a79ac783488d8abcd29be8"
@@ -7697,6 +7707,14 @@ vue@^3.2.8:
     "@vue/runtime-dom" "3.2.8"
     "@vue/shared" "3.2.8"
 
+vuemoji-picker@^0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/vuemoji-picker/-/vuemoji-picker-0.0.7.tgz#382d365e75644683dba0530945ed4495eaeb1708"
+  integrity sha512-Q0RM6qo67Px3evoY9EbEg7HzBuk+u3D+c9r4wMyU71GQQnDFKEo4ZmI7OVjonwkCyk/6C6RDpQAtGOwfahXkoA==
+  dependencies:
+    emoji-picker-element "^1.6.5"
+    vue-demi "^0.11.2"
+
 vuex@^4.0.0:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/vuex/-/vuex-4.0.2.tgz#f896dbd5bf2a0e963f00c67e9b610de749ccacc9"