Conditionally Render Block Context Menu Based on Clicked Node in Plate.js

[ThejanNim]

I'm trying to customize the Block Context Menu so that the menu items change depending on which block was right-clicked. For example, I’d like to show different menu options for a heading block vs. a paragraph block.

Right now, I'm not sure how to detect which block was clicked and use that information inside the menu. Is there a recommended way to do this with Plate.js?

I’d appreciate any advice or guidance!

[felixfeng33]

We already support it when right-clicking media nodes in Potion. Here is the relevant code. You may use useBlockSelectionNodes to implement similar functionality.

  const [searchValue] = useComboboxValueState();
  const selectedBlocks = useBlockSelectionNodes();
  const editor = useEditorRef();

  const menuGroups = React.useMemo(() => {
    const isMedia =
      selectedBlocks.length === 1 &&
      selectedBlocks.some((item) =>
        [KEYS.audio, KEYS.file, KEYS.img, KEYS.mediaEmbed, KEYS.video].includes(
          item[0].type as any
        )
      );

    const items = isMedia ? mediaMenuItems : orderedMenuItems;

    return filterMenuGroups(items, searchValue) || items;
  }, [selectedBlocks, searchValue]);