From 20d58a856bffc494de37a785cff1859bdcfadfb8 Mon Sep 17 00:00:00 2001
From: BearToCode <davidebasso03@gmail.com>
Date: Fri, 12 Apr 2024 16:34:34 +0200
Subject: [PATCH 01/21] docs: fix code background

---
 docs/src/lib/styles/markdown.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/src/lib/styles/markdown.scss b/docs/src/lib/styles/markdown.scss
index 2e3c7cd..cef9e64 100644
--- a/docs/src/lib/styles/markdown.scss
+++ b/docs/src/lib/styles/markdown.scss
@@ -46,7 +46,8 @@
 		@apply rounded bg-neutral-800 px-1 text-neutral-50;
 	}
 
-	.carta-renderer code {
+	.carta-editor code {
 		font-family: 'Fira Code', monospace;
+		background: transparent;
 	}
 }

From 0cef0b94eddd3dee7405183addbfbc163a215347 Mon Sep 17 00:00:00 2001
From: BearToCode <davidebasso03@gmail.com>
Date: Fri, 12 Apr 2024 20:14:11 +0200
Subject: [PATCH 02/21] docs: fix laggy header tracker

---
 .../header-tracker/HeaderTracker.svelte       | 63 +++++++++++--------
 docs/src/lib/utils.ts                         | 38 +++++++++++
 docs/src/routes/+layout.svelte                |  2 +-
 3 files changed, 76 insertions(+), 27 deletions(-)

diff --git a/docs/src/lib/components/header-tracker/HeaderTracker.svelte b/docs/src/lib/components/header-tracker/HeaderTracker.svelte
index f5a6b1d..d584c97 100644
--- a/docs/src/lib/components/header-tracker/HeaderTracker.svelte
+++ b/docs/src/lib/components/header-tracker/HeaderTracker.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
-	import { onDestroy, onMount } from 'svelte';
+	import { onNavigate } from '$app/navigation';
+	import { debounce, throttle } from '$lib/utils';
+	import { onMount } from 'svelte';
 
 	const PADDING = 80;
 
@@ -7,49 +9,58 @@
 
 	let className = '';
 	let headers: HTMLElement[] = [];
-	let scrollY = 0;
+	let selectedHeaderIndex = 0;
 
 	function retrieveHeaders() {
-		const markdownContainer = document.querySelector('.markdown');
-		if (!markdownContainer) return;
-		headers = Array.from(markdownContainer.querySelectorAll('h1, h2, h3')) as HTMLElement[];
+		headers = Array.from(
+			document.querySelectorAll('.markdown > h1, .markdown > h2, .markdown > h3')
+		) as HTMLElement[];
 	}
 
-	function highlightHeader(header: HTMLElement, nextHeader: HTMLElement | null, index: number) {
-		const headerHasReachedTop = header.getBoundingClientRect().top <= PADDING || index == 0;
-		const nextHeaderReachedTop = nextHeader && nextHeader.getBoundingClientRect().top <= PADDING;
-		return !nextHeaderReachedTop && headerHasReachedTop;
-	}
+	const highlightHeader = () => {
+		for (let index = headers.length - 1; index >= 0; index--) {
+			const header = headers[index];
+			const rect = header.getBoundingClientRect();
+			if (rect.top < PADDING) {
+				selectedHeaderIndex = index;
+				return;
+			}
+		}
+		selectedHeaderIndex = 0;
+	};
 
-	let observer: MutationObserver;
+	const [throttledHighlightHeader] = throttle(highlightHeader, 100);
+	const debouncedHighlightHeader = debounce(highlightHeader, 100);
 
-	onMount(() => {
-		observer = new MutationObserver(retrieveHeaders);
-		observer.observe(document.body, { childList: true, subtree: true });
-		retrieveHeaders();
-	});
-
-	onDestroy(() => {
-		observer?.disconnect();
+	onNavigate(() => {
+		setTimeout(() => {
+			retrieveHeaders();
+			highlightHeader();
+		}, 300);
 	});
+	onMount(retrieveHeaders);
 </script>
 
-<svelte:window bind:scrollY />
+<svelte:window
+	on:scroll={() => {
+		throttledHighlightHeader();
+		debouncedHighlightHeader(); // So it is called at the end of the scroll event
+	}}
+/>
 
 <div class="h-full space-y-3 {className}">
 	{#each headers as header, i}
 		{@const margin = Number(header.tagName.split('')[1]) - 1}
-		{@const nextHeader = headers[i + 1]}
-		{#if header.children[0] instanceof HTMLAnchorElement && header.children[0].href}
-			{#key scrollY}
+		{#key selectedHeaderIndex}
+			{#if header.children[0] instanceof HTMLAnchorElement && header.children[0].href}
 				<a
 					style="margin-left: {margin * 0.75}rem;"
-					class="block text-sm {highlightHeader(header, nextHeader, i)
+					class="block text-sm {selectedHeaderIndex === i
 						? 'font-medium text-sky-300'
 						: 'text-neutral-400'}"
 					href={header.children[0].href}>{header.innerText}</a
 				>
-			{/key}
-		{/if}
+			{/if}
+		{/key}
 	{/each}
 </div>
diff --git a/docs/src/lib/utils.ts b/docs/src/lib/utils.ts
index eba19d8..d2b288e 100644
--- a/docs/src/lib/utils.ts
+++ b/docs/src/lib/utils.ts
@@ -54,3 +54,41 @@ export const flyAndScale = (
 		easing: cubicOut
 	};
 };
+
+export const throttle = <R, A extends unknown[]>(
+	fn: (...args: A) => R,
+	delay: number
+): [(...args: A) => R | undefined, () => void] => {
+	let wait = false;
+	let timeout: undefined | number;
+	let cancelled = false;
+
+	return [
+		(...args: A) => {
+			if (cancelled) return undefined;
+			if (wait) return undefined;
+
+			const val = fn(...args);
+
+			wait = true;
+
+			timeout = window.setTimeout(() => {
+				wait = false;
+			}, delay);
+
+			return val;
+		},
+		() => {
+			cancelled = true;
+			clearTimeout(timeout);
+		}
+	];
+};
+
+export function debounce<T extends unknown[]>(cb: (...args: T) => unknown, wait = 1000) {
+	let timeout: NodeJS.Timeout;
+	return (...args: T) => {
+		clearTimeout(timeout);
+		timeout = setTimeout(() => cb(...args), wait);
+	};
+}
diff --git a/docs/src/routes/+layout.svelte b/docs/src/routes/+layout.svelte
index 9dddf88..723f83f 100644
--- a/docs/src/routes/+layout.svelte
+++ b/docs/src/routes/+layout.svelte
@@ -24,6 +24,6 @@
 			<slot />
 			<Footer />
 		</main>
-		<HeaderTracker class="sticky top-24 hidden w-[30rem] xl:block" />
+		<HeaderTracker class="sticky top-24 hidden w-[15rem] flex-shrink-0 xl:block" />
 	</div>
 </div>

From 545864a20255be5a2dbdad89642cc6b90944e8be Mon Sep 17 00:00:00 2001
From: BearToCode <davidebasso03@gmail.com>
Date: Sat, 13 Apr 2024 19:59:43 +0200
Subject: [PATCH 03/21] docs: fix grammar/style

---
 docs/src/pages/introduction.svelte.md | 2 +-
 docs/src/pages/migration.svelte.md    | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/src/pages/introduction.svelte.md b/docs/src/pages/introduction.svelte.md
index 6c706f8..12e0af9 100644
--- a/docs/src/pages/introduction.svelte.md
+++ b/docs/src/pages/introduction.svelte.md
@@ -13,7 +13,7 @@ Carta is a lightweight, fast and extensible Svelte Markdown editor and viewer, d
 
 ## Features
 
-- 🌈 Markdown syntax highlighting ([shiki](https://shiki.style/));
+- 🌈 Markdown syntax highlighting ([Shiki](https://shiki.style/));
 - 🛠️ Toolbar (extensible);
 - ⌨️ Keyboard **shortcuts** (extensible);
 - 📦 Supports **[+150 plugins](https://github.com/remarkjs/remark/blob/main/doc/plugins.md#list-of-plugins)** thanks to remark.
diff --git a/docs/src/pages/migration.svelte.md b/docs/src/pages/migration.svelte.md
index 744be26..1a2383c 100644
--- a/docs/src/pages/migration.svelte.md
+++ b/docs/src/pages/migration.svelte.md
@@ -21,7 +21,7 @@ Make sure to remove previous themes imports, as Shiki uses JS based ones.
 import 'carta-md/light.css'; // 👈 To be removed!
 ```
 
-And also update the default theme. SHJ based selectors should be removed:
+And also update the default theme. Previous based selectors should be removed:
 
 ```css
 [class*='shj-lang-'] {
@@ -32,7 +32,7 @@ And also update the default theme. SHJ based selectors should be removed:
 
 ## Removed verbose prefixes
 
-Many exports have been renamed to make them less verbose, here are them:
+Many exports have been renamed to make them less verbose:
 
 - `CartaEditor` -> `MarkdownEditor` (old one still supported);
 - `CartaRenderer` -> `Markdown` (old one still supported);
@@ -49,7 +49,7 @@ Many exports have been renamed to make them less verbose, here are them:
 - `CartaRenderer` -> `Renderer`;
 - `CartaLabels` -> `Labels`;
 
-## Minor Changes
+# Minor Changes
 
 - If you don't use a sanitizer, you need to explicitly set it to `false`;
 - Removed deprecated option `cartaRef` and `shjRef` for extensions;

From 7ad874e6aae2862e53586ecb91c86ed14e24ffc0 Mon Sep 17 00:00:00 2001
From: BearToCode <davidebasso03@gmail.com>
Date: Sun, 14 Apr 2024 18:08:33 +0200
Subject: [PATCH 04/21] fix(plugin-code): module not found error

---
 packages/plugin-code/src/index.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/plugin-code/src/index.ts b/packages/plugin-code/src/index.ts
index 3bcc501..5b47439 100644
--- a/packages/plugin-code/src/index.ts
+++ b/packages/plugin-code/src/index.ts
@@ -1,5 +1,5 @@
-import { DualTheme, Theme, isSingleTheme, type Plugin } from 'carta-md';
-import { type RehypeShikiOptions } from '@shikijs/rehype';
+import type { DualTheme, Theme, Plugin } from 'carta-md';
+import type { RehypeShikiOptions } from '@shikijs/rehype';
 import rehypeShikiFromHighlighter from '@shikijs/rehype/core';
 
 export type CodeExtensionOptions = Omit<RehypeShikiOptions, 'theme' | 'themes'> & {
@@ -17,6 +17,7 @@ export const code = (options?: CodeExtensionOptions): Plugin => {
 				type: 'rehype',
 				async transform({ processor, carta }) {
 					let theme = options?.theme;
+					const { isSingleTheme } = await import('carta-md');
 					const highlighter = await carta.highlighter();
 					if (!theme) {
 						theme = highlighter.theme; // Use the theme specified in the highlighter

From 54358b649b49699ef85c779745ad1b5b78e32734 Mon Sep 17 00:00:00 2001
From: BearToCode <davidebasso03@gmail.com>
Date: Sun, 14 Apr 2024 18:24:18 +0200
Subject: [PATCH 05/21] fix(plugin-code): do not import `isSingleTheme` for
 main package

fix #50
---
 packages/plugin-code/src/index.ts | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/plugin-code/src/index.ts b/packages/plugin-code/src/index.ts
index 5b47439..48a8d6e 100644
--- a/packages/plugin-code/src/index.ts
+++ b/packages/plugin-code/src/index.ts
@@ -6,6 +6,23 @@ export type CodeExtensionOptions = Omit<RehypeShikiOptions, 'theme' | 'themes'>
 	theme?: Theme | DualTheme;
 };
 
+// FIXME: find a better solution then copy-pasting these functions in next version.
+// However, when importing from carta-md, this causes a MODULE_NOT_FOUND error
+// for some reason.
+/**
+ * Checks if a theme is a dual theme.
+ * @param theme The theme to check.
+ * @returns Whether the theme is a dual theme.
+ */
+export const isDualTheme = (theme: Theme | DualTheme): theme is DualTheme =>
+	typeof theme == 'object' && 'light' in theme && 'dark' in theme;
+/**
+ * Checks if a theme is a single theme.
+ * @param theme The theme to check.
+ * @returns Whether the theme is a single theme.
+ */
+export const isSingleTheme = (theme: Theme | DualTheme): theme is Theme => !isDualTheme(theme);
+
 /**
  * Carta code highlighting plugin. Themes available on [GitHub](https://github.com/speed-highlight/core/tree/main/dist/themes).
  */
@@ -17,7 +34,7 @@ export const code = (options?: CodeExtensionOptions): Plugin => {
 				type: 'rehype',
 				async transform({ processor, carta }) {
 					let theme = options?.theme;
-					const { isSingleTheme } = await import('carta-md');
+
 					const highlighter = await carta.highlighter();
 					if (!theme) {
 						theme = highlighter.theme; // Use the theme specified in the highlighter

From dfc8812123974a4e672e3e711b9f08e5e29d25cf Mon Sep 17 00:00:00 2001
From: BearToCode <davidebasso03@gmail.com>
Date: Sun, 14 Apr 2024 18:37:48 +0200
Subject: [PATCH 06/21] fix(plugin-tikz): prevent crash when className property
 is not set

---
 packages/plugin-tikz/src/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/plugin-tikz/src/index.ts b/packages/plugin-tikz/src/index.ts
index f46161b..895eb62 100644
--- a/packages/plugin-tikz/src/index.ts
+++ b/packages/plugin-tikz/src/index.ts
@@ -95,6 +95,7 @@ const tikzTransformer: UnifiedPlugin<
 			if (node.type !== 'element') return;
 			const element = node as hast.Element;
 			if (element.tagName !== 'code') return;
+			if (!element.properties['className']) return;
 			if (!(element.properties['className'] as string[]).includes('language-tikz')) return;
 
 			// Element is a TikZ code block

From 482fd4b8af314ec61afe18882a0fbc36549a4824 Mon Sep 17 00:00:00 2001
From: BearToCode <davidebasso03@gmail.com>
Date: Mon, 15 Apr 2024 18:16:43 +0200
Subject: [PATCH 07/21] fix(plugin-tikz): remove wrapping pre

---
 packages/plugin-tikz/src/index.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/plugin-tikz/src/index.ts b/packages/plugin-tikz/src/index.ts
index 895eb62..8ef05de 100644
--- a/packages/plugin-tikz/src/index.ts
+++ b/packages/plugin-tikz/src/index.ts
@@ -86,14 +86,18 @@ const tikzTransformer: UnifiedPlugin<
 	hast.Root
 > = ({ carta, options }) => {
 	return async function (tree) {
-		visit(tree, (node, index, parent) => {
+		visit(tree, (pre, index, parent) => {
 			if (typeof document === 'undefined') {
 				// Cannot run outside the browser
 				return;
 			}
 
-			if (node.type !== 'element') return;
-			const element = node as hast.Element;
+			if (pre.type !== 'element') return;
+			const preElement = pre as hast.Element;
+			if (preElement.tagName !== 'pre') return;
+			const element = pre.children.at(0) as hast.Element | undefined;
+			if (!element) return;
+
 			if (element.tagName !== 'code') return;
 			if (!element.properties['className']) return;
 			if (!(element.properties['className'] as string[]).includes('language-tikz')) return;
@@ -130,6 +134,7 @@ const tikzTransformer: UnifiedPlugin<
 			}
 
 			const hastNode = fromDom(container) as hast.Element;
+
 			parent?.children.splice(index!, 1, hastNode);
 
 			return [SKIP, index!];

From 7261d295e2bb48974b9048b98d5b0fa057d0456c Mon Sep 17 00:00:00 2001
From: BearToCode <davidebasso03@gmail.com>
Date: Thu, 18 Apr 2024 12:49:11 +0200
Subject: [PATCH 08/21] docs: fix editor code having padding

---
 docs/src/lib/styles/markdown.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/src/lib/styles/markdown.scss b/docs/src/lib/styles/markdown.scss
index cef9e64..6cefde8 100644
--- a/docs/src/lib/styles/markdown.scss
+++ b/docs/src/lib/styles/markdown.scss
@@ -49,5 +49,6 @@
 	.carta-editor code {
 		font-family: 'Fira Code', monospace;
 		background: transparent;
+		padding: 0;
 	}
 }

From dddaad1f1bbea4b4be427b1d4f879d1d43edbe90 Mon Sep 17 00:00:00 2001
From: BearToCode <davidebasso03@gmail.com>
Date: Sat, 20 Apr 2024 19:46:00 +0200
Subject: [PATCH 09/21] fix(plugin-anchor): wrong class in default stylesheet

---
 packages/plugin-anchor/src/lib/default.css | 36 +++++++++++-----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/packages/plugin-anchor/src/lib/default.css b/packages/plugin-anchor/src/lib/default.css
index afbed18..1d18753 100644
--- a/packages/plugin-anchor/src/lib/default.css
+++ b/packages/plugin-anchor/src/lib/default.css
@@ -1,18 +1,18 @@
-.carta-renderer h1,
-.carta-renderer h2,
-.carta-renderer h3,
-.carta-renderer h4,
-.carta-renderer h5,
-.carta-renderer h6 {
+.carta-viewer h1,
+.carta-viewer h2,
+.carta-viewer h3,
+.carta-viewer h4,
+.carta-viewer h5,
+.carta-viewer h6 {
 	position: relative;
 }
 
-.carta-renderer h1 .icon.icon-link,
-.carta-renderer h2 .icon.icon-link,
-.carta-renderer h3 .icon.icon-link,
-.carta-renderer h4 .icon.icon-link,
-.carta-renderer h5 .icon.icon-link,
-.carta-renderer h6 .icon.icon-link {
+.carta-viewer h1 .icon.icon-link,
+.carta-viewer h2 .icon.icon-link,
+.carta-viewer h3 .icon.icon-link,
+.carta-viewer h4 .icon.icon-link,
+.carta-viewer h5 .icon.icon-link,
+.carta-viewer h6 .icon.icon-link {
 	opacity: 0;
 	content: url('./link.svg');
 	position: absolute;
@@ -22,11 +22,11 @@
 	transform: translateY(-50%);
 }
 
-.carta-renderer h1:hover .icon-link,
-.carta-renderer h2:hover .icon-link,
-.carta-renderer h3:hover .icon-link,
-.carta-renderer h4:hover .icon-link,
-.carta-renderer h5:hover .icon-link,
-.carta-renderer h6:hover .icon-link {
+.carta-viewer h1:hover .icon-link,
+.carta-viewer h2:hover .icon-link,
+.carta-viewer h3:hover .icon-link,
+.carta-viewer h4:hover .icon-link,
+.carta-viewer h5:hover .icon-link,
+.carta-viewer h6:hover .icon-link {
 	opacity: 1;
 }

From a086ece08804dc842d9a94b0f2bc7109d2b9b428 Mon Sep 17 00:00:00 2001
From: BearToCode <davidebasso03@gmail.com>
Date: Sat, 20 Apr 2024 20:05:27 +0200
Subject: [PATCH 10/21] docs: update old plugin code readme

---
 packages/plugin-code/README.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/plugin-code/README.md b/packages/plugin-code/README.md
index 7eab23b..1f0dc18 100644
--- a/packages/plugin-code/README.md
+++ b/packages/plugin-code/README.md
@@ -1,13 +1,11 @@
 # Carta Code Plugin
 
-This plugin adds support for code blocks **syntax highlighting**. Install it using:
+This plugin adds support for code blocks **syntax highlighting**. It uses the same highlighter from the core package(Shiki).
 
 ```
 npm i @cartamd/plugin-code
 ```
 
-This is done using [Speed-highlight JS](https://github.com/speed-highlight/core), which supports dynamic imports. This way, languages definitions are only imported at the moment of need.
-
 ## Setup
 
 ### Styles

From bafc86d8d306a2de3bd571db629abdfaa4949c9d Mon Sep 17 00:00:00 2001
From: BearToCode <davidebasso03@gmail.com>
Date: Sun, 28 Apr 2024 15:46:51 +0200
Subject: [PATCH 11/21] fix: handle caret endings in Markdown component

fix: #56
---
 .../carta-md/src/lib/internal/components/Input.svelte     | 8 ++------
 packages/carta-md/src/lib/internal/highlight.ts           | 2 ++
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/carta-md/src/lib/internal/components/Input.svelte b/packages/carta-md/src/lib/internal/components/Input.svelte
index c3fe8b6..3874591 100644
--- a/packages/carta-md/src/lib/internal/components/Input.svelte
+++ b/packages/carta-md/src/lib/internal/components/Input.svelte
@@ -63,18 +63,14 @@
 		}
 	};
 
-	const normalize = (text: string) => {
-		return text.replaceAll('\r\n', '\n');
-	};
-
 	const highlightNestedLanguages = debounce(async (text: string) => {
 		const highlighter = await carta.highlighter();
 		const { updated } = await loadNestedLanguages(highlighter, text);
 		if (updated) highlight(text);
 	}, 300);
 
-	$: highlight(normalize(value)).then(resize);
-	$: highlightNestedLanguages(normalize(value));
+	$: highlight(value).then(resize);
+	$: highlightNestedLanguages(value);
 
 	onMount(() => {
 		mounted = true;
diff --git a/packages/carta-md/src/lib/internal/highlight.ts b/packages/carta-md/src/lib/internal/highlight.ts
index ed2df86..16cfddf 100644
--- a/packages/carta-md/src/lib/internal/highlight.ts
+++ b/packages/carta-md/src/lib/internal/highlight.ts
@@ -249,6 +249,8 @@ const findNestedLanguages = (text: string) => {
  * @returns Whether the highlighter was updated with new languages.
  */
 export const loadNestedLanguages = async (highlighter: Highlighter, text: string) => {
+	text = text.replaceAll('\r\n', '\n'); // Normalize line endings
+
 	const languages = findNestedLanguages(text);
 	const loadedLanguages = highlighter.getLoadedLanguages();
 	let updated = false;

From a44b8e971dd0e57f097f79dabf77870f96bdcc24 Mon Sep 17 00:00:00 2001
From: BearToCode <davidebasso03@gmail.com>
Date: Wed, 1 May 2024 16:30:13 +0200
Subject: [PATCH 12/21] docs: add dark mode chapter

---
 docs/src/pages/editing-styles.svelte.md | 32 +++++++++++++++++++++----
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/docs/src/pages/editing-styles.svelte.md b/docs/src/pages/editing-styles.svelte.md
index e54df5a..a695761 100644
--- a/docs/src/pages/editing-styles.svelte.md
+++ b/docs/src/pages/editing-styles.svelte.md
@@ -43,11 +43,35 @@ While the core styles are embedded in the Svelte components, the others can be s
 
 ### Using multiple themes
 
-By using the `theme` property in the editor you can differentiate the themes of multiple editors.
+By using the `theme` property in `<MarkdownEditor>` you can differentiate the themes of multiple editors.
 
-## Changing Markdown color theme
+## Dark mode
 
-Carta uses [Shiki](https://shiki.matsu.io/) for syntax highlighting. Two default themes are included in the core package, which are as a [dual theme](https://shiki.matsu.io/guide/dual-themes) used for light and dark mode.
+When using dark mode, there are two different themes that have to be changed: the editor theme and the one used for syntax highlighting:
+
+```css
+/* Editor dark mode */
+/* Only if you are using the default theme */
+html.dark .carta-theme__default {
+	--border-color: var(--border-color-dark);
+	--selection-color: var(--selection-color-dark);
+	--focus-outline: var(--focus-outline-dark);
+	--hover-color: var(--hover-color-dark);
+	--caret-color: var(--caret-color-dark);
+	--text-color: var(--text-color-dark);
+}
+
+/* Code dark mode */
+/* Only if you didn't specify a custom code theme */
+html.dark .shiki,
+html.dark .shiki span {
+	color: var(--shiki-dark) !important;
+}
+```
+
+## Changing Markdown input color theme
+
+Carta uses [Shiki](https://shiki.matsu.io/) for syntax highlighting. Two default themes are included in the core package, which are set as a [dual theme](https://shiki.matsu.io/guide/dual-themes) to support light and dark mode. If you plan to use a custom one with light/dark modes, make sure to use a dual theme as well.
 
 You can change theme in the options:
 
@@ -62,7 +86,7 @@ const carta = new Carta({
 
 </Code>
 
-If you use a [custom theme](https://shiki.matsu.io/guide/load-theme)(or also a custom language), you need to specify it, so that it gets loaded into the highlighter:
+If you use a [custom theme](https://shiki.matsu.io/guide/load-theme)(or a custom language), you need to provide it inside the options, so that it gets loaded into the highlighter:
 
 <Code>
 

From cc79b252881236fa6e7e2aee25c9cfc1580a171c Mon Sep 17 00:00:00 2001
From: BearToCode <davidebasso03@gmail.com>
Date: Wed, 1 May 2024 16:35:47 +0200
Subject: [PATCH 13/21] docs: add missing copy button

---
 docs/src/pages/editing-styles.svelte.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/src/pages/editing-styles.svelte.md b/docs/src/pages/editing-styles.svelte.md
index a695761..81736ed 100644
--- a/docs/src/pages/editing-styles.svelte.md
+++ b/docs/src/pages/editing-styles.svelte.md
@@ -49,6 +49,8 @@ By using the `theme` property in `<MarkdownEditor>` you can differentiate the th
 
 When using dark mode, there are two different themes that have to be changed: the editor theme and the one used for syntax highlighting:
 
+<Code>
+
 ```css
 /* Editor dark mode */
 /* Only if you are using the default theme */
@@ -69,6 +71,8 @@ html.dark .shiki span {
 }
 ```
 
+</Code>
+
 ## Changing Markdown input color theme
 
 Carta uses [Shiki](https://shiki.matsu.io/) for syntax highlighting. Two default themes are included in the core package, which are set as a [dual theme](https://shiki.matsu.io/guide/dual-themes) to support light and dark mode. If you plan to use a custom one with light/dark modes, make sure to use a dual theme as well.

From 34d4f400e6675914daf87651b60a6df1ebe996a4 Mon Sep 17 00:00:00 2001
From: BearToCode <davidebasso03@gmail.com>
Date: Wed, 1 May 2024 18:15:42 +0200
Subject: [PATCH 14/21] docs: fix wrong name for Plugins

---
 docs/src/pages/migration.svelte.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/pages/migration.svelte.md b/docs/src/pages/migration.svelte.md
index 1a2383c..1241d61 100644
--- a/docs/src/pages/migration.svelte.md
+++ b/docs/src/pages/migration.svelte.md
@@ -38,7 +38,7 @@ Many exports have been renamed to make them less verbose:
 - `CartaRenderer` -> `Markdown` (old one still supported);
 - `CartaEvent` -> `Event`;
 - `CartaEventType` -> `EventType`;
-- `CartaExtension` -> `Extension`;
+- `CartaExtension` -> `Plugin`;
 - `CartaExtensionComponent` -> `ExtensionComponent`;
 - `CartaOptions` -> `Options`;
 - `CartaHistory` -> `TextAreaHistory`;

From eb114a73114324681c933fada6e6ee0763073848 Mon Sep 17 00:00:00 2001
From: BearToCode <davidebasso03@gmail.com>
Date: Wed, 1 May 2024 18:21:40 +0200
Subject: [PATCH 15/21] docs: small fix in style

---
 docs/src/pages/migration.svelte.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/pages/migration.svelte.md b/docs/src/pages/migration.svelte.md
index 1241d61..72d25dc 100644
--- a/docs/src/pages/migration.svelte.md
+++ b/docs/src/pages/migration.svelte.md
@@ -24,8 +24,8 @@ import 'carta-md/light.css'; // 👈 To be removed!
 And also update the default theme. Previous based selectors should be removed:
 
 ```css
+/* 👇 To be removed! */
 [class*='shj-lang-'] {
-	/* 👈 To be removed! */
 	/* ... */
 }
 ```

From 0ff9e5b124a70ca2f3d76570a77aaeae1892c6d6 Mon Sep 17 00:00:00 2001
From: BearToCode <davidebasso03@gmail.com>
Date: Thu, 2 May 2024 11:26:12 +0200
Subject: [PATCH 16/21] docs: add guide on using Svelte components

---
 .../src/lib/components/sidebar/Sidebar.svelte |   6 +
 docs/src/lib/styles/markdown.scss             |   6 +
 docs/src/pages/using-components.svelte.md     | 217 ++++++++++++++++++
 3 files changed, 229 insertions(+)
 create mode 100644 docs/src/pages/using-components.svelte.md

diff --git a/docs/src/lib/components/sidebar/Sidebar.svelte b/docs/src/lib/components/sidebar/Sidebar.svelte
index b02930c..cb82c46 100644
--- a/docs/src/lib/components/sidebar/Sidebar.svelte
+++ b/docs/src/lib/components/sidebar/Sidebar.svelte
@@ -45,6 +45,12 @@
 		<span class="text-[0.95rem]">Community Plugins</span>
 	</SidebarLink>
 
+	<!-- Using Svelte Components -->
+	<SidebarLink href="/using-components">
+		<iconify-icon icon="ri:svelte-fill" class="text-xl"></iconify-icon>
+		<span class="text-[0.95rem]">Using Components</span>
+	</SidebarLink>
+
 	<h3 class="mb-3 ml-4 mt-6 text-sm font-medium first:mt-0 last:mb-0">Plugins</h3>
 
 	<!-- Math -->
diff --git a/docs/src/lib/styles/markdown.scss b/docs/src/lib/styles/markdown.scss
index 6cefde8..4f87a64 100644
--- a/docs/src/lib/styles/markdown.scss
+++ b/docs/src/lib/styles/markdown.scss
@@ -46,6 +46,12 @@
 		@apply rounded bg-neutral-800 px-1 text-neutral-50;
 	}
 
+	p, h1, h2, h3 {
+		code {
+			@apply px-1;
+		}
+	}
+
 	.carta-editor code {
 		font-family: 'Fira Code', monospace;
 		background: transparent;
diff --git a/docs/src/pages/using-components.svelte.md b/docs/src/pages/using-components.svelte.md
new file mode 100644
index 0000000..185196b
--- /dev/null
+++ b/docs/src/pages/using-components.svelte.md
@@ -0,0 +1,217 @@
+---
+title: Using Svelte Components
+section: Overview
+---
+
+<script>
+  import Code from '$lib/components/code/Code.svelte';
+</script>
+
+Svelte components can be embedded into the rendered HTML to make certain elements interactive. However, they require a bit more work, as Remark is configured to only render static HTML. To get around this, the idea is to do the following:
+
+1. Create a Unified plugin to isolate the targeted element;
+2. Replace all the elements with the component, after every render.
+
+## Example
+
+Let's say we want to replace all hashtags, such as `#something`, with a custom component. Here is as example of how that could be achieved.
+
+### Parsing the hashtags
+
+First things first: we need to tell the parser that we want to parse hashtags as custom elements. To do this, we it's useful to first install the following packages:
+
+<Code>
+
+```shell
+npm i unist-util-visit
+# Types
+npm i -D unified hast
+```
+
+</Code>
+
+Let's create a Unified plugin. The basic structure of a plugin is the following:
+
+<Code>
+
+```ts
+import type { Plugin as UnifiedPlugin } from 'unified'
+import { SKIP, visit } from 'unist-util-visit'
+
+const unifiedPlugin: UnifiedPlugin<[], hast.Root> = () => {
+	return function (tree) {
+    // Visit every node in the syntax tree
+    visit(tree, (node, index, parent) => {
+      // Do something with the node
+    }
+  }
+}
+```
+
+</Code>
+
+We now want to parse text nodes, so that words such as `#pizza` and `#123` are separated from the rest. This is a possible implementation:
+
+<Code>
+
+```ts
+const unifiedPlugin: UnifiedPlugin<[], hast.Root> = () => {
+	return function (tree) {
+		visit(tree, (node, index, parent) => {
+			// Skip code blocks and their children
+			if (node.type === 'element' && node.tagName === 'pre') return [SKIP];
+			// Skip non-text nodes
+			if (node.type !== 'text') return;
+			const text = node as hast.Text;
+
+			// Parse the text node and replace hashtags with spans
+			const regex = /#(\w+)/g;
+			const children: (hast.Element | hast.Text)[] = [];
+			let lastIndex = 0;
+			let match;
+			while ((match = regex.exec(text.value))) {
+				const before = text.value.slice(lastIndex, match.index);
+				if (before) {
+					children.push({ type: 'text', value: before });
+				}
+				children.push({
+					type: 'element',
+					tagName: 'span',
+					properties: { type: 'hashtag', value: match[1] },
+					children: [{ type: 'text', value: match[0] }]
+				});
+				lastIndex = regex.lastIndex;
+			}
+			if (lastIndex < text.value.length) {
+				children.push({ type: 'text', value: text.value.slice(lastIndex) });
+			}
+
+			// Replace the text node with all the children
+			parent!.children.splice(index!, 1, ...children);
+
+			// Skip the children
+			return [SKIP, index! + children.length];
+		});
+	};
+};
+```
+
+</Code>
+
+If you want a more in-depth guide on writing Unified plugins, you can check out the official [documentation](https://unifiedjs.com/learn/guide/create-a-plugin/).
+
+Notice that hashtags are now replaced with the following:
+
+```html
+<span type="hashtags" value="pizza"> #pizza </span>
+```
+
+### Configuring the transformer
+
+Unified plugins need to be wrapped inside a `UnifiedTransformer` type, to be able to be used in Carta.
+
+<Code>
+
+```ts
+import type { UnifiedTransformer } from 'carta-md';
+
+const hashtagTransformer: UnifiedTransformer<'sync'> = {
+	execution: 'sync', // Sync, since the plugin is synchronous
+	type: 'rehype', // Rehype, since it operates on HTML
+	transform({ processor }) {
+		processor.use(unifiedPlugin);
+	}
+};
+```
+
+</Code>
+
+### Mounting the components
+
+We now want to replace the generated hashtag placeholders with the following element:
+
+<Code>
+
+```svelte
+<!-- Hashtag.svelte -->
+<script>
+	export let value;
+</script>
+
+<button
+	on:click={() => {
+		console.log('Hashtag clicked!');
+	}}
+>
+	#{value}
+</button>
+```
+
+</Code>
+
+To do that, we create a listener that:
+
+1. Finds all the previous placeholders;
+2. Mounts the component next to them;
+3. Removes the placeholders.
+
+<Code>
+
+```ts
+import type { Listener } from 'carta-md';
+import Hashtag from './Hashtag.svelte';
+
+const convertHashtags: Listener<'carta-render'> = [
+	'carta-render',
+	function onRender({ detail: { carta } }) {
+		const rendererContainer = carta.renderer?.container;
+		if (!rendererContainer) return;
+
+		// Find all hashtag spans and replace them with Svelte components
+		const hashtagSpans = rendererContainer.querySelectorAll('span[type="hashtag"]');
+		for (const span of hashtagSpans) {
+			const hashtag = span.getAttribute('value') ?? '';
+
+			new Hashtag({
+				target: span.parentElement!,
+				anchor: span,
+				props: { value: hashtag }
+			});
+
+			span.remove();
+		}
+	}
+];
+```
+
+</Code>
+
+### Using the plugin
+
+Let's now create a Plugin with the transformer and the listener:
+
+<Code>
+
+```ts
+import type { Plugin } from 'carta-md';
+
+export const hashtag = (): Plugin => ({
+	transformers: [hashtagTransformer],
+	listeners: [convertHashtags]
+});
+```
+
+</Code>
+
+We can now use the plugin with the following:
+
+```ts
+import { Carta } from 'carta-md';
+
+const carta = new Carta({
+	// ...
+	extensions: [hashtag()]
+});
+```
+
+You can find the example source code [here](https://github.com/BearToCode/svelte-in-carta-example).

From 8e5803a1c4938ed5517c18f753983b5adb321af0 Mon Sep 17 00:00:00 2001
From: BearToCode <davidebasso03@gmail.com>
Date: Thu, 2 May 2024 11:30:35 +0200
Subject: [PATCH 17/21] docs: fix style check issue

---
 docs/src/lib/styles/markdown.scss | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/docs/src/lib/styles/markdown.scss b/docs/src/lib/styles/markdown.scss
index 4f87a64..61eb539 100644
--- a/docs/src/lib/styles/markdown.scss
+++ b/docs/src/lib/styles/markdown.scss
@@ -46,7 +46,10 @@
 		@apply rounded bg-neutral-800 px-1 text-neutral-50;
 	}
 
-	p, h1, h2, h3 {
+	p,
+	h1,
+	h2,
+	h3 {
 		code {
 			@apply px-1;
 		}

From 486a8857044b44bf36095f003c1422552cd1b8d2 Mon Sep 17 00:00:00 2001
From: BearToCode <davidebasso03@gmail.com>
Date: Thu, 2 May 2024 17:11:26 +0200
Subject: [PATCH 18/21] docs: specify to load the language into the highlighter

---
 packages/plugin-code/README.md | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/plugin-code/README.md b/packages/plugin-code/README.md
index 1f0dc18..cbb5c68 100644
--- a/packages/plugin-code/README.md
+++ b/packages/plugin-code/README.md
@@ -18,7 +18,7 @@ import '@cartamd/plugin-code/default.css';
 
 ### Using the default highlighter
 
-Carta comes with a default highlighter that matches the one used to highlight markdown in the editor and is used by default (Shiki). If you want to use a theme different from the one used to highlight Markdown, you can specify it in the options.
+Carta comes with a default highlighter that matches the one used to highlight markdown in the editor and is used by default (Shiki). If you want to use a theme different from the one used to highlight Markdown, you can specify it in the options. Remember to also have it loaded into the highlighter, by specifying it in `shikiOptions`.
 
 ```ts
 const carta = new Carta({
@@ -27,7 +27,10 @@ const carta = new Carta({
 		code({
 			theme: 'ayu-light'
 		})
-	]
+	],
+	shikiOptions: {
+		themes: ['ayu-light']
+	}
 });
 ```
 

From 3fd18a6796989a0d85a11e78e28ec10fcbcb995b Mon Sep 17 00:00:00 2001
From: BearToCode <davidebasso03@gmail.com>
Date: Thu, 2 May 2024 17:26:17 +0200
Subject: [PATCH 19/21] fix: update shiki, fix latex highlighting issues

---
 packages/carta-md/package.json    |  2 +-
 packages/plugin-code/package.json |  2 +-
 pnpm-lock.yaml                    | 14 ++++++++++++--
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/carta-md/package.json b/packages/carta-md/package.json
index e1eeb05..bc074ef 100644
--- a/packages/carta-md/package.json
+++ b/packages/carta-md/package.json
@@ -39,7 +39,7 @@
 		"remark-gfm": "^4.0.0",
 		"remark-parse": "^11.0.0",
 		"remark-rehype": "^11.1.0",
-		"shiki": "^1.3.0",
+		"shiki": "^1.4.0",
 		"unified": "^11.0.4"
 	},
 	"peerDependencies": {
diff --git a/packages/plugin-code/package.json b/packages/plugin-code/package.json
index e57937b..98d68df 100644
--- a/packages/plugin-code/package.json
+++ b/packages/plugin-code/package.json
@@ -16,7 +16,7 @@
 		"build": "tsc && tscp"
 	},
 	"devDependencies": {
-		"@shikijs/rehype": "^1.3.0",
+		"@shikijs/rehype": "^1.4.0",
 		"@types/node": "^18.16.3",
 		"carta-md": "workspace:*",
 		"typescript": "^5.0.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f2eb6c4..376b0ad 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -172,8 +172,8 @@ importers:
         specifier: ^11.1.0
         version: 11.1.0
       shiki:
-        specifier: ^1.3.0
-        version: 1.3.0
+        specifier: ^1.4.0
+        version: 1.4.0
       svelte:
         specifier: ^3.54.0 || ^4.0.0
         version: 4.2.2
@@ -1426,6 +1426,10 @@ packages:
     resolution: {integrity: sha512-7fedsBfuILDTBmrYZNFI8B6ATTxhQAasUHllHmjvSZPnoq4bULWoTpHwmuQvZ8Aq03/tAa2IGo6RXqWtHdWaCA==}
     dev: false
 
+  /@shikijs/core@1.4.0:
+    resolution: {integrity: sha512-CxpKLntAi64h3j+TwWqVIQObPTED0FyXLHTTh3MKXtqiQNn2JGcMQQ362LftDbc9kYbDtrksNMNoVmVXzKFYUQ==}
+    dev: false
+
   /@shikijs/rehype@1.3.0:
     resolution: {integrity: sha512-CknEidx0ZTg3TeYAPU4ah8cr31a16neBbMyQ5kwAVdkloCe65uhQp+C/FEFs8NRir4eU5XCDA/+w2v5wnN6zgQ==}
     dependencies:
@@ -6441,6 +6445,12 @@ packages:
       '@shikijs/core': 1.3.0
     dev: false
 
+  /shiki@1.4.0:
+    resolution: {integrity: sha512-5WIn0OL8PWm7JhnTwRWXniy6eEDY234mRrERVlFa646V2ErQqwIFd2UML7e0Pq9eqSKLoMa3Ke+xbsF+DAuy+Q==}
+    dependencies:
+      '@shikijs/core': 1.4.0
+    dev: false
+
   /signal-exit@3.0.7:
     resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
     dev: true

From a303834127118e78a0e4d81dbe6930665f81c141 Mon Sep 17 00:00:00 2001
From: BearToCode <davidebasso03@gmail.com>
Date: Thu, 2 May 2024 19:26:54 +0200
Subject: [PATCH 20/21] build: fix shiki version difference

---
 packages/plugin-code/package.json |  2 +-
 pnpm-lock.yaml                    | 28 +++++++++-------------------
 2 files changed, 10 insertions(+), 20 deletions(-)

diff --git a/packages/plugin-code/package.json b/packages/plugin-code/package.json
index 98d68df..0da3535 100644
--- a/packages/plugin-code/package.json
+++ b/packages/plugin-code/package.json
@@ -30,7 +30,7 @@
 	],
 	"version": "4.0.0",
 	"dependencies": {
-		"@shikijs/rehype": "^1.3.0",
+		"@shikijs/rehype": "^1.4.0",
 		"unified": "^11.0.4"
 	},
 	"keywords": [
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 376b0ad..1968455 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -297,8 +297,8 @@ importers:
   packages/plugin-code:
     dependencies:
       '@shikijs/rehype':
-        specifier: ^1.3.0
-        version: 1.3.0
+        specifier: ^1.4.0
+        version: 1.4.0
       unified:
         specifier: ^11.0.4
         version: 11.0.4
@@ -1422,29 +1422,25 @@ packages:
       - supports-color
     dev: true
 
-  /@shikijs/core@1.3.0:
-    resolution: {integrity: sha512-7fedsBfuILDTBmrYZNFI8B6ATTxhQAasUHllHmjvSZPnoq4bULWoTpHwmuQvZ8Aq03/tAa2IGo6RXqWtHdWaCA==}
-    dev: false
-
   /@shikijs/core@1.4.0:
     resolution: {integrity: sha512-CxpKLntAi64h3j+TwWqVIQObPTED0FyXLHTTh3MKXtqiQNn2JGcMQQ362LftDbc9kYbDtrksNMNoVmVXzKFYUQ==}
     dev: false
 
-  /@shikijs/rehype@1.3.0:
-    resolution: {integrity: sha512-CknEidx0ZTg3TeYAPU4ah8cr31a16neBbMyQ5kwAVdkloCe65uhQp+C/FEFs8NRir4eU5XCDA/+w2v5wnN6zgQ==}
+  /@shikijs/rehype@1.4.0:
+    resolution: {integrity: sha512-Ba6QHYx+EIEvmqyNy/B49KAz3rXsTfAqYRY3KTZjPWonytokGOiJ1q/FV9l13D/ad6Qv+eWKhkAz6ITxx6ziFA==}
     dependencies:
-      '@shikijs/transformers': 1.3.0
+      '@shikijs/transformers': 1.4.0
       '@types/hast': 3.0.4
       hast-util-to-string: 3.0.0
-      shiki: 1.3.0
+      shiki: 1.4.0
       unified: 11.0.4
       unist-util-visit: 5.0.0
     dev: false
 
-  /@shikijs/transformers@1.3.0:
-    resolution: {integrity: sha512-3mlpg2I9CjhjE96dEWQOGeCWoPcyTov3s4aAsHmgvnTHa8MBknEnCQy8/xivJPSpD+olqOqIEoHnLfbNJK29AA==}
+  /@shikijs/transformers@1.4.0:
+    resolution: {integrity: sha512-kzvlWmWYYSeaLKRce/kgmFFORUtBtFahfXRKndor0b60ocYiXufBQM6d6w1PlMuUkdk55aor9xLvy9wy7hTEJg==}
     dependencies:
-      shiki: 1.3.0
+      shiki: 1.4.0
     dev: false
 
   /@sveltejs/adapter-auto@3.1.1(@sveltejs/kit@2.5.4):
@@ -6439,12 +6435,6 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /shiki@1.3.0:
-    resolution: {integrity: sha512-9aNdQy/etMXctnPzsje1h1XIGm9YfRcSksKOGqZWXA/qP9G18/8fpz5Bjpma8bOgz3tqIpjERAd6/lLjFyzoww==}
-    dependencies:
-      '@shikijs/core': 1.3.0
-    dev: false
-
   /shiki@1.4.0:
     resolution: {integrity: sha512-5WIn0OL8PWm7JhnTwRWXniy6eEDY234mRrERVlFa646V2ErQqwIFd2UML7e0Pq9eqSKLoMa3Ke+xbsF+DAuy+Q==}
     dependencies:

From 21775454544fdc4294524eac6e266477ce6c206b Mon Sep 17 00:00:00 2001
From: BearToCode <davidebasso03@gmail.com>
Date: Thu, 2 May 2024 19:28:12 +0200
Subject: [PATCH 21/21] docs: fix grammar

---
 docs/src/pages/using-components.svelte.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/using-components.svelte.md b/docs/src/pages/using-components.svelte.md
index 185196b..f301c51 100644
--- a/docs/src/pages/using-components.svelte.md
+++ b/docs/src/pages/using-components.svelte.md
@@ -18,7 +18,7 @@ Let's say we want to replace all hashtags, such as `#something`, with a custom c
 
 ### Parsing the hashtags
 
-First things first: we need to tell the parser that we want to parse hashtags as custom elements. To do this, we it's useful to first install the following packages:
+First things first: we need to tell the parser that we want to parse hashtags as custom elements. To do this, it's useful to first install the following packages:
 
 <Code>
 
@@ -103,7 +103,7 @@ If you want a more in-depth guide on writing Unified plugins, you can check out
 Notice that hashtags are now replaced with the following:
 
 ```html
-<span type="hashtags" value="pizza"> #pizza </span>
+<span type="hashtag" value="pizza"> #pizza </span>
 ```
 
 ### Configuring the transformer