INT-3409: Update configs to include TinyMCE AI plugin

package.json

@@ -20,7 +20,7 @@
     "@angular/platform-browser-dynamic": "^21.0.8",
     "@angular/router": "^21.0.8",
     "@microsoft/fetch-event-source": "^2.0.1",
-    "@tinymce/tinymce-angular": "9.1.2-rc.20260115041456592.sha0aa5d93",
+    "@tinymce/tinymce-angular": "^9.1.1",
     "angular-cli-ghpages": "^2.0.3",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",

src/app/app.component.ts

@@ -4,7 +4,10 @@ import { generateConfig } from './configs/config';
 
 import { full } from './snippets/snippets';
 
-const key = 'prsghhxax677rv082a1zj9b7cgjuoaqysf7h8ayxi5ao43ha';
+const params = {
+  jwtServerURL: 'https://demo.api.tiny.cloud',
+  apiKey: 'prsghhxax677rv082a1zj9b7cgjuoaqysf7h8ayxi5ao43ha'
+};
 
 @Component({
   selector: 'app-root',
@@ -40,8 +43,8 @@ export class AppComponent {
   }
 
   public configurations = {
-    classicConf: generateConfig({ excludePlugins: ['tinydrive', 'uploadcare']}),
-    inlineConf: generateConfig({ excludePlugins: ['tinydrive', 'editimage', 'image' ], overrides: { inline: true }})
+    classicConf: generateConfig(params, { excludePlugins: ['tinydrive', 'uploadcare']}),
+    inlineConf: generateConfig(params, { excludePlugins: ['tinydrive', 'editimage', 'image' ], overrideConfig: { inline: true }})
   }
 
   public channels = [
@@ -62,7 +65,7 @@ export class AppComponent {
   template: `
   <div style="margin: 24px 0px">
     <h2>{{ title }}</h2>
-    <editor [apiKey]="apiKey" [cloudChannel]="channel" [initialValue]="initialValue" [init]="init" ></editor>
+    <editor [apiKey]="apiKey" [cloudChannel]="channel" [initialValue]="initialValue" [init]="init"></editor>
   </div>
   `,
   standalone: false
@@ -75,7 +78,7 @@ export class TinyComponent {
   public init: any = {};
   public initialValue = '';
 
-  public apiKey = key;
+  public apiKey = params.apiKey;
 
   public ngOnInit(): void {
     console.log('loading inner', this.channel);
@@ -85,56 +88,13 @@ export class TinyComponent {
   }
 }
 
-const configWrapRe = /^\s*\(\s*function\s*\(\s*\)\s*\{\s*return\s*([\s\S]*);\s*\}\s*\)\s*\(\s*\)\s*;\s*$/;
-
-/**
- * Escape text to make HTML.
- * @param {string} text text to escape as HTML.
- * @returns the text with special characters escaped.
- */
-const escapeHtml = (text: any) => {
-  return text.replaceAll(/&/g, '&amp;').replaceAll(/</g, '&lt;').replaceAll(/>/g, '&gt;').replaceAll(/"/g, '&quot;').replaceAll(/'/g, '&#39;');
-}
-
-/**
- * Unwraps a config.
- * @param {string} config a config with a function wrapping it to make it easy to eval.
- * @returns {string} the unwrapped config.
- */
-const unwrapConfig = (config: string) => {
-  const m = configWrapRe.exec(config);
-  return m !== null ? m[1] : config;
-}
-
-/**
- * Process a snippet and insert the contained variables.
- * @param {string} snippet the HTML snippet with possible comment variables.
- * @param {string} title the title.
- * @param {string} config the config.
- * @returns {string} the snippet with variables inserted.
- * Not too sure what this is doing, snippet is working fine without it.
- */
-const replaceSnippetVars = (snippet: any, title: string, config: string) => {
-  return snippet.replaceAll(/<!--\{([a-zA-Z0-9]+)\}-->/g, function (match: any, name: any) {
-    if (name === 'title') {
-      return escapeHtml(title);
-    } else if (name === 'init') {
-      return `&lt;Editor init={${escapeHtml(unwrapConfig(config))}}\n/&gt;`;
-    } else {
-      console.warn('Unknown variable', match);
-      return match;
-    }
-  });
-};
-
 /**
  * Convet a config into the init parameter
  * @param {string} stringConf config to parse
  * @returns {any} Hopefully the RawEditorSettings object
  */
 const initFromConf = (conf: any) => {
   let next  = {};
-  // console.log('parsing: ', conf);
   if (typeof conf === 'object') {
     next = {...conf}
   } else {

src/app/configs/a11ychecker.ts

@@ -0,0 +1,5 @@
+export default {
+  name: 'a11ychecker',
+  config: {},
+  toolbar: 'a11ycheck'
+};

src/app/configs/accordion.ts

@@ -0,0 +1,5 @@
+export default {
+  name: 'accordion',
+  toolbar: 'accordion',
+  config: {}
+};

src/app/configs/advcode.ts

@@ -0,0 +1,6 @@
+export default {
+  name: 'advcode',
+  config: {
+    advcode_inline: true
+  }
+};

src/app/configs/advlist.ts

@@ -0,0 +1,27 @@
+export default {
+  toolbar: 'numlist bullist',
+  name: 'advlist',
+  config: {
+    advlist_number_styles: "default,lower-alpha,lower-greek,lower-roman,upper-alpha,upper-roman",
+    advlist_bullet_styles: "default,circle,disc,square",
+  },
+  // Code samples for each configuration option:
+  //
+  // advlist_number_styles
+  // Specifies the number styles available in the list style dropdown
+  // - default: Standard numbering (1, 2, 3...)
+  // - lower-alpha: Lowercase letters (a, b, c...)
+  // - lower-greek: Lowercase Greek letters (α, β, γ...)
+  // - lower-roman: Lowercase Roman numerals (i, ii, iii...)
+  // - upper-alpha: Uppercase letters (A, B, C...)
+  // - upper-roman: Uppercase Roman numerals (I, II, III...)
+  // Usage: advlist_number_styles: "default,lower-alpha,lower-roman"
+  //
+  // advlist_bullet_styles
+  // Specifies the bullet styles available in the list style dropdown
+  // - default: Standard bullet point (•)
+  // - circle: Open circle (○)
+  // - disc: Filled circle/disc (●)
+  // - square: Square bullet (■)
+  // Usage: advlist_bullet_styles: "default,circle,square"
+};

src/app/configs/advtable.ts

@@ -0,0 +1,4 @@
+export default {
+  name: 'advtable',
+  config: {}
+};

src/app/configs/advtemplate.ts

@@ -0,0 +1,74 @@
+const advtemplate_templates = [
+		{
+			id: '1',
+			title: 'Quick replies',
+			items: [
+				{
+					id: '2',
+					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>'
+				},
+				{
+					id: '3',
+					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>'
+				},
+				{
+					id: '6',
+					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>'
+				}
+			]
+		},
+		{
+			id: '4',
+			title: 'Closing tickets',
+			items: [
+				{
+					id: '7',
+					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>'
+				},
+				{
+					id: '8',
+					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>'
+				}
+			]
+		},
+		{
+			id: '5',
+			title: 'Product support',
+			items: [
+				{
+					id: '9',
+					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>'
+				},
+				{
+					id: '10',
+					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>'
+				}
+			]
+		},
+		{
+			id: '6',
+			title: 'Email Signatures',
+			items: [
+				{
+					id: '11',
+					title: 'Tiny Signature',
+					content: '<p>Regards<br /><br /><br /><a title="Tiny Technologies Inc" href="https://www.tiny.cloud/" target="_blank"><img src="https://www.tiny.cloud/email-static/tiny-logo.png" alt="Tiny Technologies Inc" width="130" height="42" /></a></p><p>Shiridi Gandham<br />QA Template Manager</p><p>Email:&nbsp;<a title="Email Shiridi" href="mailto:shiridi.gandham@tiny.cloud" target="_blank">shiridi.gandham@tiny.cloud</a><br />Phone:&nbsp;(+617) 3161 3557</p><p>Tiny Technologies<br /><a title="Tiny Technologies" href="https://www.tiny.cloud/" target="_blank">www.tiny.cloud</a></p><p><a title="Linkedin" href="https://www.linkedin.com/company/jointiny/" target="_blank" aria-invalid="true"><img src="https://www.tiny.cloud/email-static/social-linkedin.png" alt="Linkedin" width="20" height="20" /></a>&nbsp;<a title="Facebook" href="https://www.facebook.com/jointiny" target="_blank"><img src="https://www.tiny.cloud/email-static/social-facebook.png" alt="Facebook" width="20" height="20" /></a>&nbsp;<a title="Twitter" href="https://twitter.com/joinTiny" target="_blank"><img src="https://www.tiny.cloud/email-static/social-twitter.png" alt="Twitter" width="20" height="20" /></a>&nbsp;<a title="GitHub" href="https://github.com/tinymce/" target="_blank"><img src="https://www.tiny.cloud/email-static/social-github.png" alt="GitHub" width="20" height="20" /></a>&nbsp;<a title="Stack Overflow" href="https://stackoverflow.com/questions/tagged/tinymce" target="_blank"><img src="https://www.tiny.cloud/email-static/social-stackoverflow.png" alt="Stack Overflow" width="20" height="20" /></a></p>'
+				}
+			]
+		}
+	];
+
+export default {
+  toolbar: 'addtemplate inserttemplate',
+    name: 'advtemplate',
+    config: {
+      advtemplate_templates
+    }
+};