Tiptap: Example wanted: Create a Node as a Vue Component with an Imported Component

[aalenliang]

Hi, i read the README and find we can render a Node as a Vue Component, and the example code is about how to return an object.

  // return a vue component
  // this can be an object or an imported component
  get view() {
    return {
        props, computed, template...
    } 
  }

but i really want an example about how to return an imported component in this case.

[aalenliang]

Just find out that's super easy.
i wrap my component to get the props from node.attr, and just return it from the view() method.

~/components/Video.vue

<template>
  <fancy-video
    :src="src"
    :poster="poster"
  />
</template>

<script>
import FancyVideo from '~/components/FancyVideo'

export default {
  components: {
    FancyVideo
  },

  props: {
    node: {
      type: Object
    },

    updateAttrs: {
      type: Function
    },

    editable: {
      type: Boolean
    }
  },

  computed: {
    src: function() {
      return this.node && this.node.attrs.src
    },

    poster: function() {
      return this.node && this.node.attrs.poster
    }
  }
}
</script>

Video.js

import { Node } from 'tiptap'
import Component from '~/components/Video'

export default class Video extends Node {
  get name() {
    return 'video'
  }

  get schema() {
    return {
      attrs: {
        src: {},
        poster: {
          default: null
        }
      },
      group: 'block',
      draggable: true,
      parseDOM: [
        {
          tag: 'video[src]',
          getAttrs: dom => ({
            src: dom.getAttribute('src'),
            poster: dom.getAttribute('poster')
          })
        }
      ],
      toDOM: node => ['video', node.attrs]
    }
  }

  get view() {
    return Component
  }
}