在 TipTap 中创建一个用于图片的 Bubble Menu，可以让用户控制图片的对齐方式（左、右、居中）以及设置图片的 alt 属性。

步骤概述

创建一个图片对齐和设置 alt 的 Bubble Menu 组件。
使用 TipTap 的命令来修改图片的属性。

Bubble Menu 组件示例

import React, { useEffect } from 'react';  
import { useEditor, BubbleMenu } from '@tiptap/react';  
import { Editor } from '@tiptap/core';  
import { FaAlignLeft, FaAlignCenter, FaAlignRight } from 'react-icons/fa';  

const ImageBubbleMenu = () => {  
  const editor = useEditor();  

  // 确保只有在选择了图片时才显示 BubbleMenu  
  const isImageActive = editor.isActive('image');  

  // 当选中图片时的占位符，用于设置 alt 属性  
  const [altText, setAltText] = React.useState('');  

  useEffect(() => {  
    if (editor) {  
      const selectedImage = editor.getJSON().content.find(  
        (node) => node.type === 'image' && editor.state.selection.$from.node().attrs.src === node.attrs.src  
      );  
      if (selectedImage) {  
        setAltText(selectedImage.attrs.alt || '');  
      }  
    }  
  }, [editor]);  

  const setImageAlignment = (alignment) => {  
    editor.chain().focus().setNode('image', { alignment }).run();  
  };  

  const updateAltText = () => {  
    const { state } = editor;  
    const pos = state.selection.$from.pos;  
    const imageNode = state.doc.nodeAt(pos).attrs.src ? state.doc.nodeAt(pos) : null;  
  
    if (imageNode) {  
      // 更新 alt 属性  
      editor.chain().focus().setNode('image', { alt: altText }).run();  
    }  
  };  

  return (  
    <BubbleMenu editor={editor} tippyOptions={{ duration: 100 }}>  
      {isImageActive && (  
        <div className="bubble-menu">  
          <button onClick={() => setImageAlignment('left')} aria-label="Align Left">  
            <FaAlignLeft />  
          </button>  
          <button onClick={() => setImageAlignment('center')} aria-label="Align Center">  
            <FaAlignCenter />  
          </button>  
          <button onClick={() => setImageAlignment('right')} aria-label="Align Right">  
            <FaAlignRight />  
          </button>  
          <input  
            type="text"  
            value={altText}  
            onChange={(e) => setAltText(e.target.value)}  
            placeholder="Alt text"  
            onBlur={updateAltText}  
          />  
        </div>  
      )}  
    </BubbleMenu>  
  );  
};  

export default ImageBubbleMenu;  

组件说明

1、BubbleMenu:

通过 BubbleMenu 组件创建一个气泡菜单，是图形界面的一部分，会在选中图形时显示。

2、对齐功能:

使用 setImageAlignment 函数来设置图片的对齐方式。

通过 editor.chain().focus().setNode('image', { alignment }) 修改图片的对齐。可以根据实际的实现需要为图片添加对齐属性。

3、alt 属性设置:

使用 altText 状态来管理输入框的值。用户在输入 alt 文本后，onBlur 事件会调用 updateAltText 方法，更新所选图片的 alt 属性。

4、显示条件:

只有当选中图像时，BubbleMenu 才会显示。使用 editor.isActive(‘image’) 判断当前选择的元素是否为图片。

注意事项

1、确保在编辑器中定义了 image 节点: 确保 TipTap 编辑器配置中有支持图像节点的设置，如 image 扩展。

2、样式: 可能需要为 BubbleMenu 组件添加样式，自定义其外观，使其与应用程序的设计整合起来。

3、对齐支持: 需要在 TipTap 的 image 节点定义中支持对齐属性，可能需要在扩展中定义相关逻辑。