@tencentcloud/chat-uikit-vue2/components/TUIChat/message-input/message-input-file.ts

TUIKit 是基于 IM SDK 实现的一套 UI 组件，其包含会话、聊天、群组、个人资料等功能，基于 TUIKit 组件您可以像搭积木一样快速搭建起自己的业务逻辑。

import Image from '@tiptap/extension-image';
import { mergeAttributes } from '@tiptap/core';

export default Image.extend({
  name: 'custom-image',

  addAttributes() {
    return {
      ...(Image.config as any).addAttributes(),
      class: {
        default: 'image',
        rendered: false,
      },
    };
  },

  addCommands() {
    return {
      setImage: options => ({ tr, commands }) => {
        if ((tr.selection as any)?.node?.type?.name == 'custom-image') {
          return commands.updateAttributes('custom-image', options);
        } else {
          return commands.insertContent({
            type: this.name,
            attrs: options,
          });
        }
      },
    };
  },

  renderHTML({ node, HTMLAttributes }) {
    HTMLAttributes.class = 'custom-image-' + node.attrs.class;

    return [
      'img',
      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
    ];
  },
});