Only in the spirit of proving that this should be possible, I can supply a very early proof of concept, for use in the developer’s console (launched with CTRL-SHIFT-J / CMD-SHIFT-J on many browsers). By entering the code below in the console launched from tiddlywiki.com (or your preferred wiki), and then dragging some draggable element—the items in the Open tab work—and dropping them on an element, you should get console output like this:
HTML :
BODY : tc-body
DIV : tc-page-container-wrapper
DIV :
DIV : tc-page-container tc-page-view-classic tc-language-en-GB
DIV : tc-dropzone tc-page-container-inner
SECTION : tc-story-river
DIV : tc-tiddler-frame tc-tiddler-view-frame tc-tiddler-exists tc-tagged-TableOfContents
DIV : tc-tiddler-body tc-reveal
"""Welcome to TiddlyWiki, a unique non-linear notebook for capturing, organising and sharing complex information\n\nUse it to keep your to-do list, to pl..."""
or this:
HTML :
BODY : tc-body
DIV : tc-page-container-wrapper
DIV :
DIV : tc-page-container tc-page-view-classic tc-language-en-GB
DIV : tc-dropzone tc-page-container-inner
DIV : tc-sidebar-scrollable
DIV :
DIV : tc-sidebar-header
DIV : tc-reveal
DIV : tc-reveal
P :
DIV : tc-page-controls
BUTTON : tc-btn-invisible tc-btn-%24%3A%2Fcore%2Fui%2FButtons%2Fnew-tiddler
svg : tc-image-new-button tc-image-button
"""(no text)"""
This is the code:
const walkUp = (node) => node == null ? [] : [node, ...walkUp(node.parentNode)]
const elementString = (el) =>
[el.nodeName, ...(el.id ? ['#' + el.id] : []), el.classList] .join (' : ')
const indent = (depth) => ' '.repeat(depth)
const shortenText = (length) => (s = "(no text)", text = s.replace(/\n/g, "\\n")) =>
'"""' + text.slice(0, length) + (text.length > length ? '...' : '') + '"""'
document.body.addEventListener('dragover', (event) => {event.preventDefault()})
document.body.addEventListener('drop', (event) => {
const target = event.target
const hierarchy = walkUp(target).reverse().slice(1)
const display = hierarchy.map((node, i) => indent(i) + elementString(node)).join('\n')
const text = target.innerText
console.log(display)
console.log(indent(hierarchy.length + 2) + shortenText(150)(text))
event.preventDefault();
})
With a little work, we could ensure that your question mark is draggable and that this code only fires when that mark is the element being dragged. And of course, we could put this output in an overlay or something instead of the developer console.
But before considering how to do that, is this the sort of output you’re looking for? It’s easy enough to get DOM content like this. If you’re trying to get something TiddlyWiki-specific, I don’t even know if there are any techniques that would offer this, never mind how to use them.
I’m expecting this would have to be in a JS module of some sort and not in wikitext, but people have often proven me wrong when I’ve said that.
