TipTap Vue кастомный компонент выделяет всю строку, а не выделенное

Сразу ознакомлю кастомный extension Tag.js

    import { mergeAttributes, Node } from "@tiptap/core";
    import { VueNodeViewRenderer } from "@tiptap/vue-3";
    import { markInputRule } from "@tiptap/core";
    import { markPasteRule } from "@tiptap/core";
    import Component from "~/components/Editor/Tag.vue";
    const starInputRegex = /(?:^|\s)((?:\*)((?:[^*]+))(?:\*))$/;
    const starPasteRegex = /(?:^|\s)((?:\*)((?:[^*]+))(?:\*))/g;
    const underscoreInputRegex = /(?:^|\s)((?:_)((?:[^_]+))(?:_))$/;
    const underscorePasteRegex = /(?:^|\s)((?:_)((?:[^_]+))(?:_))/g;
    
    export default Node.create({
      name: "vuetag",
    
      group: "block",
    
      content: "inline*",
      selectable: true,
      parseHTML() {
        return [
          {
            tag: "tag",
          },
        ];
      },
    
      renderHTML({ HTMLAttributes }) {
        return ["tag", mergeAttributes(HTMLAttributes), 0];
      },
    
      addNodeView() {
        return VueNodeViewRenderer(Component);
      },
      addInputRules() {
        return [
          markInputRule({
            find: starInputRegex,
            type: this.type,
          }),
          markInputRule({
            find: underscoreInputRegex,
            type: this.type,
          }),
        ];
      },
    
      addPasteRules() {
        return [
          markPasteRule({
            find: starPasteRegex,
            type: this.type,
          }),
          markPasteRule({
            find: underscorePasteRegex,
            type: this.type,
          }),
        ];
      },
      addCommands() {
        return {
          setTag:
            () =>
            ({ commands }) => {
              return commands.setNode(this.name);
            },
        };
      },
    });

Компонент Tag.vue

<template>
  <node-view-wrapper>
    <el-tag><node-view-content /></el-tag>
  </node-view-wrapper>
</template>

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

export default {
  components: {
    NodeViewWrapper,
    NodeViewContent,
  },

  props: nodeViewProps,
};
</script>

<style lang="scss"></style>

Есть текст введите сюда описание изображения Хочу допустим, фразу Did you see that? указать как тег. Выделяю эту фразу и нажимаю на кнопку, срабатывается эвент setTag()

Результат получаю такой:введите сюда описание изображения

Проблема в том, что тут вся одна строка становится тегом, то есть внутри компнента Tag.Vue

А должен быть такой резульат как на скриншоте: введите сюда описание изображения

В качестве el-tag брал из https://element-plus.org/en-US/component/tag.html


Ответы (0 шт):