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-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-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-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,15 @@ sub fix_markers ($self) {
 
 	my %depths = %{ $self->{depths} };
 	for my $depthkey (keys %depths) {
+		# The data-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-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-marker=("|")$depthkey\1/style=$1vertical-align:${ndepth}px$1/g;
 		}
 	}
 	return;