Upload files to IndexedDB

static/js/marked_position.mjs

@@ -92,18 +92,22 @@ function escapeHtmlEntities(html, encode) {// {{{
 
 export class MarkedPosition {
 	constructor() {// {{{
-		window.setpos = (event) => {
-			event.stopPropagation()
-			event.preventDefault()
-
-			_mbus.dispatch('MARKDOWN_EDIT', {
-				position: {
-					start: event.target.dataset.offsetStart,
-					end: event.target.dataset.offsetEnd,
-				}
-			})
-		}
+		window.setpos = (event) => this.setpos(event)
+		this.render()
+	}// }}}
+	setpos(event) {// {{{
+		event.stopPropagation()
+		event.preventDefault()
 
+		_mbus.dispatch('MARKDOWN_EDIT', {
+			position: {
+				start: event.target.closest('[data-offset-start]').dataset.offsetStart,
+				end: event.target.closest('[data-offset-start]').dataset.offsetEnd,
+			}
+		})
+	}// }}}
+	render() {// {{{
+		const markedObject = this
 		this.marked = new Marked()
 		this.marked.use(markedTokenPosition())
 		this.marked.use({
@@ -265,7 +269,6 @@ export class MarkedPosition {
 				},
 
 				image(token) {
-
 					if (token.tokens) {
 						token.text = this.parser.parseInline(token.tokens, this.parser.textRenderer)
 					}
@@ -274,12 +277,11 @@ export class MarkedPosition {
 						return escapeHtmlEntities(token.text)
 					}
 					token.href = cleanHref
-
-					let out = `<img ondblclick="setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}" src="${token.href}" alt="${escapeHtmlEntities(token.text)}"`
+					let out = `<n2-file ondblclick="setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}" src="${token.href}" alt="${escapeHtmlEntities(token.text)}"`
 					if (token.title) {
 						out += ` title="${escapeHtmlEntities(token.title)}"`
 					}
-					out += '>'
+					out += '></n2-file>'
 					return out
 				},
 
@@ -291,8 +293,34 @@ export class MarkedPosition {
 
 			}
 		})
-	}// }}}
+	}// }}}}}}
 	parse(text) {// {{{
 		return this.marked.parse(text)
 	}// }}}
+	async whenElementExist(id) {// {{{
+		// The element could have already been created.
+		const element = document.getElementById(id)
+		if (element) {
+			return element
+		}
+
+		const observer = new MutationObserver((_mutations, observer) => {
+			const target = document.getElementById(id)
+			if (target) {
+				observer.disconnect()
+				return target
+			}
+		})
+
+		observer.observe(document.documentElement, {
+			childList: true,
+			subtree: true
+		})
+	}// }}}
+	async populateImg(fileID, elementID) {// {{{
+		let img = await globalThis.nodeStore.files.get(fileID)
+		const el = await this.whenElementExist(elementID)
+
+		el.src = URL.createObjectURL(img.file)
+	}// }}}
 }