[PRO]: Drag Handle vue

[SunHengX]

Affected Packages

extension-drag-handle-vue-3

Version(s)

2.16.3

Description of the Bug

I copied the examples from the official website of tiptap and then ran them locally, but they didn't work properly. I'm currently using Vue 3. Could any expert please help me solve this problem?

Browser Used

Chrome

Code Example (Preferred)

No response

Expected Behavior

An error will occur when I use ` I hope it can be solved.

Additional Context (Optional)

Dependency Updates

• Yes, I've updated all my dependencies.

[nperez0111]

More information on your integration would be needed to help you with this

[SunHengX]

需要更多有关您的集成的信息来帮助您实现这一点
I am using the official Tiptap demo from the Tiptap website.

[KevinvOosterhout]

I'm experiencing the same with a Nuxt project. I've tried it with pure Vue too. See repo for reproduction: https://github.com/KevinvOosterhout/tiptap-draghandle-vue-bug

The copy of the demo is in src/views/HomeView.vue

[KevinvOosterhout]

[SunHengX]

@nperez0111 Please help us resolve this issue, experts.

[nperez0111]

I don't have the time to look into this, but here is what the source is doing, perhaps you can figure it out yourselves from there:

import { Editor } from '@tiptap/vue-3'
import {
  DragHandlePlugin,
  dragHandlePluginDefaultKey,
  DragHandlePluginProps,
} from '@tiptap-pro/extension-drag-handle'
import {
  defineComponent, h, onBeforeUnmount, onMounted, PropType, ref,
} from 'vue'

type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;

export type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey'>, 'element'> & {
  class?: string;
  onNodeChange?: (data: { node: Node | null; editor: Editor; pos: number }) => void;
};

export const DragHandle = defineComponent({
  name: 'DragHandleVue',

  props: {
    pluginKey: {
      type: [String, Object] as PropType<DragHandleProps['pluginKey']>,
      default: dragHandlePluginDefaultKey,
    },

    editor: {
      type: Object as PropType<DragHandleProps['editor']>,
      required: true,
    },

    tippyOptions: {
      type: Object as PropType<DragHandleProps['tippyOptions']>,
      default: () => ({}),
    },

    onNodeChange: {
      type: Function as PropType<DragHandleProps['onNodeChange']>,
      default: null,
    },

    class: {
      type: String as PropType<DragHandleProps['class']>,
      default: 'drag-handle',
    },
  },

  setup(props, { slots }) {
    const root = ref<HTMLElement | null>(null)

    onMounted(() => {
      const {
        editor, pluginKey, onNodeChange, tippyOptions,
      } = props

      editor.registerPlugin(
        DragHandlePlugin({
          editor,
          element: root.value as HTMLElement,
          pluginKey,
          tippyOptions,
          onNodeChange,
        }),
      )
    })

    onBeforeUnmount(() => {
      const { pluginKey, editor } = props

      editor.unregisterPlugin(pluginKey as string)
    })

    return () => h('div', { ref: root, class: props.class }, slots.default?.())
  },
})

[KevinvOosterhout]

For some strange reason i've got it to function when using the pasted code above inside of a component with just a script tag around it, and changing the import to import { DragHandle } from '~/components/DragHandle.vue' .

[nperez0111]

Perhaps it was built incorrectly? This project does have both vue 2 & vue 3 maybe it chose the wrong one?

[nperez0111]

I'm releasing a new version, it looks like it was being bundled with the entire vue package because I did not declare it as a peer dep. Try this version: 2.16.5-beta.0

[KevinvOosterhout]

I've just tested the beta and it works like a charm. Thanks for the quick response.