Data attribute for image tag in Quill

I want to add a custom data attribute to an image tag (say, data-filename="abc.jpeg"), that can store certain meta-data in Quill editor. I tried attributors in Quill, but couldn't succeed in getting the job done.

Could anyone help please.

I extended your answer to accept all attributes originally passed to the img element. I do not understand why quill removes it.

    // Allow img to have all attributes passed originally
    const ImageBlot = Quill.import("formats/image");
    export class CustomImageBlot extends ImageBlot {
      static blotName = "customImage";
      static tagName = "img";
    
      /**
       * Converts the HTML tag to image blot
       * @param value
       */
      static create(value) {
        let node = super.create();
        Object.getOwnPropertyNames(value).forEach((attribute_name) => {
          node.setAttribute(attribute_name, value[attribute_name]);
        });
    
        return node;
      }
    
      /**
       * Converts the image blot to HTML tag
       * @param node
       */
      static value(node) {
        var blot = {};
        node.getAttributeNames().forEach((attribute_name) => {
          blot[attribute_name] = node.getAttribute(attribute_name);
        });
    
        return blot;
      }
    }
    
    Quill.register(CustomImageBlot);