[Documentation]: `drag-handle-react` and `node-range` pro extensions documentation

piszczu4 commented 7 months ago

What’s the URL to the page you’re sending feedback for?

https://tiptap.dev/docs/editor/extensions

What part of the documentation needs improvement?

There is no description of above plugins

What is helpful about that part?

There is no description of above plugins

What is hard to understand, missing or misleading?

There is no description of above plugins

Anything to add? (optional)

No response

emil14 commented 7 months ago

Any updates? It would be awesome to have docs for drag-handle (framework agnostic, I'm Svelte developer)

carlosvaldesweb commented 3 months ago

I also looking for drag handle docs. Any Updates?

nperez0111 commented 3 months ago

Sorry we are in the middle of a huge documentation refactor and that is why it is not up yet.

Hopefully in the coming weeks we can release it

mrowles commented 2 months ago

How are we going with this @nperez0111 ?

nachodeh commented 3 weeks ago

Are there any updates on this?

nperez0111 commented 3 weeks ago

I actually started writing this yesterday. Should be finished on monday

nperez0111 commented 3 weeks ago

Here is the preliminary version:

title: Drag Handle extension tags:

type: pro meta: category: Editor title: Drag Handle extension | Tiptap Editor Docs description: Enable dragging nodes around your Tiptap Editor with the Drag Handle Extension. Learn how to set it up here in the Docs! extension: name: Drag Handle description: You ever wanted to drag nodes around your editor? Well we too - so here is an extension for that. type: extension icon: GripVertical isPro: true

import { CodeDemo } from '@/components/CodeDemo' import { Callout } from '@/components/ui/Callout'

You ever wanted to drag nodes around your editor? Well we too - so here is an extension for that.

The DragHandle extension allows you to easily handle dragging nodes around in the editor. You can define custom render functions, placement, and more.

Install

Integrate this pro extension by registering for a free [Tiptap account](https://cloud.tiptap.dev/register) and following our [access guide](/guides/pro-extensions) to Tiptap’s private repository.

npm install @tiptap-pro/extension-drag-handle

Settings

render

Renders an element that is positioned with tippy.js. This is the element that will be displayed as the handle when dragging a node around.

DragHandle.configure({
  render: () => {
    const element = document.createElement('div')

    // Use as a hook for CSS to insert an icon
    element.classList.add('custom-drag-handle')

    return element
  },
})

tippyOptions

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

Default: undefined

DragHandle.configure({
  tippyOptions: {
    placement: 'left',
  },
})

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

DragHandle.configure({
  onNodeChange: ({ node, editor }) => {
    if (!node) {
      selectedNode = null
      return
    }
    // Do something with the node
    selectedNode = node
  },
})

Commands

lockDragHandle()

Locks the draghandle in place and visibility. If the drag handle was visible, it will remain visible until unlocked. If it was hidden, it will remain hidden until unlocked.

This can be useful if you want to have a menu inside of the drag handle and want it to remain visible whether the drag handle is moused over or not.

editor.commands.lockDragHandle()

unlockDragHandle()

Unlocks the draghandle. Resets to default visibility and behavior.

editor.commands.unlockDragHandle()

toggleDragHandle()

Toggle draghandle lock state. If the drag handle is locked, it will be unlocked and vice versa.

editor.commands.toggleDragHandle()

nachodeh commented 2 weeks ago

@nperez0111 thanks! Just set it up in my editor and it's mostly working.

One notable major issue happens with lists. The drag handle plugin applies to the list as a whole instead of allowing me to drag individual items. Is this a known issue? Is there a config I can apply to select list items individually?

ori-avraham commented 2 weeks ago

@nperez0111 thanks! Just set it up in my editor and it's mostly working.

One notable major issue happens with lists. The drag handle plugin applies to the list as a whole instead of allowing me to drag individual items. Is this a known issue? Is there a config I can apply to select list items individually?

I didn't find any way of changing this behavior, this extension does have the wanted behavior, although as for my use case it also has a few problems.

Mrdaimi commented 2 weeks ago

Here is the preliminary version:

title: Drag Handle extension tags:

type: pro meta: category: Editor title: Drag Handle extension | Tiptap Editor Docs description: Enable dragging nodes around your Tiptap Editor with the Drag Handle Extension. Learn how to set it up here in the Docs! extension: name: Drag Handle description: You ever wanted to drag nodes around your editor? Well we too - so here is an extension for that. type: extension icon: GripVertical isPro: true

import { CodeDemo } from '@/components/CodeDemo' import { Callout } from '@/components/ui/Callout'

You ever wanted to drag nodes around your editor? Well we too - so here is an extension for that.

The DragHandle extension allows you to easily handle dragging nodes around in the editor. You can define custom render functions, placement, and more.

Install

Integrate this pro extension by registering for a free Tiptap account and following our access guide to Tiptap’s private repository.
npm install @tiptap-pro/extension-drag-handle
Settings

render

Renders an element that is positioned with tippy.js. This is the element that will be displayed as the handle when dragging a node around.
DragHandle.configure({
  render: () => {
    const element = document.createElement('div')

    // Use as a hook for CSS to insert an icon
    element.classList.add('custom-drag-handle')

    return element
  },
})
tippyOptions

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

Default: undefined
DragHandle.configure({
  tippyOptions: {
    placement: 'left',
  },
})
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
DragHandle.configure({
  onNodeChange: ({ node, editor }) => {
    if (!node) {
      selectedNode = null
      return
    }
    // Do something with the node
    selectedNode = node
  },
})
Commands

lockDragHandle()

Locks the draghandle in place and visibility. If the drag handle was visible, it will remain visible until unlocked. If it was hidden, it will remain hidden until unlocked.

This can be useful if you want to have a menu inside of the drag handle and want it to remain visible whether the drag handle is moused over or not.
editor.commands.lockDragHandle()
unlockDragHandle()

Unlocks the draghandle. Resets to default visibility and behavior.
editor.commands.unlockDragHandle()
toggleDragHandle()

Toggle draghandle lock state. If the drag handle is locked, it will be unlocked and vice versa.
editor.commands.toggleDragHandle()

when I try to use this extension In my Code，it appears error like thats：GET http://localhost:3001/node_modules/.vite/deps/@tiptap-pro_extension-drag-handle.js?v=71b69e5f net::ERR_ABORTED 504 (Outdated Optimize Dep)

nperez0111 commented 2 weeks ago

when I try to use this extension In my Code，it appears error like thats：GET http://localhost:3001/node_modules/.vite/deps/@tiptap-pro_extension-drag-handle.js?v=71b69e5f net::ERR_ABORTED 504 (Outdated Optimize Dep)

This is your vite dev server configuration, totally unrelated to this

nperez0111 commented 2 weeks ago

@nperez0111 thanks! Just set it up in my editor and it's mostly working.

One notable major issue happens with lists. The drag handle plugin applies to the list as a whole instead of allowing me to drag individual items. Is this a known issue? Is there a config I can apply to select list items individually?

@nachodeh this extension deals with moving the outermost blocks in the editor, not sub items, we will consider this in the future as an enhancement to the current functionality but for now it is out of scope because it is complicated to implement

nachodeh commented 1 week ago

@nperez0111 thanks! Just set it up in my editor and it's mostly working. One notable major issue happens with lists. The drag handle plugin applies to the list as a whole instead of allowing me to drag individual items. Is this a known issue? Is there a config I can apply to select list items individually?

@nachodeh this extension deals with moving the outermost blocks in the editor, not sub items, we will consider this in the future as an enhancement to the current functionality but for now it is out of scope because it is complicated to implement

I see how complicated this can be to implement. Unfortunately, without being able to move sub items, the extension misses a critical use case (moving list items has got to be among the most popular use cases for this feature).

I'll stick to https://github.com/NiclasDev63/tiptap-extension-global-drag-handle for now, but keen to try this one out once the functionality is in place.

Thanks for your work on this!

Mrdaimi commented 1 week ago

when I try to use this extension In my Code，it appears error like thats：GET http://localhost:3001/node_modules/.vite/deps/@tiptap-pro_extension-drag-handle.js?v=71b69e5f net::ERR_ABORTED 504 (Outdated Optimize Dep)

This is your vite dev server configuration, totally unrelated to this

Thanks, I've solved it. There are other problems. Dragging to the top or bottom of the page will not automatically scroll in the corresponding direction.

laowangdefangjian commented 1 week ago

@tiptap-pro/extension-drag-handle

Boss, when will it be deployed to the Tiptap document I am currently experiencing issues while using:

I use the Vue3 framework

nperez0111 commented 1 week ago

I posted the same docs that I had above.

The node-range extension is not really worth documenting since it is more of a helper function than something you would have in your editor

ueberdosis / tiptap