more emoji updates

package.json

@@ -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/MyNodes.vue

@@ -14,6 +14,7 @@
           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>
 
@@ -119,6 +120,20 @@ export default {
 
   methods: {
     marked,
+
+    // TODO: take this information and wrap with a ** and replace in place
+    getSelected(e) {
+      var 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)
+    },
+
     loadData() {
       var nodesFiltered = this.myNodes.myNodes.filter(
         (nodes) => nodes.node_deleted == false

src/components/OtherNodes.vue

@@ -12,6 +12,16 @@
       :id="nodes.node_id"
       v-html="marked(nodes.node_text)"
     ></p>
+    <button @click="openEmoji" class="emojiopen">☺️</button>
+    <VuemojiPicker
+      v-show="showEmoji"
+      class="emojipicker"
+      @emojiClick="handleEmojiClick"
+      :pickerStyle="{
+        borderSize: '0',
+        background: nodes.node_color,
+      }"
+    />
   </div>
 </template>
 
@@ -19,10 +29,28 @@
 // @ 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: false,
+    }
+  },
+
+  components: {
+    VuemojiPicker,
+  },
+
   computed: {
     ...mapState({
       otherNodes: (state) => state.otherNodes,
@@ -36,6 +64,14 @@ export default {
   },
 
   methods: {
+    handleEmojiClick(detail) {
+      console.log(detail)
+    },
+
+    openEmoji() {
+      this.showEmoji = !this.showEmoji
+    },
+
     loadData() {
       this.$store.dispatch('setOthernodes')
     },
@@ -48,4 +84,8 @@ export default {
 .nodes {
   border: 2px solid black;
 }
+
+.emojiopen {
+  font-size: 1.5em;
+}
 </style>

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"