使用按钮切换标题级别

用于切换不同标题级别的按钮。

安装

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

npx @tiptap/cli add heading-button

手动集成

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

引入样式

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

使用方法

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

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

export default function MyEditor() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [StarterKit],
    content: `
          <h1>标题 1</h1>
          <h2>标题 2</h2>
          <h3>标题 3</h3>
          <h4>标题 4</h4>
        `,
  })

  return (
    <EditorContext.Provider value={{ editor }}>
      <div className="tiptap-button-group" data-orientation="horizontal">
        <HeadingButton level={1}></HeadingButton>
        <HeadingButton level={2}></HeadingButton>
        <HeadingButton level={3}></HeadingButton>
        <HeadingButton level={4}></HeadingButton>
      </div>

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

属性说明

名称	类型	默认值	说明
editor	Editor \| null	null	Tiptap 编辑器实例
level	1 \| 2 \| 3 \| 4 \| 5 \| 6	必填	标题级别
hideWhenUnavailable	boolean	false	当按钮不可用时是否隐藏
text	string	-	图标旁显示的文本

依赖组件

use-tiptap-editor（钩子）
button（基础组件）
tiptap-utils（库）
heading-one-icon（图标）
heading-two-icon（图标）
heading-three-icon（图标）
heading-four-icon（图标）
heading-five-icon（图标）
heading-six-icon（图标）