Fix feedback previews when the display mode is "images".

Currently if the display mode is "images", then the student and correct
answer previews don't work.  The images are never actually rendered,
thus the image files are never created, and so the `alt` value is shown
which is the original TeX for the answer.  The reason for this is that
the image generator runs before the post content processor runs.  So
equation images in the problem are rendered, but not those in the
feedback.  That was done because of the hack of inserting the string
`MaRkEr` followed by the image number hash when the image is initially
inserted into the problem text, and then later replacing that with the
alignment styel when the image is rendered. That results in invalid HTML
which `Mojo::DOM` doesn't like.

To fix the issue the `MaRkEr` hack is reworked.  Instead of that string,
a `data-imagegen-alignment-marker` attribute is used whose value is the
image number hash.  Since that is valid HTML, `Mojo::DOM` is fine with
it and leaves it as it is.  So the image generator can now be run after
the post content processor runs, and that renders the images in feedback
as well.

Care is needed for the images in feedback when the
`data-imagegen-alignment-marker` is replaced.  Since the rendered `img`
tag is inside the `data-bs-content` attribute of the feedback button, it
is HTML encoded.  So instead of double quotes, the HTML double quote
escape character (") is used.

Author: drgrice1

lib/WeBWorK/PG.pm

@@ -160,19 +160,12 @@ sub new_helper ($invocant, %options) {
 		);
 	}
 
-	# HTML_dpng uses an ImageGenerator. We have to render the queued equations.  This must be done before the post
-	# processing, since the image tags output by the image generator initially include markers which are invalid html.
-	# Mojo::DOM will change these markers into attributes with values and this will fail.
-	if ($image_generator) {
-		$image_generator->render(
-			refresh   => $options{refreshMath2img} // 0,
-			body_text => $translator->r_text,
-		);
-	}
-
 	$translator->post_process_content if ref($translator->{rh_pgcore}) eq 'PGcore';
 	$translator->stringify_answers;
 
+	$image_generator->render(body_text => $translator->r_text, refresh => $options{refreshMath2img} // 0)
+		if $image_generator;
+
 	# Add the result summary set in post processing into the result.
 	$result->{summary} = $translator->{rh_pgcore}{result_summary}
 		if ref($translator->{rh_pgcore}) eq 'PGcore'

lib/WeBWorK/PG/ImageGenerator.pm

@@ -250,8 +250,8 @@ sub add ($self, $string, $mode = 'inline') {
 	# Determine what the image's "number" is.
 	if ($useCache) {
 		$imageNum            = $self->{equationCache}->lookup($realString);
-		$aligntag            = 'MaRkEr' . $imageNum if $self->{useMarkers};
-		$depths->{$imageNum} = 'none'               if $self->{store_depths};
+		$aligntag            = qq{data-imagegen-alignment-marker="$imageNum"} if $self->{useMarkers};
+		$depths->{$imageNum} = 'none'                                         if $self->{store_depths};
 		# Insert a slash after 2 characters.  This effectively divides the images into 16^2 = 256 subdirectories.
 		substr($imageNum, 2, 0) = '/';
 	} else {
@@ -461,11 +461,16 @@ sub fix_markers ($self) {
 
 	my %depths = %{ $self->{depths} };
 	for my $depthkey (keys %depths) {
+		# The data-imagegen-alignment-marker value may be quoted with double quotes or with " if the image is
+		# inside another HTML element attribute (such as for images in the feedback button).  So both quote types need
+		# to be checked, and the replaced style attribute needs to use the same quoting that it comes in with.
 		if ($depths{$depthkey} eq 'none') {
-			${ $self->{body_text} } =~ s/MaRkEr$depthkey/style="vertical-align:$self->{dvipng_align}"/g;
+			${ $self->{body_text} } =~
+				s/data-imagegen-alignment-marker=("|")$depthkey\1/style=$1vertical-align:$self->{dvipng_align}$1/g;
 		} else {
 			my $ndepth = 0 - $depths{$depthkey};
-			${ $self->{body_text} } =~ s/MaRkEr$depthkey/style="vertical-align:${ndepth}px"/g;
+			${ $self->{body_text} } =~
+				s/data-imagegen-alignment-marker=("|")$depthkey\1/style=$1vertical-align:${ndepth}px$1/g;
 		}
 	}
 	return;