Cart renders text under my cursor

[Bouchtaoui]

OS: MacOS 14.5 PC: MacPro M1 carta version: 4.4.2

I use Carta in one of my components in SvelteKit and although it works kind of, it does have a weird behaviour. Look at the video:

https://github.com/user-attachments/assets/a8fdc8c0-f011-41bc-90ee-e5360037e226

This is my script part of my component:

	import { Carta, MarkdownEditor } from 'carta-md';
	import 'carta-md/default.css'; /* Default theme */

	const carta = new Carta({});
	let content = '';

and the html part:

<MarkdownEditor {carta} bind:content />

This problem is the same with Firefox as well as Chrome. Any idea what could be wrong?

[BearToCode]

Hello! I think there are some conflicting styles, as the highlight overlay is not aligned with the textarea. It's difficult to say without an example. You can check yourself to see if any rules are adding padding/margin to them. Anyway, make sure to set the editor font styles

[KyleFontenot]

In the editor, there are two elements overlaid ontop of each other: the textarea and the div. The textarea is what you use to interact with with which has opacity:0;. The separate div displays what you're typing. So as long as both the textarea and div have the same line-height, font-size, letter-spacing, it should look fine. If still not aligned, check padding, margins etc.

Example css like below worked for me:

:global(textarea.carta-font-code, div.carta-font-code) {
  line-height: 1.2rem;
  font-size: 0.9rem;
}

(The reason there is a separate element to display the code you're typing is for the sake of having highlighting.)

[BearToCode]

Closing due to inactivity.