[Bug]: Hidden cursor on custom component who gets wrapped to new line

[mathix420]

Affected Packages

@tiptap/vue-3, @tiptap/core

Version(s)

2.11.5

Bug Description

See how the cursor is hidden on this case

screen-capture.28.webm

Browser Used

Chrome

Code Example URL

No response

Expected Behavior

Cursor should be visible the same way it is for the other fields.

Additional Context (Optional)

Custom component:

    <NodeViewWrapper
      as="span"
      class="relative inline-flex items-center justify-start gap-1 rounded-md bg-primary-600/5 px-1.5 py-0.5 align-baseline text-primary-600"
    >
      <span
        v-if="isEmpty"
        contenteditable="false"
        class="pointer-events-none line-clamp-1 leading-5 text-primary-300"
      >
        {{ placeholder }}
      </span>
      <NodeViewContent
        as="span"
        :class="[node.attrs.size === 'multiline' ? 'flex': 'inline-flex', isEmpty ? 'absolute inset-x-1.5 inset-y-0.5': '']"
        class="inline leading-5 outline-none prose-strong:!text-primary-600"
      />
    </NodeViewWrapper>

Dependency Updates

• Yes, I've updated all my dependencies.

[litingyes]

I think that under no circumstances should you customize DOM elements as span in editable DOM, because it have special processing in prosemirror and may cause unpredictable problems.

[mathix420]

Found the issue, it was just css/chrome issue making the NodeViewContent a display: inline; did the trick.

@litingyes you might be right, I'll keep this in mind in case I have any other weird issue, for now everything works like a charm.