Error - dom.hasAttribute is not a function

[riccardostokker]

Hello everyone!
First of all I'd like to thank you for developing such an awesome tool. Secondly I'd like to ask you for help with something.

Description

I built a component that renders images taken from an API. Each image is identified by the hash of its original file so that the component looks like this: <server-image :hash="hash" />. I'd like to be able to render and insert this component using tiptap.

In order to do this i have created a custom node. I haven't quite figured out how I can implement toDOM and parseDOM for an element that can't be identified by a single tag.

My custom extension is:

import { Node, Plugin } from 'tiptap';

import ServerImage from "~/components/images/ServerImage";

export default class ImageNode extends Node {

  get name() {
    return 'image'
  }

  get schema() {
    return {
      inline: true,
      attrs: {
        hash: {
          default: null
        }
      },
      group: 'inline',
      draggable: true,
    }
  }

  commands({ type }) {
    return attrs => (state, dispatch) => {
      const { selection } = state
      const position = selection.$cursor ? selection.$cursor.pos : selection.$to.pos
      const node = type.create(attrs)
      const transaction = state.tr.insert(position, node)
      dispatch(transaction)
    };
  }
  
  get view() {
    return {
      props: ['node', 'updateAttrs', 'view'],
      components: {ServerImage},
      computed: {
        hash: {
          get() {
            return this.node.attrs.hash
          },
          set(hash) {
            // we cannot update `src` itself because `this.node.attrs` is immutable
            this.updateAttrs({
              hash,
            })
          },
        },
      },
      template: `
        <server-image :hash="hash" />
      `,
    }
  }

}

I added new ImageNode() to my tiptap extensions and created two methods in a fashion similar to the Link example:

      showImageDialog(attrs) {
        console.log("Attrs; ", attrs);
        this.dialog.image.hash = attrs.hash;
        this.dialog.image.enabled = true;
      },
      setImage(command, hash){
        command({hash: hash});
        this.dialog.image.hash = null;
      }

These methods are called from:

            <editor-command
              @click="showImageDialog(getNodeAttrs('image'))"
              icon="mdi-image"
            />

            <image-dialog
              v-model="dialog.image.enabled"
              :search="dialog.image.hash"
              @change="setImage(commands.image, $event)"
            />

The Problem

I'm getting the error dom.hasAttribute is not a function.

Googling the error I noticed a similar problem being reported by another user. It was suggested that this was caused by the wrong Vue.js version, the one without the runtime compiler, but I had already changed that in my Nuxt.js config, so it can't be that.

nuxt.config.js

  build: {
    devtools: true,
    extend(config) {
      config.resolve.alias['vue'] = 'vue/dist/vue.common'
    }
  }

The Plea

Being pretty new to tiptap I would really appreciate if someone could help me out, because I have no idea of what could be causing this. I coded the extension heavily relying on examples.

[riccardostokker]

I have fixed it! I needed to delve a bit deeper into the ProseMirror schema. I'm leaving my solution here hoping it might benefit someone in the future. I had wrongly assumed that the parseDOM and toDOM methods were useless, obviously they aren't. Guess I'm a bit overworked. So if you have a similar problem check out the toDOM and parseDOM methods and the div in which the component is wrapped.

Image.js

import { Node, Plugin } from 'tiptap';

import ServerImage from "~/components/images/ServerImage";

export default class ImageNode extends Node {

  get name() {
    return 'image'
  }

  get schema() {
    return {
      inline: true,
      attrs: {
        hash: {}
      },
      group: 'inline',
      draggable: true,
      parseDOM: [
        {
          tag: '.server-image',
          getAttrs: dom => ({
            hash: dom.getAttribute('hash')
          }),
        },
      ],
      toDOM: node => ['div', {class: 'server-image', 'hash': node.attrs.hash}],
    }
  }

  commands({ type }) {
    return attrs => (state, dispatch) => {
      const { selection } = state
      const position = selection.$cursor ? selection.$cursor.pos : selection.$to.pos
      const node = type.create(attrs)
      const transaction = state.tr.insert(position, node)
      dispatch(transaction)
    };
  }

  get view() {
    return {
      props: ['node', 'updateAttrs', 'view'],
      components: {ServerImage},
      computed: {
        hash: {
          get() {
            return this.node.attrs.hash
          },
          set(hash) {
            // we cannot update `src` itself because `this.node.attrs` is immutable
            this.updateAttrs({
              hash,
            })
          },
        },
      },
      template: `
        <server-image :hash="hash" />
      `,
    }
  }

}

ServerImage.vue

<template>

  <div class="server-image" :hash="hash">
    <v-img
      :alt="alt"
      :aspect-ratio="aspectRatio"
      :gradient="gradient"
      :position="position"
      :src="src"
      :srcset="srcSet"
      v-if="src && srcSet"
    >
      <slot/>
    </v-img>
  </div>

</template>

[hanspagel]

Thanks for sharing!