DOC-2222: Fix broken mergetags in demos, warnings and errors (#3015)

* DOC-2222: Fix warnings, errors, and broken strings

* DOC-2222: Fix missing merge tags in demos

* DOC-2222: Add clipboard variable

* DOC-2222: Replace escaped braces with variables

* DOC-2222: Fix comment

Author: MitchC1999

antora.yml

@@ -63,6 +63,9 @@ asciidoc:
     newline: '<br>'
     virt_ellps: '&#8942;'
     ellps: '&#133;'
+    # Prevent Mergetags becoming variables
+    prefix: '{{'
+    suffix: '}}'
     # Demo logos
     logofordemos: 'https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png'
     logofordemoshtml: '<p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128"></p>'

modules/ROOT/examples/live-demos/advtemplate-insertionpoint/index.html

@@ -11,10 +11,10 @@ <h4>To insert a template</h4>
   Select the template to add to the TinyMCE document from the <strong>Templates</strong> dialog that presents.
     <ol>
       <li>
-      Click the <strong>Without an insertion point marker</strong> category to see and select a template that does not use the <code>{{mce-cursor}}</code> insertion point marker.
+      Click the <strong>Without an insertion point marker</strong> category to see and select a template that does not use the <code>{{prefix}}mce-cursor{{suffix}}</code> insertion point marker.
       </li>
       <li>
-      Click the <strong>With an insertion point marker</strong> category to see and select a template that does use the <code>{{mce-cursor}}</code> insertion point marker.
+      Click the <strong>With an insertion point marker</strong> category to see and select a template that does use the <code>{{prefix}}mce-cursor{{suffix}}</code> insertion point marker.
       </li>
     </ol>
   </li>
@@ -23,21 +23,21 @@ <h4>To insert a template</h4>
 
 <h4>Noting the difference</h4>
 
-<p>The <em>Name entry prompt</em> template without the <code>{{mce-cursor}}</code> insertion point marker, places the insertion point at the end of the template text.</p>
+<p>The <em>Name entry prompt</em> template without the <code>{{prefix}}mce-cursor{{suffix}}</code> insertion point marker, places the insertion point at the end of the template text.</p>
 
-<p>By contrast, the <em>Name entry prompt</em> template with the <code>{{mce-cursor}}</code> insertion point marker places the insertion point at the right spot for someone to enter their name, as requested.</p>
+<p>By contrast, the <em>Name entry prompt</em> template with the <code>{{prefix}}mce-cursor{{suffix}}</code> insertion point marker places the insertion point at the right spot for someone to enter their name, as requested.</p>
 
-<p>Similarly, the <em>Letter outline</em> template without the <code>{{mce-cursor}}</code> insertion point marker, places the insertion point at the end of the template text.</p>
+<p>Similarly, the <em>Letter outline</em> template without the <code>{{prefix}}mce-cursor{{suffix}}</code> insertion point marker, places the insertion point at the end of the template text.</p>
 
-<p>And, by equivalent contrast, the <em>Letter outline</em> template with the <code>{{mce-cursor}}</code> insertion point marker places the insertion point at the right spot for someone to start writing a letter.</p>
+<p>And, by equivalent contrast, the <em>Letter outline</em> template with the <code>{{prefix}}mce-cursor{{suffix}}</code> insertion point marker places the insertion point at the right spot for someone to start writing a letter.</p>
 
 <h4>Working with Merge Tags</h4>
 
-<p>The second pre-defined template in this demonstration — the <em>Letter outline</em> template — shows the <code>{{mce-cursor}}</code> string working in conjunction with the <a href="https://tiny.cloud/docs/tinymce/6/mergetags/">Merge Tags</a> Premium plugin.</p>
+<p>The second pre-defined template in this demonstration — the <em>Letter outline</em> template — shows the <code>{{prefix}}mce-cursor{{suffix}}</code> string working in conjunction with the <a href="https://tiny.cloud/docs/tinymce/6/mergetags/">Merge Tags</a> Premium plugin.</p>
 
 <p>The fixed string that is the Insertion Point Marker uses the same delimiting characters as are used by default by the Merge Tags plugin.</p>
 
-<p>The <strong>Merge Tags</strong> plugin knows nothing about the <code>{{mce-cursor}}</code> being a marker string for the <strong>Advanced Templates</strong> plugin. And, if this particular string was used in a Merge Tags configuration, the <strong>Merge Tags</strong> plugin would recognise it and substitute it with whatever contents it was set to substitute, as expected.
+<p>The <strong>Merge Tags</strong> plugin knows nothing about the <code>{{prefix}}mce-cursor{{suffix}}</code> being a marker string for the <strong>Advanced Templates</strong> plugin. And, if this particular string was used in a Merge Tags configuration, the <strong>Merge Tags</strong> plugin would recognise it and substitute it with whatever contents it was set to substitute, as expected.
 
 <p>The <strong>Advanced Templates</strong> plugin removes the Insertion Point Marker before inserting a template containing the string in to a TinyMCE instance, however.</p>
 

modules/ROOT/examples/live-demos/advtemplate-insertionpoint/index.js

@@ -12,7 +12,7 @@ tinymce.init({
         },
         {
           title: 'Letter outline',
-          content: '<p>{{Current.Date}}</p><p>{{Honorific}} {{Person.Name.Last}},</p><p></p><p>&nbsp;</p><p>Regards,</p><p>{{staff.digital.signature}}</p><p>{{Staff.Name}}</p><p>{{Staff.Email}}</p>'
+          content: '<p>{{prefix}}Current.Date{{suffix}}</p><p>{{prefix}}Honorific{{suffix}} {{prefix}}Person.Name.Last{{suffix}},</p><p></p><p>&nbsp;</p><p>Regards,</p><p>{{prefix}}staff.digital.signature{{suffix}}</p><p>{{prefix}}Staff.Name{{suffix}}</p><p>{{prefix}}Staff.Email{{suffix}}</p>'
         },
       ],
     },
@@ -21,11 +21,11 @@ tinymce.init({
       items: [
         {
           title: 'Name entry prompt',
-          content: '<p><strong>Enter your name:</strong>{{mce-cursor}}</p><p><em>Include both your given and family names, in your preferred order.</em></p>'
+          content: '<p><strong>Enter your name:</strong>{{prefix}}mce-cursor{{suffix}}</p><p><em>Include both your given and family names, in your preferred order.</em></p>'
         },
         {
           title: 'Letter outline',
-          content: '<p>{{Current.Date}}</p><p>{{Honorific}} {{Person.Name.Last}},</p><p>{{mce-cursor}}&nbsp;</p><p>Regards,</p><p>{{staff.digital.signature}}</p><p>{{Staff.Name}}</p><p>{{Staff.Email}}</p>'
+          content: '<p>{{prefix}}Current.Date{{suffix}}</p><p>{{prefix}}Honorific{{suffix}} {{prefix}}Person.Name.Last{{suffix}},</p><p>{{prefix}}mce-cursor{{suffix}}&nbsp;</p><p>Regards,</p><p>{{prefix}}staff.digital.signature{{suffix}}</p><p>{{prefix}}Staff.Name{{suffix}}</p><p>{{prefix}}Staff.Email{{suffix}}</p>'
         },
       ],
     },

modules/ROOT/examples/live-demos/advtemplate-predefined/index.js

@@ -4,15 +4,15 @@ const advtemplate_templates = [
     items: [
       {
         title: 'Message received',
-        content: '<p dir="ltr">Hey {{Customer.FirstName}}!</p>\n<p dir="ltr">Just a quick note to say we&rsquo;ve received your message, and will get back to you within 48 hours.</p>\n<p dir="ltr">For reference, your ticket number is: {{Ticket.Number}}</p>\n<p dir="ltr">Should you have any questions in the meantime, just reply to this email and it will be attached to this ticket.</p>\n<p><strong>&nbsp;</strong></p>\n<p dir="ltr">Regards,</p>\n<p dir="ltr">{{Agent.FirstName}}</p>'
+        content: '<p dir="ltr">Hey {{prefix}}Customer.FirstName{{suffix}}!</p>\n<p dir="ltr">Just a quick note to say we&rsquo;ve received your message, and will get back to you within 48 hours.</p>\n<p dir="ltr">For reference, your ticket number is: {{prefix}}Ticket.Number{{suffix}}</p>\n<p dir="ltr">Should you have any questions in the meantime, just reply to this email and it will be attached to this ticket.</p>\n<p><strong>&nbsp;</strong></p>\n<p dir="ltr">Regards,</p>\n<p dir="ltr">{{prefix}}Agent.FirstName{{suffix}}</p>'
       },
       {
         title: 'Thanks for the feedback',
-        content: '<p dir="ltr">Hi {{Customer.FirstName}},</p>\n<p dir="ltr">We appreciate you taking the time to provide feedback on {{Product.Name}}.</p>\n<p dir="ltr">It sounds like it wasn&rsquo;t able to fully meet your expectations, for which we apologize. Rest assured our team looks at each piece of feedback and uses it to decide what to focus on next with {{Product.Name}}.</p>\n<p dir="ltr"><strong>&nbsp;</strong></p>\n<p dir="ltr">All the best, and let us know if there&rsquo;s anything else we can do to help.</p>\n<p dir="ltr">-{{Agent.FirstName}}</p>'
+        content: '<p dir="ltr">Hi {{prefix}}Customer.FirstName{{suffix}},</p>\n<p dir="ltr">We appreciate you taking the time to provide feedback on {{prefix}}Product.Name{{suffix}}.</p>\n<p dir="ltr">It sounds like it wasn&rsquo;t able to fully meet your expectations, for which we apologize. Rest assured our team looks at each piece of feedback and uses it to decide what to focus on next with {{prefix}}Product.Name{{suffix}}.</p>\n<p dir="ltr"><strong>&nbsp;</strong></p>\n<p dir="ltr">All the best, and let us know if there&rsquo;s anything else we can do to help.</p>\n<p dir="ltr">-{{prefix}}Agent.FirstName{{suffix}}</p>'
       },
       {
         title: 'Still working on case',
-        content: '<p dir="ltr"><img src="https://lh4.googleusercontent.com/-H7w_COxrsy2fVpjO6RRnoBsujhaLyg6AXux5zidqmQ_ik1mrE6BtnaTUdWYQuVbtKpviRqQiuPBOHNGUsEXvrRliEHc4-hKDrCLgQQ9Co-MI4uY2ehUvYtU1nn3EeS0WiUzST-7MQB2Z5YFXrMDwRk" width="320" height="240"></p>\n<p><strong>&nbsp;</strong></p>\n<p dir="ltr">Hi {{Customer.FirstName}},</p>\n<p dir="ltr">Just a quick note to let you know we&rsquo;re still working on your case. It&rsquo;s taking a bit longer than we hoped, but we&rsquo;re aiming to get you an answer in the next 48 hours.</p>\n<p dir="ltr">Stay tuned,</p>\n<p dir="ltr">{{Agent.FirstName}}</p>'
+        content: '<p dir="ltr">Hi {{prefix}}Customer.FirstName{{suffix}},</p>\n<p dir="ltr">Just a quick note to let you know we&rsquo;re still working on your case. It&rsquo;s taking a bit longer than we hoped, but we&rsquo;re aiming to get you an answer in the next 48 hours.</p>\n<p dir="ltr">Stay tuned,</p>\n<p dir="ltr">{{prefix}}Agent.FirstName{{suffix}}</p>'
       }
     ]
   },
@@ -21,11 +21,11 @@ const advtemplate_templates = [
     items: [
       {
         title: 'Closing ticket',
-        content: '<p dir="ltr">Hi {{Customer.FirstName}},</p>\n<p dir="ltr">We haven&rsquo;t heard back from you in over a week, so we have gone ahead and closed your ticket number {{Ticket.Number}}.</p>\n<p dir="ltr">If you&rsquo;re still running into issues, not to worry, just reply to this email and we will re-open your ticket.</p>\n<p><strong>&nbsp;</strong></p>\n<p dir="ltr">All the best,</p>\n<p dir="ltr">{{Agent.FirstName}}</p>'
+        content: '<p dir="ltr">Hi {{prefix}}Customer.FirstName{{suffix}},</p>\n<p dir="ltr">We haven&rsquo;t heard back from you in over a week, so we have gone ahead and closed your ticket number {{prefix}}Ticket.Number{{suffix}}.</p>\n<p dir="ltr">If you&rsquo;re still running into issues, not to worry, just reply to this email and we will re-open your ticket.</p>\n<p><strong>&nbsp;</strong></p>\n<p dir="ltr">All the best,</p>\n<p dir="ltr">{{prefix}}Agent.FirstName{{suffix}}</p>'
       },
       {
         title: 'Post-call survey',
-        content: '<p dir="ltr">Hey {{Customer.FirstName}}!</p>\n<p dir="ltr">&nbsp;</p>\n<p dir="ltr">How did we do?</p>\n<p dir="ltr">If you have a few moments, we&rsquo;d love you to fill out our post-support survey: {{Survey.Link}}</p>\n<p><strong>&nbsp;</strong></p>\n<p dir="ltr">Thanks in advance!<br>{{Company.Name}} Customer Support</p>'
+        content: '<p dir="ltr">Hey {{prefix}}Customer.FirstName{{suffix}}!</p>\n<p dir="ltr">&nbsp;</p>\n<p dir="ltr">How did we do?</p>\n<p dir="ltr">If you have a few moments, we&rsquo;d love you to fill out our post-support survey: {{prefix}}Survey.Link{{suffix}}</p>\n<p><strong>&nbsp;</strong></p>\n<p dir="ltr">Thanks in advance!<br>{{prefix}}Company.Name{{suffix}} Customer Support</p>'
       }
     ]
   },
@@ -34,11 +34,11 @@ const advtemplate_templates = [
     items: [
       {
         title: 'How to find model number',
-        content: '<p dir="ltr">Hi {{Customer.FirstName}},</p>\n<p><strong>&nbsp;</strong></p>\n<p dir="ltr">My name is {{Agent.FirstName}} and I will be glad to assist you today.</p>\n<p dir="ltr">To troubleshoot your issue, we first need your model number, which can be found on the underside of your product beneath the safety warning label.&nbsp;</p>\n<p dir="ltr">It should look something like the following: XX.XXXXX.X</p>\n<p dir="ltr">Once you send it over, I will advise on next steps.</p>\n<p><strong>&nbsp;</strong></p>\n<p dir="ltr">Thanks!</p>\n<p dir="ltr">{{Agent.FirstName}}</p>'
+        content: '<p dir="ltr">Hi {{prefix}}Customer.FirstName{{suffix}},</p>\n<p><strong>&nbsp;</strong></p>\n<p dir="ltr">My name is {{prefix}}Agent.FirstName{{suffix}} and I will be glad to assist you today.</p>\n<p dir="ltr">To troubleshoot your issue, we first need your model number, which can be found on the underside of your product beneath the safety warning label.&nbsp;</p>\n<p dir="ltr">It should look something like the following: XX.XXXXX.X</p>\n<p dir="ltr">Once you send it over, I will advise on next steps.</p>\n<p><strong>&nbsp;</strong></p>\n<p dir="ltr">Thanks!</p>\n<p dir="ltr">{{prefix}}Agent.FirstName{{suffix}}</p>'
       },
       {
         title: 'Support escalation',
-        content: '<p dir="ltr"><img src="https://lh3.googleusercontent.com/z4hleIymnERrS9OQQMBwmkqVne8kYZA0Kly9Ny64pp4fi47CWWUy30Q0-UkjGf-K-50zrfR-wltHUTbExzZ7VUSUAUG60Fll5f2E0UZcKjKoa-ZVlIcuOoe-RRckFWqiihUOfVds7pXtM8Y59uy2hpw" width="295" height="295"></p>\n<p><strong>&nbsp;</strong></p>\n<p dir="ltr">Hi {{Customer.FirstName}},</p>\n<p dir="ltr">We have escalated your ticket {{Ticket.Number}} to second-level support.</p>\n<p dir="ltr">You should hear back from the new agent on your case, {{NewAgent.FirstName}}, shortly.</p>\n<p><strong>&nbsp;</strong></p>\n<p dir="ltr">Thanks,</p>\n<p dir="ltr">{{Company.Name}} Customer Support</p>'
+        content: '<p dir="ltr">Hi {{prefix}}Customer.FirstName{{suffix}},</p>\n<p dir="ltr">We have escalated your ticket {{prefix}}Ticket.Number{{suffix}} to second-level support.</p>\n<p dir="ltr">You should hear back from the new agent on your case, {{prefix}}NewAgent.FirstName{{suffix}}, shortly.</p>\n<p><strong>&nbsp;</strong></p>\n<p dir="ltr">Thanks,</p>\n<p dir="ltr">{{prefix}}Company.Name{{suffix}} Customer Support</p>'
       }
     ]
   }