Remarkup allows to point a specific image in a Mock set

Summary: One can point to spesific image in a Mock set using {Mxx|yy} syntax

Test Plan: {F35373}

Reviewers: chad, epriestley

Reviewed By: epriestley

CC: aran, Korvin, AnhNhan

Maniphest Tasks: T2710

Differential Revision: https://secure.phabricator.com/D5322

src/applications/pholio/remarkup/PholioRemarkupRule.php

@@ -21,6 +21,18 @@ final class PholioRemarkupRule
     $embed_mock = id(new PholioMockEmbedView())
       ->setMock($object);
 
+    if (strlen($options)) {
+      $parser = new PhutilSimpleOptions();
+      $opts = $parser->parse(substr($options, 1));
+
+      if (isset($opts['image'])) {
+        $images = array_unique(
+          explode('&', preg_replace('/\s+/', '', $opts['image'])));
+
+        $embed_mock->setImages($images);
+      }
+    }
+
     return $embed_mock->render();
   }
 

src/applications/pholio/view/PholioMockEmbedView.php

@@ -3,12 +3,18 @@
 final class PholioMockEmbedView extends AphrontView {
 
   private $mock;
+  private $images = array();
 
   public function setMock(PholioMock $mock) {
     $this->mock = $mock;
     return $this;
   }
 
+  public function setImages(array $images) {
+    $this->images = $images;
+    return $this;
+  }
+
   public function render() {
     if (!$this->mock) {
       throw new Exception("Call setMock() before render()!");
@@ -31,8 +37,18 @@ final class PholioMockEmbedView extends AphrontView {
       ),
       $mock_link);
 
+    $images_to_show = array();
+    if (!empty($this->images)) {
+      $images_to_show = array_intersect_key(
+        $this->mock->getImages(), array_flip($this->images));
+    }
+
+    if (empty($images_to_show)) {
+      $images_to_show = array_slice($this->mock->getImages(), 0, 4);
+    }
+
     $thumbnails = array();
-    foreach (array_slice($this->mock->getImages(), 0, 4) as $image) {
+    foreach ($images_to_show as $image) {
       $thumbfile = $image->getFile();
 
       $dimensions = PhabricatorImageTransformer::getPreviewDimensions(

src/docs/userguide/remarkup.diviner

@@ -425,3 +425,18 @@ Some general notes about this syntax:
   - you can use other Remarkup rules (like **bold**, //italics//, etc.) inside
     table cells.
 
+= Embedding Pholio mocks =
+
+You can embed a Pholio mock by using braces to refer to it:
+
+  {M123}         # Embed the mock M123
+
+By default the first four images from the mock set are displayed. This behavior
+can be overridden with the **image** option. With the **image** option you can
+provide one or more imageIDs to display.
+
+You can set the image (or images) to display like this:
+
+  {M123, image=12345}
+
+  {M123, image=12345 & 6789}

webroot/rsrc/css/application/pholio/pholio.css

@@ -151,6 +151,7 @@
   background-color: #282828;
   padding: 5px;
   color: #fff;
+  margin: 2px;
 }
 
 .pholio-mock-embed-head {

webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js

@@ -674,6 +674,13 @@ JX.behavior('pholio-mock-view', function(config) {
       image.desc);
     info.push(desc);
 
+    var embed = JX.$N(
+      'div',
+      {className: 'pholio-image-embedding'},
+      JX.$H('Embed this image:<br />{M' + config.mockID +
+        ', image=' + image.id + '}'));
+    info.push(embed);
+
     // Render image dimensions and visible size. If we have this infomation
     // from the server we can display some of it immediately; otherwise, we need
     // to wait for the image to load so we can read dimension information from