color: Use markup for the preserved CSS, not character data

This still smuggles it past the sanitize step, but avoids having
other plugins that want to capture text content without markup
(notably toc) see the CSS as if it was text content.

3 files changed, 19 insertions, 7 deletions

diff --git a/IkiWiki/Plugin/color.pm b/IkiWiki/Plugin/color.pm
index 9bb2359ce..e80130d92 100644
--- a/IkiWiki/Plugin/color.pm
+++ b/IkiWiki/Plugin/color.pm
@@ -38,12 +38,11 @@ sub preserve_style ($$$) {
 				($background =~ /^[a-z]+$/ || $background =~ /^#[0-9a-f]{3,6}$/));
 
 	my $preserved = '';
-	$preserved .= '<span class="color">';
+	$preserved .= '<span class="color"><span value="';
 	$preserved .= 'color: '.$foreground if ($foreground);
 	$preserved .= '; ' if ($foreground && $background);
 	$preserved .= 'background-color: '.$background if ($background);
-	$preserved .= '</span>';
-	$preserved .= '<span class="colorend">'.$text.'</span>';
+	$preserved .= '"></span>'.$text.'</span>';
 	
 	return $preserved;
 
@@ -52,8 +51,7 @@ sub preserve_style ($$$) {
 sub replace_preserved_style ($) {
 	my $content = shift;
 
-	$content =~ s!<span class="color">((color: ([a-z]+|\#[0-9a-f]{3,6})?)?((; )?(background-color: ([a-z]+|\#[0-9a-f]{3,6})?)?)?)</span>!<span class="color" style="$1">!g;
-	$content =~ s!<span class="colorend">!!g;
+	$content =~ s!<span class="color">\s*<span value="((color: ([a-z]+|\#[0-9a-f]{3,6})?)?((; )?(background-color: ([a-z]+|\#[0-9a-f]{3,6})?)?)?)">\s*</span>!<span class="color" style="$1">!g;
 
 	return $content;
 }
diff --git a/doc/bugs/color_plugin_produces_artifacts_in_table-of-contents.mdwn b/doc/bugs/color_plugin_produces_artifacts_in_table-of-contents.mdwn
index f97e5c5db..d627091ea 100644
--- a/doc/bugs/color_plugin_produces_artifacts_in_table-of-contents.mdwn
+++ b/doc/bugs/color_plugin_produces_artifacts_in_table-of-contents.mdwn
@@ -16,6 +16,11 @@ Reason for this behaviour is:
 1. the toc plugin removes everything except plain text from headers in the toc
 1. if the toc plugin is executed before the color plugin in the format hook it sees the special syntax and clobbers the toc, otherwise it just removes the color markup
 
+> The bug here is that the color plugin's special syntax does not
+> gracefully degrade to "render nothing", which I have now [[fixed|done]]
+> by putting the color bits through a value attribute instead of
+> character data. --[[smcv]]
+
 # Solutions
 
 There are a few possible solutions to this depending on how it should work:
@@ -26,6 +31,12 @@ There are a few possible solutions to this depending on how it should work:
 
 I would propose implementing the second option because visual markers in headers are useful to convey additional information very fast and this information should be preserved in the toc. Example: Bug or task/project tracker with color conveying status of the bug or task.
 
+> This is really a separate feature request: copy non-`<a>` markup
+> in headings into the TOC. I don't think this necessarily makes
+> sense in general. In particular, any `id` attributes on child
+> elements must not be passed through because that would make
+> the ID non-unique. --[[smcv]]
+
 It seems you can stuff anything into ordered lists (according to w3.orgs doku), so apart from stylistic reasons and suboptimal display of links in headers (see below) I don't see any problems with markup in the toc. 
 
 # Patch
diff --git a/t/color.t b/t/color.t
index c5c14f6aa..dca0d865c 100755
--- a/t/color.t
+++ b/t/color.t
@@ -25,10 +25,10 @@ sub render {
 
 foreach my $scrub (0, 1) {
 	if ($scrub) {
-		$config{add_plugins}=[qw(color htmlscrubber)];
+		$config{add_plugins}=[qw(color htmlscrubber toc)];
 	}
 	else {
-		$config{add_plugins}=[qw(color)];
+		$config{add_plugins}=[qw(color toc)];
 	}
 
 	IkiWiki::loadplugins();
@@ -44,6 +44,9 @@ foreach my $scrub (0, 1) {
 		qr{(?s)<span class="color" style="">Hi</span>});
 	like(render('[[!color foreground="x; pwned: exploit" text="Hi"]]'),
 		qr{(?s)<span class="color" style="">Hi</span>});
+
+	like(render("[[!toc ]]\n\n## [[!color foreground=red text=Important]]"),
+		qr{<a href="\#index1h2">Important</a>});
 }
 
 done_testing();