Add PhutilRemarkupHexColorCodeRule, a new remarkup rule to format color codes

Summary:
Implements a remarkup rule that formats the background color to match the value of inline hex color codes.

The format for this rule looks like `{#RRGGBB}` and it will be formatted the same as monospace text, so `#RRGGBB` with the background set to the specified color.

Test Plan:
* run `arc unit` and see the tests pass
* create some markup with {#ff0000} color codes for all of your favorite colors {#ee33ee}

Reviewers: O1 Blessed Committers, avivey

Reviewed By: O1 Blessed Committers, avivey

Subscribers: avivey, aklapper, tobiaswiese, valerio.bozzolan, Matthew, Cigaryno

Maniphest Tasks: T15744

Differential Revision: https://we.phorge.it/D25540

src/__phutil_library_map__.php

@@ -5750,6 +5750,7 @@ phutil_register_library_map(array(
     'PhutilRemarkupEscapeRemarkupRule' => 'infrastructure/markup/markuprule/PhutilRemarkupEscapeRemarkupRule.php',
     'PhutilRemarkupEvalRule' => 'infrastructure/markup/markuprule/PhutilRemarkupEvalRule.php',
     'PhutilRemarkupHeaderBlockRule' => 'infrastructure/markup/blockrule/PhutilRemarkupHeaderBlockRule.php',
+    'PhutilRemarkupHexColorCodeRule' => 'infrastructure/markup/markuprule/PhutilRemarkupHexColorCodeRule.php',
     'PhutilRemarkupHighlightRule' => 'infrastructure/markup/markuprule/PhutilRemarkupHighlightRule.php',
     'PhutilRemarkupHorizontalRuleBlockRule' => 'infrastructure/markup/blockrule/PhutilRemarkupHorizontalRuleBlockRule.php',
     'PhutilRemarkupHyperlinkEngineExtension' => 'infrastructure/markup/markuprule/PhutilRemarkupHyperlinkEngineExtension.php',
@@ -12637,6 +12638,7 @@ phutil_register_library_map(array(
     'PhutilRemarkupEscapeRemarkupRule' => 'PhutilRemarkupRule',
     'PhutilRemarkupEvalRule' => 'PhutilRemarkupRule',
     'PhutilRemarkupHeaderBlockRule' => 'PhutilRemarkupBlockRule',
+    'PhutilRemarkupHexColorCodeRule' => 'PhabricatorRemarkupCustomInlineRule',
     'PhutilRemarkupHighlightRule' => 'PhutilRemarkupRule',
     'PhutilRemarkupHorizontalRuleBlockRule' => 'PhutilRemarkupBlockRule',
     'PhutilRemarkupHyperlinkEngineExtension' => 'Phobject',

src/infrastructure/markup/PhabricatorMarkupEngine.php

@@ -526,7 +526,7 @@ final class PhabricatorMarkupEngine extends Phobject {
     $rules[] = new PhutilRemarkupEscapeRemarkupRule();
     $rules[] = new PhutilRemarkupEvalRule();
     $rules[] = new PhutilRemarkupMonospaceRule();
-
+    $rules[] = new PhutilRemarkupHexColorCodeRule();
 
     $rules[] = new PhutilRemarkupDocumentLinkRule();
     $rules[] = new PhabricatorNavigationRemarkupRule();

src/infrastructure/markup/markuprule/PhutilRemarkupHexColorCodeRule.php

@@ -0,0 +1,57 @@
+<?php
+
+final class PhutilRemarkupHexColorCodeRule
+ extends PhabricatorRemarkupCustomInlineRule {
+
+  public function getPriority() {
+    return 1000.0;
+  }
+
+  public function apply($text) {
+    // Match {#FFFFFF}
+    return preg_replace_callback(
+      '@\B\{(#([0-9a-fA-F]{3}){1,2})\}@',
+      array($this, 'markupHexColorCodedText'),
+      $text);
+  }
+
+  protected function contrastingColor($color_code) {
+    $match = ltrim($color_code, '#');
+    $colors_hex = str_split($match, strlen($match) / 3);
+    list($r, $g, $b) = array_map('hexdec', $colors_hex);
+    // Calculation adapted from Myndex, CC BY-SA 4.0
+    // https://stackoverflow.com/a/69869976
+    $y = pow((double)$r / 255.0, 2.2) * 0.2126 +
+      pow((double)$g / 255.0, 2.2) * 0.7152 +
+      pow((double)$b / 255.0, 2.2) * 0.0722;
+
+    return ($y < 0.34) ? 'white' : 'black';
+  }
+
+  protected function markupHexColorCodedText(array $matches) {
+    if ($this->getEngine()->isTextMode()) {
+      $result = $matches[1];
+    } else {
+      if (count($matches) < 2) {
+        return $matches[0];
+      } else {
+        $len = strlen($matches[1]);
+        if (7 !== $len && 4 !== $len) {
+          return $matches[0];
+        }
+      }
+      $match = $matches[1];
+      $fg = $this->contrastingColor($match);
+      $result = phutil_tag(
+        'tt',
+        array(
+          'class' => 'remarkup-monospaced',
+          'style' => "color: {$fg}; background-color: {$match};",
+        ),
+        $match);
+    }
+
+    return $this->getEngine()->storeText($result);
+  }
+
+}

src/infrastructure/markup/remarkup/__tests__/PhutilRemarkupEngineTestCase.php

@@ -91,6 +91,7 @@ final class PhutilRemarkupEngineTestCase extends PhutilTestCase {
     $rules = array();
     $rules[] = new PhutilRemarkupEscapeRemarkupRule();
     $rules[] = new PhutilRemarkupMonospaceRule();
+    $rules[] = new PhutilRemarkupHexColorCodeRule();
     $rules[] = new PhutilRemarkupDocumentLinkRule();
     $rules[] = new PhutilRemarkupHyperlinkRule();
     $rules[] = new PhutilRemarkupBoldRule();

src/infrastructure/markup/remarkup/__tests__/remarkup/hex-color-code.txt

@@ -0,0 +1,5 @@
+some red, grey and white for you: {#ff0000} {#999999} {#ffffff} Also green: {#0F0} but not this: {#0000000} or this: {#0000}
+~~~~~~~~~~
+<p>some red, grey and white for you: <tt class="remarkup-monospaced" style="color: white; background-color: #ff0000;">#ff0000</tt> <tt class="remarkup-monospaced" style="color: white; background-color: #999999;">#999999</tt> <tt class="remarkup-monospaced" style="color: black; background-color: #ffffff;">#ffffff</tt> Also green: <tt class="remarkup-monospaced" style="color: white; background-color: #0F0;">#0F0</tt> but not this: {#0000000} or this: {#0000}</p>
+~~~~~~~~~~
+some red, grey and white for you: #ff0000 #999999 #ffffff Also green: #0F0 but not this: {#0000000} or this: {#0000}