Help with Quill Editor. I need help making the image button add a figure element instead of an img.

[glad sail]

In quill rich text editor. I need to implement custom functionality for the image button. When the image button is clicked I need it to input an image file and after that, prompt for an image caption, then insertembed() the figure element where the cursor currently is in the editor.

[rain cargo]

Create a custom module that listens to the click event of the image button and use the File API or a file input element to get the image file from the user.

then show a prompt or a form to get the caption from the user.
Use the quill.getModule('formats').insertEmbed(range.index, 'figure', {'url': URL.createObjectURL(file), 'caption': caption}); method to insert the figure element with the image URL and caption into the editor at the current cursor position.

[glad sail]

Thank for the reply, I am trying to implement the module like you said but not having any luck. This is my jsfiddle: https://jsfiddle.net/g04wLcme/

[rain cargo]

class ImageModule extends Module {
  constructor(quill, options) {
    super(quill, options);
    this.quill = quill;
    this.options = options;
    this.handleClick = this.handleClick.bind(this);
  }

  attach(button) {
    button.addEventListener('click', this.handleClick);
  }

  handleClick() {
    const input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.click();
    input.onchange = async () => {
      const file = input.files[0];
      const caption = window.prompt('Enter Image Caption:');
      const range = this.quill.getSelection();
      this.quill.getModule('formats').insertEmbed(range.index, 'figure', {'url': URL.createObjectURL(file), 'caption': caption});
    };
  }
}

Quill.register('modules/image', ImageModule);