docs(add docs for anchor plugin): add docs for anchor plugin

Add docs for anchor plugin

README.md

@@ -50,6 +50,7 @@ Differently from most editors, Carta includes neither ProseMirror nor CodeMirror
 - **Emojis**, with included search (plugin);
 - **Tikz** support (plugin);
 - **Attachment** support (plugin);
+- **Anchor** links in headings;
 - Code blocks **syntax highlighting** (plugin).
 
 ## Packages
@@ -63,6 +64,7 @@ Differently from most editors, Carta includes neither ProseMirror nor CodeMirror
 | [plugin-slash](https://www.npmjs.com/package/@cartamd/plugin-slash)           | ![plugin-slash](https://img.shields.io/npm/v/@cartamd/plugin-slash)           | [/plugins/slash](https://beartocode.github.io/carta/plugins/slash)           |
 | [plugin-tikz](https://www.npmjs.com/package/@cartamd/plugin-tikz)             | ![plugin-tikz](https://img.shields.io/npm/v/@cartamd/plugin-tikz)             | [/plugins/tikz](https://beartocode.github.io/carta/plugins/tikz)             |
 | [plugin-attachment](https://www.npmjs.com/package/@cartamd/plugin-attachment) | ![plugin-attachment](https://img.shields.io/npm/v/@cartamd/plugin-attachment) | [/plugins/attachment](https://beartocode.github.io/carta/plugins/attachment) |
+| [plugin-anchor](https://www.npmjs.com/package/@cartamd/plugin-anchor)         | ![plugin-anchor](https://img.shields.io/npm/v/@cartamd/plugin-anchor)         | [/plugins/anchor](https://beartocode.github.io/carta/plugins/anchor)         |
 
 # Getting started
 

docs/src/lib/components/sidebar/Sidebar.svelte

@@ -7,6 +7,7 @@
 		Download,
 		Face,
 		FontFamily,
+		Link2,
 		Slash,
 		File,
 		FontStyle
@@ -83,6 +84,12 @@
 		<span class="text-[0.95rem]">Attachment</span>
 	</SidebarLink>
 
+	<!-- Anchor -->
+	<SidebarLink href="/plugins/anchor">
+		<Link2 class="h-5 w-5" />
+		<span class="text-[0.95rem]">Anchor</span>
+	</SidebarLink>
+
 	<h3 class="mb-3 ml-4 mt-6 text-sm font-medium first:mt-0 last:mb-0">API</h3>
 
 	<!-- Utilities -->

docs/src/pages/introduction.svelte.md

@@ -77,6 +77,14 @@ Carta comes with a set of official plugins for the most common use cases.
 </Card.Header>
 </Card.Root>
 
+<Card.Root href="/plugins/anchor">
+<Card.Header>
+<Icon.Link2 class="w-8 h-8 text-sky-300" />
+<Card.Title>Anchor</Card.Title>
+<Card.Description>Add anchor links to headings.</Card.Description>
+</Card.Header>
+</Card.Root>
+
 </div>
 
 ## Examples

docs/src/pages/plugins/anchor.svelte.md

@@ -0,0 +1,66 @@
+---
+section: Plugins
+title: Anchor
+---
+
+<script>
+	import Code from '$lib/components/code/Code.svelte';
+</script>
+
+This plugin adds `id` attributes and permalinks to headings.
+
+## Installation
+
+<Code>
+
+```
+npm i @cartamd/plugin-anchor
+```
+
+</Code>
+
+## Setup
+
+### Styles
+
+Import the default theme, or create you own:
+
+<Code>
+
+```ts
+import '@cartamd/plugin-anchor/default.css';
+```
+
+</Code>
+
+### Extension
+
+<Code>
+
+```svelte
+<script>
+	import { Carta, CartaEditor } from 'carta-md';
+	import { anchor } from '@cartamd/plugin-anchor';
+
+	const carta = new Carta({
+		extensions: [anchor()]
+	});
+</script>
+
+<CartaEditor {carta} />
+```
+
+</Code>
+
+## Options
+
+Here are the options you can pass to `anchor()`:
+
+```ts
+export interface AnchorExtensionOptions {
+	/**
+	 * Maximum depth of headers to generate anchors for. Defaults to 6.
+	 */
+	maxDepth?: number;
+}
+```