Has anyone built a Table of Content plugin before with PlateJs?

[nabanita-sarkar]

I want to build a Table of Content Area Beside my editor. I think I should make a plugin with platejs for this.
Otherwise I am able to build this with syncing editor value with an external state that is storing the necessary heading elements.

Considering TOC component will reside outside the editor I am not sure what should be the best approach? (Syncing state will get slow I can assume one there are a lot of content in the editor)

[zbeyens]

This could be a plugin, while the UI part is outside Plate.

Instead of updating the ToC on each change, you could override the relevant editor methods.

[12joan]

This sounds like it would be very difficult to keep in sync

[zbeyens]

Debouncing/throttling the sync can be a better option.

[12joan]

I would suggest using the same pattern we usually use for toolbars. Toolbars are very similar to a ToC, since they, too, depend on the state of the editor to show which formatting options are enabled for the current selection.

The recommended solution for toolbars is to wrap both the Plate editor and the toolbar in a PlateProvider. From anywhere inside the PlateProvider, you can call usePlateEditorState to get an editor value that will update on every change.

The performance issue isn't really an issue unless your ToC component takes a particularly long time to render. If that's the case, you could throttle the computation so it runs at most once every 100ms and cache the output (the list of headings) in a state variable. As always, don't prematurely optimise.

[12joan]

If you can't feasibly use a PlateProvider, we provide an editorRef prop as an alternative. You'll want to follow the stateful patten to ensure your ToC stays up to date. https://platejs.org/docs/accessing-editor#with-state

[nabanita-sarkar]

Thank you so much for the guidance!! I will try to proceed with this approach

[nabanita-sarkar]

I am pasting what I did here in case someone searches for this in future. I used PlateProvider as guided by @12joan . And here is how my TableOfContent component looks like -

const TableOfContent = () => {
  const editor = usePlateEditorState<MyValue>();

  return (
    <div className="fixed left-3 top-12 p-6 rounded-md">
      {editor.children.map((el, i) => {
        if (el.type === "h1") {
          return (
            <p key={i}>
              <a href={`#${el.id}`} className="text-lg">
                {el.children?.[0].text as string}
              </a>
            </p>
          );
        } else if (el.type === "h2") {
          return (
            <p key={i}>
              <a href={`#${el.id}`} className="text-lg ml-6">
                {el.children?.[0].text as string}
              </a>
            </p>
          );
        } else if (el.type === "h3") {
          return (
            <p key={i}>
              <a href={`#${el.id}`} className="text-lg ml-12">
                {el.children?.[0].text as string}
              </a>
            </p>
          );
        } else return null;
      })}
    </div>
  );
};

Then I just used this component inside PlateProvider where I want it to show up.
For now I did not use any throttling. If I actually face some performance issue, I will consider that and update here. For now this works and huge thanks to @12joan and @zbeyens

[12joan]

Nice! One small thing: I would recommend using getNodeString(el) for the heading text, since this will work correctly when the heading contains marks or inline elements.