Tiptap: How to delete node from vue component?

[laurensiusadi]

I'm making custom TodoItem, using the default TodoItem node as the base. I just move all inside view() function to a vue component.

import { Node } from 'tiptap'
import { splitToDefaultListItem, liftListItem } from 'tiptap-commands'
import TodoItemComponent from './TodoItemComponent'

export default class TodoItem extends Node {

  get name() {
    return 'todo_item'
  }

  get view() {
    return TodoItemComponent
  }

  get schema() {
    return {
      ... ommited ...
    }
  }

  keys({ type }) {
    return {
      Enter: splitToDefaultListItem(type),
      'Shift-Tab': liftListItem(type),
    }
  }
}

Here's the vue component

<template>
  <li class="todo" :data-type="node.type.name" :data-done="node.attrs.done.toString()">
    <span class="todo-checkbox" contenteditable="false" @click="onChange"></span>
    <div class="todo-content" ref="content" :contenteditable="editable.toString()"></div>
    <div class="todo-actions" contenteditable="false">
      <button @click="deleteNode" style="color: red">Del</button>
    </div>
  </li>
</template>

<script>
export default {
  props: ['node', 'updateAttrs', 'editable'],
  methods: {
    onChange() {
      this.updateAttrs({
        done: !this.node.attrs.done,
      })
    },
    deleteNode() {
      console.log('deleteNode')
    }
  },
}
</script>

How should I implement delete action from the component methods?

[HollyIT]

You need to do a Prosemirror transaction. In the Vue component you can also get 'view' and 'getPos' props. That, along with node is all you need:

deleteNode() { let tr = this.view.state.tr let pos = this.getPos() tr.delete(pos, pos + this.node.nodeSize) this.view.dispatch(tr) }
What you're doing is getting the start position of the current node (getPos). You then create a delete transaction for the position (start) and then that position plus the size of the node (end). Once you got that, you commit the transaction to the view. The whole transaction thing can be rather confusing, but that's needed for things like the collaboration features of Prosemirror as well as the undo/redo.

[laurensiusadi]

@HollyIT thank for the direction.
But how do I get this.view inside the Vue component?
Since the view inside TodoItem node returns the vue component?

[laurensiusadi]

nvm, found the answer myself.
Just need to add the props to the vue component
props: ['node', 'updateAttrs', 'editable', 'view', 'getPos'],
since view and getPos is available on the editor Node component
Thanks @HollyIT

[MichalKrakow]

Sorry out of desparation i ask whre someone could have figure this out.
Is there a way to clear (sort of unwrap leaving it's text content) node from vue component?

[laurensiusadi]

@MichalKrakow
It's already stated above, but here you go again
add this inside your methods on vue component, remember to add the props

deleteNode() {
      // make a prosemirror transaction
      // which available on editor node
      let tr = this.view.state.tr
      let pos = this.getPos()
      tr.delete(pos, pos + this.node.nodeSize)
      this.view.dispatch(tr)
    },

[MichalKrakow]

Thanks, i know this works. I'm looking for a way to replace selection with "replaceWith" and pass on the removed content back to basic paragraph node (equivalent of removing node by clicking on editor menu)

[laurensiusadi]

@MichalKrakow maybe try https://tiptap.scrumpy.io/search-and-replace