A note on Kanban embeds

[mgmeyers]

@zsviczian I finally had some time to look into why embedded drawings don't work reliably in kanban boards. The crux of the issue is that, for performance reasons, the Kanban plugin pre-renders markdown, then inserts it into the dom by cloning the rendered markdown node: https://github.com/mgmeyers/obsidian-kanban/blob/bffe5c088a0c4d91bb847427ed7f9a5658998fd4/src/components/MarkdownRenderer.tsx#L89

The problem is that there's a race condition between this and your markdownPostProcessor here:

obsidian-excalidraw-plugin/src/main.ts

Lines 225 to 247 in 784a7cb

	div = createDiv(attr.style, async (el)=>{
	const img = await getIMG(attr);
	el.append(img);
	el.setAttribute("src",file.path);
	if(attr.fwidth) el.setAttribute("w",attr.fwidth);
	if(attr.fheight) el.setAttribute("h",attr.fheight);
	el.onClickEvent((ev)=>{
	if(ev.target instanceof Element && ev.target.tagName.toLowerCase() != "img") return;
	let src = el.getAttribute("src");
	if(src) this.openDrawing(this.app.vault.getAbstractFileByPath(src) as TFile,ev.ctrlKey||ev.metaKey);
	});
	el.addEventListener(RERENDER_EVENT, async(e) => {
	e.stopPropagation;
	el.empty();
	const img = await getIMG({
	fname:el.getAttribute("src"),
	fwidth:el.getAttribute("w"),
	fheight:el.getAttribute("h"),
	style:el.getAttribute("class")
	});
	el.append(img);
	});
	});

The async function you have in createDiv can finish execution after your markdownPostProcessor has run, which means that the kanban plugin will clone the node before the image is appended. If you moved const img = await getIMG(attr); outside of this function, and made the function synchronous, it should get drawings to load properly in kanban boards.

[zsviczian]

Awesome! This resolved the issue.
I'll be publishing an update later today.