气泡菜单

Bubble Menu
此扩展将使上下文菜单出现在所选文本附近。
使用它让用户将标记应用于他们的文本选择。
与往常一样，标记和样式完全取决于您。

npm install @tiptap/extension-bubble-menu

用法示例

基础

🌰 举个例子

可编辑

import { BubbleMenu, EditorContent, useEditor } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import React, { useEffect } from 'react'

export default () => {
  const editor = useEditor({
    extensions: [
      StarterKit,
    ],
    content: `
      <p>
      嘿，试着在这里选择一些文本。将弹出一个菜单，用于选择一些内联样式。记住：您可以完全控制此菜单的内容和样式。
      </p>
    `,
  })

  const [isEditable, setIsEditable] = React.useState(true)

  useEffect(() => {
    if (editor) {
      editor.setEditable(isEditable)
    }
  }, [isEditable, editor])

  return (
    <>
      <div>
        <input type="checkbox" checked={isEditable} onChange={() => setIsEditable(!isEditable)} />
        可编辑
      </div>
      {editor && <BubbleMenu editor={editor}>
        <button
          onClick={() => editor.chain().focus().toggleBold().run()}
          className={editor.isActive('bold') ? 'is-active' : ''}
        >
          粗体
        </button>
        <button
          onClick={() => editor.chain().focus().toggleItalic().run()}
          className={editor.isActive('italic') ? 'is-active' : ''}
        >
          斜体
        </button>
        <button
          onClick={() => editor.chain().focus().toggleStrike().run()}
          className={editor.isActive('strike') ? 'is-active' : ''}
        >
          删除线
        </button>
      </BubbleMenu>}
      <EditorContent editor={editor} />
    </>
  )
}

自定义显示逻辑

🌰 举个例子

import { BubbleMenu, EditorContent, useEditor } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import React from "react";
import Link from "@tiptap/extension-link";

export default () => {
  const editor = useEditor({
    // 默认编辑器不支持a标签，官方提供了扩展Link支持 这里先不要细究
    extensions: [StarterKit, Link],
    content: '<p> 嘿，我是普通文本,<a href="/">是有链接选中才显示菜单</a> </p>',
  });

  const shouldShow = ({ editor, view, state, oldState, from, to }) => {
    // 仅在链节节点被选中的时候才显示 气泡菜单
    return editor.isActive("link");
  };

  return (
    <>
      {editor && (
        <BubbleMenu editor={editor} shouldShow={shouldShow}>
          <button>移除链接地址?</button>
        </BubbleMenu>
      )}
      <EditorContent editor={editor} />
    </>
  );
};

API

属性	说明	类型	默认值
tippyOptions	本扩展基于tippy.js，此参数（如延迟显示等）将完全传递给它	Object
shouldShow	自定义显示菜单的逻辑	(props) => boolean	-
updateDelay	更新延迟	Number	250 毫秒
element	菜单挂载点（原生使用方式会用到）	HTMLElement	null
pluginKey	扩展唯一标识（一般用不到）	string	PluginKey