Page MenuHomePhabricator
Files F15417734

D10280.id24759.diff
No OneTemporary
Actions

D10280.id24759.diff
View Options

diff --git a/resources/celerity/map.php b/resources/celerity/map.php
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@@ -7,8 +7,8 @@
*/
return array(
'names' => array(
- 'core.pkg.css' => '1733ae8f',
- 'core.pkg.js' => '7c8455ef',
+ 'core.pkg.css' => '6ad06577',
+ 'core.pkg.js' => '57cf2fc8',
'darkconsole.pkg.js' => 'df001cab',
'differential.pkg.css' => '4a93db37',
'differential.pkg.js' => 'eb182ccd',
@@ -104,7 +104,7 @@
'rsrc/css/application/tokens/tokens.css' => '3d0f239e',
'rsrc/css/application/uiexample/example.css' => '528b19de',
'rsrc/css/core/core.css' => '40151074',
- 'rsrc/css/core/remarkup.css' => '7fd5585f',
+ 'rsrc/css/core/remarkup.css' => 'b19fd3e6',
'rsrc/css/core/syntax.css' => '863f3cd8',
'rsrc/css/core/z-index.css' => '44e1d311',
'rsrc/css/diviner/diviner-shared.css' => '38813222',
@@ -447,7 +447,7 @@
'rsrc/js/core/Notification.js' => '0c6946e7',
'rsrc/js/core/Prefab.js' => 'bbae734c',
'rsrc/js/core/ShapedRequest.js' => '7cbe244b',
- 'rsrc/js/core/TextAreaUtils.js' => 'b3ec3cfc',
+ 'rsrc/js/core/TextAreaUtils.js' => '68ae8d60',
'rsrc/js/core/ToolTip.js' => '3915d490',
'rsrc/js/core/behavior-active-nav.js' => 'e379b58e',
'rsrc/js/core/behavior-audio-source.js' => '59b251eb',
@@ -732,14 +732,14 @@
'phabricator-phtize' => 'd254d646',
'phabricator-prefab' => 'bbae734c',
'phabricator-profile-css' => 'b459416e',
- 'phabricator-remarkup-css' => '7fd5585f',
+ 'phabricator-remarkup-css' => 'b19fd3e6',
'phabricator-search-results-css' => 'f240504c',
'phabricator-shaped-request' => '7cbe244b',
'phabricator-side-menu-view-css' => 'a2ccd7bd',
'phabricator-slowvote-css' => '266df6a1',
'phabricator-source-code-view-css' => '7d346aa4',
'phabricator-standard-page-view' => '517cdfb1',
- 'phabricator-textareautils' => 'b3ec3cfc',
+ 'phabricator-textareautils' => '68ae8d60',
'phabricator-tooltip' => '3915d490',
'phabricator-transaction-view-css' => '5d0cae25',
'phabricator-ui-example-css' => '528b19de',
@@ -1220,6 +1220,11 @@
'javelin-dom',
'javelin-fx',
),
+ '68ae8d60' => array(
+ 'javelin-install',
+ 'javelin-dom',
+ 'javelin-vector',
+ ),
'69adf288' => array(
'javelin-install',
),
@@ -1560,9 +1565,6 @@
'b3e7d692' => array(
'javelin-install',
),
- 'b3ec3cfc' => array(
- 'javelin-install',
- ),
'b42eddc7' => array(
'javelin-install',
'javelin-dom',
diff --git a/webroot/rsrc/css/core/remarkup.css b/webroot/rsrc/css/core/remarkup.css
--- a/webroot/rsrc/css/core/remarkup.css
+++ b/webroot/rsrc/css/core/remarkup.css
@@ -339,11 +339,28 @@
border-top-color: {$thinblueborder};
border-radius: 0;
+ box-shadow: none;
+ -webkit-box-shadow: none;
+
+ /* Set line height explicitly so the metrics <var /> and the real textarea
+ are forced to the same value. */
+ line-height: 1.25em;
+
/* Prevent Safari and Chrome users from dragging the textarea any wider,
because the top bar won't resize along with it. */
resize: vertical;
}
+var.remarkup-assist-textarea {
+ /* This is an invisible element used to measure the size of text in the
+ textarea so we can float typeaheads over the cursor position. */
+ display: block;
+ border-color: orange;
+ box-sizing: border-box;
+ padding: 4px 6px;
+ white-space: pre-wrap;
+}
+
.remarkup-assist-textarea:focus {
border: 1px solid rgba(82, 168, 236, 0.8);
}
@@ -424,11 +441,6 @@
opacity: 1.0;
}
-.remarkup-assist-textarea {
- box-shadow: none;
- -webkit-box-shadow: none;
-}
-
.remarkup-control-fullscreen-mode {
position: fixed;
top: -1px;
diff --git a/webroot/rsrc/js/core/TextAreaUtils.js b/webroot/rsrc/js/core/TextAreaUtils.js
--- a/webroot/rsrc/js/core/TextAreaUtils.js
+++ b/webroot/rsrc/js/core/TextAreaUtils.js
@@ -1,5 +1,7 @@
/**
* @requires javelin-install
+ * javelin-dom
+ * javelin-vector
* @provides phabricator-textareautils
* @javelin
*/
@@ -44,6 +46,65 @@
area.value = v;
JX.TextAreaUtils.setSelectionRange(area, r.start, r.start + text.length);
+ },
+
+ /**
+ * Get the document pixel positions of the beginning and end of a character
+ * range in a textarea.
+ */
+ getPixelDimensions: function(area, start, end) {
+ var v = area.value;
+
+ // We're using zero-width spaces to make sure the spans get some
+ // height even if there's no text in the metrics tag.
+
+ var head = v.substring(0, start);
+ var before = JX.$N('span', {}, '\u200b');
+ var body = v.substring(start, end);
+ var after = JX.$N('span', {}, '\u200b');
+
+ // Create a similar shadow element which we can measure.
+ var metrics = JX.$N(
+ 'var',
+ {
+ className: area.className,
+ style: {
+ visibility: 'hidden'
+ }
+ },
+ [head, before, body, after]);
+
+ // If the textarea has a scrollbar, force a scrollbar on the shadow
+ // element too.
+ if (area.scrollHeight > area.clientHeight) {
+ metrics.style.overflowY = 'scroll';
+ }
+
+ area.parentNode.appendChild(metrics);
+
+ // Adjust the positions we read out of the document to account for the
+ // current scroll position of the textarea.
+ var metrics_pos = JX.Vector.getPos(metrics);
+ metrics_pos.x += area.scrollLeft;
+ metrics_pos.y += area.scrollTop;
+
+ var area_pos = JX.Vector.getPos(area);
+ var before_pos = JX.Vector.getPos(before);
+ var after_pos = JX.Vector.getPos(after);
+
+ JX.DOM.remove(metrics);
+
+ return {
+ start: {
+ x: area_pos.x + (before_pos.x - metrics_pos.x),
+ y: area_pos.y + (before_pos.y - metrics_pos.y)
+ },
+ end: {
+ x: area_pos.x + (after_pos.x - metrics_pos.x),
+ y: area_pos.y + (after_pos.y - metrics_pos.y)
+ }
+ };
}
+
}
});

File Metadata

Mime Type
text/plain
Expires
Fri, Mar 21, 6:01 PM (2 w, 1 d ago)
Storage Engine
blob
Storage Format
Encrypted (AES-256-CBC)
Storage Handle
7715842
Default Alt Text
D10280.id24759.diff (5 KB)

Event Timeline

Phabricator · Built by Phacility