Put inline previews in remarkup textareas

Summary:
Ref T3967. This gives us a reasonable baseline for doing remarkup previews inline in all contexts, and works in weird/constrained context including:

  - inline comments;
  - conpherence; and
  - custom fields.

It would be nicer to go beyond this in contexts like Phame posts, but this is a start, at least.

Test Plan:
{F1040877}

{F1040878}

Reviewers: chad

Reviewed By: chad

Maniphest Tasks: T3967

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

Author: epriestley

resources/celerity/map.php

@@ -7,8 +7,8 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '4cf32aa0',
-    'core.pkg.js' => '821768c9',
+    'core.pkg.css' => '1a2d5480',
+    'core.pkg.js' => 'cf262309',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '2de124c9',
     'differential.pkg.js' => '64e69521',
@@ -104,7 +104,7 @@
     'rsrc/css/application/tokens/tokens.css' => '3d0f239e',
     'rsrc/css/application/uiexample/example.css' => '528b19de',
     'rsrc/css/core/core.css' => 'a76cefc9',
-    'rsrc/css/core/remarkup.css' => '275e362f',
+    'rsrc/css/core/remarkup.css' => '72024fc6',
     'rsrc/css/core/syntax.css' => '9fd11da8',
     'rsrc/css/core/z-index.css' => '57ddcaa2',
     'rsrc/css/diviner/diviner-shared.css' => 'aa3656aa',
@@ -487,7 +487,7 @@
     'rsrc/js/core/behavior-object-selector.js' => '49b73b36',
     'rsrc/js/core/behavior-oncopy.js' => '2926fff2',
     'rsrc/js/core/behavior-phabricator-nav.js' => '56a1ca03',
-    'rsrc/js/core/behavior-phabricator-remarkup-assist.js' => '461fd61b',
+    'rsrc/js/core/behavior-phabricator-remarkup-assist.js' => 'ecddcbe2',
     'rsrc/js/core/behavior-refresh-csrf.js' => 'ab2f381b',
     'rsrc/js/core/behavior-remarkup-preview.js' => 'f7379f45',
     'rsrc/js/core/behavior-reorder-applications.js' => '76b9fc3e',
@@ -640,7 +640,7 @@
     'javelin-behavior-phabricator-notification-example' => '8ce821c5',
     'javelin-behavior-phabricator-object-selector' => '49b73b36',
     'javelin-behavior-phabricator-oncopy' => '2926fff2',
-    'javelin-behavior-phabricator-remarkup-assist' => '461fd61b',
+    'javelin-behavior-phabricator-remarkup-assist' => 'ecddcbe2',
     'javelin-behavior-phabricator-reveal-content' => '60821bc7',
     'javelin-behavior-phabricator-search-typeahead' => '048330fa',
     'javelin-behavior-phabricator-show-older-transactions' => 'dbbf48b6',
@@ -759,7 +759,7 @@
     'phabricator-object-selector-css' => '85ee8ce6',
     'phabricator-phtize' => 'd254d646',
     'phabricator-prefab' => '666c80c5',
-    'phabricator-remarkup-css' => '275e362f',
+    'phabricator-remarkup-css' => '72024fc6',
     'phabricator-search-results-css' => '7dea472c',
     'phabricator-shaped-request' => '7cbe244b',
     'phabricator-side-menu-view-css' => 'bec2458e',
@@ -1100,15 +1100,6 @@
       'javelin-behavior',
       'javelin-dom',
     ),
-    '461fd61b' => array(
-      'javelin-behavior',
-      'javelin-stratcom',
-      'javelin-dom',
-      'phabricator-phtize',
-      'phabricator-textareautils',
-      'javelin-workflow',
-      'javelin-vector',
-    ),
     '469c0d9e' => array(
       'javelin-behavior',
       'javelin-dom',
@@ -1961,6 +1952,15 @@
       'phabricator-phtize',
       'javelin-dom',
     ),
+    'ecddcbe2' => array(
+      'javelin-behavior',
+      'javelin-stratcom',
+      'javelin-dom',
+      'phabricator-phtize',
+      'phabricator-textareautils',
+      'javelin-workflow',
+      'javelin-vector',
+    ),
     'edd1ba66' => array(
       'javelin-behavior',
       'javelin-stratcom',

src/__phutil_library_map__.php

@@ -1644,6 +1644,7 @@
     'PhabricatorApplicationTransactionNoEffectResponse' => 'applications/transactions/response/PhabricatorApplicationTransactionNoEffectResponse.php',
     'PhabricatorApplicationTransactionPublishWorker' => 'applications/transactions/worker/PhabricatorApplicationTransactionPublishWorker.php',
     'PhabricatorApplicationTransactionQuery' => 'applications/transactions/query/PhabricatorApplicationTransactionQuery.php',
+    'PhabricatorApplicationTransactionRemarkupPreviewController' => 'applications/transactions/controller/PhabricatorApplicationTransactionRemarkupPreviewController.php',
     'PhabricatorApplicationTransactionReplyHandler' => 'applications/transactions/replyhandler/PhabricatorApplicationTransactionReplyHandler.php',
     'PhabricatorApplicationTransactionResponse' => 'applications/transactions/response/PhabricatorApplicationTransactionResponse.php',
     'PhabricatorApplicationTransactionShowOlderController' => 'applications/transactions/controller/PhabricatorApplicationTransactionShowOlderController.php',
@@ -5760,6 +5761,7 @@
     'PhabricatorApplicationTransactionNoEffectResponse' => 'AphrontProxyResponse',
     'PhabricatorApplicationTransactionPublishWorker' => 'PhabricatorWorker',
     'PhabricatorApplicationTransactionQuery' => 'PhabricatorCursorPagedPolicyAwareQuery',
+    'PhabricatorApplicationTransactionRemarkupPreviewController' => 'PhabricatorApplicationTransactionController',
     'PhabricatorApplicationTransactionReplyHandler' => 'PhabricatorMailReplyHandler',
     'PhabricatorApplicationTransactionResponse' => 'AphrontProxyResponse',
     'PhabricatorApplicationTransactionShowOlderController' => 'PhabricatorApplicationTransactionController',

src/applications/transactions/application/PhabricatorTransactionsApplication.php

@@ -33,6 +33,8 @@ public function getRoutes() {
           => 'PhabricatorApplicationTransactionShowOlderController',
         '(?P<value>old|new)/(?<phid>[^/]+)/'
           => 'PhabricatorApplicationTransactionValueController',
+        'remarkuppreview/'
+          => 'PhabricatorApplicationTransactionRemarkupPreviewController',
         'editengine/' => array(
           $this->getQueryRoutePattern()
             => 'PhabricatorEditEngineListController',

src/applications/transactions/controller/PhabricatorApplicationTransactionRemarkupPreviewController.php

@@ -0,0 +1,25 @@
+<?php
+
+final class PhabricatorApplicationTransactionRemarkupPreviewController
+  extends PhabricatorApplicationTransactionController {
+
+  public function shouldAllowPublic() {
+    return true;
+  }
+
+  public function handleRequest(AphrontRequest $request) {
+    $viewer = $this->getViewer();
+
+    $corpus = $request->getStr('corpus');
+
+    $remarkup = new PHUIRemarkupView($viewer, $corpus);
+
+    $content = array(
+      'content' => hsprintf('%s', $remarkup),
+    );
+
+    return id(new AphrontAjaxResponse())
+      ->setContent($content);
+  }
+
+}

src/view/form/control/PhabricatorRemarkupControl.php

@@ -42,6 +42,8 @@ protected function renderInput() {
         ));
     }
 
+    $root_id = celerity_generate_unique_node_id();
+
     Javelin::initBehavior(
       'phabricator-remarkup-assist',
       array(
@@ -56,6 +58,7 @@ protected function renderInput() {
           'URL' => pht('URL'),
         ),
         'disabled' => $this->getDisabled(),
+        'rootID' => $root_id,
       ));
     Javelin::initBehavior('phabricator-tooltips', array());
 
@@ -114,11 +117,22 @@ protected function renderInput() {
       );
     }
 
+    $actions['fa-eye'] = array(
+      'tip' => pht('Preview'),
+      'align' => 'right',
+    );
+
+    $actions[] = array(
+      'spacer' => true,
+      'align' => 'right',
+    );
+
     $actions['fa-life-bouy'] = array(
-        'tip' => pht('Help'),
-        'align' => 'right',
-        'href'  => PhabricatorEnv::getDoclink('Remarkup Reference'),
-      );
+      'tip' => pht('Help'),
+      'align' => 'right',
+      'href'  => PhabricatorEnv::getDoclink('Remarkup Reference'),
+    );
+
 
     if (!$this->disableFullScreen) {
       $actions[] = array(
@@ -230,6 +244,7 @@ protected function renderInput() {
       array(
         'sigil' => 'remarkup-assist-control',
         'class' => $this->getDisabled() ? 'disabled-control' : null,
+        'id' => $root_id,
       ),
       array(
         $buttons,

webroot/rsrc/css/core/remarkup.css

@@ -498,6 +498,7 @@ var.remarkup-assist-textarea {
   height: auto;
   border-width: 1px 0 0 0;
   outline: none;
+  resize: none;
 }
 
 .phabricator-image-macro-hero {
@@ -523,3 +524,35 @@ var.remarkup-assist-textarea {
   background-color: {$lightviolet};
   padding: 0 4px;
 }
+
+.remarkup-inline-preview {
+  display: block;
+  position: relative;
+  background: #fff;
+  overflow-y: auto;
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid {$sky};
+  resize: vertical;
+  padding: 4px 6px;
+}
+
+.remarkup-control-fullscreen-mode .remarkup-inline-preview {
+  resize: none;
+}
+
+.remarkup-inline-preview * {
+  resize: none;
+}
+
+.remarkup-assist-button.preview-active {
+  background: {$sky};
+}
+
+.remarkup-assist-button.preview-active .phui-icon-view {
+  color: #ffffff;
+}
+
+.remarkup-assist-button.preview-active:hover .phui-icon-view {
+  color: {$lightsky};
+}