From 67261dd09c526a9f39e358a92fbc14ef2aa5e005 Mon Sep 17 00:00:00 2001
From: Owen Kriz <aolyang@foxmail.com>
Date: Fri, 13 Dec 2024 10:45:33 +0800
Subject: [PATCH] Add Table of Contents component

Implement a fixed Table of Contents (TOC) for the current editing document.

* **App.svelte**
  - Import the new `TableOfContents` component.
  - Add the `TableOfContents` component to the DOM.

* **TableOfContents.svelte**
  - Create a new Svelte component for the Table of Contents.
  - Use the `getEditorContext` function to access the editor state.
  - Render a list of headings from the current document.
  - Add styles for the Table of Contents to be fixed on the side of the editor.

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/aolyang/tiptap-contentful?shareId=XXXX-XXXX-XXXX-XXXX).
---
 example/src/App.svelte                        |  2 +
 example/src/components/TableOfContents.svelte | 92 +++++++++++++++++++
 2 files changed, 94 insertions(+)
 create mode 100644 example/src/components/TableOfContents.svelte

diff --git a/example/src/App.svelte b/example/src/App.svelte
index f3ce692..d46e2c0 100644
--- a/example/src/App.svelte
+++ b/example/src/App.svelte
@@ -12,6 +12,7 @@
     import { setEditorContext } from "@/states/toolbar"
     import { createEditor } from "@/utils/editor"
     import { aligns, headingLevels } from "@/utils/editor-presets"
+    import TableOfContents from "@/components/TableOfContents.svelte"
 
     import { onMount } from "svelte"
     /*
@@ -88,5 +89,6 @@
     <div class="size-full overflow-y-auto px-4">
         <div class="px-10 py-6 max-w-[826px] min-h-full mx-auto bg-white dark:bg-neutral-700 shadow-xl"
              bind:this={divRef}></div>
+        <TableOfContents />
     </div>
 </div>
diff --git a/example/src/components/TableOfContents.svelte b/example/src/components/TableOfContents.svelte
new file mode 100644
index 0000000..f04c1ed
--- /dev/null
+++ b/example/src/components/TableOfContents.svelte
@@ -0,0 +1,92 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import { getEditorContext } from "@/states/toolbar";
+    import EditorTransactionEvent from "@/components/EditorTransactionEvent.svelte";
+
+    const ctx = getEditorContext();
+
+    let headings: { level: number; text: string }[] = [];
+
+    const updateHeadings = () => {
+        const doc = ctx.editor.state.doc;
+        const newHeadings: { level: number; text: string }[] = [];
+
+        doc.descendants((node) => {
+            if (node.type.name === "heading") {
+                newHeadings.push({
+                    level: node.attrs.level,
+                    text: node.textContent,
+                });
+            }
+        });
+
+        headings = newHeadings;
+    };
+
+    onMount(() => {
+        updateHeadings();
+    });
+</script>
+
+<EditorTransactionEvent {updateHeadings} />
+
+<div class="toc">
+    <h2>Table of Contents</h2>
+    <ul>
+        {#each headings as heading}
+            <li class="heading-{heading.level}">
+                <a href="#">{heading.text}</a>
+            </li>
+        {/each}
+    </ul>
+</div>
+
+<style>
+    .toc {
+        position: fixed;
+        top: 120px;
+        right: 20px;
+        width: 200px;
+        background: white;
+        border: 1px solid #ccc;
+        padding: 10px;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    }
+
+    .toc h2 {
+        margin-top: 0;
+    }
+
+    .toc ul {
+        list-style: none;
+        padding-left: 0;
+    }
+
+    .toc li {
+        margin-bottom: 5px;
+    }
+
+    .toc .heading-1 {
+        font-weight: bold;
+    }
+
+    .toc .heading-2 {
+        padding-left: 10px;
+    }
+
+    .toc .heading-3 {
+        padding-left: 20px;
+    }
+
+    .toc .heading-4 {
+        padding-left: 30px;
+    }
+
+    .toc .heading-5 {
+        padding-left: 40px;
+    }
+
+    .toc .heading-6 {
+        padding-left: 50px;
+    }
+</style>