Vue3: CustomHeadings: Wrapper element to pass the attributes to the headings

[demiro]

what I am trying to do now is a simple extension on the headings - making them draggable

import Heading from "@tiptap/extension-heading";
import CustomHeadingComponent from "./CustomHeadingComponent.vue";
import { VueNodeViewRenderer } from "@tiptap/vue-3";

export default Heading.extend({
  draggable: true,
  addNodeView() {
    return VueNodeViewRenderer(CustomHeadingComponent);
  },
});

and in turn, this is CustomHeadingsComponent:

<script setup lang="ts">
  import { NodeViewWrapper, NodeViewContent, nodeViewProps } from "@tiptap/vue-3";

  const props = defineProps(nodeViewProps);

  const headingLevel = () => `h${props.node.attrs.level}`;
</script>

<template>
  <NodeViewWrapper class="draggable-item">
    <div class="drag-handle" contenteditable="false" draggable="true" data-drag-handle />
    <NodeViewContent class="heading-content" :as="headingLevel()" />
  </NodeViewWrapper>
</template>

It works, but it messes with my Plcaheolder extension, because instead of putting the data-placeholder="Enter heading ..." attribute to the actual heading element, it sets it to the wrapper... the same goes for "is-empty" class.
So this is frustrating enough... so what I wanted to do is I tried to get the parent classes from the wrapper and pass it to the NodeViewContent ... but I couldn't find the way to do it.

So I tried to fix it with CSS ... so instead of putting .is-empty:before ... I was then targetting .is-empty>h1, .is-empty>h2, .... {&:before ....} .... but there is another issue, with

&::before {
  content: attr(data-placeholder);
  position: absolute;
  color: #ced4da;
  pointer-events: none;
  height: 0;
}

data-placeholder is supposed to be on the heading el, to read it's value....

all of this seems very hacky to me...

does somebody have an idea of how to sort this?