Drag Handle vue extension

Have you ever wanted to drag nodes around your vue-based editor? Well, we did too—so here’s an extension for that.

The DragHandleVue component allows you to easily handle dragging nodes around in the editor. You can define custom render functions, placement, and more. It essentially wraps the DragHandle extension in a vue component that will automatically register/unregister the extension with the editor.

Install

npm install @tiptap-pro/extension-drag-handle-vue-3 @tiptap-pro/extension-drag-handle @tiptap-pro/extension-node-range @tiptap/extension-collaboration y-prosemirror yjs y-protocols

Props

All props follow the same structure as the DragHandle extension.

children

The content that should be displayed inside of the drag handle.

<drag-handle>
  <div>Drag Me!</div>
</drag-handle>

tippyOptions

Options for tippy.js. You can pass any options that are available in the tippy.js documentation.

Default: undefined

<drag-handle :tippy-options="{ placement: 'left' }">
  <div>Drag Me!</div>
</drag-handle>

onNodeChange

Returns a node or null when a node is hovered over. This can be used to highlight the node that is currently hovered over.

Default: undefined

<template>
  <drag-handle @nodeChange="handleNodeChange">
    <div>Drag Me!</div>
  </drag-handle>
</template>

<script>
import { ref } from 'vue'
import { DragHandle } from '@tiptap-pro/extension-drag-handle-vue-3'

export default {
  components: {
    DragHandle,
  },
  setup() {
    const selectedNode = ref(null)

    const handleNodeChange = ({ node, editor }) => {
      selectedNode.value = node
      // do something with the node
    }

    return {
      selectedNode,
      handleNodeChange,
    }
  },
}
</script>

pluginKey

The key that should be used to store the plugin in the editor. This is useful if you have multiple drag handles in the same editor.

Default: undefined

<drag-handle pluginKey="myCustomDragHandle">
  <div>Drag Me!</div>
</drag-handle>

Commands

See the DragHandle extension for available editor commands.