How can I update image alt attribute with a button

[wenghongtian]

Version

"@toast-ui/editor": "^3.2.2",
"@toast-ui/react-editor": "^3.2.3",

Current Behavior

I have no idea to update the markdown value when I update image's attribute.

import { Editor } from "@toast-ui/react-editor";
import "@toast-ui/editor/dist/toastui-editor.css";
import styles from "./index.less";
import { Button, Divider, message, Modal, Space, Upload } from "antd";
import { useEffect, useRef, useState } from "react";
import { Icon } from "@umijs/max";
import Cookies from "js-cookie";
import { ResponseCode, TOKEN } from "@/constants";

export type MarkdownEditorProps = {
  placeholder?: string;
  onChange?: (value: string) => void;
  value?: string;
};

export default function MarkdownEditor({
  placeholder,
  onChange,
  value,
}: MarkdownEditorProps) {
  const editorRef = useRef<Editor>(null);
  const editImgRef = useRef<HTMLImageElement>(null);

  useEffect(() => {
    console.log(editorRef.current?.getInstance());
    editorRef.current?.getRootElement().addEventListener("click", (e) => {
      const dom = e.target as HTMLElement;
      if (dom.tagName === "IMG") {
        console.log("trigger");
        dom.setAttribute("alt", "test");
        setTimeout(() => {
          const editor = editorRef.current!.getInstance();
          console.log(editor.getMarkdown());
        }, 500);
      }
    });
  }, []);

  return (
      <div className={styles.editor}>
        <div className={styles.toolbar}>
          <Space split={<Divider type="vertical" />} wrap={true}>
            <Space wrap={true}>
              <Upload
                headers={{ Authorization: Cookies.get(TOKEN)! }}
                action="/api/damselfish-chat-bot/upload"
                beforeUpload={(file) => {
                  const isLt10M = file.size / 1024 / 1024 < 10;
                  if (!isLt10M) {
                    message.error("图片最大只能上传10M");
                  }
                  return isLt10M;
                }}
                maxCount={1}
                accept=".png,.jpg,.jpeg"
                showUploadList={false}
                onChange={({ file }) => {
                  if (file.response?.code === ResponseCode.Success) {
                    message.success("上传成功");
                    const editor = editorRef.current!.getInstance();
                    editor.exec("addImage", {
                      imageUrl: file.response.data.url,
                    });
                  }
                }}
              >
                <Button
                  type="text"
                  icon={
                    <Icon icon="material-symbols:add-photo-alternate-outline" />
                  }
                  size="small"
                  onClick={() => {
                    // const editor = editorRef.current!.getInstance();
                    // editor.exec('codeBlock');
                  }}
                />
              </Upload>
            </Space>
          </Space>
        </div>
        <Editor
          initialValue={value}
          previewStyle="vertical"
          placeholder={placeholder}
          height="300px"
          initialEditType="wysiwyg"
          useCommandShortcut
          usageStatistics={false}
          hideModeSwitch
          ref={editorRef}
          toolbarItems={[]}
          onChange={() => {
            const editor = editorRef.current!.getInstance();
            console.log(editor.getMarkdown());
            console.log(editorRef.current?.getInstance());
            onChange?.(editor.getMarkdown());
          }}
        />
      </div>
  );
}

Expected Behavior

I really need a method to update my image attribute! Help!!