Experimenting with a Markdown component in Marko

example-use.marko

<Markdown># Hello ${input.name}</Markdown>

index.marko

import marked from 'marked'

class {
	onCreate() {
		this.state = { content: null };
	}
	onInput() {
		this.state.content = null;
	}
	recalculate() {
		if (this.state.content === null) {
			this.state.content = marked(this.getEl("container").textContent);
		}
	}
	onMount() {
		this.recalculate();
	}
	onUpdate() {
		this.recalculate();
	}
}

<div.wrapper key="container" style={
	visibility: state.content ? "unset" : "hidden"
}>
	<if(state.content)>$!{state.content}</if>
	<else>
		<${input.renderBody}/>
	</else>
</div>