Make blob embeds in emails look good

What does this MR do and why?

Part of Render blob line of code in GFM (#300855). The HTML prepared for web looks bad in emails; we can't have nice things in email, so we have to do layout using <table>.

The diff says +616 -218 right now but about 400 of those are refactoring app/assets/stylesheets/mailers/_highlight_tokens.scss out of app/assets/stylesheets/mailers/highlighted_diff_email.scss so it can be used in the blob embed mail stylesheet too. I have preserved (and duplicated in the new SCSS) all the existing comments so we don't accidentally torpedo our perf per #490 (comment 12283632) (warning: may make you feel old, or young).

Otherwise there's nothing too surprising here; I factored out MarkupHelper#markdown_with_result, exposed the full result from Markup::RenderingService#postprocess on an attribute, and likewise factored out Banzai::Renderer.post_process_result. This lets us determine whether we need to add the blob embed stylesheet to the note email. We really don't want to unconditionally include it, since it'd weigh down every email when it's only really needed by very few.

Screenshots or screen recordings

Before After
image image

How to set up and validate locally

  1. Have master checked out, and enable the blob_permalink_embed FF.

  2. Include a blob permalink in a project comment to another user on your GDK. Here's my example:

    @alexandra_trantow 
    
    http://gdk.test:3000/root/comrak/-/blob/c5a3b45ce94460e37c54408cd51d9b526e8cb4d8/flake.nix#L128-134

    It looks like this on the web UI:
    image

    For detailed instructions on preparing a blob permalink, see the "How to set up and validate locally" section of !246838 (merged).

  3. Check letter_opener (mine's at http://gdk.test:3000/rails/letter_opener/). You should see something like this:
    image
    Not the world's prettiest email!

  4. Check out this branch. Maybe restart your GDK unless you're feeling excessively lucky.

  5. Repeat your comment.

  6. Re-check letter_opener. You should see something like this:
    image

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Asherah Connor

Merge request reports

Loading
Loading