Text cursor not showing after switching between Write and Preview tab

[zFlxw]

Hey there. I am encountering an issue where the text cursor is not showing again when switching between the "Write" and "Preview" tab. It seems like, this issue only occurs when providing a prefilled value for the editor, changing the content and then switching back. I'll attach a screen recording showing the behavior I mean.

2026-03-08.12-55-42.mov

Note: in the video, I am using Zen, but I also encountered this issue in Chrome.

I'll also leave my implementation here, just in case the issue is caused by my usage of the library.

<!-- card-editor.svelte --->
<script lang="ts">
	import { math } from '@cartamd/plugin-math';
	import { Carta, MarkdownEditor } from 'carta-md';
	import { sanitize } from 'isomorphic-dompurify';

	import '../styles/github.scss';
	import 'katex/dist/katex.css';

	const carta = new Carta({
		sanitizer: sanitize,
		extensions: [math()],
	});

	let { value = $bindable() }: { value: string } = $props();
</script>

<MarkdownEditor {carta} bind:value theme="github" mode="tabs" />

<style>
	/* Set your monospace font  */
	/* Required to have the editor working correctly! */
	:global(.carta-font-code) {
		font-family: 'Source Code Pro', monospace !important;
		font-size: 1.1rem;
		line-height: 1.1rem;
		letter-spacing: normal;
	}
</style>

The usage of the card-editor.svelte component:

<script lang="ts">
	import { superForm } from 'sveltekit-superforms';
	import { zod4Client } from 'sveltekit-superforms/adapters';

	import CardEditor from '$lib/components/card-editor.svelte';
	import * as Form from '$lib/components/ui/form/index';
	import { updateCardSchema } from '$lib/schemas/update-card.schema';

	let { data } = $props();

	const formInstance = superForm(data.updateCardForm, {
		clearOnSubmit: 'none',
		delayMs: 300,
		validators: zod4Client(updateCardSchema),
	});

	const { form: formData, enhance } = formInstance;
</script>

<form class="flex flex-col gap-16" method="post" action="?/update_card" use:enhance>
	<Form.Field form={formInstance} name="frontSide" class="flex flex-col gap-1">
		<Form.Control>
			<Form.Label class="pl-2">Frontside</Form.Label>
			<CardEditor bind:value={$formData.frontSide} />
		</Form.Control>
		<Form.FieldErrors />
	</Form.Field>

	<Form.Field form={formInstance} name="backSide" class="flex flex-col gap-1">
		<Form.Control>
			<Form.Label class="pl-2">Backside</Form.Label>
			<CardEditor bind:value={$formData.backSide} />
		</Form.Control>
		<Form.FieldErrors />
	</Form.Field>

	<Form.Button>Update Card</Form.Button>
</form>

[BearToCode]

Closed by #172 by @hut36

[github-actions]

🎉 This issue has been resolved in version carta-md-v4.11.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀