How can I use VueNodeViewRenderer with addInputRules whiling maintaining the node textContent?

[mcfarljw]

I've been following the Vue guide for custom extensions (https://tiptap.dev/docs/editor/extensions/custom-extensions/node-views/vue) and have been having troubles when adding custom input rules (seeaddInputRules). What I want is when a user types [[world]] it treats it as <token>world</token>. It's kind of working but the world text is getting omitted leaving just [[ ]] with an empty element in the middle. Any thoughts?

Reproduction Link:
https://stackblitz.com/edit/nuxt-starter-muodjz?file=tiptap%2FToken.ts,tiptap%2FToken.vue

// Token.ts
import {
  Node,
  VueNodeViewRenderer,
  mergeAttributes,
  nodeInputRule,
} from '@tiptap/vue-3';

import Component from '@/tiptap/Token.vue';

export interface TokenOptions {
  HTMLAttributes: Record<string, any>;
}

export const Token = Node.create<TokenOptions>({
  name: 'token',
  group: 'inline',
  inline: true,
  content: 'inline*',
  defining: true,
  addOptions() {
    return {
      HTMLAttributes: {},
    };
  },
  parseHTML() {
    return [
      {
        tag: 'token',
      },
    ];
  },
  renderHTML({ HTMLAttributes }) {
    return [
      'token',
      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
      0,
    ];
  },
  addNodeView() {
    // eslint-disable-next-line ts/no-unsafe-argument
    return VueNodeViewRenderer(Component);
  },
  addInputRules() {
    return [
      nodeInputRule({
        find: /\[\[(.*?)\]\]/g,
        type: this.type,
      }),
    ];
  },
});

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

const props = defineProps({
  ...nodeViewProps,
});
</script>

<template>
  <NodeViewWrapper
    style="border: 1px solid green; display: inline; padding: 4px"
  >
    <span style="color: green">{{ props.node.textContent }}</span>
  </NodeViewWrapper>
</template>

[davitv]

Same issue here but with react node.