Merge pull request #2795 from SillyTavern/expand-echo-command Expand `/echo` command with `cssClass`, `color`, `escapeHtml` and `onClick`

b0b9558a6c26152ea21fc9616b25a981390a11be

Cohee <18619528+Cohee1207@users.noreply.github.com>

Signed

Parents: b83cfa07c931f0c4ac7b2721ea5a0414df5f708b 50217e37b88d540cc3b5ae73024fb97054a22b87

public/scripts/slash-commands.js+59 -8 Viewed

                 defaultValue: 'false',
                 enumList: commonEnumProviders.boolean('trueFalse')(),
             }),
 +            SlashCommandNamedArgument.fromProps({
 +                name: 'cssClass',
 +                description: 'additional CSS class to add to the toast message (e.g. for custom styling)',
 +                typeList: [ARGUMENT_TYPE.STRING],
 +            }),
 +            SlashCommandNamedArgument.fromProps({
 +                name: 'color',
 +                description: 'custom CSS color of the toast message. Accepts all valid CSS color values (e.g. \'red\', \'#FF0000\', \'rgb(255, 0, 0)\').<br />>Can be more customizable with the \'cssClass\' argument and custom classes.',
 +            }),
 +            SlashCommandNamedArgument.fromProps({
 +                name: 'escapeHtml',
 +                description: 'whether to escape HTML in the toast message.',
 +                typeList: [ARGUMENT_TYPE.BOOLEAN],
 +                defaultValue: 'true',
 +                enumList: commonEnumProviders.boolean('trueFalse')(),
 +            }),
 +            SlashCommandNamedArgument.fromProps({
 +                name: 'onClick',
 +                description: 'a closure to call when the toast is clicked. This executed closure receives scope as provided in the script. Careful about possible side effects when manipulating variables and more.',
 +                typeList: [ARGUMENT_TYPE.CLOSURE],
 +            }),
         ],
         unnamedArgumentList: [
             new SlashCommandArgument(

         ],
         helpString: `
         <div>
             Echoes the provided text to a toast message. UsefulCan be used to display informational messages or for pipes debugging.
         </div>
         <div>
             <strong>Example:</strong>
             <ul>
                 <li>
                     <pre><code>/echo title="My Message" severity=infowarning This is ana infowarning message</code></pre>
 +                </li>
 +                <li>
 +                    <pre><code>/echo color=purple This message is purple</code></pre>
 +                </li>
 +                <li>
 +                    <pre><code>/echo onClick={: /echo escapeHtml=false color=transparent cssClass=wider_dialogue_popup &lt;img src="/img/five.png" /&gt; :} timeout=5000 Clicking on this message within 5 seconds will open the image.</code></pre>
                 </li>
             </ul>
         </div>

 /**
+ *
  * @param {{title?: string, severity?: string, timeout?: string, extendedTimeout?: string, preventDuplicates?: string, awaitDismissal?: string, cssClass?: string, color?: string, escapeHtml?: string, onClick?: SlashCommandClosure}} args - named arguments from the slash command
  * @param {string} value - The string to echo (unnamed argument from the slash command)
  * @returns {Promise<string>} The text that was echoed
  */

     // Make sure that the value is a string
     value = String(value);
     constlet title = args.title ? args.title : undefined;
     const severity = args.severity ? args.severity : 'info';
     /** @type {ToastrOptions} */

     if (args.timeout && !isNaN(parseInt(args.timeout))) options.timeOut = parseInt(args.timeout);
     if (args.extendedTimeout && !isNaN(parseInt(args.extendedTimeout))) options.extendedTimeOut = parseInt(args.extendedTimeout);
     if (isTrueBoolean(args.preventDuplicates)) options.preventDuplicates = true;
 +    if (args.cssClass) options.toastClass = args.cssClass;
 +    if (args.escapeHtml !== undefined) options.escapeHtml = isTrueBoolean(args.escapeHtml);
     // Prepare possible await handling
     let awaitDismissal = isTrueBoolean(args.awaitDismissal);

     if (awaitDismissal) {
         options.onHidden = () => resolveToastDismissal(value);
+    }
 +    if (args.onClick) {
 +        if (args.onClick instanceof SlashCommandClosure) {
 +            options.onclick = async () => {
 +                // Execute the slash command directly, with its internal scope and everything. Clear progress handler so it doesn't interfere with command execution progress.
 +                args.onClick.onProgress = null;
 +                await args.onClick.execute();
 +            };
 +        } else {
 +            toastr.warning('Invalid onClick provided for /echo command. This is not a closure');
 +        }
 +    }
++
 +    // If we allow HTML, we need to sanitize it to prevent security risks
 +    if (!options.escapeHtml) {
 +        if (title) title = DOMPurify.sanitize(title, { FORBID_TAGS: ['style'] });
 +        value = DOMPurify.sanitize(value, { FORBID_TAGS: ['style'] });
 +    }
 +    let toast;
     switch (severity) {
         case 'error':
             toast = toastr.error(value, title, options);
             break;
         case 'warning':
             toast = toastr.warning(value, title, options);
             break;
         case 'success':
             toast = toastr.success(value, title, options);
             break;
         case 'info':
         default:
             toast = toastr.info(value, title, options);
             break;
+    }
 +    if (args.color) {
 +        toast.css('background-color', args.color);
 +    }
++
     if (awaitDismissal) {
         return new Promise((resolve) => {
             resolveToastDismissal = resolve;