Getting previous node type

[ajmnz]

I want to remove the top margin of the headings if the heading is the first block or if the above element is a horizontal rule.

To achieve this, I need some way of getting the heading element's path/location, and then using something like getAboveNode to check if its type is of HorizontalRulePlugin.key.

So, how do I get the previous element / how do I get an element's location?

const Heading = withRef<typeof HeadingElementVariants>(
  ({ children, isFirstBlock: _, variant = "h1", ...props }, ref) => {
    const { element } = props;

    const isFirstBlock = useEditorSelector(
      (editor) => {
        return (
          // First block
          element === editor.children[0] ||
          // Previous is `hr`
          getAboveNode(editor, {
            // at: <get heading element location>?
          })?.[0].type === HorizontalRulePlugin.key
        );
      },
      [element]
    );

    return (
     // ...
    );
  }
);

[zbeyens]

By Cursor:

import { findNodePath } from '@udecode/plate-common/react';

const Heading = withRef<typeof HeadingElementVariants>(
  ({ children, isFirstBlock: _, variant = "h1", ...props }, ref) => {
    const { element } = props;

    const isFirstBlock = useEditorSelector(
      (editor) => {
        const path = findNodePath(editor, element);
        
        if (!path) return false;

        if (path.length === 1 && path[0] === 0) {
          return true; // It's the first block
        }

        const previousNode = getPreviousNode(editor, { at: path });
        return previousNode?.[0].type === HorizontalRulePlugin.key;
      },
      [element]
    );

    return (
      // ...
    );
  }
);

[12joan]

As @zbeyens said, you can get the path of the heading using findNodePath(editor, element).

However, you can do what you want much more easily using pure CSS. https://codepen.io/12joan/pen/QWXZJOG