Add conditional placeholder detection

Implements: https://github.com/alphagov/notifications-utils/pull/51

Copies the same regex.

Adds some CSS to display conditional placeholders differently to
normal placeholders (vertical rather that curved right-hand edge).

app/assets/javascripts/highlightTags.js

@@ -5,7 +5,7 @@
     !('oninput' in document.createElement('input'))
   ) return;
 
-  const tagPattern = /\(\([^\)\(]+\)\)/g;
+  const tagPattern = /\(\(([^\)\((\?)]+)(\?\?)?([^\)\(]*)\)\)/g;
 
   Modules.HighlightTags = function() {
 
@@ -43,7 +43,9 @@
 
     this.replacePlaceholders = () => this.$background.html(
       this.escapedMessage().replace(
-        tagPattern, match => `<span class='placeholder'>${match}</span>`
+        tagPattern, (match, name, separator, value) => value && separator ?
+          `<span class='placeholder-conditional'>((${name}??</span>${value}))` :
+          `<span class='placeholder'>((${name}${value}))</span>`
       )
     );