How can I make the Table of Contents scroll when using plate view?

[Thebibii]

<div className="relative w-full"> <DisplayPlate value={data.data.longDescription} /> </div>

import { InteractiveViewer } from "../interactive-viewer";

function isValidJSON(str: string): boolean {
  try {
    const parsed = JSON.parse(str);
    return Array.isArray(parsed) && parsed.length > 0;
  } catch {
    return false;
  }
}

// Komponen untuk menampilkan deskripsi
export function DisplayPlate({ value }: { value: string }) {
  if (!isValidJSON(value)) {
    return <div className="whitespace-pre-wrap">{value}</div>;
  }

  const content = JSON.parse(value);

  return <InteractiveViewer value={content} />;
}

import { PlateView, usePlateViewEditor } from "platejs/react";
import { BaseEditorKit } from "./editor-base-kit";

export function InteractiveViewer({ value }: any) {
  const editor = usePlateViewEditor({
    plugins: BaseEditorKit,
    value,
  });

  return <PlateView editor={editor} />;
}

[dosubot[bot]]

Hi @Thebibii! I'm Dosu and I’m helping the plate team.

To make the Table of Contents scrollable in PlateView, apply CSS to the ToC container. By default, the ToC is rendered by the TocElementStatic component inside a SlateElement with the class names mb-1 p-0 but no fixed height or overflow styles. You can target this container or wrap it in a div and add styles like:

<div style={{ maxHeight: '400px', overflow: 'auto' }}>
  {/* ToC content here */}
</div>

Or with Tailwind:

<div className="max-h-96 overflow-auto">
  {/* ToC content here */}
</div>

This makes the ToC scrollable if the list of headings is long. You can also add a custom class to the ToC container for more control. This approach is based on Plate’s own usage and community discussions—no plugin option is needed, just CSS on the container [toc-node-static.tsx].

If your ToC is in a sidebar, apply the scroll styles to the sidebar container. If you want to hide the scrollbar, add a utility like scrollbar-hide [discussion].

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[Thebibii]

Hi @Thebibii! I'm Dosu and I’m helping the plate team.

To make the Table of Contents scrollable in PlateView, apply CSS to the ToC container. By default, the ToC is rendered by the TocElementStatic component inside a SlateElement with the class names mb-1 p-0 but no fixed height or overflow styles. You can target this container or wrap it in a div and add styles like:

<div style={{ maxHeight: '400px', overflow: 'auto' }}>
  {/* ToC content here */}
</div>

Or with Tailwind:

<div className="max-h-96 overflow-auto">
  {/* ToC content here */}
</div>

This makes the ToC scrollable if the list of headings is long. You can also add a custom class to the ToC container for more control. This approach is based on Plate’s own usage and community discussions—no plugin option is needed, just CSS on the container [toc-node-static.tsx].

If your ToC is in a sidebar, apply the scroll styles to the sidebar container. If you want to hide the scrollbar, add a utility like scrollbar-hide [discussion].

To reply, just mention @dosu.

How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other

   

like this?

  const { editor } = props;
  const headingList = getHeadingList(editor);

  return (
    <SlateElement {...props} className="mb-1 p-0">
      <div>
        {headingList.length > 0 ? (
          headingList.map((item) => (
            <Button
              key={item.title}
              variant="ghost"
              className={headingItemVariants({
                depth: item.depth as 1 | 2 | 3,
              })}
            >
              {item.title}
            </Button>
          ))
        ) : (
          <div className="text-gray-500 text-sm">
            Create a heading to display the table of contents.
          </div>
        )}
      </div>
      {props.children}
    </SlateElement>
  );
}```

[Thebibii]

Correct

export function TocElementStatic(props: SlateElementProps) {
  const { editor } = props;
  const headingList = getHeadingList(editor);
  const handleClick = (id: string) => {
    let el = document.querySelector(`[data-block-id="${id}"]`);
    // Jika tidak ketemu, coba data-slate-id
    if (!el) el = document.querySelector(`[data-slate-id="${id}"]`);
    if (el) {
      // Jika perlu offset (misal sticky header), pakai ini:
      // const y = el.getBoundingClientRect().top + window.scrollY - TOP_OFFSET;
      // window.scrollTo({ top: y, behavior: 'smooth' });
      // Kalau tidak perlu offset, cukup:
      el.scrollIntoView({ behavior: "smooth" });
    } else {
      console.log(`Heading with id ${id} not found`);
    }
  };
  return (
    <SlateElement {...props} className="mb-1 p-0">
      <div>
        {headingList.length > 0 ? (
          headingList.map((item) => (
            <Button
              key={item.title}
              variant="ghost"
              className={headingItemVariants({
                depth: item.depth as 1 | 2 | 3,
              })}
              onClick={() => handleClick(item.id)}
            >
              {item.title}
            </Button>
          ))
        ) : (
          <div className="text-gray-500 text-sm">
            Create a heading to display the table of contents.
          </div>
        )}
      </div>
      {props.children}
    </SlateElement>
  );
}