Community Extension:

[MR5553]

Description

import { type MouseEvent } from "react";
import type { Editor } from "@tiptap/react";
import { cn } from "../lib/utils";
import { TextSelection } from "@tiptap/pm/state";
import { Link } from "react-router-dom";
import type { TableOfContentData } from "@tiptap/extension-table-of-contents";

const INDENT = 12;

type TableContentProps = {
Items: TableOfContentData
editor: Editor;
}

export default function TableContent({ Items, editor }: TableContentProps) {

const handleClick = (e: MouseEvent, id: string) => {
    e.preventDefault()

    const element = editor.view.dom.querySelector(`[data-toc-id="${id}"]`)
    if (!element) return

    const pos = editor.view.posAtDOM(element, 0)
    const tr = editor.view.state.tr.setSelection(
        new TextSelection(editor.view.state.doc.resolve(pos))
    )

    editor.view.dispatch(tr)
    editor.view.focus()

    element.scrollIntoView({
        behavior: "smooth",
        block: "start"
    })

    history.replaceState(null, "", `#${id}`)
}

return (
    <aside
        className={cn(
            "group fixed max-w-50 max-h-80 right-4 top-1/2 -translate-y-1/2 z-50 py-2",
            "bg-transparent hover:bg-foreground hover:outline outline-border rounded-lg",
            "transition-all duration-300 ease-out",
            "w-10 hover:w-full overflow-y-auto",
            "[scrollbar-width:none] hover:[scrollbar-width:thin]"
        )}
    >
        <div className="w-full h-full flex flex-col gap-1 group">
            {Items.map((item) => (
                <Link
                    to={`#${item.id}`}
                    key={item.id}
                    title={item.textContent}
                    onClick={e => handleClick(e, item.id)}
                    style={{ paddingLeft: item.level * INDENT }}
                    className={cn(
                        "flex items-center relative truncate h-5",
                        { "text-blue-600": item.isActive }
                    )}
                >
                    <div
                        className="absolute w-full h-0.5 bg-muted hover:opacity-0 rounded-full transition-opacity ease-out group-hover:opacity-0"
                    />
                    <span
                        className={cn(
                            "text-xs py-1 text-muted whitespace-nowrap",
                            "opacity-0 group-hover:opacity-100",
                            "transition-opacity duration-300 ease-out",
                            { "text-blue-600": item.isActive }
                        )}

                    >
                        {item.textContent}
                    </span>
                </Link>
            ))}
        </div>
    </aside>
);

}

Installation

import { type MouseEvent } from "react";
import type { Editor } from "@tiptap/react";
import { cn } from "../lib/utils";
import { TextSelection } from "@tiptap/pm/state";
import { Link } from "react-router-dom";
import type { TableOfContentData } from "@tiptap/extension-table-of-contents";

const INDENT = 12;

type TableContentProps = {
Items: TableOfContentData
editor: Editor;
}

export default function TableContent({ Items, editor }: TableContentProps) {

const handleClick = (e: MouseEvent, id: string) => {
    e.preventDefault()

    const element = editor.view.dom.querySelector(`[data-toc-id="${id}"]`)
    if (!element) return

    const pos = editor.view.posAtDOM(element, 0)
    const tr = editor.view.state.tr.setSelection(
        new TextSelection(editor.view.state.doc.resolve(pos))
    )

    editor.view.dispatch(tr)
    editor.view.focus()

    element.scrollIntoView({
        behavior: "smooth",
        block: "start"
    })

    history.replaceState(null, "", `#${id}`)
}

return (
    <aside
        className={cn(
            "group fixed max-w-50 max-h-80 right-4 top-1/2 -translate-y-1/2 z-50 py-2",
            "bg-transparent hover:bg-foreground hover:outline outline-border rounded-lg",
            "transition-all duration-300 ease-out",
            "w-10 hover:w-full overflow-y-auto",
            "[scrollbar-width:none] hover:[scrollbar-width:thin]"
        )}
    >
        <div className="w-full h-full flex flex-col gap-1 group">
            {Items.map((item) => (
                <Link
                    to={`#${item.id}`}
                    key={item.id}
                    title={item.textContent}
                    onClick={e => handleClick(e, item.id)}
                    style={{ paddingLeft: item.level * INDENT }}
                    className={cn(
                        "flex items-center relative truncate h-5",
                        { "text-blue-600": item.isActive }
                    )}
                >
                    <div
                        className="absolute w-full h-0.5 bg-muted hover:opacity-0 rounded-full transition-opacity ease-out group-hover:opacity-0"
                    />
                    <span
                        className={cn(
                            "text-xs py-1 text-muted whitespace-nowrap",
                            "opacity-0 group-hover:opacity-100",
                            "transition-opacity duration-300 ease-out",
                            { "text-blue-600": item.isActive }
                        )}

                    >
                        {item.textContent}
                    </span>
                </Link>
            ))}
        </div>
    </aside>
);

}

Usage

import { type MouseEvent } from "react";
import type { Editor } from "@tiptap/react";
import { cn } from "../lib/utils";
import { TextSelection } from "@tiptap/pm/state";
import { Link } from "react-router-dom";
import type { TableOfContentData } from "@tiptap/extension-table-of-contents";

const INDENT = 12;

type TableContentProps = {
Items: TableOfContentData
editor: Editor;
}

export default function TableContent({ Items, editor }: TableContentProps) {

const handleClick = (e: MouseEvent, id: string) => {
    e.preventDefault()

    const element = editor.view.dom.querySelector(`[data-toc-id="${id}"]`)
    if (!element) return

    const pos = editor.view.posAtDOM(element, 0)
    const tr = editor.view.state.tr.setSelection(
        new TextSelection(editor.view.state.doc.resolve(pos))
    )

    editor.view.dispatch(tr)
    editor.view.focus()

    element.scrollIntoView({
        behavior: "smooth",
        block: "start"
    })

    history.replaceState(null, "", `#${id}`)
}

return (
    <aside
        className={cn(
            "group fixed max-w-50 max-h-80 right-4 top-1/2 -translate-y-1/2 z-50 py-2",
            "bg-transparent hover:bg-foreground hover:outline outline-border rounded-lg",
            "transition-all duration-300 ease-out",
            "w-10 hover:w-full overflow-y-auto",
            "[scrollbar-width:none] hover:[scrollbar-width:thin]"
        )}
    >
        <div className="w-full h-full flex flex-col gap-1 group">
            {Items.map((item) => (
                <Link
                    to={`#${item.id}`}
                    key={item.id}
                    title={item.textContent}
                    onClick={e => handleClick(e, item.id)}
                    style={{ paddingLeft: item.level * INDENT }}
                    className={cn(
                        "flex items-center relative truncate h-5",
                        { "text-blue-600": item.isActive }
                    )}
                >
                    <div
                        className="absolute w-full h-0.5 bg-muted hover:opacity-0 rounded-full transition-opacity ease-out group-hover:opacity-0"
                    />
                    <span
                        className={cn(
                            "text-xs py-1 text-muted whitespace-nowrap",
                            "opacity-0 group-hover:opacity-100",
                            "transition-opacity duration-300 ease-out",
                            { "text-blue-600": item.isActive }
                        )}

                    >
                        {item.textContent}
                    </span>
                </Link>
            ))}
        </div>
    </aside>
);

}

Type

Node

Other

import { type MouseEvent } from "react";
import type { Editor } from "@tiptap/react";
import { cn } from "../lib/utils";
import { TextSelection } from "@tiptap/pm/state";
import { Link } from "react-router-dom";
import type { TableOfContentData } from "@tiptap/extension-table-of-contents";

const INDENT = 12;

type TableContentProps = {
Items: TableOfContentData
editor: Editor;
}

export default function TableContent({ Items, editor }: TableContentProps) {

const handleClick = (e: MouseEvent, id: string) => {
    e.preventDefault()

    const element = editor.view.dom.querySelector(`[data-toc-id="${id}"]`)
    if (!element) return

    const pos = editor.view.posAtDOM(element, 0)
    const tr = editor.view.state.tr.setSelection(
        new TextSelection(editor.view.state.doc.resolve(pos))
    )

    editor.view.dispatch(tr)
    editor.view.focus()

    element.scrollIntoView({
        behavior: "smooth",
        block: "start"
    })

    history.replaceState(null, "", `#${id}`)
}

return (
    <aside
        className={cn(
            "group fixed max-w-50 max-h-80 right-4 top-1/2 -translate-y-1/2 z-50 py-2",
            "bg-transparent hover:bg-foreground hover:outline outline-border rounded-lg",
            "transition-all duration-300 ease-out",
            "w-10 hover:w-full overflow-y-auto",
            "[scrollbar-width:none] hover:[scrollbar-width:thin]"
        )}
    >
        <div className="w-full h-full flex flex-col gap-1 group">
            {Items.map((item) => (
                <Link
                    to={`#${item.id}`}
                    key={item.id}
                    title={item.textContent}
                    onClick={e => handleClick(e, item.id)}
                    style={{ paddingLeft: item.level * INDENT }}
                    className={cn(
                        "flex items-center relative truncate h-5",
                        { "text-blue-600": item.isActive }
                    )}
                >
                    <div
                        className="absolute w-full h-0.5 bg-muted hover:opacity-0 rounded-full transition-opacity ease-out group-hover:opacity-0"
                    />
                    <span
                        className={cn(
                            "text-xs py-1 text-muted whitespace-nowrap",
                            "opacity-0 group-hover:opacity-100",
                            "transition-opacity duration-300 ease-out",
                            { "text-blue-600": item.isActive }
                        )}

                    >
                        {item.textContent}
                    </span>
                </Link>
            ))}
        </div>
    </aside>
);

}