从菜单中选择标题

用于从多个标题级别中选择的下拉菜单。

安装

您可以通过 Tiptap CLI (适用于 Vite 或 Next.js) 添加此组件。

npx @tiptap/cli add heading-dropdown-menu

手动集成

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

导入样式

此组件要求您导入我们添加到 styles/keyframe-animation.scss 和 styles/_variables.scss 的样式。

用法

import { EditorContent, EditorContext, useEditor } from '@tiptap/react'
import { StarterKit } from '@tiptap/starter-kit'
import { HeadingDropdownMenu } from '@/components/tiptap-ui/heading-dropdown-menu'

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

export default function MyEditor() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [StarterKit],
    content: `
          <h1>标题 1</h1>
          <p>这是一段文本。</p>
          <h2>标题 2</h2>
          <p>这又是一段文本。</p>
        `,
  })

  return (
    <EditorContext.Provider value={{ editor }}>
      <div className="tiptap-button-group" data-orientation="horizontal">
        <HeadingDropdownMenu levels={[1, 2, 3, 4]} />
      </div>

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

属性

名称	类型	默认值	描述
editor	编辑器 \| null	null	Tiptap 编辑器实例
levels	`Array<1 \| 2 \| 3 \| 4 \| 5 \| 6>`	[1, 2, 3, 4, 5, 6]	要在下拉菜单中包含的标题级别
hideWhenUnavailable	boolean	false	菜单是否在浮动上下文中
onOpenChange	(isOpen: boolean) => void	-	下拉菜单打开状态变化时的回调

依赖

使用的参考组件

use-tiptap-editor (hook)
tiptap-utils (lib)
heading-button (ui)
button (primitive)
dropdown-menu (primitive)
chevron-down-icon (icon)
heading-icon (icon)