拖动手柄 React 扩展

你是否曾想过在基于 React 的编辑器中拖动节点？我们也有同样的需求——所以这里有一个扩展实现它。

DragHandleReact 组件允许你轻松处理编辑器中节点的拖动。你可以定义自定义渲染函数、位置等。它本质上将 DragHandle 扩展封装到一个 React 组件中，该组件会自动向编辑器注册和注销扩展。

安装

npm install @tiptap/extension-drag-handle-react @tiptap/extension-drag-handle @tiptap/extension-node-range @tiptap/extension-collaboration @tiptap/y-tiptap yjs y-protocols

属性

所有属性遵循与 DragHandle 扩展相同的结构。

children

应显示在拖动手柄内部的内容。

<DragHandle>
  <div>拖动我！</div>
</DragHandle>

tippyOptions

tippy.js 的选项。你可以传递在 tippy.js 文档中可用的任何选项。

默认值：undefined

<DragHandle
  tippyOptions={{
    placement: 'left',
  }}
>
  <div>拖动我！</div>
</DragHandle>

onNodeChange

当节点被悬停时返回一个节点或 null。这可以用于高亮当前悬停的节点。

默认值：undefined

function Component() {
  const [selectedNode, setSelectedNode] = useState(null)

  return (
    <DragHandle
      onNodeChange={({ node, editor, pos }) => {
        setSelectedNode(node)
        // 对节点进行某些操作
      }}
    >
      <div>拖动我！</div>
    </DragHandle>
  )
}

pluginKey

在编辑器中存储插件时应使用的键。如果在同一个编辑器中有多个拖动手柄，这非常有用。

默认值：undefined

<DragHandle pluginKey="myCustomDragHandle">
  <div>拖动我！</div>
</DragHandle>

命令

请参见 DragHandle 扩展以获取可用的编辑器命令。