feat: introduce an ImageContent component in editor

[eric-burel]

This PR introduces an ImageContent component for the editor, for binary images.

Design choices:

• only binary images are supported, with format you typically expect on the web
• svg is still treated as text (you might want a tutorial about programming with SVG)
• other binary image format are not supported (which I think is ok for most use cases)

Problems left:

• somehow the editor displays code from another file alongside the image
• not sure if shoving images in the first demo lesson is good for testing

Closes #309

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[AriPerkkio]

Problems left:
somehow the editor displays code from another file alongside the image

The existing <BinaryContent /> does too, but it uses position: absolute; inset: 0 to cover the text area. We could do same here:

Suggested change

	export function ImageContent({ src }: { src: string }) {
	return <img src={src} />;
	}
	export function ImageContent({ src }: { src: string }) {
	return (
	<div className="flex items-center justify-center absolute inset-0 z-10 bg-tk-elements-app-backgroundColor">
	<img src={src} />
	</div>
	);
	}

This isn't actually good approach as the text content of previous file is still present in DOM. It's part of tab and read order so users can actually navigate to this invisible element. But as this bug is already present in TutorialKit we can ignore it on this PR. 🤷‍♂️

[Nemikolh]

I think this is a leftover of a time where we were trying to cache the EditorView from CodeMirror which I don't think is necessary. We should change the logic so that the CodeMirrorEditor is not rendered in that case.