Treat Pholio image descriptions as Remarkup, not plain text

Summary: Fixes T5283.

Test Plan: See screenshots.

Reviewers: chad

Reviewed By: chad

Subscribers: epriestley

Maniphest Tasks: T5283

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

resources/celerity/map.php

@@ -79,9 +79,9 @@ return array(
     'rsrc/css/application/paste/paste.css' => 'aa1767d1',
     'rsrc/css/application/people/people-profile.css' => 'ba7b2762',
     'rsrc/css/application/phame/phame.css' => '19ecc703',
-    'rsrc/css/application/pholio/pholio-edit.css' => 'b9e59b6d',
+    'rsrc/css/application/pholio/pholio-edit.css' => '90616955',
     'rsrc/css/application/pholio/pholio-inline-comments.css' => '3d5a5590',
-    'rsrc/css/application/pholio/pholio.css' => '344c1440',
+    'rsrc/css/application/pholio/pholio.css' => '5bd4c882',
     'rsrc/css/application/phortune/phortune-credit-card-form.css' => 'b25b4beb',
     'rsrc/css/application/phrequent/phrequent.css' => 'ffc185ad',
     'rsrc/css/application/phriction/phriction-document-css.css' => '7d7f0071',
@@ -398,7 +398,7 @@ return array(
     'rsrc/js/application/passphrase/phame-credential-control.js' => '1e1c8a59',
     'rsrc/js/application/phame/phame-post-preview.js' => '61d927ec',
     'rsrc/js/application/pholio/behavior-pholio-mock-edit.js' => '1e1e8bb0',
-    'rsrc/js/application/pholio/behavior-pholio-mock-view.js' => 'd7f9b108',
+    'rsrc/js/application/pholio/behavior-pholio-mock-view.js' => '81f57c3a',
     'rsrc/js/application/phortune/behavior-balanced-payment-form.js' => '3b3e1664',
     'rsrc/js/application/phortune/behavior-stripe-payment-form.js' => '1693a296',
     'rsrc/js/application/phortune/behavior-test-payment-form.js' => 'b3e5ee60',
@@ -622,7 +622,7 @@ return array(
     'javelin-behavior-phabricator-watch-anchor' => '06e05112',
     'javelin-behavior-phame-post-preview' => '61d927ec',
     'javelin-behavior-pholio-mock-edit' => '1e1e8bb0',
-    'javelin-behavior-pholio-mock-view' => 'd7f9b108',
+    'javelin-behavior-pholio-mock-view' => '81f57c3a',
     'javelin-behavior-phui-object-box-tabs' => 'a3e2244e',
     'javelin-behavior-phui-timeline-dropdown-menu' => '4d94d9c3',
     'javelin-behavior-policy-control' => 'f3fef818',
@@ -748,8 +748,8 @@ return array(
     'phabricator-uiexample-reactor-sendproperties' => '551add57',
     'phabricator-zindex-css' => 'efb673ac',
     'phame-css' => '19ecc703',
-    'pholio-css' => '344c1440',
+    'pholio-css' => '5bd4c882',
-    'pholio-edit-css' => 'b9e59b6d',
+    'pholio-edit-css' => '90616955',
     'pholio-inline-comments-css' => '3d5a5590',
     'phortune-credit-card-form' => '2290aeef',
     'phortune-credit-card-form-css' => 'b25b4beb',
@@ -1421,6 +1421,21 @@ return array(
       0 => 'javelin-behavior',
       1 => 'javelin-history',
     ),
+    '81f57c3a' =>
+    array(
+      0 => 'javelin-behavior',
+      1 => 'javelin-util',
+      2 => 'javelin-stratcom',
+      3 => 'javelin-dom',
+      4 => 'javelin-vector',
+      5 => 'javelin-magical-init',
+      6 => 'javelin-request',
+      7 => 'javelin-history',
+      8 => 'javelin-workflow',
+      9 => 'javelin-mask',
+      10 => 'javelin-behavior-device',
+      11 => 'phabricator-keyboard-shortcut',
+    ),
     '82ce2142' =>
     array(
       0 => 'aphront-typeahead-control-css',
@@ -1868,21 +1883,6 @@ return array(
       3 => 'javelin-dom',
       4 => 'phabricator-keyboard-shortcut',
     ),
-    'd7f9b108' =>
-    array(
-      0 => 'javelin-behavior',
-      1 => 'javelin-util',
-      2 => 'javelin-stratcom',
-      3 => 'javelin-dom',
-      4 => 'javelin-vector',
-      5 => 'javelin-magical-init',
-      6 => 'javelin-request',
-      7 => 'javelin-history',
-      8 => 'javelin-workflow',
-      9 => 'javelin-mask',
-      10 => 'javelin-behavior-device',
-      11 => 'phabricator-keyboard-shortcut',
-    ),
     'd83a949c' =>
     array(
       0 => 'javelin-behavior',

src/applications/pholio/view/PholioMockImagesView.php

@@ -67,6 +67,13 @@ final class PholioMockImagesView extends AphrontView {
     $nonimage_uri = celerity_get_resource_uri(
       'rsrc/image/icon/fatcow/thumbnails/default.p100.png');
 
+    $engine = id(new PhabricatorMarkupEngine())
+      ->setViewer($this->getUser());
+    foreach ($mock->getAllImages() as $image) {
+      $engine->addObject($image, 'default');
+    }
+    $engine->process();
+
     foreach ($mock->getAllImages() as $image) {
       $file = $image->getFile();
       $metadata = $file->getMetadata();
@@ -86,7 +93,7 @@ final class PholioMockImagesView extends AphrontView {
         'width' => $x,
         'height' => $y,
         'title' => $image->getName(),
-        'desc' => $image->getDescription(),
+        'descriptionMarkup' => $engine->getOutput($image, 'default'),
         'isObsolete' => (bool)$image->getIsObsolete(),
         'isImage' => $file->isViewableImage(),
         'isViewable' => $file->isViewableInBrowser(),

src/applications/pholio/view/PholioUploadedImageView.php

@@ -34,7 +34,7 @@ final class PholioUploadedImageView extends AphrontView {
       ->setSigil('image-title')
       ->setLabel(pht('Title'));
 
-    $description = id(new AphrontFormTextAreaControl())
+    $description = id(new PhabricatorRemarkupControl())
       ->setName('description_'.$phid)
       ->setValue($image->getDescription())
       ->setSigil('image-description')

webroot/rsrc/css/application/pholio/pholio-edit.css

@@ -86,6 +86,7 @@
   text-align: left;
   padding: 0;
   margin: 0;
+  clear: both;
 }
 
 .pholio-uploaded-image .pholio-image-details .aphront-form-label {

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

@@ -200,3 +200,8 @@ a.pholio-image-button-link .phui-icon-view {
 .device-desktop a.pholio-image-button-link:hover .phui-icon-view {
   color: {$sky};
 }
+
+.pholio-image-description {
+  padding: 12px;
+  border-top: 1px solid {$lightblueborder};
+}

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

@@ -628,12 +628,6 @@ JX.behavior('pholio-mock-view', function(config) {
       image.title);
     info.push(title);
 
-    var desc = JX.$N(
-      'div',
-      {className: 'pholio-image-description'},
-      image.desc);
-    info.push(desc);
-
     if (!image.isObsolete) {
       var embed = JX.$N(
         'div',
@@ -648,7 +642,12 @@ JX.behavior('pholio-mock-view', function(config) {
     }
     info = JX.$N('div', {className: 'pholio-image-info'}, info);
 
-    return [buttons, info];
+    var desc = JX.$N(
+      'div',
+      {className: 'pholio-image-description'},
+      JX.$H(image.descriptionMarkup));
+
+    return [buttons, info, desc];
   }
 
   function render_reticle(classes) {