Create clickable target in contenteditable div
00:25 26 Nov 2025

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

javascript html hyperlink contenteditable target