tiptap icon indicating copy to clipboard operation
tiptap copied to clipboard

[Bug]: Issue with Deleting All Text in Custom Node Block Selection

Open ShadiBlitz opened this issue 4 months ago • 0 comments

Affected Packages

core

Version(s)

2.8.0

Bug Description

When the content inside a custom node block does not end with a paragraph type, selecting and deleting all the text causes the cursor to disappear, preventing the user from placing it back inside the block to add or edit content.

Bug video examples:

When content is ending with a bullet list type:

https://github.com/user-attachments/assets/9a9222b7-0da0-4161-9218-dcd3e65d5d1d

When content is ending with a paragraph:

https://github.com/user-attachments/assets/fe2ed969-dbab-47da-a902-db2b651ab177

Steps to Reproduce:

  • Create a custom node block with content that does not end with a paragraph element (e.g., a bullet list).
  • Select all the text inside the block.
  • Delete the selected content.
  • Attempt to place the cursor back inside the block to add new content.

Browser Used

Chrome

Code Example URL

No response

Expected Behavior

After deleting all content, the cursor should remain inside the node block, allowing the user to add new text.

Additional Context (Optional)

// AlertNode.ts
import { mergeAttributes, Node } from '@tiptap/core';
import { VueNodeViewRenderer } from '@tiptap/vue-2';
import AlertComponent from './AlertComponent.vue';

export default Node.create({
  name: 'alert',
  group: 'block',
  content: 'block*',
  parseHTML() {
    return [
      {
        tag: 'alert',
      },
    ];
  },

  renderHTML({ HTMLAttributes }) {
    return ['alert', mergeAttributes(HTMLAttributes), 0];
  },

  addNodeView() {
    return VueNodeViewRenderer(AlertComponent);
  },
});
<!-- AlertComponent.vue -->
<template>
  <NodeViewWrapper>
    <v-alert type="info" class="my-4" text>
      <node-view-content />
    </v-alert>
  </NodeViewWrapper>
</template>

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

export default {
  components: {
    NodeViewWrapper,
    NodeViewContent,
  },
  props: nodeViewProps,
};
</script>

No response

Dependency Updates

  • [X] Yes, I've updated all my dependencies.

ShadiBlitz avatar Oct 13 '24 08:10 ShadiBlitz