Commit cbc53669 authored by Adam Procter's avatar Adam Procter
Browse files

more emoji updates

parent 283abead
......@@ -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": {
......
......@@ -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
......
......@@ -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>
......@@ -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"
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment