I'm trying to change a variable when I click on specific text in a content editable div, trying to simulate a hyperlink.
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(`${link}`)}
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()
})
When I console.log the target on Noteblock events and use an if statement to check for the class added by to an tag by insertDropboxes, I just get back the NoteBlock 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?