I'm trying to change a variable when I click on specific text in a content editable div, trying to simulate a hyperlink.
When I console.log the target on Noteblock events and use an if statement to check for the class added by to an <a> tag by insertDropboxes, I just get back the NoteBlock <Div>
This is the method I've been using to make selections from dynamic lists (putting a listener on the parent and filtering for a target class) but it doesn't seem to work here. I'm guessing it's because clicking the NoteBlock is a built in function of the contenteditable attribute, but is there a good way for me to be able to set a variable (CurrentNotebook["NoteName"]) through a text input?
Am I close enough to try and fix this, should I come at the problem from a different angle, or should i be looking to use an NPM module that already exists?
// Notebook.js
// Elements
const CurrentNotebook = {}
const NoteBlock = document.getElementById('NoteBlock')
// building blocks
function updateblock() {
var NoteFile = fs.readFileSync(`./Notebooks/${CurrentNotebook["Name"]}/${CurrentNotebook["NoteName"]}`)
console.log(`Update NoteBlock`)
NoteBlock.innerHTML = marked.parse(String(NoteFile))
insertDropboxes(String(NoteFile))
}
function insertDropboxes(text) {
for (var link in CurrentNotebook["MetaData"]) {
var temp = text.split(`[${link}]`)
text = temp.join(`<a class="link" title='${CurrentNotebook["MetaData"][link]["Tagline"]}' data-note="${link}">${link}</a>`)
}
return (text)
}
//listeners
NoteBlock.addEventListener('focus', async function(e) {
NoteBlock.innerText = fs.readFileSync(`./Notebooks/${CurrentNotebook["Name"]}/${CurrentNotebook["NoteName"]}`)
})
NoteBlock.addEventListener('focusout', async function(e) {
console.log(e.target.classList)
var NoteFile = fs.readFileSync(`./Notebooks/${CurrentNotebook["Name"]}/${CurrentNotebook["NoteName"]}`)
var curnotenamebody = document.getElementsByClassName(`NoteBody`)[0]
fs.writeFileSync(`./Notebooks/${CurrentNotebook["Name"]}/${CurrentNotebook["NoteName"]}`, insertDropboxes(String(NoteBlock.innerText)))
updateblock()
playWriting()
})
.spit { }
.hidden { }
.left { }
.page { }
<div id="Tome2" class="split hidden" style="width:90%">
<section id=NoteBooks class="left page">
<span class="buttons">
<button id= NoteBookHome>Home</button>
<button id= NoteBookBack>back</button>
</span>
NoteBooks
<div id="NotebookSelector" class="buttons"></div>
<input type=text id="NewNoteBook" style="white-space: pre-wrap">
</section>
<section id="Notes" class="right page">
<div id="NoteIndex" class="hidden"></div>
<input type=text id=NewNote style="white-space: pre-wrap" class="hidden">
<div id="NotePage" class="hidden">
<div contenteditable="true" style="white-space: pre-wrap" id="NoteBlock" value="start typing">start typing...</div>
</div>
</section>
</div>
