mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-10 00:42:41 +01:00
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
This commit is contained in:
epriestley
parent
82c0795e54
commit
56447ed2cc
6 changed files with 217 additions and 58 deletions
|
|
@ -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-dialog-view-css' => 'bbf3d3f2',
|
||||
'aphront-form-view-css' => 'bbf3d3f2',
|
||||
'aphront-headsup-action-list-view-css' => 'c9399497',
|
||||
'aphront-list-filter-view-css' => 'bbf3d3f2',
|
||||
'aphront-panel-view-css' => 'bbf3d3f2',
|
||||
'aphront-side-nav-view-css' => 'bbf3d3f2',
|
||||
'aphront-table-view-css' => 'bbf3d3f2',
|
||||
'aphront-tokenizer-control-css' => 'bbf3d3f2',
|
||||
'aphront-typeahead-control-css' => 'bbf3d3f2',
|
||||
'differential-changeset-view-css' => 'c9399497',
|
||||
'differential-core-view-css' => 'c9399497',
|
||||
'aphront-crumbs-view-css' => 'bb4d65a4',
|
||||
'aphront-dialog-view-css' => 'bb4d65a4',
|
||||
'aphront-form-view-css' => 'bb4d65a4',
|
||||
'aphront-headsup-action-list-view-css' => 'fdcba95b',
|
||||
'aphront-list-filter-view-css' => 'bb4d65a4',
|
||||
'aphront-panel-view-css' => 'bb4d65a4',
|
||||
'aphront-side-nav-view-css' => 'bb4d65a4',
|
||||
'aphront-table-view-css' => 'bb4d65a4',
|
||||
'aphront-tokenizer-control-css' => 'bb4d65a4',
|
||||
'aphront-typeahead-control-css' => 'bb4d65a4',
|
||||
'differential-changeset-view-css' => 'fdcba95b',
|
||||
'differential-core-view-css' => 'fdcba95b',
|
||||
'differential-inline-comment-editor' => 'a6562582',
|
||||
'differential-local-commits-view-css' => 'c9399497',
|
||||
'differential-revision-add-comment-css' => 'c9399497',
|
||||
'differential-revision-comment-css' => 'c9399497',
|
||||
'differential-revision-comment-list-css' => 'c9399497',
|
||||
'differential-revision-detail-css' => 'c9399497',
|
||||
'differential-revision-history-css' => 'c9399497',
|
||||
'differential-table-of-contents-css' => 'c9399497',
|
||||
'differential-local-commits-view-css' => 'fdcba95b',
|
||||
'differential-revision-add-comment-css' => 'fdcba95b',
|
||||
'differential-revision-comment-css' => 'fdcba95b',
|
||||
'differential-revision-comment-list-css' => 'fdcba95b',
|
||||
'differential-revision-detail-css' => 'fdcba95b',
|
||||
'differential-revision-history-css' => 'fdcba95b',
|
||||
'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-core-buttons-css' => 'bbf3d3f2',
|
||||
'phabricator-core-css' => 'bbf3d3f2',
|
||||
'phabricator-directory-css' => 'bbf3d3f2',
|
||||
'phabricator-content-source-view-css' => 'fdcba95b',
|
||||
'phabricator-core-buttons-css' => 'bb4d65a4',
|
||||
'phabricator-core-css' => 'bb4d65a4',
|
||||
'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-remarkup-css' => 'bbf3d3f2',
|
||||
'phabricator-object-selector-css' => 'fdcba95b',
|
||||
'phabricator-remarkup-css' => 'bb4d65a4',
|
||||
'phabricator-shaped-request' => 'a6562582',
|
||||
'phabricator-standard-page-view' => 'bbf3d3f2',
|
||||
'syntax-highlighting-css' => 'bbf3d3f2',
|
||||
'phabricator-standard-page-view' => 'bb4d65a4',
|
||||
'syntax-highlighting-css' => 'bb4d65a4',
|
||||
),
|
||||
));
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
return $this->getEngine()->storeText(
|
||||
phutil_render_tag(
|
||||
'a',
|
||||
array(
|
||||
'href' => $file->getViewURI(),
|
||||
'target' => '_blank',
|
||||
),
|
||||
phutil_render_tag(
|
||||
'img',
|
||||
array(
|
||||
'src' => $file->getThumb160x120URI(),
|
||||
))));
|
||||
} else {
|
||||
if (!$file) {
|
||||
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);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -96,8 +96,8 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.differential-comment-content .phabricator-remarkup code,
|
||||
.differential-comment-core .phabricator-remarkup code {
|
||||
.differential-comment-content .phabricator-remarkup .remarkup-code-block,
|
||||
.differential-comment-core .phabricator-remarkup .remarkup-code-block {
|
||||
width: 88ex;
|
||||
width: 81ch;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,17 +14,27 @@
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.phabricator-remarkup code {
|
||||
background: #fdfae7;
|
||||
border: 1px solid #f5e178;
|
||||
display: block;
|
||||
.phabricator-remarkup .remarkup-code-block {
|
||||
margin: 1em 2em;
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue