feat: add state for form controls and iframe management

Introduce state variables for HTML input attributes and iframe configuration to support advanced element editing and persistent scroll positioning during reloads.

src/App.tsx

@@ -63,6 +63,19 @@ export default function App() {
   const [htmlId, setHtmlId] = useState("");
   const [htmlTitle, setHtmlTitle] = useState("");
 
+  // Form / Input fields state
+  const [inputPlaceholder, setInputPlaceholder] = useState("");
+  const [inputValue, setInputValue] = useState("");
+  const [inputName, setInputName] = useState("");
+  const [inputType, setInputType] = useState("");
+  const [inputChecked, setInputChecked] = useState(false);
+  const [inputDataPoints, setInputDataPoints] = useState("");
+
+  // Paste / Import modal and Code controls state
+  const [showPasteModal, setShowPasteModal] = useState(false);
+  const [pastedHtml, setPastedHtml] = useState("");
+  const [localCode, setLocalCode] = useState("");
+
   // Styling Editor fields
   const [fontSize, setFontSize] = useState("16");
   const [fontWeight, setFontWeight] = useState("normal");
@@ -108,6 +121,12 @@ export default function App() {
   // Component references
   const canvasParentRef = useRef<HTMLDivElement>(null);
   const canvasContentRef = useRef<HTMLDivElement>(null);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  // Scroll retention for iframe reloads
+  const lastScrollTopRef = useRef<number>(0);
+  const lastScrollLeftRef = useRef<number>(0);
+  const [outlineTrigger, setOutlineTrigger] = useState<number>(0);
 
   // Initialize with landing page template on first run
   useEffect(() => {
@@ -122,20 +141,38 @@ export default function App() {
     pushHistoryState(defaultTemplate.html, "Template SaaS Carregado");
   }, []);
 
+  // Check if coding input contains full-page indicators wrapper
+  const hasFullHtmlWrapper = (htmlStr: string): boolean => {
+    const lower = htmlStr.toLowerCase();
+    return lower.includes("<doctype") || lower.includes("<html") || lower.includes("<body") || lower.includes("<head") || lower.includes("<style") || lower.includes("<script");
+  };
+
   // Sync canvas nodes inside our editing sandbox relative container when content changes
   const visualHtml = useMemo(() => {
     if (!htmlCode) return "";
     return injectEditorIds(htmlCode);
   }, [htmlCode]);
 
+  // Sync manual local code value when html state changes
+  useEffect(() => {
+    setLocalCode(cleanHTMLForExport(htmlCode));
+  }, [htmlCode]);
+
   // Inject unique data-el-id to each node recursively (stable, deterministic naming system)
   function injectEditorIds(htmlStr: string): string {
     const parser = new DOMParser();
     const doc = parser.parseFromString(htmlStr, "text/html");
     let index = 0;
     
+    // Auto-inject Tailwind CDN if missing inside head to support preset templates
+    if (doc.head && !doc.head.innerHTML.includes("tailwindcss.com")) {
+      const tailwindScript = doc.createElement("script");
+      tailwindScript.src = "https://cdn.tailwindcss.com";
+      doc.head.appendChild(tailwindScript);
+    }
+    
     const traverse = (node: Element) => {
-      if (node.tagName && node.tagName !== "BODY" && node.tagName !== "HTML") {
+      if (node.tagName && node.tagName !== "BODY" && node.tagName !== "HTML" && node.tagName !== "STYLE" && node.tagName !== "SCRIPT" && node.tagName !== "HEAD" && node.tagName !== "META" && node.tagName !== "TITLE" && node.tagName !== "LINK") {
         if (!node.getAttribute("data-el-id")) {
           node.setAttribute("data-el-id", `el_node_${index++}`);
         } else {
@@ -155,9 +192,12 @@ export default function App() {
     
     if (doc.body) {
       Array.from(doc.body.children).forEach(traverse);
-      return doc.body.innerHTML;
     }
-    return htmlStr;
+    
+    if (hasFullHtmlWrapper(htmlStr)) {
+      return doc.documentElement.outerHTML;
+    }
+    return doc.body ? doc.body.innerHTML : htmlStr;
   }
 
   // Remove editor identifiers before storing or exporting
@@ -170,19 +210,31 @@ export default function App() {
       Array.from(node.children).forEach(traverse);
     };
     
-    if (doc.body) {
-      Array.from(doc.body.children).forEach(traverse);
-      return doc.body.innerHTML;
+    if (doc.documentElement) {
+      traverse(doc.documentElement);
+    }
+    
+    // Remove auto-injected Tailwind script block on export if requested
+    if (doc.head) {
+      const scripts = doc.head.querySelectorAll("script[src*='tailwindcss.com']");
+      scripts.forEach(s => s.remove());
+    }
+    
+    if (hasFullHtmlWrapper(htmlStr)) {
+      return doc.documentElement.outerHTML;
     }
-    return htmlStr;
+    return doc.body ? doc.body.innerHTML : htmlStr;
   }
 
-  // Handle Canvas Operations directly
+  // Handle Canvas Operations directly over documents
   const editDOM = (currentHtml: string, action: (doc: Document) => void): string => {
     const parser = new DOMParser();
     const doc = parser.parseFromString(currentHtml, "text/html");
     action(doc);
-    return doc.body.innerHTML;
+    if (hasFullHtmlWrapper(currentHtml)) {
+      return doc.documentElement.outerHTML;
+    }
+    return doc.body ? doc.body.innerHTML : currentHtml;
   };
 
   const pushHistoryState = (newHtml: string, description: string = "Edição") => {
@@ -321,8 +373,28 @@ export default function App() {
       setImageAlt("");
     }
 
-    // Style Parsing helper, stripping typicalpx suffixes
-    const comp = window.getComputedStyle(el);
+    // Form Input options
+    const isFormTag = ["INPUT", "TEXTAREA", "SELECT", "BUTTON", "OPTION"].includes(el.tagName);
+    if (isFormTag) {
+      setInputPlaceholder(el.getAttribute("placeholder") || "");
+      setInputValue(el.getAttribute("value") || "");
+      setInputName(el.getAttribute("name") || "");
+      setInputType(el.getAttribute("type") || "");
+      setInputChecked((el as any).checked || el.hasAttribute("checked"));
+      setInputDataPoints(el.getAttribute("data-points") || "");
+    } else {
+      setInputPlaceholder("");
+      setInputValue("");
+      setInputName("");
+      setInputType("");
+      setInputChecked(false);
+      setInputDataPoints("");
+    }
+
+    // Style Parsing helper, stripping typical px suffixes, compatible with iframe
+    const comp = el.ownerDocument?.defaultView
+      ? el.ownerDocument.defaultView.getComputedStyle(el)
+      : window.getComputedStyle(el);
     const inline = el.style;
 
     setTextColor(rgbToHex(inline.color || comp.color) || "#000000");
@@ -385,23 +457,31 @@ export default function App() {
   // Run selection outlining effect calculations relative to canvas wrapper parent
   useEffect(() => {
     const updateOutlines = () => {
-      if (viewMode !== "visual" || !canvasParentRef.current) {
+      if (viewMode !== "visual" || !canvasParentRef.current || !canvasContentRef.current) {
         setSelectedRect(null);
         setHoverRect(null);
         return;
       }
 
       const canvasParent = canvasParentRef.current;
+      const viewport = canvasContentRef.current;
+      const iframe = iframeRef.current || canvasParent.querySelector("iframe");
+      const doc = iframe?.contentDocument || iframe?.contentWindow?.document;
+
+      const viewportRect = viewport.getBoundingClientRect();
+      const iframeRect = iframe ? iframe.getBoundingClientRect() : { top: 0, left: 0 };
 
       // Update Selected Element bounding card
       if (selectedId) {
-        const selectedEl = canvasParent.querySelector(`[data-el-id="${selectedId}"]`);
+        const selectedEl = doc 
+          ? doc.querySelector(`[data-el-id="${selectedId}"]`)
+          : canvasParent.querySelector(`[data-el-id="${selectedId}"]`);
+          
         if (selectedEl) {
           const rect = selectedEl.getBoundingClientRect();
-          const parentRect = canvasParent.getBoundingClientRect();
           setSelectedRect({
-            top: rect.top - parentRect.top + canvasParent.scrollTop,
-            left: rect.left - parentRect.left + canvasParent.scrollLeft,
+            top: rect.top + (iframeRect.top - viewportRect.top),
+            left: rect.left + (iframeRect.left - viewportRect.left),
             width: rect.width,
             height: rect.height,
             tagName: selectedEl.tagName.toLowerCase()
@@ -415,13 +495,15 @@ export default function App() {
 
       // Update Hovered Element bounding card
       if (hoverId && hoverId !== selectedId) {
-        const hoverEl = canvasParent.querySelector(`[data-el-id="${hoverId}"]`);
+        const hoverEl = doc
+          ? doc.querySelector(`[data-el-id="${hoverId}"]`)
+          : canvasParent.querySelector(`[data-el-id="${hoverId}"]`);
+          
         if (hoverEl) {
           const rect = hoverEl.getBoundingClientRect();
-          const parentRect = canvasParent.getBoundingClientRect();
           setHoverRect({
-            top: rect.top - parentRect.top + canvasParent.scrollTop,
-            left: rect.left - parentRect.left + canvasParent.scrollLeft,
+            top: rect.top + (iframeRect.top - viewportRect.top),
+            left: rect.left + (iframeRect.left - viewportRect.left),
             width: rect.width,
             height: rect.height,
             tagName: hoverEl.tagName.toLowerCase()
@@ -449,7 +531,7 @@ export default function App() {
         canvasObj.removeEventListener("scroll", updateOutlines);
       }
     };
-  }, [selectedId, hoverId, visualHtml, viewMode, responsiveMode]);
+  }, [selectedId, hoverId, visualHtml, viewMode, responsiveMode, outlineTrigger]);
 
   // Synchronize visual modifications back to code state
   const handleApplyPropertyChange = (updates: {
@@ -480,8 +562,14 @@ export default function App() {
         Object.entries(updates.attributes).forEach(([key, val]) => {
           if (val === "" || val === undefined) {
             el.removeAttribute(key);
+            if (key === "checked" && el.tagName === "INPUT") {
+              (el as HTMLInputElement).checked = false;
+            }
           } else {
             el.setAttribute(key, val);
+            if (key === "checked" && el.tagName === "INPUT") {
+              (el as HTMLInputElement).checked = true;
+            }
           }
         });
       }
@@ -842,6 +930,18 @@ export default function App() {
             />
           </label>
 
+          <button
+            onClick={() => {
+              setPastedHtml(cleanHTMLForExport(htmlCode));
+              setShowPasteModal(true);
+            }}
+            className="flex items-center gap-1.5 px-4 h-8 bg-[#212427] hover:bg-zinc-800 border border-zinc-700/60 hover:border-zinc-500 rounded text-xs font-medium cursor-pointer transition-all active:scale-95 duration-100"
+            title="Colar ou editar código HTML completo"
+          >
+            <Code className="w-3.5 h-3.5 text-pink-500" />
+            <span>Colar HTML</span>
+          </button>
+
           <button
             onClick={handleCopyCode}
             className="flex items-center gap-1.5 px-4 h-8 bg-[#212427] hover:bg-zinc-800 border border-zinc-700/60 rounded text-xs font-medium cursor-pointer transition-all"
@@ -1155,6 +1255,81 @@ export default function App() {
                     </div>
                   )}
 
+                  {/* Form / Input settings */}
+                  {["input", "textarea", "select", "button", "option"].includes(selectedRect?.tagName || "") && (
+                    <div className="space-y-3">
+                      <div>
+                        <label className="block text-[10px] text-zinc-400 font-bold mb-1">Nome do Campo (name)</label>
+                        <input
+                          type="text"
+                          value={inputName}
+                          onChange={(e) => {
+                            setInputName(e.target.value);
+                            handleApplyPropertyChange({ attributes: { name: e.target.value } }, "Alterar Nome Campo");
+                          }}
+                          className="w-full bg-[#181a1c] border border-zinc-800 focus:border-pink-500 rounded px-2 py-1 text-xs text-white outline-none"
+                        />
+                      </div>
+                      <div>
+                        <label className="block text-[10px] text-zinc-400 font-bold mb-1">Valor do Campo (value)</label>
+                        <input
+                          type="text"
+                          value={inputValue}
+                          onChange={(e) => {
+                            setInputValue(e.target.value);
+                            handleApplyPropertyChange({ attributes: { value: e.target.value } }, "Alterar Valor Campo");
+                          }}
+                          className="w-full bg-[#181a1c] border border-zinc-800 focus:border-pink-500 rounded px-2 py-1 text-xs text-white outline-none"
+                        />
+                      </div>
+                      {["input", "textarea"].includes(selectedRect?.tagName || "") && (
+                        <div>
+                          <label className="block text-[10px] text-zinc-400 font-bold mb-1">Inserir Placeholder</label>
+                          <input
+                            type="text"
+                            value={inputPlaceholder}
+                            onChange={(e) => {
+                              setInputPlaceholder(e.target.value);
+                              handleApplyPropertyChange({ attributes: { placeholder: e.target.value } }, "Alterar Placeholder");
+                            }}
+                            className="w-full bg-[#181a1c] border border-zinc-800 focus:border-pink-500 rounded px-2 py-1 text-xs text-white outline-none"
+                          />
+                        </div>
+                      )}
+                      {inputType === "checkbox" && (
+                        <div className="flex items-center gap-2 py-1">
+                          <input
+                            type="checkbox"
+                            checked={inputChecked}
+                            id="cb-checked-property"
+                            onChange={(e) => {
+                              setInputChecked(e.target.checked);
+                              handleApplyPropertyChange({
+                                attributes: {
+                                  checked: e.target.checked ? "checked" : ""
+                                }
+                              }, "Marcar/Desmarcar Checkbox");
+                            }}
+                            className="w-4 h-4 rounded text-pink-600 focus:ring-pink-500 bg-zinc-800"
+                          />
+                          <label htmlFor="cb-checked-property" className="text-[10px] text-zinc-400 font-bold cursor-pointer">Marcar por Padrão (Checked)</label>
+                        </div>
+                      )}
+                      <div>
+                        <label className="block text-[10px] text-zinc-400 font-bold mb-1">Pontos Personalizados (data-points)</label>
+                        <input
+                          type="text"
+                          value={inputDataPoints}
+                          onChange={(e) => {
+                            setInputDataPoints(e.target.value);
+                            handleApplyPropertyChange({ attributes: { "data-points": e.target.value } }, "Alterar data-points");
+                          }}
+                          className="w-full bg-[#181a1c] border border-zinc-800 focus:border-pink-500 rounded px-2 py-1 text-xs text-white outline-none"
+                        />
+                      </div>
+                    </div>
+                  )}
+
                   {/* Custom classes builder - allows direct styling over tailwind classes context */}
                   <div>
                     <label className="block text-[10px] text-zinc-400 font-bold mb-1">Classes CSS (Tailwind)</label>
@@ -1767,11 +1942,29 @@ export default function App() {
                   <span className="text-[9px] bg-[#0e0f10] border border-zinc-850 px-2 py-0.5 rounded text-pink-500 font-mono tracking-widest uppercase">Editável</span>
                 </div>
                 <textarea
-                  value={cleanHTMLForExport(htmlCode)}
-                  onChange={(e) => pushHistoryState(e.target.value, "Inserir código manual")}
+                  value={localCode}
+                  onChange={(e) => setLocalCode(e.target.value)}
                   className="w-full flex-1 bg-[#0e0f10] border border-zinc-800 focus:border-pink-500 rounded p-4 font-mono text-xs text-zinc-200 outline-none resize-none select-text scrollbar leading-relaxed selection:bg-pink-600/30 selection:text-white"
-                  placeholder="Incole ou digite o seu HTML aqui..."
+                  placeholder="Cole ou digite o seu HTML completo aqui..."
                 />
+                <div className="flex items-center justify-end gap-3 mt-3 select-none">
+                  {localCode !== cleanHTMLForExport(htmlCode) && (
+                    <button
+                      onClick={() => setLocalCode(cleanHTMLForExport(htmlCode))}
+                      className="px-4 py-1.5 bg-zinc-800 hover:bg-zinc-750 text-zinc-350 rounded text-xs font-semibold cursor-pointer transition-all"
+                    >
+                      Descartar
+                    </button>
+                  )}
+                  <button
+                    onClick={() => pushHistoryState(localCode, "Editar Código Manual")}
+                    disabled={localCode === cleanHTMLForExport(htmlCode)}
+                    className="px-5 py-1.5 bg-pink-600 hover:bg-pink-550 text-white rounded text-xs font-bold disabled:opacity-30 disabled:cursor-not-allowed cursor-pointer transition-all flex items-center gap-1.5"
+                  >
+                    <Check className="w-3.5 h-3.5" />
+                    Aplicar Código Fonte
+                  </button>
+                </div>
               </div>
             )}
 
@@ -1959,6 +2152,62 @@ export default function App() {
 
       </main>
 
+      {/* Dynamic Paste HTML Modal Dialog */}
+      {showPasteModal && (
+        <div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4 animate-fade-in backdrop-blur-sm select-none">
+          <div className="bg-[#181a1c] border border-zinc-800 rounded-lg max-w-2xl w-full flex flex-col shadow-2xl overflow-hidden animate-scale-up">
+            <div className="flex items-center justify-between px-5 py-4 border-b border-zinc-850">
+              <div className="flex items-center gap-2">
+                <Code className="w-4 h-4 text-pink-500" />
+                <h3 className="text-sm font-bold text-white uppercase tracking-wider font-sans">
+                  Colar ou Editar Código HTML
+                </h3>
+              </div>
+              <button
+                onClick={() => setShowPasteModal(false)}
+                className="text-zinc-500 hover:text-white transition-colors cursor-pointer text-sm font-bold p-1 hover:bg-zinc-800 rounded font-sans"
+              >
+                ✕
+              </button>
+            </div>
+            
+            <div className="p-5 space-y-4">
+              <span className="block text-[11px] text-zinc-400 font-sans leading-relaxed">
+                Insira o código HTML completo da página abaixo (incluindo estilos, CDN links e scripts). O editor irá carregar, interpretar e sandboxear o documento automaticamente.
+              </span>
+              
+              <textarea
+                value={pastedHtml}
+                onChange={(e) => setPastedHtml(e.target.value)}
+                rows={12}
+                placeholder="Cole seu código HTML aqui..."
+                className="w-full bg-[#0e0f10] border border-zinc-800 focus:border-pink-500 rounded p-4 font-mono text-xs text-zinc-200 outline-none select-text resize-none scrollbar leading-relaxed"
+              />
+            </div>
+            
+            <div className="flex items-center justify-end gap-3 px-5 py-4 bg-[#0e0f10] border-t border-zinc-850">
+              <button
+                onClick={() => setShowPasteModal(false)}
+                className="px-4 py-2 bg-zinc-800 hover:bg-zinc-750 text-zinc-350 rounded text-xs font-semibold cursor-pointer transition-all uppercase tracking-wider h-9"
+              >
+                Cancelar
+              </button>
+              <button
+                onClick={() => {
+                  parseAndLoadHTML(pastedHtml);
+                  setShowPasteModal(false);
+                }}
+                disabled={!pastedHtml.trim()}
+                className="flex items-center gap-2 px-5 py-2 bg-pink-600 hover:bg-pink-550 text-white rounded text-xs font-bold disabled:opacity-30 disabled:cursor-not-allowed cursor-pointer transition-all uppercase tracking-wider h-9"
+              >
+                <Check className="w-4 h-4" />
+                Carregar HTML
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
     </div>
   );
 }