Add more options to Remarkup

Summary:
See D1416. Add options to file-embed syntax, and document new code and
embed options.

Test Plan: Used new options in markup blocks.

Reviewers: davidreuss, btrahan, jungejason

Reviewed By: btrahan

CC: aran

Maniphest Tasks: T336

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

src/__celerity_resource_map__.php

@@ -213,7 +213,7 @@ celerity_register_resource_map(array(
   ),
   'differential-revision-comment-css' =>
   array(
-    'uri' => '/res/b6e10dee/rsrc/css/application/differential/revision-comment.css',
+    'uri' => '/res/e4b350b2/rsrc/css/application/differential/revision-comment.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -1470,7 +1470,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-remarkup-css' =>
   array(
-    'uri' => '/res/795fa8a9/rsrc/css/core/remarkup.css',
+    'uri' => '/res/39f358b8/rsrc/css/core/remarkup.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -1784,7 +1784,7 @@ celerity_register_resource_map(array(
       'uri' => '/res/pkg/b164acea/javelin.pkg.js',
       'type' => 'js',
     ),
-    'bbf3d3f2' =>
+    'bb4d65a4' =>
     array(
       'name' => 'core.pkg.css',
       'symbols' =>
@@ -1805,10 +1805,10 @@ celerity_register_resource_map(array(
         13 => 'phabricator-remarkup-css',
         14 => 'syntax-highlighting-css',
       ),
-      'uri' => '/res/pkg/bbf3d3f2/core.pkg.css',
+      'uri' => '/res/pkg/bb4d65a4/core.pkg.css',
       'type' => 'css',
     ),
-    'c9399497' =>
+    'fdcba95b' =>
     array(
       'name' => 'differential.pkg.css',
       'symbols' =>
@@ -1826,32 +1826,32 @@ celerity_register_resource_map(array(
         10 => 'phabricator-content-source-view-css',
         11 => 'differential-local-commits-view-css',
       ),
-      'uri' => '/res/pkg/c9399497/differential.pkg.css',
+      'uri' => '/res/pkg/fdcba95b/differential.pkg.css',
       'type' => 'css',
     ),
   ),
   'reverse' =>
   array(
-    'aphront-crumbs-view-css' => 'bbf3d3f2',
+    'aphront-crumbs-view-css' => 'bb4d65a4',
-    'aphront-dialog-view-css' => 'bbf3d3f2',
+    'aphront-dialog-view-css' => 'bb4d65a4',
-    'aphront-form-view-css' => 'bbf3d3f2',
+    'aphront-form-view-css' => 'bb4d65a4',
-    'aphront-headsup-action-list-view-css' => 'c9399497',
+    'aphront-headsup-action-list-view-css' => 'fdcba95b',
-    'aphront-list-filter-view-css' => 'bbf3d3f2',
+    'aphront-list-filter-view-css' => 'bb4d65a4',
-    'aphront-panel-view-css' => 'bbf3d3f2',
+    'aphront-panel-view-css' => 'bb4d65a4',
-    'aphront-side-nav-view-css' => 'bbf3d3f2',
+    'aphront-side-nav-view-css' => 'bb4d65a4',
-    'aphront-table-view-css' => 'bbf3d3f2',
+    'aphront-table-view-css' => 'bb4d65a4',
-    'aphront-tokenizer-control-css' => 'bbf3d3f2',
+    'aphront-tokenizer-control-css' => 'bb4d65a4',
-    'aphront-typeahead-control-css' => 'bbf3d3f2',
+    'aphront-typeahead-control-css' => 'bb4d65a4',
-    'differential-changeset-view-css' => 'c9399497',
+    'differential-changeset-view-css' => 'fdcba95b',
-    'differential-core-view-css' => 'c9399497',
+    'differential-core-view-css' => 'fdcba95b',
     'differential-inline-comment-editor' => 'a6562582',
-    'differential-local-commits-view-css' => 'c9399497',
+    'differential-local-commits-view-css' => 'fdcba95b',
-    'differential-revision-add-comment-css' => 'c9399497',
+    'differential-revision-add-comment-css' => 'fdcba95b',
-    'differential-revision-comment-css' => 'c9399497',
+    'differential-revision-comment-css' => 'fdcba95b',
-    'differential-revision-comment-list-css' => 'c9399497',
+    'differential-revision-comment-list-css' => 'fdcba95b',
-    'differential-revision-detail-css' => 'c9399497',
+    'differential-revision-detail-css' => 'fdcba95b',
-    'differential-revision-history-css' => 'c9399497',
+    'differential-revision-history-css' => 'fdcba95b',
-    'differential-table-of-contents-css' => 'c9399497',
+    'differential-table-of-contents-css' => 'fdcba95b',
     'diffusion-commit-view-css' => '03ef179e',
     'javelin-behavior' => 'b164acea',
     'javelin-behavior-aphront-basic-tokenizer' => '540effd7',
@@ -1889,17 +1889,17 @@ celerity_register_resource_map(array(
     'javelin-util' => 'b164acea',
     'javelin-vector' => 'b164acea',
     'javelin-workflow' => '46547a92',
-    'phabricator-content-source-view-css' => 'c9399497',
+    'phabricator-content-source-view-css' => 'fdcba95b',
-    'phabricator-core-buttons-css' => 'bbf3d3f2',
+    'phabricator-core-buttons-css' => 'bb4d65a4',
-    'phabricator-core-css' => 'bbf3d3f2',
+    'phabricator-core-css' => 'bb4d65a4',
-    'phabricator-directory-css' => 'bbf3d3f2',
+    'phabricator-directory-css' => 'bb4d65a4',
     'phabricator-drag-and-drop-file-upload' => 'a6562582',
     'phabricator-keyboard-shortcut' => '46547a92',
     'phabricator-keyboard-shortcut-manager' => '46547a92',
-    'phabricator-object-selector-css' => 'c9399497',
+    'phabricator-object-selector-css' => 'fdcba95b',
-    'phabricator-remarkup-css' => 'bbf3d3f2',
+    'phabricator-remarkup-css' => 'bb4d65a4',
     'phabricator-shaped-request' => 'a6562582',
-    'phabricator-standard-page-view' => 'bbf3d3f2',
+    'phabricator-standard-page-view' => 'bb4d65a4',
-    'syntax-highlighting-css' => 'bbf3d3f2',
+    'syntax-highlighting-css' => 'bb4d65a4',
   ),
 ));

src/docs/userguide/remarkup.diviner

@@ -115,6 +115,52 @@ This produces a block like this:
     global $$variable_variable;
   }
 
+You can use ##lines=N## to limit the vertical size of a chunk of code, and
+##name=some_name.ext## to give it a name. For example, this:
+
+  lang=text
+  lang=html, name=example.html, lines=12, counterexample
+  ...
+
+...produces this:
+
+  lang=html, name=example.html, lines=12, counterexample
+  <p>Apple</p>
+  <p>Apricot</p>
+  <p>Avocado</p>
+  <p>Banana</p>
+  <p>Bilberry</p>
+  <p>Blackberry</p>
+  <p>Blackcurrant</p>
+  <p>Blueberry</p>
+  <p>Currant</p>
+  <p>Cherry</p>
+  <p>Cherimoya</p>
+  <p>Clementine</p>
+  <p>Date</p>
+  <p>Damson</p>
+  <p>Durian</p>
+  <p>Eggplant</p>
+  <p>Elderberry</p>
+  <p>Feijoa</p>
+  <p>Gooseberry</p>
+  <p>Grape</p>
+  <p>Grapefruit</p>
+  <p>Guava</p>
+  <p>Huckleberry</p>
+  <p>Jackfruit</p>
+  <p>Jambul</p>
+  <p>Kiwi fruit</p>
+  <p>Kumquat</p>
+  <p>Legume</p>
+  <p>Lemon</p>
+  <p>Lime</p>
+  <p>Lychee</p>
+  <p>Mandarine</p>
+  <p>Mango</p>
+  <p>Mangostine</p>
+  <p>Melon</p>
+
 You can also use "NOTE:" to call out an important idea.
 
 NOTE: Don't cross the streams!
@@ -167,11 +213,22 @@ This appears like this:
 
 You can embed an image by using braces to refer to it:
 
-  {F92}         # Embed the image file F92
+  {F123}         # Embed the image file F123
 
 In most interfaces, you can drag-and-drop an image from your computer into the
 text area to upload and reference it.
 
+You can set file display options like this:
+
+  {F123, layout=left, float, size=full}
+
+Valid options are:
+
+  - **layout** left (default), center, right, inline
+  - **float** If layout is set to left or right, the image will be floated so
+    text wraps around it.
+  - **size** thumb (default), full
+
 = Embedding Media =
 
 If you set configuration flags, you can embed media directly in text:

src/infrastructure/markup/remarkup/markuprule/embedobject/PhabricatorRemarkupRuleEmbedFile.php

@@ -1,7 +1,7 @@
 <?php
 
 /*
- * Copyright 2011 Facebook, Inc.
+ * Copyright 2012 Facebook, Inc.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -24,7 +24,7 @@ class PhabricatorRemarkupRuleEmbedFile
 
   public function apply($text) {
     return preg_replace_callback(
-      "@{F(\d+)}@",
+      "@{F(\d+)([^}]+?)?}@",
       array($this, 'markupEmbedFile'),
       $text);
   }
@@ -37,22 +37,87 @@ class PhabricatorRemarkupRuleEmbedFile
       $file = id(new PhabricatorFile())->load($matches[1]);
     }
 
-    if ($file) {
+    if (!$file) {
-      return $this->getEngine()->storeText(
-        phutil_render_tag(
-          'a',
-          array(
-            'href' => $file->getViewURI(),
-            'target' => '_blank',
-          ),
-          phutil_render_tag(
-            'img',
-            array(
-              'src' => $file->getThumb160x120URI(),
-            ))));
-    } else {
       return $matches[0];
     }
+
+    $options = array(
+      'size'    => 'thumb',
+      'layout'  => 'left',
+      'float'   => false,
+    );
+
+    if (!empty($matches[2])) {
+      $options = PhutilSimpleOptions::parse($matches[2]) + $options;
+    }
+
+    switch ($options['size']) {
+      case 'full':
+        $src_uri = $file->getBestURI();
+        $link = null;
+        break;
+      case 'thumb':
+      default:
+        $src_uri = $file->getThumb160x120URI();
+        $link = $file->getBestURI();
+        break;
+    }
+
+    $embed = phutil_render_tag(
+      'img',
+      array(
+        'src' => $src_uri,
+        'class' => 'phabricator-remarkup-embed-image',
+      ));
+
+    if ($link) {
+      $embed = phutil_render_tag(
+        'a',
+        array(
+          'href' => $link,
+          'target' => '_blank',
+        ),
+        $embed);
+    }
+
+    $layout_class = null;
+    switch ($options['layout']) {
+      case 'right':
+      case 'center':
+      case 'inline':
+      case 'left':
+        $layout_class = 'phabricator-remarkup-embed-layout-'.$options['layout'];
+        break;
+      default:
+        $layout_class = 'phabricator-remarkup-embed-layout-left';
+        break;
+    }
+
+    if ($options['float']) {
+      switch ($options['layout']) {
+        case 'center':
+        case 'inline':
+          break;
+        case 'right':
+          $layout_class .= ' phabricator-remarkup-embed-float-right';
+          break;
+        case 'left':
+        default:
+          $layout_class .= ' phabricator-remarkup-embed-float-left';
+          break;
+      }
+    }
+
+    if ($layout_class) {
+      $embed = phutil_render_tag(
+        'div',
+        array(
+          'class' => $layout_class,
+        ),
+        $embed);
+    }
+
+    return $this->getEngine()->storeText($embed);
   }
 
 }

src/infrastructure/markup/remarkup/markuprule/embedobject/__init__.php

@@ -10,6 +10,7 @@ phutil_require_module('phabricator', 'applications/files/storage/file');
 
 phutil_require_module('phutil', 'markup');
 phutil_require_module('phutil', 'markup/engine/remarkup/markuprule/base');
+phutil_require_module('phutil', 'parser/simpleoptions');
 phutil_require_module('phutil', 'utils');
 
 

webroot/rsrc/css/application/differential/revision-comment.css

@@ -96,8 +96,8 @@
   overflow: hidden;
 }
 
-.differential-comment-content .phabricator-remarkup code,
+.differential-comment-content .phabricator-remarkup .remarkup-code-block,
-.differential-comment-core .phabricator-remarkup code {
+.differential-comment-core .phabricator-remarkup .remarkup-code-block {
    width: 88ex;
    width: 81ch;
 }

webroot/rsrc/css/core/remarkup.css

@@ -14,17 +14,27 @@
   margin-bottom: 0;
 }
 
-.phabricator-remarkup code {
+.phabricator-remarkup .remarkup-code-block {
-  background: #fdfae7;
+  margin: 1em 2em;
-  border: 1px solid #f5e178;
-  display: block;
   white-space: pre;
   font-family: "Monaco", monospace;
   font-size: 10px;
+}
+
+.phabricator-remarkup .remarkup-code-header {
+  padding: .25em 1em;
+  background: #edead7;
+  color: #444444;
+}
+
+.phabricator-remarkup .remarkup-code-block code {
+  background: #fdfae7;
+  border: 1px solid #f5e178;
+  display: block;
   color: #000000;
-  margin: 1em 2em;
-  padding: .5em 1.5em;
   overflow: auto;
+  padding: .5em 1em;
+  font-family: "Monaco", monospace;
 }
 
 .phabricator-remarkup code.remarkup-counterexample {
@@ -158,3 +168,29 @@
   padding: 0;
   margin: 0;
 }
+
+.phabricator-remarkup-embed-layout-right {
+  text-align: right;
+}
+
+.phabricator-remarkup-embed-layout-center {
+  text-align: center;
+}
+
+.phabricator-remarkup-embed-layout-inline {
+  display: inline;
+}
+
+.phabricator-remarkup-embed-float-right {
+  float: right;
+  margin: .5em 1em 0;
+}
+
+.phabricator-remarkup-embed-float-left {
+  float: left;
+  margin: .5em 1em 0;
+}
+
+img.phabricator-remarkup-embed-image {
+  display: inline;
+}