Partially generalize Remarkup previews and add support to Differential

Summary: Ref T3671. A lot of applications have pretty ad-hoc preview code. Clean it up a bit and add Summary preview to Differential. After ApplicationTransactions we might want to try to serialize the whole form and show a preview of all the transactions, but this seems not very useful in most cases (I'd guess that Remarkup previews are 99% of the value) and tricky to get right (e.g., adding images which don't exist yet to Pholio mocks). I think I can add this in a few other places, too. Test Plan: Edited Maniphest Tasks and Differential Revisions, mashed some buttons. Verified previews rendered correctly. Grepped for removed CSS classes (no hits). {F52907} Reviewers: btrahan, Firehed Reviewed By: btrahan CC: aran, chad Maniphest Tasks: T3671 Differential Revision: https://secure.phabricator.com/D6673
2024-11-27 01:02:42 +01:00 · 2013-08-05 10:46:39 -07:00 · 2013-08-05 10:46:39 -07:00 · 193a9611e4
commit 193a9611e4
parent 86989c9f98
15 changed files with 262 additions and 103 deletions
--- a/src/__celerity_resource_map__.php
+++ b/src/__celerity_resource_map__.php
@ -1845,19 +1845,6 @@ celerity_register_resource_map(array(
    ),
    'disk' => '/rsrc/js/application/maniphest/behavior-batch-selector.js',
  ),
-  'javelin-behavior-maniphest-description-preview' =>
-  array(
-    'uri' => '/res/58ba0ec2/rsrc/js/application/maniphest/behavior-task-preview.js',
-    'type' => 'js',
-    'requires' =>
-    array(
-      0 => 'javelin-behavior',
-      1 => 'javelin-dom',
-      2 => 'javelin-util',
-      3 => 'phabricator-shaped-request',
-    ),
-    'disk' => '/rsrc/js/application/maniphest/behavior-task-preview.js',
-  ),
  'javelin-behavior-maniphest-list-editor' =>
  array(
    'uri' => '/res/a251e72f/rsrc/js/application/maniphest/behavior-list-edit.js',
@ -2376,6 +2363,19 @@ celerity_register_resource_map(array(
    ),
    'disk' => '/rsrc/js/application/releeph/releeph-request-typeahead.js',
  ),
+  'javelin-behavior-remarkup-preview' =>
+  array(
+    'uri' => '/res/6ec98508/rsrc/js/core/behavior-remarkup-preview.js',
+    'type' => 'js',
+    'requires' =>
+    array(
+      0 => 'javelin-behavior',
+      1 => 'javelin-dom',
+      2 => 'javelin-util',
+      3 => 'phabricator-shaped-request',
+    ),
+    'disk' => '/rsrc/js/core/behavior-remarkup-preview.js',
+  ),
  'javelin-behavior-repository-crossreference' =>
  array(
    'uri' => '/res/d3f9d50b/rsrc/js/application/repository/repository-crossreference.js',
@ -2937,7 +2937,7 @@ celerity_register_resource_map(array(
  ),
  'maniphest-task-edit-css' =>
  array(
-    'uri' => '/res/0760f768/rsrc/css/application/maniphest/task-edit.css',
+    'uri' => '/res/c0c64a27/rsrc/css/application/maniphest/task-edit.css',
    'type' => 'css',
    'requires' =>
    array(
@ -3441,7 +3441,7 @@ celerity_register_resource_map(array(
  ),
  'phabricator-remarkup-css' =>
  array(
-    'uri' => '/res/07cab525/rsrc/css/core/remarkup.css',
+    'uri' => '/res/8531b6a1/rsrc/css/core/remarkup.css',
    'type' => 'css',
    'requires' =>
    array(
@ -3864,6 +3864,15 @@ celerity_register_resource_map(array(
    ),
    'disk' => '/rsrc/css/phui/phui-list.css',
  ),
+  'phui-remarkup-preview-css' =>
+  array(
+    'uri' => '/res/702b30c4/rsrc/css/phui/phui-remarkup-preview.css',
+    'type' => 'css',
+    'requires' =>
+    array(
+    ),
+    'disk' => '/rsrc/css/phui/phui-remarkup-preview.css',
+  ),
  'phui-spacing-css' =>
  array(
    'uri' => '/res/28891fd3/rsrc/css/phui/phui-spacing.css',
@ -4191,7 +4200,7 @@ celerity_register_resource_map(array(
 ), array(
  'packages' =>
  array(
-    'cc5dfafe' =>
+    '604768b8' =>
    array(
      'name' => 'core.pkg.css',
      'symbols' =>
@ -4239,7 +4248,7 @@ celerity_register_resource_map(array(
        40 => 'phabricator-property-list-view-css',
        41 => 'phabricator-tag-view-css',
      ),
-      'uri' => '/res/pkg/cc5dfafe/core.pkg.css',
+      'uri' => '/res/pkg/604768b8/core.pkg.css',
      'type' => 'css',
    ),
    '606f7152' =>
@ -4430,16 +4439,16 @@ celerity_register_resource_map(array(
  ),
  'reverse' =>
  array(
-    'aphront-dialog-view-css' => 'cc5dfafe',
-    'aphront-error-view-css' => 'cc5dfafe',
-    'aphront-form-view-css' => 'cc5dfafe',
-    'aphront-list-filter-view-css' => 'cc5dfafe',
-    'aphront-pager-view-css' => 'cc5dfafe',
-    'aphront-panel-view-css' => 'cc5dfafe',
-    'aphront-table-view-css' => 'cc5dfafe',
-    'aphront-tokenizer-control-css' => 'cc5dfafe',
-    'aphront-tooltip-css' => 'cc5dfafe',
-    'aphront-typeahead-control-css' => 'cc5dfafe',
+    'aphront-dialog-view-css' => '604768b8',
+    'aphront-error-view-css' => '604768b8',
+    'aphront-form-view-css' => '604768b8',
+    'aphront-list-filter-view-css' => '604768b8',
+    'aphront-pager-view-css' => '604768b8',
+    'aphront-panel-view-css' => '604768b8',
+    'aphront-table-view-css' => '604768b8',
+    'aphront-tokenizer-control-css' => '604768b8',
+    'aphront-tooltip-css' => '604768b8',
+    'aphront-typeahead-control-css' => '604768b8',
    'differential-changeset-view-css' => 'dd27a69b',
    'differential-core-view-css' => 'dd27a69b',
    'differential-inline-comment-editor' => '48040be9',
@ -4453,7 +4462,7 @@ celerity_register_resource_map(array(
    'differential-table-of-contents-css' => 'dd27a69b',
    'diffusion-commit-view-css' => 'c8ce2d88',
    'diffusion-icons-css' => 'c8ce2d88',
-    'global-drag-and-drop-css' => 'cc5dfafe',
+    'global-drag-and-drop-css' => '604768b8',
    'inline-comment-summary-css' => 'dd27a69b',
    'javelin-aphlict' => '606f7152',
    'javelin-behavior' => '2dbbb7d1',
@ -4526,55 +4535,55 @@ celerity_register_resource_map(array(
    'javelin-util' => '2dbbb7d1',
    'javelin-vector' => '2dbbb7d1',
    'javelin-workflow' => '2dbbb7d1',
-    'lightbox-attachment-css' => 'cc5dfafe',
+    'lightbox-attachment-css' => '604768b8',
    'maniphest-task-summary-css' => '06bacb9a',
    'maniphest-transaction-detail-css' => '06bacb9a',
-    'phabricator-action-list-view-css' => 'cc5dfafe',
-    'phabricator-application-launch-view-css' => 'cc5dfafe',
+    'phabricator-action-list-view-css' => '604768b8',
+    'phabricator-application-launch-view-css' => '604768b8',
    'phabricator-busy' => '606f7152',
    'phabricator-content-source-view-css' => 'dd27a69b',
-    'phabricator-core-css' => 'cc5dfafe',
-    'phabricator-crumbs-view-css' => 'cc5dfafe',
+    'phabricator-core-css' => '604768b8',
+    'phabricator-crumbs-view-css' => '604768b8',
    'phabricator-drag-and-drop-file-upload' => '48040be9',
    'phabricator-dropdown-menu' => '606f7152',
    'phabricator-file-upload' => '606f7152',
-    'phabricator-filetree-view-css' => 'cc5dfafe',
-    'phabricator-flag-css' => 'cc5dfafe',
-    'phabricator-form-view-css' => 'cc5dfafe',
-    'phabricator-header-view-css' => 'cc5dfafe',
+    'phabricator-filetree-view-css' => '604768b8',
+    'phabricator-flag-css' => '604768b8',
+    'phabricator-form-view-css' => '604768b8',
+    'phabricator-header-view-css' => '604768b8',
    'phabricator-hovercard' => '606f7152',
-    'phabricator-jump-nav' => 'cc5dfafe',
+    'phabricator-jump-nav' => '604768b8',
    'phabricator-keyboard-shortcut' => '606f7152',
    'phabricator-keyboard-shortcut-manager' => '606f7152',
-    'phabricator-main-menu-view' => 'cc5dfafe',
+    'phabricator-main-menu-view' => '604768b8',
    'phabricator-menu-item' => '606f7152',
-    'phabricator-nav-view-css' => 'cc5dfafe',
+    'phabricator-nav-view-css' => '604768b8',
    'phabricator-notification' => '606f7152',
-    'phabricator-notification-css' => 'cc5dfafe',
-    'phabricator-notification-menu-css' => 'cc5dfafe',
-    'phabricator-object-item-list-view-css' => 'cc5dfafe',
+    'phabricator-notification-css' => '604768b8',
+    'phabricator-notification-menu-css' => '604768b8',
+    'phabricator-object-item-list-view-css' => '604768b8',
    'phabricator-object-selector-css' => 'dd27a69b',
    'phabricator-phtize' => '606f7152',
    'phabricator-prefab' => '606f7152',
    'phabricator-project-tag-css' => '06bacb9a',
-    'phabricator-property-list-view-css' => 'cc5dfafe',
-    'phabricator-remarkup-css' => 'cc5dfafe',
+    'phabricator-property-list-view-css' => '604768b8',
+    'phabricator-remarkup-css' => '604768b8',
    'phabricator-shaped-request' => '48040be9',
-    'phabricator-side-menu-view-css' => 'cc5dfafe',
-    'phabricator-standard-page-view' => 'cc5dfafe',
-    'phabricator-tag-view-css' => 'cc5dfafe',
+    'phabricator-side-menu-view-css' => '604768b8',
+    'phabricator-standard-page-view' => '604768b8',
+    'phabricator-tag-view-css' => '604768b8',
    'phabricator-textareautils' => '606f7152',
    'phabricator-tooltip' => '606f7152',
-    'phabricator-transaction-view-css' => 'cc5dfafe',
-    'phabricator-zindex-css' => 'cc5dfafe',
-    'phui-button-css' => 'cc5dfafe',
-    'phui-form-css' => 'cc5dfafe',
-    'phui-icon-view-css' => 'cc5dfafe',
-    'phui-spacing-css' => 'cc5dfafe',
-    'sprite-apps-large-css' => 'cc5dfafe',
-    'sprite-gradient-css' => 'cc5dfafe',
-    'sprite-icons-css' => 'cc5dfafe',
-    'sprite-menu-css' => 'cc5dfafe',
-    'syntax-highlighting-css' => 'cc5dfafe',
+    'phabricator-transaction-view-css' => '604768b8',
+    'phabricator-zindex-css' => '604768b8',
+    'phui-button-css' => '604768b8',
+    'phui-form-css' => '604768b8',
+    'phui-icon-view-css' => '604768b8',
+    'phui-spacing-css' => '604768b8',
+    'sprite-apps-large-css' => '604768b8',
+    'sprite-gradient-css' => '604768b8',
+    'sprite-icons-css' => '604768b8',
+    'sprite-menu-css' => '604768b8',
+    'syntax-highlighting-css' => '604768b8',
  ),
 ));
--- a/src/__phutil_library_map__.php
+++ b/src/__phutil_library_map__.php
@ -749,6 +749,7 @@ phutil_register_library_map(array(
    'PHUIListView' => 'view/phui/PHUIListView.php',
    'PHUIListViewTestCase' => 'view/layout/__tests__/PHUIListViewTestCase.php',
    'PHUIPagedFormView' => 'view/form/PHUIPagedFormView.php',
+    'PHUIRemarkupPreviewPanel' => 'view/phui/PHUIRemarkupPreviewPanel.php',
    'PHUIStatusItemView' => 'view/phui/PHUIStatusItemView.php',
    'PHUIStatusListView' => 'view/phui/PHUIStatusListView.php',
    'PHUITextExample' => 'applications/uiexample/examples/PHUITextExample.php',
@ -1272,6 +1273,7 @@ phutil_register_library_map(array(
    'PhabricatorMarkupEngine' => 'infrastructure/markup/PhabricatorMarkupEngine.php',
    'PhabricatorMarkupInterface' => 'infrastructure/markup/PhabricatorMarkupInterface.php',
    'PhabricatorMarkupOneOff' => 'infrastructure/markup/PhabricatorMarkupOneOff.php',
+    'PhabricatorMarkupPreviewController' => 'infrastructure/markup/PhabricatorMarkupPreviewController.php',
    'PhabricatorMercurialGraphStream' => 'applications/repository/daemon/PhabricatorMercurialGraphStream.php',
    'PhabricatorMetaMTAActor' => 'applications/metamta/query/PhabricatorMetaMTAActor.php',
    'PhabricatorMetaMTAActorQuery' => 'applications/metamta/query/PhabricatorMetaMTAActorQuery.php',
@ -2764,6 +2766,7 @@ phutil_register_library_map(array(
    'PHUIListView' => 'AphrontTagView',
    'PHUIListViewTestCase' => 'PhabricatorTestCase',
    'PHUIPagedFormView' => 'AphrontTagView',
+    'PHUIRemarkupPreviewPanel' => 'AphrontTagView',
    'PHUIStatusItemView' => 'AphrontTagView',
    'PHUIStatusListView' => 'AphrontTagView',
    'PHUITextExample' => 'PhabricatorUIExample',
@ -3320,6 +3323,7 @@ phutil_register_library_map(array(
    'PhabricatorManiphestTaskTestDataGenerator' => 'PhabricatorTestDataGenerator',
    'PhabricatorMarkupCache' => 'PhabricatorCacheDAO',
    'PhabricatorMarkupOneOff' => 'PhabricatorMarkupInterface',
+    'PhabricatorMarkupPreviewController' => 'PhabricatorController',
    'PhabricatorMetaMTAActorQuery' => 'PhabricatorQuery',
    'PhabricatorMetaMTAConfigOptions' => 'PhabricatorApplicationConfigOptions',
    'PhabricatorMetaMTAController' => 'PhabricatorController',
--- a/src/applications/differential/application/PhabricatorApplicationDifferential.php
+++ b/src/applications/differential/application/PhabricatorApplicationDifferential.php
@ -60,6 +60,7 @@ final class PhabricatorApplicationDifferential extends PhabricatorApplication {
        ),
        'subscribe/(?P<action>add|rem)/(?P<id>[1-9]\d*)/'
          => 'DifferentialSubscribeController',
+        'preview/' => 'PhabricatorMarkupPreviewController',
      ),
    );
  }
--- a/src/applications/differential/controller/DifferentialRevisionEditController.php
+++ b/src/applications/differential/controller/DifferentialRevisionEditController.php
@ -147,11 +147,13 @@ final class DifferentialRevisionEditController extends DifferentialController {
          id(new AphrontFormDividerControl()));
    }

+    $preview = array();
    foreach ($aux_fields as $aux_field) {
      $control = $aux_field->renderEditControl();
      if ($control) {
        $form->appendChild($control);
      }
+      $preview[] = $aux_field->renderEditPreview();
    }

    $submit = id(new AphrontFormSubmitControl())
@ -185,14 +187,14 @@ final class DifferentialRevisionEditController extends DifferentialController {

    $crumbs->addCrumb(
      id(new PhabricatorCrumbView())
-        ->setName($title)
-        ->setHref(''));
+        ->setName($title));

    return $this->buildApplicationPage(
      array(
        $crumbs,
        $error_view,
-        $form),
+        $form,
+        $preview),
      array(
        'title' => $title,
        'device' => true,
--- a/src/applications/differential/field/specification/DifferentialFieldSpecification.php
+++ b/src/applications/differential/field/specification/DifferentialFieldSpecification.php
@ -148,6 +148,19 @@ abstract class DifferentialFieldSpecification {
  }


+  /**
+   * Optionally, build a preview panel for the field which will appear on the
+   * edit interface. This is used for the "Summary" field, but custom fields
+   * generally need not implement it.
+   *
+   * @return AphrontView|string Something renderable.
+   * @task edit
+   */
+  public function renderEditPreview() {
+    return null;
+  }
+
+
  /**
   * This method will be called after @{method:setValueFromRequest} but before
   * the field is saved. It gives you an opportunity to inspect the field value
--- a/src/applications/differential/field/specification/DifferentialSummaryFieldSpecification.php
+++ b/src/applications/differential/field/specification/DifferentialSummaryFieldSpecification.php
@ -4,6 +4,7 @@ final class DifferentialSummaryFieldSpecification
  extends DifferentialFreeformFieldSpecification {

  private $summary = '';
+  private $controlID;

  public function shouldAppearOnEdit() {
    return true;
@ -19,12 +20,20 @@ final class DifferentialSummaryFieldSpecification
  }

  public function renderEditControl() {
-    return id(new AphrontFormTextAreaControl())
+    return id(new PhabricatorRemarkupControl())
      ->setLabel('Summary')
      ->setName('summary')
+      ->setID($this->getControlID())
      ->setValue($this->summary);
  }

+  public function renderEditPreview() {
+    return id(new PHUIRemarkupPreviewPanel())
+      ->setHeader(pht('Summary Preview'))
+      ->setControlID($this->getControlID())
+      ->setPreviewURI('/differential/preview/');
+  }
+
  public function shouldExtractMentions() {
    return true;
  }
@ -86,4 +95,11 @@ final class DifferentialSummaryFieldSpecification
    return PhabricatorSearchField::FIELD_BODY;
  }

+  private function getControlID() {
+    if (!$this->controlID) {
+      $this->controlID = celerity_generate_unique_node_id();
+    }
+    return $this->controlID;
+  }
+
 }
--- a/src/applications/differential/field/specification/DifferentialTestPlanFieldSpecification.php
+++ b/src/applications/differential/field/specification/DifferentialTestPlanFieldSpecification.php
@ -31,7 +31,7 @@ final class DifferentialTestPlanFieldSpecification
      }
    }

-    return id(new AphrontFormTextAreaControl())
+    return id(new PhabricatorRemarkupControl())
      ->setLabel('Test Plan')
      ->setName('testplan')
      ->setValue($this->plan)
--- a/src/applications/maniphest/application/PhabricatorApplicationManiphest.php
+++ b/src/applications/maniphest/application/PhabricatorApplicationManiphest.php
@ -59,7 +59,7 @@ final class PhabricatorApplicationManiphest extends PhabricatorApplication {
          'descriptionchange/(?:(?P<id>[1-9]\d*)/)?' =>
            'ManiphestTaskDescriptionChangeController',
          'descriptionpreview/' =>
-            'ManiphestTaskDescriptionPreviewController',
+            'PhabricatorMarkupPreviewController',
        ),
        'transaction/' => array(
          'save/' => 'ManiphestTransactionSaveController',
--- a/src/applications/maniphest/controller/ManiphestTaskEditController.php
+++ b/src/applications/maniphest/controller/ManiphestTaskEditController.php
@ -536,30 +536,10 @@ final class ManiphestTaskEditController extends ManiphestController {
          ->addCancelButton($cancel_uri)
          ->setValue($button_name));

-    $inst1 = pht('Description Preview');
-    $inst2 = pht('Loading preview...');
-
-    $description_preview_panel = hsprintf(
-      '<div class="aphront-panel-preview aphront-panel-preview-full">
-        <div class="maniphest-description-preview-header">
-          %s
-        </div>
-        <div id="description-preview">
-          <div class="aphront-panel-preview-loading-text">
-            %s
-          </div>
-        </div>
-      </div>',
-      $inst1,
-      $inst2);
-
-    Javelin::initBehavior(
-      'maniphest-description-preview',
-      array(
-        'preview'   => 'description-preview',
-        'textarea'  => 'description-textarea',
-        'uri'       => '/maniphest/task/descriptionpreview/',
-      ));
+    $preview = id(new PHUIRemarkupPreviewPanel())
+      ->setHeader(pht('Description Preview'))
+      ->setControlID('description-textarea')
+      ->setPreviewURI($this->getApplicationURI('task/descriptionpreview/'));

    if ($task->getID()) {
      $page_objects = array( $task->getPHID() );
@ -583,7 +563,7 @@ final class ManiphestTaskEditController extends ManiphestController {
        $crumbs,
        $error_view,
        $form,
-        $description_preview_panel,
+        $preview,
      ),
      array(
        'title' => $header_name,
--- a/src/infrastructure/markup/PhabricatorMarkupPreviewController.php
+++ b/src/infrastructure/markup/PhabricatorMarkupPreviewController.php
@ -0,0 +1,20 @@
+<?php
+
+final class PhabricatorMarkupPreviewController
+  extends PhabricatorController {
+
+  public function processRequest() {
+    $request = $this->getRequest();
+    $viewer = $request->getUser();
+
+    $text = $request->getStr('text');
+
+    $output = PhabricatorMarkupEngine::renderOneObject(
+      id(new PhabricatorMarkupOneOff())->setContent($text),
+      'default',
+      $viewer);
+
+    return id(new AphrontAjaxResponse())
+      ->setContent($output);
+  }
+}
--- a/src/view/phui/PHUIRemarkupPreviewPanel.php
+++ b/src/view/phui/PHUIRemarkupPreviewPanel.php
@ -0,0 +1,94 @@
+<?php
+
+/**
+ * Render a simple preview panel for a bound Remarkup text control.
+ */
+final class PHUIRemarkupPreviewPanel extends AphrontTagView {
+
+  private $header;
+  private $loadingText;
+  private $controlID;
+  private $previewURI;
+
+  protected function canAppendChild() {
+    return false;
+  }
+
+  public function setPreviewURI($preview_uri) {
+    $this->previewURI = $preview_uri;
+    return $this;
+  }
+
+  public function setControlID($control_id) {
+    $this->controlID = $control_id;
+    return $this;
+  }
+
+  public function setHeader($header) {
+    $this->header = $header;
+    return $this;
+  }
+
+  public function setLoadingText($loading_text) {
+    $this->loadingText = $loading_text;
+    return $this;
+  }
+
+  public function getTagName() {
+    return 'div';
+  }
+
+  public function getTagAttributes() {
+    return array(
+      'class' => 'phui-remarkup-preview',
+    );
+  }
+
+  protected function getTagContent() {
+    if ($this->previewURI === null) {
+      throw new Exception("Call setPreviewURI() before rendering!");
+    }
+    if ($this->controlID === null) {
+      throw new Exception("Call setControlID() before rendering!");
+    }
+
+    $preview_id = celerity_generate_unique_node_id();
+
+    require_celerity_resource('phui-remarkup-preview-css');
+    Javelin::initBehavior(
+      'remarkup-preview',
+      array(
+        'previewID' => $preview_id,
+        'controlID' => $this->controlID,
+        'uri' => $this->previewURI,
+      ));
+
+    $loading = phutil_tag(
+      'div',
+      array(
+        'class' => 'phui-preview-loading-text',
+      ),
+      nonempty($this->loadingText, pht('Loading preview...')));
+
+    $header = null;
+    if ($this->header) {
+      $header = phutil_tag(
+        'div',
+        array(
+          'class' => 'phui-preview-header',
+        ),
+        $this->header);
+    }
+
+    $preview = phutil_tag(
+      'div',
+      array(
+        'id' => $preview_id,
+        'class' => 'phabricator-remarkup',
+      ),
+      $loading);
+
+    return array($header, $preview);
+  }
+
+}
--- a/webroot/rsrc/css/application/maniphest/task-edit.css
+++ b/webroot/rsrc/css/application/maniphest/task-edit.css
@ -2,12 +2,6 @@
 * @provides maniphest-task-edit-css
 */

-.maniphest-description-preview-header {
-  color: #666;
-  margin-bottom: 1em;
-  font-size: 11px;
-}
-
 .maniphest-auxiliary-header {
  font-weight: bold;
  font-size: 14px;
--- a/webroot/rsrc/css/core/remarkup.css
+++ b/webroot/rsrc/css/core/remarkup.css
@ -158,6 +158,7 @@
  background: #dddddd;
 }

+.phui-remarkup-preview .phabricator-remarkup-mention-unknown,
 .aphront-panel-preview .phabricator-remarkup-mention-unknown {
  font-weight: bold;
  background: #ffaaaa;
--- a/webroot/rsrc/css/phui/phui-remarkup-preview.css
+++ b/webroot/rsrc/css/phui/phui-remarkup-preview.css
@ -0,0 +1,23 @@
+/**
+ * @provides phui-remarkup-preview-css
+ */
+
+.phui-preview-header {
+  color: #666666;
+  margin-bottom: 12px;
+  font-size: 11px;
+}
+
+.phui-remarkup-preview {
+  background: #fbfbfb;
+  border-bottom: 1px solid #aaaaaa;
+  padding: 12px;
+}
+
+.device-phone .aphront-panel-preview {
+  display: none;
+}
+
+.phui-preview-loading-text {
+  color: #666666;
+}
--- a/webroot/rsrc/js/application/maniphest/behavior-task-preview.js
+++ b/webroot/rsrc/js/application/maniphest/behavior-task-preview.js
@ -1,29 +1,31 @@
 /**
- * @provides javelin-behavior-maniphest-description-preview
+ * @provides javelin-behavior-remarkup-preview
 * @requires javelin-behavior
 *           javelin-dom
 *           javelin-util
 *           phabricator-shaped-request
 */

-JX.behavior('maniphest-description-preview', function(config) {
+JX.behavior('remarkup-preview', function(config) {

-  var preview = JX.$(config.preview);
-  var textarea = JX.$(config.textarea);
+  var preview = JX.$(config.previewID);
+  var control = JX.$(config.controlID);

  var callback = function(r) {
-    JX.DOM.setContent(JX.$(config.preview), JX.$H(r));
+    JX.DOM.setContent(preview, JX.$H(r));
  };

  var getdata = function() {
    return {
-      description : textarea.value
+      text : control.value
    };
  };

  var request = new JX.PhabricatorShapedRequest(config.uri, callback, getdata);
  var trigger = JX.bind(request, request.trigger);

-  JX.DOM.listen(textarea, 'keydown', null, trigger);
+  JX.DOM.listen(control, 'keydown', null, trigger);
  request.start();
+
+  trigger();
 });