REFACTOR: Resize controls (PR #9393)

The current implementation of this feature is too complex. I replaced most of the code by extending the image renderer function instead of using Tokens.

The new implementation has two parts: The first one is a rule that appends additional data to the IMG token. It adds an index that will let us identify the image we must resize and also the default scale of it (50%, 75%, 100%).

The second part extends the existing image renderer function. It wraps the original function with the resize controls HTML.


I’m not super familiar with this pipeline so I’ve requested @SamSaffron do a review here.

I think @udan11 did the previous refactoring of this, he should take a look

Nitpick: This should be a proper const which can be reused in rule too.

Not familiar either, but it looks good to me. It is a lot easier to understand now.

Then, using the constant above defined per the comment above you could replace this block with:

          result += PREDEFINED_SCALES
            .map(s => buildScaleButton(scale, s))
            .join("<span class='separator'>&nbsp;•&nbsp;</span>");

PREDEFINED_SCALES and s are not the best names, but I cannot think of better ones (maybe s could be scale and rename outer scope scale to selectedScale). :thinking:

Looks good to me! :+1: