fix(gnoweb): escape bash chars in help args (#3672)

This PR ensures that special characters like ! and ? in user inputs are
properly escaped when generating commands in the docs page ($help).
Previously, entering ! or any other special char could cause the command
string to break by omitting a closing ", making it invalid.

This fix applies proper escaping to prevent such issues, ensuring that
generated commands remain valid and executable.

The fix introduces an escaping function that handles shell-sensitive
characters before inserting them into the generated command strings.
This approach ensures the commands remain intact without affecting their
output when executed. Thus, the escape char is also removed from the cmd
when the shell-sensitive char is removed from the arg input.

cf: [issue
3355](#3355 (comment))

gno.land/pkg/gnoweb/components/layouts/header.html

@@ -21,4 +21,4 @@
     <form class="sidemenu col-span-3 flex justify-end lg:justify-start gap-3 sm:gap-6 h-full text-100 text-gray-400">{{ range .Links }} {{ template "ui/header_link" . }} {{ end }}</form>
   </nav>
 </header>
-{{ end }} 
+{{ end }}

gno.land/pkg/gnoweb/frontend/js/realmhelp.ts

@@ -1,4 +1,4 @@
-import { debounce } from "./utils";
+import { debounce, escapeShellSpecialChars } from "./utils";
 
 class Help {
   private DOM: {
@@ -67,7 +67,7 @@ class Help {
 
       localStorage.setItem("helpAddressInput", address);
       this.funcList.forEach((func) => func.updateAddr(address));
-    });
+    }, 50);
     addressInput?.addEventListener("input", () => debouncedUpdate(addressInput));
 
     cmdModeSelect?.addEventListener("change", (e) => {
@@ -124,7 +124,7 @@ class HelpFunc {
   private bindEvents(): void {
     const debouncedUpdate = debounce((paramName: string, paramValue: string) => {
       if (paramName) this.updateArg(paramName, paramValue);
-    });
+    }, 50);
 
     this.DOM.el.addEventListener("input", (e) => {
       const target = e.target as HTMLInputElement;
@@ -143,10 +143,11 @@ class HelpFunc {
   }
 
   public updateArg(paramName: string, paramValue: string): void {
+    const escapedValue = escapeShellSpecialChars(paramValue);
     this.DOM.args
       .filter((arg) => arg.dataset.arg === paramName)
       .forEach((arg) => {
-        arg.textContent = paramValue || "";
+        arg.textContent = escapedValue || "";
       });
   }
 

gno.land/pkg/gnoweb/frontend/js/utils.ts

@@ -10,3 +10,7 @@ export function debounce<T extends (...args: any[]) => void>(func: T, delay: num
     }, delay);
   };
 }
+
+export function escapeShellSpecialChars(arg: string): string {
+  return arg.replace(/([$`"\\!|&;<>*?{}()])/g, "\\$1");
+}