Enhance the ‘how to do placeholders’ hint

This commit makes the ‘how to do placeholders’ box part of the tour,
with the same blue background.

It also adds some Javascript enhancement so that:
- it responds to the contents of the message template
- has a ‘show me’ link which inserts ‘Dear ((name))’ into the template
  contents textbox

We’ve found that this has helped people understnad what placeholders
are, and how to do them.

app/assets/javascripts/highlightTags.js

@@ -7,6 +7,25 @@
 
   const tagPattern = /\(\([^\)\(]+\)\)/g;
 
+  const getPlaceholderHint = function(placeholders) {
+    if (0 === placeholders.length) {
+      return `
+        <p>Add fields using ((double brackets))</p>
+        <span class='placeholder-hint-action' tabindex='0' role='button'>Show me how</span>
+      `;
+    }
+    if (1 === placeholders.length) {
+        return `
+          <p>Add fields using ((double brackets))</p>
+          <p>You’ll populate the ‘${placeholders[0]}’ field when you send messages using this template</p>
+        `;
+    }    
+    return `
+      <p>Add fields using ((double brackets))</p>
+      <p>You’ll populate your fields when you send some messages</p>
+    `;
+  };
+
   Modules.HighlightTags = function() {
 
     this.start = function(textarea) {
@@ -22,6 +41,9 @@
         `))
         .on("input", this.update);
 
+      this.$placeHolderHint = $('#placeholder-hint')
+        .on("click", ".placeholder-hint-action", this.demo);
+
       this.initialHeight = this.$textbox.height();
 
       this.$backgroundMaskForeground.width(
@@ -40,14 +62,30 @@
       )
     );
 
+    this.escapedMessage = () => $('<div/>').text(this.$textbox.val()).html();
+
+    this.listPlaceholders = () => this.escapedMessage().match(tagPattern) || [];
+
+    this.listPlaceholdersWithoutBrackets = () => this.listPlaceholders().map(
+      placeholder => placeholder.substring(2, placeholder.length - 2)
+    );
+
     this.replacePlaceholders = () => this.$backgroundMaskForeground.html(
-      $('<div/>').text(this.$textbox.val()).html().replace(
+      this.escapedMessage().replace(
         tagPattern, match => `<span class='tag'>${match}</span>`
       )
     );
 
+    this.hint = () => this.$placeHolderHint.html(
+      getPlaceholderHint(this.listPlaceholdersWithoutBrackets())
+    );
+
     this.update = () => (
-      this.replacePlaceholders() && this.resize()
+      this.replacePlaceholders() && this.resize() && this.hint()
+    );
+
+    this.demo = () => (
+      this.$textbox.val((i, current) => `Dear ((name)), ${current}`) && this.update()
     );
 
   };