Optional formatting preview for top-level comments

Unlike code comments, top-level comments on a change cannot be previewed
as a draft before they are published. This means reviewers do not get
the opportunity to ensure that their comment will be formatted as
expected. With this change, an optional preview feature is added to the
GR-REPLY-DIALOG.

Feature: Issue 5027
Change-Id: I186f973d5c178bb10128fac06c3dd51db5755c98

polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.html

@@ -20,6 +20,7 @@ limitations under the License.
 <link rel="import" href="../../../behaviors/rest-client-behavior.html">
 <link rel="import" href="../../shared/gr-account-chip/gr-account-chip.html">
 <link rel="import" href="../../shared/gr-button/gr-button.html">
+<link rel="import" href="../../shared/gr-formatted-text/gr-formatted-text.html">
 <link rel="import" href="../../shared/gr-js-api-interface/gr-js-api-interface.html">
 <link rel="import" href="../../shared/gr-overlay/gr-overlay.html">
 <link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
@@ -94,6 +95,12 @@ limitations under the License.
         padding: 0;
         font-family: var(--monospace-font-family);
       }
+      .previewContainer gr-formatted-text {
+        background: #f6f6f6;
+        max-height: 20vh;
+        overflow-y: scroll;
+        padding: 1em;
+      }
       .message {
         border: none;
         width: 100%;
@@ -214,9 +221,19 @@ limitations under the License.
             rows="4"
             max-rows="15"
             bind-value="{{draft}}"
-            on-bind-value-changed="_handleTextareaChanged">
+            on-bind-value-changed="_handleHeightChanged">
         </iron-autogrow-textarea>
       </section>
+      <section class="previewContainer">
+        <label>
+          <input type="checkbox" checked="{{_previewFormatting::change}}">
+          Preview formatting
+        </label>
+        <gr-formatted-text
+            content="[[draft]]"
+            hidden$="[[!_previewFormatting]]"
+            config="[[projectConfig.commentlinks]]"></gr-formatted-text>
+      </section>
       <section class="labelsContainer">
         <template is="dom-repeat"
             items="[[_labels]]" as="label">

polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.js

@@ -90,6 +90,11 @@
         type: Object,
         observer: '_reviewerPendingConfirmationUpdated',
       },
+      _previewFormatting: {
+        type: Boolean,
+        value: false,
+        observer: '_handleHeightChanged',
+      },
     },
 
     FocusTarget: FocusTarget,
@@ -471,7 +476,7 @@
       }, STORAGE_DEBOUNCE_INTERVAL_MS);
     },
 
-    _handleTextareaChanged: function(e) {
+    _handleHeightChanged: function(e) {
       // If the textarea resizes, we need to re-fit the overlay.
       this.debounce('autogrow', function() {
         this.fire('autogrow');