fix(core): teleported elements theme class

packages/carta-md/src/lib/internal/carta.ts

@@ -331,7 +331,10 @@ export class Carta {
 
 		// Bind elements
 		this.elementsToBind.forEach((it) => {
-			it.callback = this.input?.$bindToCaret(it.elem, it.portal).destroy;
+			it.callback = this.input?.$bindToCaret(it.elem, {
+				portal: it.portal,
+				editorElement: this.element
+			}).destroy;
 		});
 	}
 
@@ -364,7 +367,8 @@ export class Carta {
 	public bindToCaret(element: HTMLElement, portal = document.querySelector('body') as HTMLElement) {
 		let callback: (() => void) | undefined;
 
-		if (this.input) callback = this.input.$bindToCaret(element, portal).destroy;
+		if (this.input)
+			callback = this.input.$bindToCaret(element, { portal, editorElement: this.element }).destroy;
 
 		// Bind the element later, when the input is ready
 		this.elementsToBind.push({ elem: element, portal, callback });

packages/carta-md/src/lib/internal/input.ts

@@ -444,11 +444,14 @@ export class CartaInput {
 	 * @param elem The element to position.
 	 * @param portal The portal to append the element to. Defaults to `document.body`.
 	 */
-	public $bindToCaret(elem: HTMLElement, portal: HTMLElement) {
+	public $bindToCaret(
+		elem: HTMLElement,
+		data: { portal: HTMLElement; editorElement?: HTMLElement }
+	) {
 		// Move the element to body
-		portal.appendChild(elem);
+		data.portal.appendChild(elem);
 		// Add theme class as the the teleported element is not a child of the container
-		const themeClass = Array.from(this.container.classList).find((c) =>
+		const themeClass = Array.from(data.editorElement?.classList ?? []).find((c) =>
 			c.startsWith('carta-theme__')
 		);
 		elem.classList.add(themeClass ?? 'carta-theme__default');
@@ -499,7 +502,7 @@ export class CartaInput {
 		return {
 			destroy: () => {
 				try {
-					portal.removeChild(elem);
+					data.portal.removeChild(elem);
 				} catch (e: unknown) {
 					// Ignore
 				}