添加链接弹出框 UI 组件

用于创建和编辑链接的弹出框。

安装

您可以通过 Tiptap CLI（适用于 Vite 或 Next.js）添加组件

npx @tiptap/cli add link-popover

手动集成

对于 Vite 或 Next.js 以外的框架，请从开源仓库手动添加组件。

导入样式

此组件需要您导入我们的样式，这些样式已添加到 styles/keyframe-animation.scss 和 styles/_variables.scss 中。

使用

import { EditorContent, EditorContext, useEditor } from '@tiptap/react'
import { StarterKit } from '@tiptap/starter-kit'
import { Link } from '@/components/tiptap-extension/link-extension'
import { LinkPopover } from '@/components/tiptap-ui/link-popover'

import '@/components/tiptap-node/paragraph-node/paragraph-node.scss'

export default function MyEditor() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [StarterKit, Link.configure({ openOnClick: false })],
    content: `
        <p>点击按钮打开链接弹出框。</p>
        <p><a href="https://www.tiptap.dev">Tiptap</a></p>
        `,
  })

  return (
    <EditorContext.Provider value={{ editor }}>
      <div className="tiptap-button-group" data-orientation="horizontal">
        <LinkPopover />
      </div>

      <EditorContent editor={editor} role="presentation" />
    </EditorContext.Provider>
  )
}

Props

名称	类型	默认值	描述
editor	Editor \| null	null	Tiptap 编辑器实例
hideWhenUnavailable	boolean	false	弹出框是否在浮动上下文中
onOpenChange	(isOpen: boolean) => void	-	弹出框打开状态改变时的回调
autoOpenOnLinkActive	boolean	true	链接被选中时是否打开弹出框

需求

使用的参考组件

use-tiptap-editor（钩子）
tiptap-utils（库）
button（原语）
popover（原语）
separator（原语）
link-icon（图标）
trash-icon（图标）
corner-down-left-icon（图标）
external-link-icon（图标）

开源功能

@tiptap/extension-link