Add Escaped Placeholders

.pre-commit-config.yaml

@@ -1,4 +1,4 @@
-# This file was automatically copied from notifications-utils@99.3.3
+# This file was automatically copied from notifications-utils@99.4.1
 
 repos:
 - repo: https://github.com/pre-commit/pre-commit-hooks

app/assets/javascripts/esm/enhanced-textbox.mjs

@@ -17,7 +17,7 @@ class EnhancedTextbox {
     }
 
     this.$module = $module;
-    this.tagPattern = /\(\(([^\)\((\?)]+)(\?\?)?([^\)\(]*)\)\)/g;
+    this.tagPattern = /\(\(([^\)\((\?)(\:)]+)((\?\?)|(::))?([^\)\(]*)\)\)/g;
     this.highlightPlaceholders = this.$module.dataset.highlightPlaceholders === 'true';
     this.autofocus = this.$module.dataset.autofocusTextbox === 'true';
     this.$textbox = this.$module;
@@ -42,10 +42,10 @@ class EnhancedTextbox {
     this.$visibleTextbox.style.visibility = 'hidden';
     this.$visibleTextbox.style.display = 'block';
     document.querySelector('body').append(this.$visibleTextbox);
-    
+
     this.initialHeight = this.$visibleTextbox.offsetHeight;
 
-    this.$backgroundHighlightElement.style.borderWidth = 
+    this.$backgroundHighlightElement.style.borderWidth =
       window.getComputedStyle(this.$textbox).getPropertyValue('border-width');
 
     this.$visibleTextbox.remove();
@@ -77,9 +77,11 @@ class EnhancedTextbox {
 
   contentReplaced () {
     return this.contentEscaped().replace(
-      this.tagPattern, (match, name, separator, value) => {
-        if (value && separator) {
-          return `<span class='placeholder-conditional'>((${name}??</span>${value}))`;
+      this.tagPattern, (match, name, separator, _, __, value) => {
+        if (value && separator == "??") {
+          return `<span class='placeholder-conditional'>((${name}${separator}</span>${value}))`;
+        } else if (value && separator == "::") {
+          return `<span class='placeholder-unsafe'>((${name}</span>${separator}${value}))`;
         } else {
           return `<span class='placeholder'>((${name}${value}))</span>`;
         }

app/assets/stylesheets/components/placeholder.scss

@@ -14,6 +14,19 @@
 
 }
 
+.placeholder-unsafe {
+
+  @extend %placeholder;
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+  box-shadow: inset 0.47em 0 0 0 #FFF, inset 0 -0.05em 0 0 #FFF, inset 0 0.26em 0 0 #FFF;
+
+  .sms-message-wrapper & {
+    box-shadow: inset 0.47em 0 0 0 govuk-shade(govuk-colour("light-grey"), 7%), inset -0.89em 0 0 0 govuk-shade(govuk-colour("light-grey"), 7%), inset 0 -0.18em 0 0 govuk-shade(govuk-colour("light-grey"), 7%), inset 0 0.18em 0 0 govuk-shade(govuk-colour("light-grey"), 7%);
+  }
+
+}
+
 .placeholder-no-brackets {
   @extend %placeholder;
   padding-left: 3px;

requirements.in

@@ -17,7 +17,7 @@ notifications-python-client==10.0.0
 fido2==1.1.3
 
 # Run `make bump-utils` to update to the latest version
-notifications-utils @ git+https://github.com/alphagov/notifications-utils.git@99.3.3
+notifications-utils @ git+https://github.com/alphagov/notifications-utils.git@5d01731e30708245bb102a3b8d078e246fe8c531
 
 govuk-frontend-jinja==3.5.0
 

requirements.txt

@@ -101,7 +101,7 @@ mistune==0.8.4
     # via notifications-utils
 notifications-python-client==10.0.0
     # via -r requirements.in
-notifications-utils @ git+https://github.com/alphagov/notifications-utils.git@7d7a531ec102078988e2cdc1493a56c2cc5d0368
+notifications-utils @ git+https://github.com/alphagov/notifications-utils.git@5d01731e30708245bb102a3b8d078e246fe8c531
     # via -r requirements.in
 openpyxl==3.1.5
     # via pyexcel-xlsx

requirements_for_test.txt

@@ -164,7 +164,7 @@ moto==5.1.0
     # via -r requirements_for_test.in
 notifications-python-client==10.0.0
     # via -r requirements.txt
-notifications-utils @ git+https://github.com/alphagov/notifications-utils.git@7d7a531ec102078988e2cdc1493a56c2cc5d0368
+notifications-utils @ git+https://github.com/alphagov/notifications-utils.git@5d01731e30708245bb102a3b8d078e246fe8c531
     # via -r requirements.txt
 openpyxl==3.1.5
     # via

requirements_for_test_common.in

@@ -1,4 +1,4 @@
-# This file was automatically copied from notifications-utils@99.3.3
+# This file was automatically copied from notifications-utils@99.4.1
 
 beautifulsoup4==4.12.3
 pytest==8.3.4

ruff.toml

@@ -1,4 +1,4 @@
-# This file was automatically copied from notifications-utils@99.3.3
+# This file was automatically copied from notifications-utils@99.4.1
 
 extend-exclude = [
     "migrations/versions/",

tests/javascripts/enhance-textbox.test.mjs

@@ -162,7 +162,7 @@ describe('Enhanced textbox', () => {
           <label class="govuk-label" for="template_content">Message</label>
           <textarea class="govuk-textarea govuk-!-width-full govuk-textarea-highlight__textbox" id="template_content" name="template_content" rows="8" data-notify-module="enhanced-textbox" data-autofocus-textbox="true"></textarea>
         </div>`;
-       
+
         textarea = document.querySelector('textarea');
 
         new EnhancedTextbox(textarea);
@@ -358,8 +358,26 @@ describe('Enhanced textbox', () => {
 
     });
 
+    test("If an unsafe placeholder is added, it should be highlighted with placeholder-unsafe style", () => {
+
+      textarea.textContent = "Dear ((title::unsafe)) ((surname::unsafe))";
+
+      // start module
+      new EnhancedTextbox(textarea);
+
+      backgroundEl = textarea.nextElementSibling;
+      helpers.triggerEvent(textarea, 'input');
+
+      // add some more content with some optional content inside
+      const unsafeHighlightTags = backgroundEl.querySelectorAll('.placeholder-unsafe');
+
+      expect(unsafeHighlightTags.length).toEqual(2);
+
+    });
+
   });
 
+
   describe("When the content of the textbox is updated", () => {
 
     // doesn't apply to inputs as they have a fixed height