From d0ce4d07a34ee396b1c65a07f0ea4bb838e270dc Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Wed, 16 Oct 2019 14:35:18 +0100
Subject: [PATCH 1/3] Autosize textboxes w/out highlighting placeholders
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Scrolling within textareas on the page is a bit grim. Which is why we
don’t do it for the textboxes that people use to edit templates.

This commit will allow us to extend the auto-resizing of `<textarea>`s
to those which don’t need the highlighting of placeholders.

The code is still quite coupled to the placeholder highlighting code,
because both work by copying the content of the `<textarea>` into a
`<div>` that underlaps the textbox. This `<div>` is used for both
rendering the placeholder highlights, and calculating the natural height
of the content. So it would be hard/confusing to split the two bits of
code into separate modules.
---
 app/assets/javascripts/highlightTags.js | 41 +++++++++++++++++------
 app/templates/components/textbox.html   |  4 ++-
 tests/javascripts/highlightTags.test.js | 44 +++++++++++++++++++++++++
 3 files changed, 78 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/highlightTags.js b/app/assets/javascripts/highlightTags.js
index bc533d4b7..3658c94c4 100644
--- a/app/assets/javascripts/highlightTags.js
+++ b/app/assets/javascripts/highlightTags.js
@@ -11,6 +11,13 @@
 
     this.start = function(textarea) {
 
+      let visibleTextbox;
+
+      this.highlightPlaceholders = (
+        typeof textarea.data('highlightPlaceholders') === 'undefined' ||
+        !!textarea.data('highlightPlaceholders')
+      );
+
       this.$textbox = $(textarea)
         .wrap(`
           <div class='textbox-highlight-wrapper' />
@@ -20,13 +27,19 @@
         `))
         .on("input", this.update);
 
-      this.initialHeight = this.$textbox.height();
+      visibleTextbox = this.$textbox.clone().appendTo("body").css({
+        position: 'absolute',
+        visibility: 'hidden',
+        display: 'block'
+      });
+      this.initialHeight = visibleTextbox.height();
 
       this.$background.css({
-        'width': this.$textbox.outerWidth(),
         'border-width': this.$textbox.css('border-width')
       });
 
+      visibleTextbox.remove();
+
       this.$textbox
         .trigger("input");
 
@@ -34,6 +47,8 @@
 
     this.resize = () => {
 
+      this.$background.width(this.$textbox.outerWidth());
+
       this.$textbox.height(
         Math.max(
           this.initialHeight,
@@ -47,17 +62,23 @@
 
     };
 
-    this.escapedMessage = () => $('<div/>').text(this.$textbox.val()).html();
+    this.contentEscaped = () => $('<div/>').text(this.$textbox.val()).html();
 
-    this.replacePlaceholders = () => this.$background.html(
-      this.escapedMessage().replace(
-        tagPattern, (match, name, separator, value) => value && separator ?
-          `<span class='placeholder-conditional'>((${name}??</span>${value}))` :
-          `<span class='placeholder'>((${name}${value}))</span>`
-      )
+    this.contentReplaced = () => this.contentEscaped().replace(
+      tagPattern, (match, name, separator, value) => value && separator ?
+        `<span class='placeholder-conditional'>((${name}??</span>${value}))` :
+        `<span class='placeholder'>((${name}${value}))</span>`
     );
 
-    this.update = () => this.replacePlaceholders() && this.resize();
+    this.update = () => {
+
+      this.$background.html(
+        this.highlightPlaceholders ? this.contentReplaced() : this.contentEscaped()
+      );
+
+      this.resize();
+
+    };
 
   };
 
diff --git a/app/templates/components/textbox.html b/app/templates/components/textbox.html
index fc14d6dc4..27f1ba378 100644
--- a/app/templates/components/textbox.html
+++ b/app/templates/components/textbox.html
@@ -4,6 +4,7 @@
   hint=False,
   highlight_tags=False,
   autofocus=False,
+  autosize=False,
   colour_preview=False,
   help_link=None,
   help_link_text=None,
@@ -47,7 +48,8 @@
     %}
     {{ field(
       class=field_class,
-      data_module='highlight-tags' if highlight_tags else '',
+      data_module='highlight-tags' if highlight_tags or autosize else '',
+      data_highlight_placeholders='true' if highlight_tags else 'false',
       rows=rows|string,
       **kwargs
     ) }}
diff --git a/tests/javascripts/highlightTags.test.js b/tests/javascripts/highlightTags.test.js
index cadac0b9b..a14779230 100644
--- a/tests/javascripts/highlightTags.test.js
+++ b/tests/javascripts/highlightTags.test.js
@@ -125,6 +125,34 @@ describe('Highlight tags', () => {
 
     });
 
+    describe("The element's width should match even when the textbox is initially hidden", () => {
+
+      beforeEach(() => {
+
+        let setDisplayPropertyOfFormGroups = function(property) {
+          Array.prototype.forEach.call(
+            document.getElementsByClassName('form-group'),
+            element => element.style.display = property
+          );
+        };
+
+        setDisplayPropertyOfFormGroups('none');
+
+        window.GOVUK.modules.start();
+
+        setDisplayPropertyOfFormGroups('block');
+
+      });
+
+      test("If the textbox is an <textarea>", () => {
+
+        backgroundEl = textarea.nextElementSibling;
+        expect(backgroundEl.style.width).toEqual('582px');
+
+      });
+
+    });
+
     test("The element should be hidden from assistive technologies", () => {
 
       expect(backgroundEl.getAttribute('aria-hidden')).toEqual('true');
@@ -167,6 +195,22 @@ describe('Highlight tags', () => {
 
       });
 
+      test("Unless a data attribute is set to turn this feature off", () => {
+
+        textarea.textContent  = "Dear ((title)) ((name))";
+        textarea.setAttribute('data-highlight-placeholders', 'false')
+
+        // start module
+        window.GOVUK.modules.start();
+
+        backgroundEl = textarea.nextElementSibling;
+
+        const highlightTags = backgroundEl.querySelectorAll('.placeholder');
+
+        expect(highlightTags.length).toEqual(0);
+
+      });
+
     });
 
     describe("If there is optional text in the content, its matching text in the element below should be wrapped in a highlight tag", () => {

From 6c0e853db4f07c6d56ffda54d422a4cdbb814c5c Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Wed, 16 Oct 2019 15:20:05 +0100
Subject: [PATCH 2/3] Rename module
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

HighlightTags was bad because:
- we haven’t called placeholders ‘tags’ for a long time
- it also does resizing of the `<textarea>`, not just highlighting the
  placeholders
---
 .../javascripts/{highlightTags.js => enhancedTextbox.js}  | 2 +-
 app/templates/components/textbox.html                     | 8 ++++----
 app/templates/views/edit-email-template.html              | 4 ++--
 app/templates/views/edit-letter-template.html             | 4 ++--
 app/templates/views/edit-sms-template.html                | 2 +-
 .../views/service-settings/letter-contact/add.html        | 2 +-
 .../views/service-settings/letter-contact/edit.html       | 2 +-
 .../views/service-settings/set-letter-contact-block.html  | 2 +-
 app/templates/views/styleguide.html                       | 2 +-
 gulpfile.js                                               | 2 +-
 package.json                                              | 1 +
 tests/app/main/views/test_templates.py                    | 2 ++
 .../{highlightTags.test.js => enhancedTextbox.test.js}    | 8 ++++----
 13 files changed, 22 insertions(+), 19 deletions(-)
 rename app/assets/javascripts/{highlightTags.js => enhancedTextbox.js} (98%)
 rename tests/javascripts/{highlightTags.test.js => enhancedTextbox.test.js} (98%)

diff --git a/app/assets/javascripts/highlightTags.js b/app/assets/javascripts/enhancedTextbox.js
similarity index 98%
rename from app/assets/javascripts/highlightTags.js
rename to app/assets/javascripts/enhancedTextbox.js
index 3658c94c4..8adb210f8 100644
--- a/app/assets/javascripts/highlightTags.js
+++ b/app/assets/javascripts/enhancedTextbox.js
@@ -7,7 +7,7 @@
 
   const tagPattern = /\(\(([^\)\((\?)]+)(\?\?)?([^\)\(]*)\)\)/g;
 
-  Modules.HighlightTags = function() {
+  Modules.EnhancedTextbox = function() {
 
     this.start = function(textarea) {
 
diff --git a/app/templates/components/textbox.html b/app/templates/components/textbox.html
index 27f1ba378..6929de938 100644
--- a/app/templates/components/textbox.html
+++ b/app/templates/components/textbox.html
@@ -2,7 +2,7 @@
   field,
   label=None,
   hint=False,
-  highlight_tags=False,
+  highlight_placeholders=False,
   autofocus=False,
   autosize=False,
   colour_preview=False,
@@ -35,7 +35,7 @@
       {% endif %}
     </label>
     {%
-      if highlight_tags
+      if highlight_placeholders or autosize
     %}
       {% set field_class = 'form-control-{} textbox-highlight-textbox'.format(width) %}
     {% else %}
@@ -48,8 +48,8 @@
     %}
     {{ field(
       class=field_class,
-      data_module='highlight-tags' if highlight_tags or autosize else '',
-      data_highlight_placeholders='true' if highlight_tags else 'false',
+      data_module='enhanced-textbox' if highlight_placeholders or autosize else '',
+      data_highlight_placeholders='true' if highlight_placeholders else 'false',
       rows=rows|string,
       **kwargs
     ) }}
diff --git a/app/templates/views/edit-email-template.html b/app/templates/views/edit-email-template.html
index d09a81d99..ebe027946 100644
--- a/app/templates/views/edit-email-template.html
+++ b/app/templates/views/edit-email-template.html
@@ -20,8 +20,8 @@
       <div class="grid-row">
         <div class="column-five-sixths">
           {{ textbox(form.name, width='1-1', hint='Your recipients will not see this', rows=10) }}
-          {{ textbox(form.subject, width='1-1', highlight_tags=True, rows=2) }}
-          {{ textbox(form.template_content, highlight_tags=True, width='1-1', rows=8) }}
+          {{ textbox(form.subject, width='1-1', highlight_placeholders=True, rows=2) }}
+          {{ textbox(form.template_content, highlight_placeholders=True, width='1-1', rows=8) }}
           {% if current_user.platform_admin %}
              {{ radios(form.process_type) }}
           {% endif %}
diff --git a/app/templates/views/edit-letter-template.html b/app/templates/views/edit-letter-template.html
index 1e7184f07..ebda08d60 100644
--- a/app/templates/views/edit-letter-template.html
+++ b/app/templates/views/edit-letter-template.html
@@ -20,8 +20,8 @@
       <div class="grid-row">
         <div class="column-five-sixths">
           {{ textbox(form.name, width='1-1', hint='Your recipients will not see this', rows=10) }}
-          {{ textbox(form.subject, width='1-1', highlight_tags=True, rows=2) }}
-          {{ textbox(form.template_content, highlight_tags=True, width='1-1', rows=8) }}
+          {{ textbox(form.subject, width='1-1', highlight_placeholders=True, rows=2) }}
+          {{ textbox(form.template_content, highlight_placeholders=True, width='1-1', rows=8) }}
           {{ sticky_page_footer(
             'Save'
           ) }}
diff --git a/app/templates/views/edit-sms-template.html b/app/templates/views/edit-sms-template.html
index 452cf4721..7e7e254f5 100644
--- a/app/templates/views/edit-sms-template.html
+++ b/app/templates/views/edit-sms-template.html
@@ -22,7 +22,7 @@
           {{ textbox(form.name, width='1-1', hint='Your recipients will not see this') }}
         </div>
         <div class="column-two-thirds">
-          {{ textbox(form.template_content, highlight_tags=True, width='1-1', rows=5) }}
+          {{ textbox(form.template_content, highlight_placeholders=True, width='1-1', rows=5) }}
           {% if current_user.platform_admin %}
             {{ radios(form.process_type) }}
           {% endif %}
diff --git a/app/templates/views/service-settings/letter-contact/add.html b/app/templates/views/service-settings/letter-contact/add.html
index e284fa62d..d81c97219 100644
--- a/app/templates/views/service-settings/letter-contact/add.html
+++ b/app/templates/views/service-settings/letter-contact/add.html
@@ -24,7 +24,7 @@
             hint='10 lines maximum',
             width='1-2',
             rows=10,
-            highlight_tags=True
+            highlight_placeholders=True
           ) }}
         {% if not first_contact_block %}
           <div class="form-group">
diff --git a/app/templates/views/service-settings/letter-contact/edit.html b/app/templates/views/service-settings/letter-contact/edit.html
index b0fcbb80c..cb1a63b87 100644
--- a/app/templates/views/service-settings/letter-contact/edit.html
+++ b/app/templates/views/service-settings/letter-contact/edit.html
@@ -22,7 +22,7 @@
       hint='10 lines maximum',
       width='1-2',
       rows=10,
-      highlight_tags=True
+      highlight_placeholders=True
     ) }}
 
 
diff --git a/app/templates/views/service-settings/set-letter-contact-block.html b/app/templates/views/service-settings/set-letter-contact-block.html
index 490c45271..c39064b2f 100644
--- a/app/templates/views/service-settings/set-letter-contact-block.html
+++ b/app/templates/views/service-settings/set-letter-contact-block.html
@@ -22,7 +22,7 @@
         hint='10 lines maximum',
         width='1-1',
         rows=10,
-        highlight_tags=True
+        highlight_placeholders=True
       ) }}
       {{ page_footer('Save') }}
     {% endcall %}
diff --git a/app/templates/views/styleguide.html b/app/templates/views/styleguide.html
index 841d8fb97..83570143b 100644
--- a/app/templates/views/styleguide.html
+++ b/app/templates/views/styleguide.html
@@ -181,7 +181,7 @@
   <h2 class="heading-large">Textbox</h2>
   {{ textbox(form.username) }}
   {{ textbox(form.password) }}
-  {{ textbox(form.message, highlight_tags=True) }}
+  {{ textbox(form.message, highlight_placeholders=True) }}
   {{ textbox(form.code, width='1-8') }}
 
   <h2 class="heading-large">File upload</h2>
diff --git a/gulpfile.js b/gulpfile.js
index c10a41f28..7a709d142 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -82,7 +82,7 @@ const javascripts = () => {
       paths.src + 'javascripts/detailsPolyfill.js',
       paths.src + 'javascripts/apiKey.js',
       paths.src + 'javascripts/autofocus.js',
-      paths.src + 'javascripts/highlightTags.js',
+      paths.src + 'javascripts/enhancedTextbox.js',
       paths.src + 'javascripts/fileUpload.js',
       paths.src + 'javascripts/radioSelect.js',
       paths.src + 'javascripts/updateContent.js',
diff --git a/package.json b/package.json
index b6ebd1675..54eb79fd4 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
   },
   "scripts": {
     "test": "gulp lint && jest --config tests/javascripts/jest.config.js tests/javascripts",
+    "test-watch": "jest --watch --config tests/javascripts/jest.config.js tests/javascripts",
     "build": "gulp",
     "watch": "gulp watch"
   },
diff --git a/tests/app/main/views/test_templates.py b/tests/app/main/views/test_templates.py
index 924636805..9e30730ef 100644
--- a/tests/app/main/views/test_templates.py
+++ b/tests/app/main/views/test_templates.py
@@ -346,6 +346,8 @@ def test_should_show_page_for_one_template(
     assert "Template &lt;em&gt;content&lt;/em&gt; with &amp; entity" in str(
         page.select_one('textarea')
     )
+    assert page.select_one('textarea')['data-module'] == 'enhanced-textbox'
+    assert page.select_one('textarea')['data-highlight-placeholders'] == 'true'
     assert "priority" not in str(page.select_one('main'))
     mock_get_service_template.assert_called_with(SERVICE_ONE_ID, template_id, None)
 
diff --git a/tests/javascripts/highlightTags.test.js b/tests/javascripts/enhancedTextbox.test.js
similarity index 98%
rename from tests/javascripts/highlightTags.test.js
rename to tests/javascripts/enhancedTextbox.test.js
index a14779230..7f6db2155 100644
--- a/tests/javascripts/highlightTags.test.js
+++ b/tests/javascripts/enhancedTextbox.test.js
@@ -1,14 +1,14 @@
 const helpers = require('./support/helpers.js');
 
 beforeAll(() => {
-  require('../../app/assets/javascripts/highlightTags.js');
+  require('../../app/assets/javascripts/enhancedTextbox.js');
 });
 
 afterAll(() => {
   require('./support/teardown.js');
 });
 
-describe('Highlight tags', () => {
+describe('Enhanced textbox', () => {
 
   let input;
   let textarea;
@@ -38,11 +38,11 @@ describe('Highlight tags', () => {
     document.body.innerHTML = `
       <div class="form-group">
         <label for="subject">Subject</label>
-        <input class="form-control textbox-highlight-textbox" data-module="highlight-tags" type="text" name="subject" id="subject" />
+        <input class="form-control textbox-highlight-textbox" data-module="enhanced-textbox" type="text" name="subject" id="subject" />
       </div>
       <div class="form-group">
         <label for="template_content">Message</label>
-        <textarea class="form-control form-control-1-1 textbox-highlight-textbox" data-module="highlight-tags" id="template_content" name="template_content" rows="8">
+        <textarea class="form-control form-control-1-1 textbox-highlight-textbox" data-module="enhanced-textbox" id="template_content" name="template_content" rows="8">
         </textarea>
       </div>`;
 

From 6fa0f06f5df017be3e067302407374df8f7a05b5 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Wed, 16 Oct 2019 16:34:18 +0100
Subject: [PATCH 3/3] Enable autosizing for some textboxes

This commit makes textboxes auto-resize any time they might be used to
enter long passages of text which would otherwise make them scroll
internally.
---
 .../organisations/organisation/settings/edit-go-live-notes.html | 2 +-
 app/templates/views/platform-admin/returned-letters.html        | 2 +-
 .../views/service-settings/branding/email-options.html          | 1 +
 app/templates/views/support/ask-question-give-feedback.html     | 2 +-
 app/templates/views/support/report-problem.html                 | 2 +-
 5 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/templates/views/organisations/organisation/settings/edit-go-live-notes.html b/app/templates/views/organisations/organisation/settings/edit-go-live-notes.html
index e53e6db0e..bcada9ab6 100644
--- a/app/templates/views/organisations/organisation/settings/edit-go-live-notes.html
+++ b/app/templates/views/organisations/organisation/settings/edit-go-live-notes.html
@@ -21,7 +21,7 @@
         belonging to this organisation requests to go live.
       </p>
       {% call form_wrapper() %}
-        {{ textbox(form.request_to_go_live_notes, width='1-1', rows=3) }}
+        {{ textbox(form.request_to_go_live_notes, width='1-1', rows=3, autosize=True) }}
         {{ page_footer('Save') }}
       {% endcall %}
     </div>
diff --git a/app/templates/views/platform-admin/returned-letters.html b/app/templates/views/platform-admin/returned-letters.html
index 63de0e1f8..666afbc97 100644
--- a/app/templates/views/platform-admin/returned-letters.html
+++ b/app/templates/views/platform-admin/returned-letters.html
@@ -13,7 +13,7 @@
   <div class="column-two-thirds">
     <h1 class="heading-large">Submit returned letters</h1>
     {% call form_wrapper() %}
-      {{ textbox(form.references, width='1-1', rows=8) }}
+      {{ textbox(form.references, width='1-1', rows=8, autosize=True) }}
       {{ page_footer("Submit") }}
     {% endcall %}
   </div>
diff --git a/app/templates/views/service-settings/branding/email-options.html b/app/templates/views/service-settings/branding/email-options.html
index aca111b87..2fd7563f4 100644
--- a/app/templates/views/service-settings/branding/email-options.html
+++ b/app/templates/views/service-settings/branding/email-options.html
@@ -45,6 +45,7 @@
           form.something_else,
           hint='Include links to your brand guidelines or examples of how to use your branding',
           width='1-1',
+          autosize=True,
         ) }}
       {% endcall %}
     {% endif %}
diff --git a/app/templates/views/support/ask-question-give-feedback.html b/app/templates/views/support/ask-question-give-feedback.html
index 747f72c28..8aa8f92dc 100644
--- a/app/templates/views/support/ask-question-give-feedback.html
+++ b/app/templates/views/support/ask-question-give-feedback.html
@@ -17,7 +17,7 @@
     <div class="grid-row">
       <div class="column-two-thirds">
         {% call form_wrapper() %}
-            {{ textbox(form.feedback, width='1-1', hint='', rows=10) }}
+            {{ textbox(form.feedback, width='1-1', hint='', rows=10, autosize=True) }}
             {% if not current_user.is_authenticated %}
               <h3 class="heading-medium">Do you want a reply?</h3>
               <p>Leave your details below if you’d like a response.</p>
diff --git a/app/templates/views/support/report-problem.html b/app/templates/views/support/report-problem.html
index 002811a30..12f40e2c1 100644
--- a/app/templates/views/support/report-problem.html
+++ b/app/templates/views/support/report-problem.html
@@ -24,7 +24,7 @@
           </p>
         </div>
         {% call form_wrapper() %}
-            {{ textbox(form.feedback, width='1-1', hint='', rows=10) }}
+            {{ textbox(form.feedback, width='1-1', hint='', rows=10, autosize=True) }}
             {% if not current_user.is_authenticated %}
               {{ textbox(form.name, width='1-1') }}
               {{ textbox(form.email_address, width='1-1') }}