为高亮添加弹出层

一个用于选择文本高亮颜色的弹出层。

安装

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

npx @tiptap/cli add color-highlight-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 { Highlight } from '@tiptap/extension-highlight'
import { ColorHighlightPopover } from '@/components/tiptap-ui/color-highlight-popover'

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

export default function MyEditor() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [StarterKit, Highlight.configure({ multicolor: true })],
    content: `
        <p style="text-align: left">
            <mark data-color="var(--tt-color-highlight-purple)" style="background-color: var(--tt-color-highlight-purple); color: inherit">
                <span class="selection">突出显示的文本</span>
            </mark>
            <span class="selection"> </span>
            <mark data-color="var(--tt-color-highlight-red)" style="background-color: var(--tt-color-highlight-red); color: inherit">
                <span class="selection">用</span>
            </mark>
            <span class="selection"> </span>
            <mark data-color="var(--tt-color-highlight-green)" style="background-color: var(--tt-color-highlight-green); color: inherit">
                <span class="selection">不同的</span>
            </mark>
            <span class="selection"> </span>
            <mark data-color="var(--tt-color-highlight-blue)" style="background-color: var(--tt-color-highlight-blue); color: inherit">
                <span class="selection">颜色</span>
            </mark>
            <span class="selection"> 中以突出重点。</span>
        </p>
        `,
  })

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

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

参数

名称	类型	默认值	描述
editor	Editor \| null	null	Tiptap 编辑器实例
colors	HighlightColor[]	DEFAULT_HIGHLIGHT_COLORS	高亮颜色选项数组
hideWhenUnavailable	boolean	false	弹出层在不可用时是否隐藏

需求

使用的参考组件

use-menu-navigation（钩子）
use-tiptap-editor（钩子）
button（基础组件）
popover（基础组件）
separator（基础组件）
tiptap-utils（库）
highlighter-icon（图标）
ban-icon（图标）

开源功能

@tiptap/extension-highlight