Request for a couple of minor feature additions

[zehawki]

Thank you for this rather superb library. A bit of background (at the bottom) here slab/quill#4621

I'd like to request for a couple of minor feature additions:

1. Switch the order of title and alt text boxes on the modal. I feel title is more important, and can stand in for alt text in a pinch, but the reverse is not true. In other words, end users normally cannot be bothered to enter so much meta data, but if they do, I'd rather they enter something that's familiar, ie "title" field - which then becomes the caption. Further if they are anal, they'll enter alt text. (If you feed strongly about NOT making the change, then may I request that you make it configurable?)
2. My usecase is only for title to be entered, thus I have alignment, compression turned off - in such a case is it possible to automatically show the modal when the image is clicked, instead of a click on the T - to save an extra click

Separately a bit of feedback:

1. I couldn't figure out what % does
2. The "T" icon is non intuitive, I would never have guessed its for editing title

Screenshots:

[enzedonline]

Hi, thanks for the feedback.

The alt is first as it's really an attribute that should be set for all images (SEO and screen readers). Title is only there for images that want a caption.

The order of alt/title doesn't need a code change, you can just add the following to your css to achieve the same:

div[data-blot-formatter-modal] form {
    display: grid;
}
div[data-blot-formatter-modal] form>label[for="alt"],
div[data-blot-formatter-modal] form>textarea[name="alt"],
div[data-blot-formatter-modal] form>div {
    order: 1;
}

Alternatively, if you don't want the alt at all, just set the label and textarea for alt to display:none;. It's an optional field so it doesn't matter if it's hidden.

The 'T' icon is just a standard icon for text - can be anything you prefer. You can set the svg string for toolbar.icons.attribute in the blot formatter options parameter:

{
  toolbar: {
    icons: {
      attribute: `
        <svg viewBox="0 0 24 24" fill="none" class="ql-stroke">
          <path d="M10 19H12M12 19H14M12 19V5M12 5H6V6M12 5H18V6" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      `
    }
  }
}

In fact, it doesn't need to be an svg - any valid/suitable text or html will do as this just becomes the innerHTML for the button:

this.element.innerHTML = this.icon;

I'll add an additional options.toolbar.buttonTitles attribute to add title to each button that displays on hover to better explain their use. It'll be a while before I get to making a new version, I'm tied up with a long project just now. Incidentally, the last update was Jan '25 not Jan '24 listed on your table.

The '%' toggles the size mode between absolute (px) and relative (%) sizing to allow for responsive sizing. The image needs a width attribute before this is applied (to prevent accidentally introducing the width/height attributes by clicking this on and off again). If you have resizing turned off then this would only be useful for pasted images with those attributes already.
https://github.com/enzedonline/quill-blot-formatter2?tab=readme-ov-file#using-relative-sizes

I wouldn't add the default click option however as the interface is a full screen modal - I think it needs to be a deliberate action to reach that rather than just clicking on the image. Modals have a generally have a negative UX when they're not expected. When the blotformatter is activated, clicking on the image also displays the size information, so it's a bit confusing for the user to have two different responses to an image click.