From 82f1f1d9743b5e7f06bf7f033ee9e425c48009bd Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Thu, 9 Sep 2021 19:31:34 +0100
Subject: [PATCH] adding formating to nodes and more work on Emojis
---
src/components/JoinMicrocosm.vue | 4 +-
src/components/MyNodes.vue | 106 ++++++++++++++++++++++++++++---
src/components/OtherNodes.vue | 33 +++++++---
src/store/modules/allEmoji.js | 7 ++
src/store/store.js | 2 +
5 files changed, 133 insertions(+), 19 deletions(-)
create mode 100644 src/store/modules/allEmoji.js
diff --git a/src/components/JoinMicrocosm.vue b/src/components/JoinMicrocosm.vue
index 480d18b..eb5b6cc 100644
--- a/src/components/JoinMicrocosm.vue
+++ b/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('')
diff --git a/src/components/MyNodes.vue b/src/components/MyNodes.vue
index c75b2b1..0834db2 100644
--- a/src/components/MyNodes.vue
+++ b/src/components/MyNodes.vue
@@ -17,7 +17,17 @@
@mouseup="getSelected($event)"
></textarea>
<p class="info">*markdown supported & 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
diff --git a/src/components/OtherNodes.vue b/src/components/OtherNodes.vue
index d5ae748..2da0de9 100644
--- a/src/components/OtherNodes.vue
+++ b/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>
diff --git a/src/store/modules/allEmoji.js b/src/store/modules/allEmoji.js
new file mode 100644
index 0000000..956f09d
--- /dev/null
+++ b/src/store/modules/allEmoji.js
@@ -0,0 +1,7 @@
+export const state = {}
+
+export const mutations = {}
+
+export const actions = {}
+
+export const getters = {}
diff --git a/src/store/store.js b/src/store/store.js
index 25f199b..36304dc 100644
--- a/src/store/store.js
+++ b/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: {},
--
GitLab