From e6746cc0b93e7fe85aaf2ccf67bc35dce052ccfa Mon Sep 17 00:00:00 2001
From: Sawyer Hood <sawyerjhood@gmail.com>
Date: Sat, 1 Jun 2024 09:08:48 -0700
Subject: [PATCH] forms

---
 ai/prompt.ts                |  1 +
 components/BrowserShape.tsx |  2 +-
 public/bootstrap.js         | 12 +++++++++++-
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/ai/prompt.ts b/ai/prompt.ts
index 3fa9f08..bfd7f63 100644
--- a/ai/prompt.ts
+++ b/ai/prompt.ts
@@ -6,6 +6,7 @@ Generate the full HTML markup, including:
 - Abundant, contextually-relevant links (href="https://example.com/...") to other pages within the same expansive web, encouraging exploration
 - Interactive elements to engage the user's curiosity
 - Fanciful, wondrous content that sparks the imagination
+- If you create a form, make sure that its method is GET and a full absolute URL is specified for the action attribute
 
 Every header should contain a descriptive hyperlink. Use URL hierarchy and parameters creatively to contextualize the user's journey.
 
diff --git a/components/BrowserShape.tsx b/components/BrowserShape.tsx
index 65c1a4b..095347b 100644
--- a/components/BrowserShape.tsx
+++ b/components/BrowserShape.tsx
@@ -181,7 +181,7 @@ export class BrowserShapeUtil extends BaseBoxShapeUtil<BrowserShape> {
         if (event.source !== iframe?.contentWindow) {
           return;
         }
-        if (event.data.type === "linkClick") {
+        if (event.data.type === "navigate") {
           const { href } = event.data;
 
           const newX = shape.x;
diff --git a/public/bootstrap.js b/public/bootstrap.js
index 484704e..60d9a13 100644
--- a/public/bootstrap.js
+++ b/public/bootstrap.js
@@ -1,6 +1,16 @@
 window.addEventListener("click", (e) => {
   if (e.target.tagName === "A") {
     e.preventDefault();
-    window.parent.postMessage({ type: "linkClick", href: e.target.href }, "*");
+    window.parent.postMessage({ type: "navigate", href: e.target.href }, "*");
+  }
+});
+
+window.addEventListener("submit", (e) => {
+  if (e.target.tagName === "FORM") {
+    e.preventDefault();
+    const formData = new FormData(e.target);
+    const queryParams = new URLSearchParams(formData).toString();
+    const newHref = `${e.target.action}?${queryParams}`;
+    window.parent.postMessage({ type: "navigate", href: newHref }, "*");
   }
 });