@dmitryvim/form-builder 0.1.33 → 0.1.34

package/dist/form-builder.js

@@ -1,4 +1,56 @@
 // Form Builder Library - Core API
+
+// Object URL management for memory leak prevention
+const objectUrlIndex = new Map();
+
+function createObjectURL(file, resourceIdParam) {
+  // Revoke previous URL for this resource to prevent memory leaks
+  revokeObjectURL(resourceIdParam);
+
+  const url = URL.createObjectURL(file);
+  objectUrlIndex.set(resourceIdParam, url);
+  return url;
+}
+
+function revokeObjectURL(resourceIdParam) {
+  const url = objectUrlIndex.get(resourceIdParam);
+  if (url) {
+    URL.revokeObjectURL(url);
+    objectUrlIndex.delete(resourceIdParam);
+  }
+}
+
+function revokeAllObjectURLs() {
+  for (const [, url] of objectUrlIndex.entries()) {
+    URL.revokeObjectURL(url);
+  }
+  objectUrlIndex.clear();
+}
+
+// Helper function to create safe preview elements
+function createPreviewElement(icon, fileName) {
+  const wrapper = document.createElement("div");
+  wrapper.className =
+    "aspect-video flex items-center justify-center text-gray-400";
+
+  const textCenter = document.createElement("div");
+  textCenter.className = "text-center";
+
+  const iconEl = document.createElement("div");
+  iconEl.className = "text-4xl mb-2";
+  iconEl.textContent = icon;
+
+  const nameEl = document.createElement("div");
+  nameEl.className = "text-sm";
+  nameEl.textContent = fileName || "";
+
+  textCenter.appendChild(iconEl);
+  textCenter.appendChild(nameEl);
+  wrapper.appendChild(textCenter);
+
+  return wrapper;
+}
+
 // State management
 const state = {
   schema: null,
@@ -142,6 +194,8 @@ function renderForm(schema, prefill) {
     return;
   }
 
+  // Clean up any existing object URLs before clearing form
+  revokeAllObjectURLs();
   clear(state.formRoot);
 
   const formEl = document.createElement("div");
@@ -184,8 +238,17 @@ function renderElement(element, ctx) {
     const infoBtn = document.createElement("button");
     infoBtn.type = "button";
     infoBtn.className = "ml-2 text-gray-400 hover:text-gray-600";
-    infoBtn.innerHTML =
-      '<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>';
+    // Create SVG icon safely
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("class", "w-4 h-4");
+    svg.setAttribute("fill", "currentColor");
+    svg.setAttribute("viewBox", "0 0 24 24");
+
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttribute("d", "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z");
+
+    svg.appendChild(path);
+    infoBtn.appendChild(svg);
 
     // Create tooltip
     const tooltipId = `tooltip-${element.key}-${Math.random().toString(36).substr(2, 9)}`;
@@ -416,8 +479,8 @@ async function renderFilePreview(container, resourceId, options = {}) {
       reader.readAsDataURL(meta.file);
       container.appendChild(img);
     } else if (meta.type && meta.type.startsWith("video/")) {
-      // Video file - use object URL for preview
-      const videoUrl = URL.createObjectURL(meta.file);
+      // Video file - use managed object URL for preview
+      const videoUrl = createObjectURL(meta.file, resourceId);
 
       // Remove all conflicting handlers to prevent interference with video controls
       container.onclick = null;
@@ -427,39 +490,55 @@ async function renderFilePreview(container, resourceId, options = {}) {
       container.parentNode.replaceChild(newContainer, container);
       container = newContainer;
 
-      container.innerHTML = `
-        <div class="relative group h-full">
-          <video class="w-full h-full object-contain" controls preload="auto" muted>
-            <source src="${videoUrl}" type="${meta.type}">
-            Your browser does not support the video tag.
-          </video>
-          <div class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity z-10 flex gap-1">
-            <button class="bg-red-600 bg-opacity-75 hover:bg-opacity-90 text-white p-1 rounded text-xs delete-file-btn">
-              ${t("removeElement")}
-            </button>
-            <button class="bg-gray-800 bg-opacity-75 hover:bg-opacity-90 text-white p-1 rounded text-xs change-file-btn">
-              Change
-            </button>
-          </div>
-        </div>
-      `;
+      // Create video container safely
+      clear(container);
+
+      const wrapper = document.createElement("div");
+      wrapper.className = "relative group h-full";
+
+      const video = document.createElement("video");
+      video.className = "w-full h-full object-contain";
+      video.controls = true;
+      video.preload = "auto";
+      video.muted = true;
+
+      const source = document.createElement("source");
+      source.src = videoUrl;
+      source.type = meta.type;
+
+      const fallback = document.createTextNode("Your browser does not support the video tag.");
+      video.appendChild(source);
+      video.appendChild(fallback);
+
+      const buttonsContainer = document.createElement("div");
+      buttonsContainer.className = "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity z-10 flex gap-1";
+
+      const deleteBtn = document.createElement("button");
+      deleteBtn.className = "bg-red-600 bg-opacity-75 hover:bg-opacity-90 text-white p-1 rounded text-xs delete-file-btn";
+      deleteBtn.textContent = t("removeElement");
+
+      const changeBtn = document.createElement("button");
+      changeBtn.className = "bg-gray-800 bg-opacity-75 hover:bg-opacity-90 text-white p-1 rounded text-xs change-file-btn";
+      changeBtn.textContent = "Change";
+
+      buttonsContainer.appendChild(deleteBtn);
+      buttonsContainer.appendChild(changeBtn);
+      wrapper.appendChild(video);
+      wrapper.appendChild(buttonsContainer);
+      container.appendChild(wrapper);
 
       // Add click handlers to the custom buttons
-      const changeBtn = container.querySelector(".change-file-btn");
-      if (changeBtn) {
-        changeBtn.onclick = (e) => {
-          e.stopPropagation();
-          if (deps?.picker) {
-            deps.picker.click();
-          }
-        };
-      }
+      changeBtn.onclick = (e) => {
+        e.stopPropagation();
+        if (deps?.picker) {
+          deps.picker.click();
+        }
+      };
 
-      const deleteBtn = container.querySelector(".delete-file-btn");
-      if (deleteBtn) {
-        deleteBtn.onclick = (e) => {
+      deleteBtn.onclick = (e) => {
           e.stopPropagation();
-          // Clear the file
+          // Clear the file and revoke object URL
+          revokeObjectURL(resourceId);
           state.resourceIndex.delete(resourceId);
           // Update hidden input
           const hiddenInput = container.parentElement.querySelector(
@@ -475,27 +554,55 @@ async function renderFilePreview(container, resourceId, options = {}) {
           if (deps?.dragHandler) {
             setupDragAndDrop(container, deps.dragHandler);
           }
-          container.innerHTML = `
-            <div class="flex flex-col items-center justify-center h-full text-gray-400">
-              <svg class="w-6 h-6 mb-2" fill="currentColor" viewBox="0 0 24 24">
-                <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
-              </svg>
-              <div class="text-sm text-center">${t("clickDragText")}</div>
-            </div>
-          `;
+          // Create placeholder content safely
+          clear(container);
+
+          const wrapper = document.createElement("div");
+          wrapper.className = "flex flex-col items-center justify-center h-full text-gray-400";
+
+          const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+          svg.setAttribute("class", "w-6 h-6 mb-2");
+          svg.setAttribute("fill", "currentColor");
+          svg.setAttribute("viewBox", "0 0 24 24");
+
+          const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+          path.setAttribute("d", "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z");
+
+          svg.appendChild(path);
+
+          const textDiv = document.createElement("div");
+          textDiv.className = "text-sm text-center";
+          textDiv.textContent = t("clickDragText");
+
+          wrapper.appendChild(svg);
+          wrapper.appendChild(textDiv);
+          container.appendChild(wrapper);
         };
-      }
     } else {
-      // Non-image, non-video file
-      container.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400"><div class="text-2xl mb-2">📁</div><div class="text-sm">${
-        fileName
-      }</div></div>`;
+      // Non-image, non-video file - create elements safely
+      const wrapper = document.createElement("div");
+      wrapper.className =
+        "flex flex-col items-center justify-center h-full text-gray-400";
+
+      const icon = document.createElement("div");
+      icon.className = "text-2xl mb-2";
+      icon.textContent = "📁";
+
+      const nameEl = document.createElement("div");
+      nameEl.className = "text-sm";
+      nameEl.textContent = fileName || "";
+
+      wrapper.appendChild(icon);
+      wrapper.appendChild(nameEl);
+      clear(container);
+      container.appendChild(wrapper);
     }
 
     // Add delete button for edit mode (except for videos which have custom buttons)
     if (!isReadonly && !(meta && meta.type && meta.type.startsWith("video/"))) {
       addDeleteButton(container, () => {
-        // Clear the file
+        // Clear the file and revoke object URL
+        revokeObjectURL(resourceId);
         state.resourceIndex.delete(resourceId);
         // Update hidden input
         const hiddenInput = container.parentElement.querySelector(
@@ -504,15 +611,29 @@ async function renderFilePreview(container, resourceId, options = {}) {
         if (hiddenInput) {
           hiddenInput.value = "";
         }
-        // Clear preview and show placeholder
-        container.innerHTML = `
-                    <div class="flex flex-col items-center justify-center h-full text-gray-400">
-                        <svg class="w-6 h-6 mb-2" fill="currentColor" viewBox="0 0 24 24">
-                            <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
-                        </svg>
-                        <div class="text-sm text-center">${t("clickDragText")}</div>
-                    </div>
-                `;
+        // Clear preview and show placeholder safely
+        clear(container);
+
+        const wrapper = document.createElement("div");
+        wrapper.className = "flex flex-col items-center justify-center h-full text-gray-400";
+
+        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svg.setAttribute("class", "w-6 h-6 mb-2");
+        svg.setAttribute("fill", "currentColor");
+        svg.setAttribute("viewBox", "0 0 24 24");
+
+        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        path.setAttribute("d", "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z");
+
+        svg.appendChild(path);
+
+        const textDiv = document.createElement("div");
+        textDiv.className = "text-sm text-center";
+        textDiv.textContent = t("clickDragText");
+
+        wrapper.appendChild(svg);
+        wrapper.appendChild(textDiv);
+        container.appendChild(wrapper);
       });
     }
   } else if (state.config.getThumbnail) {
@@ -525,21 +646,50 @@ async function renderFilePreview(container, resourceId, options = {}) {
         container.appendChild(img);
       } else {
         // Fallback to file icon
-        container.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400"><div class="text-2xl mb-2">🖼️</div><div class="text-sm">${
-          fileName
-        }</div></div>`;
+        // Create elements safely
+        const wrapper = document.createElement("div");
+        wrapper.className =
+          "flex flex-col items-center justify-center h-full text-gray-400";
+
+        const icon = document.createElement("div");
+        icon.className = "text-2xl mb-2";
+        icon.textContent = "🖼️";
+
+        const nameEl = document.createElement("div");
+        nameEl.className = "text-sm";
+        nameEl.textContent = fileName || "";
+
+        wrapper.appendChild(icon);
+        wrapper.appendChild(nameEl);
+        clear(container);
+        container.appendChild(wrapper);
       }
     } catch (error) {
       console.warn("Thumbnail loading failed:", error);
-      container.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400"><div class="text-2xl mb-2">📁</div><div class="text-sm">${
-        fileName
-      }</div></div>`;
+      // Create elements safely
+      const wrapper = document.createElement("div");
+      wrapper.className =
+        "flex flex-col items-center justify-center h-full text-gray-400";
+
+      const icon = document.createElement("div");
+      icon.className = "text-2xl mb-2";
+      icon.textContent = "📁";
+
+      const nameEl = document.createElement("div");
+      nameEl.className = "text-sm";
+      nameEl.textContent = fileName || "";
+
+      wrapper.appendChild(icon);
+      wrapper.appendChild(nameEl);
+      clear(container);
+      container.appendChild(wrapper);
     }
 
     // Add delete button for edit mode
     if (!isReadonly) {
       addDeleteButton(container, () => {
-        // Clear the file
+        // Clear the file and revoke object URL
+        revokeObjectURL(resourceId);
         state.resourceIndex.delete(resourceId);
         // Update hidden input
         const hiddenInput = container.parentElement.querySelector(
@@ -548,22 +698,35 @@ async function renderFilePreview(container, resourceId, options = {}) {
         if (hiddenInput) {
           hiddenInput.value = "";
         }
-        // Clear preview and show placeholder
-        container.innerHTML = `
-                    <div class="flex flex-col items-center justify-center h-full text-gray-400">
-                        <svg class="w-6 h-6 mb-2" fill="currentColor" viewBox="0 0 24 24">
-                            <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
-                        </svg>
-                        <div class="text-sm text-center">${t("clickDragText")}</div>
-                    </div>
-                `;
+        // Clear preview and show placeholder safely
+        clear(container);
+
+        const wrapper = document.createElement("div");
+        wrapper.className = "flex flex-col items-center justify-center h-full text-gray-400";
+
+        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svg.setAttribute("class", "w-6 h-6 mb-2");
+        svg.setAttribute("fill", "currentColor");
+        svg.setAttribute("viewBox", "0 0 24 24");
+
+        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        path.setAttribute("d", "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z");
+
+        svg.appendChild(path);
+
+        const textDiv = document.createElement("div");
+        textDiv.className = "text-sm text-center";
+        textDiv.textContent = t("clickDragText");
+
+        wrapper.appendChild(svg);
+        wrapper.appendChild(textDiv);
+        container.appendChild(wrapper);
       });
     }
   } else {
-    // No file and no getThumbnail config - fallback
-    container.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400"><div class="text-2xl mb-2">🖼️</div><div class="text-sm">${
-      fileName
-    }</div></div>`;
+    // No file and no getThumbnail config - fallback - create elements safely
+    clear(container);
+    container.appendChild(createPreviewElement("🖼️", fileName));
   }
 
   // Add click handler for download in readonly mode
@@ -616,11 +779,11 @@ function renderResourcePills(container, rids, onRemove) {
       slot.onclick = () => {
         // Look for file input - check parent containers that have space-y-2 class
         let filesWrapper = container.parentElement;
-        while (filesWrapper && !filesWrapper.classList.contains('space-y-2')) {
+        while (filesWrapper && !filesWrapper.classList.contains("space-y-2")) {
           filesWrapper = filesWrapper.parentElement;
         }
         // If no parent with space-y-2, container itself might be the wrapper
-        if (!filesWrapper && container.classList.contains('space-y-2')) {
+        if (!filesWrapper && container.classList.contains("space-y-2")) {
           filesWrapper = container;
         }
         const fileInput = filesWrapper?.querySelector('input[type="file"]');
@@ -641,11 +804,11 @@ function renderResourcePills(container, rids, onRemove) {
       e.stopPropagation();
       // Look for file input - check parent containers that have space-y-2 class
       let filesWrapper = container.parentElement;
-      while (filesWrapper && !filesWrapper.classList.contains('space-y-2')) {
+      while (filesWrapper && !filesWrapper.classList.contains("space-y-2")) {
         filesWrapper = filesWrapper.parentElement;
       }
       // If no parent with space-y-2, container itself might be the wrapper
-      if (!filesWrapper && container.classList.contains('space-y-2')) {
+      if (!filesWrapper && container.classList.contains("space-y-2")) {
         filesWrapper = container;
       }
       const fileInput = filesWrapper?.querySelector('input[type="file"]');
@@ -710,76 +873,179 @@ function renderResourcePills(container, rids, onRemove) {
             img.src = url;
             slot.appendChild(img);
           } else {
-            slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
-                            <svg class="w-12 h-12" fill="currentColor" viewBox="0 0 24 24">
-                                <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
-                            </svg>
-                        </div>`;
+            // Create fallback placeholder safely
+            const wrapper = document.createElement("div");
+            wrapper.className = "flex flex-col items-center justify-center h-full text-gray-400";
+
+            const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+            svg.setAttribute("class", "w-12 h-12");
+            svg.setAttribute("fill", "currentColor");
+            svg.setAttribute("viewBox", "0 0 24 24");
+
+            const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            path.setAttribute("d", "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z");
+
+            svg.appendChild(path);
+            wrapper.appendChild(svg);
+            slot.appendChild(wrapper);
           }
         } else {
-          slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
-                        <svg class="w-12 h-12" fill="currentColor" viewBox="0 0 24 24">
-                            <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
-                        </svg>
-                    </div>`;
+          // Create fallback placeholder safely
+          const wrapper = document.createElement("div");
+          wrapper.className = "flex flex-col items-center justify-center h-full text-gray-400";
+
+          const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+          svg.setAttribute("class", "w-12 h-12");
+          svg.setAttribute("fill", "currentColor");
+          svg.setAttribute("viewBox", "0 0 24 24");
+
+          const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+          path.setAttribute("d", "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z");
+
+          svg.appendChild(path);
+          wrapper.appendChild(svg);
+          slot.appendChild(wrapper);
         }
       } else if (meta && meta.type?.startsWith("video/")) {
         if (meta.file && meta.file instanceof File) {
-          // Video file - use object URL for preview in thumbnail format
-          const videoUrl = URL.createObjectURL(meta.file);
-          slot.innerHTML = `
-            <div class="relative group h-full w-full">
-              <video class="w-full h-full object-contain" preload="metadata" muted>
-                <source src="${videoUrl}" type="${meta.type}">
-              </video>
-              <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
-                <div class="bg-white bg-opacity-90 rounded-full p-1">
-                  <svg class="w-4 h-4 text-gray-800" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M8 5v14l11-7z"/>
-                  </svg>
-                </div>
-              </div>
-            </div>
-          `;
+          // Video file - use managed object URL for preview in thumbnail format
+          const videoUrl = createObjectURL(meta.file, rid);
+          // Create video thumbnail safely
+          const wrapper = document.createElement("div");
+          wrapper.className = "relative group h-full w-full";
+
+          const video = document.createElement("video");
+          video.className = "w-full h-full object-contain";
+          video.preload = "metadata";
+          video.muted = true;
+
+          const source = document.createElement("source");
+          source.src = videoUrl;
+          source.type = meta.type;
+
+          video.appendChild(source);
+
+          const overlay = document.createElement("div");
+          overlay.className = "absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center";
+
+          const playButton = document.createElement("div");
+          playButton.className = "bg-white bg-opacity-90 rounded-full p-1";
+
+          const playIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+          playIcon.setAttribute("class", "w-4 h-4 text-gray-800");
+          playIcon.setAttribute("fill", "currentColor");
+          playIcon.setAttribute("viewBox", "0 0 24 24");
+
+          const playPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+          playPath.setAttribute("d", "M8 5v14l11-7z");
+
+          playIcon.appendChild(playPath);
+          playButton.appendChild(playIcon);
+          overlay.appendChild(playButton);
+          wrapper.appendChild(video);
+          wrapper.appendChild(overlay);
+          slot.appendChild(wrapper);
         } else if (state.config.getThumbnail) {
           // Use getThumbnail for uploaded video files
           const videoUrl = state.config.getThumbnail(rid);
           if (videoUrl) {
-            slot.innerHTML = `
-              <div class="relative group h-full w-full">
-                <video class="w-full h-full object-contain" preload="metadata" muted>
-                  <source src="${videoUrl}" type="${meta.type}">
-                </video>
-                <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
-                  <div class="bg-white bg-opacity-90 rounded-full p-1">
-                    <svg class="w-4 h-4 text-gray-800" fill="currentColor" viewBox="0 0 24 24">
-                      <path d="M8 5v14l11-7z"/>
-                    </svg>
-                  </div>
-                </div>
-              </div>
-            `;
+            // Create video thumbnail safely
+            const wrapper = document.createElement("div");
+            wrapper.className = "relative group h-full w-full";
+
+            const video = document.createElement("video");
+            video.className = "w-full h-full object-contain";
+            video.preload = "metadata";
+            video.muted = true;
+
+            const source = document.createElement("source");
+            source.src = videoUrl;
+            source.type = meta.type;
+
+            video.appendChild(source);
+
+            const overlay = document.createElement("div");
+            overlay.className = "absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center";
+
+            const playButton = document.createElement("div");
+            playButton.className = "bg-white bg-opacity-90 rounded-full p-1";
+
+            const playIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+            playIcon.setAttribute("class", "w-4 h-4 text-gray-800");
+            playIcon.setAttribute("fill", "currentColor");
+            playIcon.setAttribute("viewBox", "0 0 24 24");
+
+            const playPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            playPath.setAttribute("d", "M8 5v14l11-7z");
+
+            playIcon.appendChild(playPath);
+            playButton.appendChild(playIcon);
+            overlay.appendChild(playButton);
+            wrapper.appendChild(video);
+            wrapper.appendChild(overlay);
+            slot.appendChild(wrapper);
           } else {
-            slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
-                            <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
-                                <path d="M8 5v14l11-7z"/>
-                            </svg>
-                            <div class="text-xs mt-1">${meta?.name || "Video"}</div>
-                        </div>`;
+            // Create video placeholder safely
+            const wrapper = document.createElement("div");
+            wrapper.className = "flex flex-col items-center justify-center h-full text-gray-400";
+
+            const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+            svg.setAttribute("class", "w-8 h-8");
+            svg.setAttribute("fill", "currentColor");
+            svg.setAttribute("viewBox", "0 0 24 24");
+
+            const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            path.setAttribute("d", "M8 5v14l11-7z");
+
+            svg.appendChild(path);
+
+            const nameDiv = document.createElement("div");
+            nameDiv.className = "text-xs mt-1";
+            nameDiv.textContent = meta?.name || "Video";
+
+            wrapper.appendChild(svg);
+            wrapper.appendChild(nameDiv);
+            slot.appendChild(wrapper);
           }
         } else {
-          slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
-                        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
-                            <path d="M8 5v14l11-7z"/>
-                        </svg>
-                        <div class="text-xs mt-1">${meta?.name || "Video"}</div>
-                    </div>`;
+          // Create video placeholder safely
+          const wrapper = document.createElement("div");
+          wrapper.className = "flex flex-col items-center justify-center h-full text-gray-400";
+
+          const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+          svg.setAttribute("class", "w-8 h-8");
+          svg.setAttribute("fill", "currentColor");
+          svg.setAttribute("viewBox", "0 0 24 24");
+
+          const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+          path.setAttribute("d", "M8 5v14l11-7z");
+
+          svg.appendChild(path);
+
+          const nameDiv = document.createElement("div");
+          nameDiv.className = "text-xs mt-1";
+          nameDiv.textContent = meta?.name || "Video";
+
+          wrapper.appendChild(svg);
+          wrapper.appendChild(nameDiv);
+          slot.appendChild(wrapper);
         }
       } else {
-        slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
-                    <div class="text-2xl mb-1">📁</div>
-                    <div class="text-xs">${meta?.name || "File"}</div>
-                </div>`;
+        // Create file placeholder safely
+        const wrapper = document.createElement("div");
+        wrapper.className = "flex flex-col items-center justify-center h-full text-gray-400";
+
+        const iconDiv = document.createElement("div");
+        iconDiv.className = "text-2xl mb-1";
+        iconDiv.textContent = "📁";
+
+        const nameDiv = document.createElement("div");
+        nameDiv.className = "text-xs";
+        nameDiv.textContent = meta?.name || "File";
+
+        wrapper.appendChild(iconDiv);
+        wrapper.appendChild(nameDiv);
+        slot.appendChild(wrapper);
       }
 
       // Add remove button overlay (similar to file field)
@@ -803,16 +1069,25 @@ function renderResourcePills(container, rids, onRemove) {
       // Empty slot placeholder
       slot.className =
         "aspect-square bg-gray-100 border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center cursor-pointer hover:border-gray-400 transition-colors";
-      slot.innerHTML =
-        '<svg class="w-12 h-12 text-gray-400" fill="currentColor" viewBox="0 0 24 24"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>';
+      // Create empty slot SVG safely
+      const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+      svg.setAttribute("class", "w-12 h-12 text-gray-400");
+      svg.setAttribute("fill", "currentColor");
+      svg.setAttribute("viewBox", "0 0 24 24");
+
+      const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+      path.setAttribute("d", "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z");
+
+      svg.appendChild(path);
+      slot.appendChild(svg);
       slot.onclick = () => {
         // Look for file input - check parent containers that have space-y-2 class
         let filesWrapper = container.parentElement;
-        while (filesWrapper && !filesWrapper.classList.contains('space-y-2')) {
+        while (filesWrapper && !filesWrapper.classList.contains("space-y-2")) {
           filesWrapper = filesWrapper.parentElement;
         }
         // If no parent with space-y-2, container itself might be the wrapper
-        if (!filesWrapper && container.classList.contains('space-y-2')) {
+        if (!filesWrapper && container.classList.contains("space-y-2")) {
           filesWrapper = container;
         }
         const fileInput = filesWrapper?.querySelector('input[type="file"]');
@@ -866,14 +1141,37 @@ async function handleFileSelect(file, container, fieldName, deps = null) {
   });
 
   // Create hidden input to store the resource ID
-  let hiddenInput = container.parentElement.querySelector(
+  // Handle case where container might be detached due to video replacement
+  let parentElement = container.parentElement;
+  if (!parentElement) {
+    // Container is detached - find the current container by field name
+    const form = document.querySelector('[data-form-builder]');
+    if (form) {
+      const existingInput = form.querySelector(`input[name="${fieldName}"]`);
+      if (existingInput) {
+        parentElement = existingInput.parentElement;
+        // Update container reference to the current one in DOM
+        const currentContainer = parentElement.querySelector('.file-preview-container');
+        if (currentContainer) {
+          container = currentContainer;
+        }
+      }
+    }
+  }
+
+  if (!parentElement) {
+    console.warn('Could not find parent element for file field:', fieldName);
+    return;
+  }
+
+  let hiddenInput = parentElement.querySelector(
     'input[type="hidden"]',
   );
   if (!hiddenInput) {
     hiddenInput = document.createElement("input");
     hiddenInput.type = "hidden";
     hiddenInput.name = fieldName;
-    container.parentElement.appendChild(hiddenInput);
+    parentElement.appendChild(hiddenInput);
   }
   hiddenInput.value = rid;
 
@@ -1044,11 +1342,17 @@ function validateForm(skipValidation = false) {
             values.push(val);
 
             if (!skipValidation && val) {
-              if (element.minLength !== null && val.length < element.minLength) {
+              if (
+                element.minLength !== null &&
+                val.length < element.minLength
+              ) {
                 errors.push(`${key}[${index}]: minLength=${element.minLength}`);
                 markValidity(input, `minLength=${element.minLength}`);
               }
-              if (element.maxLength !== null && val.length > element.maxLength) {
+              if (
+                element.maxLength !== null &&
+                val.length > element.maxLength
+              ) {
                 errors.push(`${key}[${index}]: maxLength=${element.maxLength}`);
                 markValidity(input, `maxLength=${element.maxLength}`);
               }
@@ -1073,7 +1377,7 @@ function validateForm(skipValidation = false) {
           if (!skipValidation) {
             const minCount = element.minCount ?? 1;
             const maxCount = element.maxCount ?? 10;
-            const nonEmptyValues = values.filter(v => v.trim() !== "");
+            const nonEmptyValues = values.filter((v) => v.trim() !== "");
 
             if (element.required && nonEmptyValues.length === 0) {
               errors.push(`${key}: required`);
@@ -1156,7 +1460,9 @@ function validateForm(skipValidation = false) {
               markValidity(input, `> max=${element.max}`);
             }
 
-            const d = Number.isInteger(element.decimals ?? 0) ? element.decimals : 0;
+            const d = Number.isInteger(element.decimals ?? 0)
+              ? element.decimals
+              : 0;
             markValidity(input, null);
             values.push(Number(v.toFixed(d)));
           });
@@ -1165,7 +1471,7 @@ function validateForm(skipValidation = false) {
           if (!skipValidation) {
             const minCount = element.minCount ?? 1;
             const maxCount = element.maxCount ?? 10;
-            const nonNullValues = values.filter(v => v !== null);
+            const nonNullValues = values.filter((v) => v !== null);
 
             if (element.required && nonNullValues.length === 0) {
               errors.push(`${key}: required`);
@@ -1229,7 +1535,7 @@ function validateForm(skipValidation = false) {
           if (!skipValidation) {
             const minCount = element.minCount ?? 1;
             const maxCount = element.maxCount ?? 10;
-            const nonEmptyValues = values.filter(v => v !== "");
+            const nonEmptyValues = values.filter((v) => v !== "");
 
             if (element.required && nonEmptyValues.length === 0) {
               errors.push(`${key}: required`);
@@ -1261,9 +1567,11 @@ function validateForm(skipValidation = false) {
           // Handle file with multiple property like files type
           // Find the files list by locating the specific file input for this field
           const fullKey = pathJoin(ctx.path, key);
-          const pickerInput = scopeRoot.querySelector(`input[type="file"][name="${fullKey}"]`);
-          const filesWrapper = pickerInput?.closest('.space-y-2');
-          const container = filesWrapper?.querySelector('.files-list') || null;
+          const pickerInput = scopeRoot.querySelector(
+            `input[type="file"][name="${fullKey}"]`,
+          );
+          const filesWrapper = pickerInput?.closest(".space-y-2");
+          const container = filesWrapper?.querySelector(".files-list") || null;
 
           const resourceIds = [];
           if (container) {
@@ -1351,12 +1659,18 @@ function validateForm(skipValidation = false) {
           const items = [];
           // Use full path for nested group element search
           const fullKey = pathJoin(ctx.path, key);
-          const itemElements = scopeRoot.querySelectorAll(`[name^="${fullKey}["]`);
+          const itemElements = scopeRoot.querySelectorAll(
+            `[name^="${fullKey}["]`,
+          );
 
           // Extract actual indices from DOM element names instead of assuming sequential numbering
           const actualIndices = new Set();
           itemElements.forEach((el) => {
-            const match = el.name.match(new RegExp(`^${fullKey.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\[(\\d+)\\]`));
+            const match = el.name.match(
+              new RegExp(
+                `^${fullKey.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}\\[(\\d+)\\]`,
+              ),
+            );
             if (match) {
               actualIndices.add(parseInt(match[1]));
             }
@@ -1374,7 +1688,8 @@ function validateForm(skipValidation = false) {
             element.elements.forEach((child) => {
               if (child.hidden) {
                 // For hidden child elements, use their default value
-                itemData[child.key] = child.default !== undefined ? child.default : "";
+                itemData[child.key] =
+                  child.default !== undefined ? child.default : "";
               } else {
                 const childKey = `${fullKey}[${actualIndex}].${child.key}`;
                 itemData[child.key] = validateElement(
@@ -1395,7 +1710,8 @@ function validateForm(skipValidation = false) {
           element.elements.forEach((child) => {
             if (child.hidden) {
               // For hidden child elements, use their default value
-              groupData[child.key] = child.default !== undefined ? child.default : "";
+              groupData[child.key] =
+                child.default !== undefined ? child.default : "";
             } else {
               const childKey = `${key}.${child.key}`;
               groupData[child.key] = validateElement(
@@ -1427,7 +1743,8 @@ function validateForm(skipValidation = false) {
             element.elements.forEach((child) => {
               if (child.hidden) {
                 // For hidden child elements, use their default value
-                itemData[child.key] = child.default !== undefined ? child.default : "";
+                itemData[child.key] =
+                  child.default !== undefined ? child.default : "";
               } else {
                 const childKey = `${key}[${i}].${child.key}`;
                 itemData[child.key] = validateElement(
@@ -1465,7 +1782,8 @@ function validateForm(skipValidation = false) {
           element.elements.forEach((child) => {
             if (child.hidden) {
               // For hidden child elements, use their default value
-              containerData[child.key] = child.default !== undefined ? child.default : "";
+              containerData[child.key] =
+                child.default !== undefined ? child.default : "";
             } else {
               const childKey = `${key}.${child.key}`;
               containerData[child.key] = validateElement(
@@ -1550,7 +1868,8 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
 
     const textInput = document.createElement("input");
     textInput.type = "text";
-    textInput.className = "flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
+    textInput.className =
+      "flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
     textInput.placeholder = element.placeholder || "Enter text";
     textInput.value = value;
     textInput.readOnly = state.config.readonly;
@@ -1571,15 +1890,16 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
 
   function updateRemoveButtons() {
     if (state.config.readonly) return;
-    const items = container.querySelectorAll('.multiple-text-item');
+    const items = container.querySelectorAll(".multiple-text-item");
     const currentCount = items.length;
     items.forEach((item) => {
-      let removeBtn = item.querySelector('.remove-item-btn');
+      let removeBtn = item.querySelector(".remove-item-btn");
       if (!removeBtn) {
-        removeBtn = document.createElement('button');
-        removeBtn.type = 'button';
-        removeBtn.className = 'remove-item-btn px-2 py-1 text-red-600 hover:bg-red-50 rounded';
-        removeBtn.innerHTML = '✕';
+        removeBtn = document.createElement("button");
+        removeBtn.type = "button";
+        removeBtn.className =
+          "remove-item-btn px-2 py-1 text-red-600 hover:bg-red-50 rounded";
+        removeBtn.textContent = "✕";
         removeBtn.onclick = () => {
           const currentIndex = Array.from(container.children).indexOf(item);
           if (container.children.length > minCount) {
@@ -1594,8 +1914,8 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
       }
       const disabled = currentCount <= minCount;
       removeBtn.disabled = disabled;
-      removeBtn.style.opacity = disabled ? '0.5' : '1';
-      removeBtn.style.pointerEvents = disabled ? 'none' : 'auto';
+      removeBtn.style.opacity = disabled ? "0.5" : "1";
+      removeBtn.style.pointerEvents = disabled ? "none" : "auto";
     });
   }
 
@@ -1606,8 +1926,9 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
     if (!state.config.readonly && values.length < maxCount) {
       const addBtn = document.createElement("button");
       addBtn.type = "button";
-      addBtn.className = "add-text-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
-      addBtn.textContent = `+ Add ${element.label || 'Text'}`;
+      addBtn.className =
+        "add-text-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
+      addBtn.textContent = `+ Add ${element.label || "Text"}`;
       addBtn.onclick = () => {
         values.push(element.default || "");
         addTextItem(element.default || "");
@@ -1619,7 +1940,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
   }
 
   // Render initial items
-  values.forEach(value => addTextItem(value));
+  values.forEach((value) => addTextItem(value));
   updateAddButton();
   updateRemoveButtons();
 
@@ -1679,7 +2000,8 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
     itemWrapper.className = "multiple-textarea-item";
 
     const textareaInput = document.createElement("textarea");
-    textareaInput.className = "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none";
+    textareaInput.className =
+      "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none";
     textareaInput.placeholder = element.placeholder || "Enter text";
     textareaInput.rows = element.rows || 4;
     textareaInput.value = value;
@@ -1701,15 +2023,16 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
 
   function updateRemoveButtons() {
     if (state.config.readonly) return;
-    const items = container.querySelectorAll('.multiple-textarea-item');
+    const items = container.querySelectorAll(".multiple-textarea-item");
     const currentCount = items.length;
     items.forEach((item) => {
-      let removeBtn = item.querySelector('.remove-item-btn');
+      let removeBtn = item.querySelector(".remove-item-btn");
       if (!removeBtn) {
-        removeBtn = document.createElement('button');
-        removeBtn.type = 'button';
-        removeBtn.className = 'remove-item-btn mt-1 px-2 py-1 text-red-600 hover:bg-red-50 rounded text-sm';
-        removeBtn.innerHTML = '✕ Remove';
+        removeBtn = document.createElement("button");
+        removeBtn.type = "button";
+        removeBtn.className =
+          "remove-item-btn mt-1 px-2 py-1 text-red-600 hover:bg-red-50 rounded text-sm";
+        removeBtn.textContent = "✕ Remove";
         removeBtn.onclick = () => {
           const currentIndex = Array.from(container.children).indexOf(item);
           if (container.children.length > minCount) {
@@ -1724,8 +2047,8 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
       }
       const disabled = currentCount <= minCount;
       removeBtn.disabled = disabled;
-      removeBtn.style.opacity = disabled ? '0.5' : '1';
-      removeBtn.style.pointerEvents = disabled ? 'none' : 'auto';
+      removeBtn.style.opacity = disabled ? "0.5" : "1";
+      removeBtn.style.pointerEvents = disabled ? "none" : "auto";
     });
   }
 
@@ -1736,8 +2059,9 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
     if (!state.config.readonly && values.length < maxCount) {
       const addBtn = document.createElement("button");
       addBtn.type = "button";
-      addBtn.className = "add-textarea-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
-      addBtn.textContent = `+ Add ${element.label || 'Textarea'}`;
+      addBtn.className =
+        "add-textarea-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
+      addBtn.textContent = `+ Add ${element.label || "Textarea"}`;
       addBtn.onclick = () => {
         values.push(element.default || "");
         addTextareaItem(element.default || "");
@@ -1749,7 +2073,7 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
   }
 
   // Render initial items
-  values.forEach(value => addTextareaItem(value));
+  values.forEach((value) => addTextareaItem(value));
   updateAddButton();
   updateRemoveButtons();
 
@@ -1813,7 +2137,8 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
 
     const numberInput = document.createElement("input");
     numberInput.type = "number";
-    numberInput.className = "flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
+    numberInput.className =
+      "flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
     numberInput.placeholder = element.placeholder || "0";
     if (element.min !== undefined) numberInput.min = element.min;
     if (element.max !== undefined) numberInput.max = element.max;
@@ -1837,15 +2162,16 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
 
   function updateRemoveButtons() {
     if (state.config.readonly) return;
-    const items = container.querySelectorAll('.multiple-number-item');
+    const items = container.querySelectorAll(".multiple-number-item");
     const currentCount = items.length;
     items.forEach((item) => {
-      let removeBtn = item.querySelector('.remove-item-btn');
+      let removeBtn = item.querySelector(".remove-item-btn");
       if (!removeBtn) {
-        removeBtn = document.createElement('button');
-        removeBtn.type = 'button';
-        removeBtn.className = 'remove-item-btn px-2 py-1 text-red-600 hover:bg-red-50 rounded';
-        removeBtn.innerHTML = '✕';
+        removeBtn = document.createElement("button");
+        removeBtn.type = "button";
+        removeBtn.className =
+          "remove-item-btn px-2 py-1 text-red-600 hover:bg-red-50 rounded";
+        removeBtn.textContent = "✕";
         removeBtn.onclick = () => {
           const currentIndex = Array.from(container.children).indexOf(item);
           if (container.children.length > minCount) {
@@ -1860,8 +2186,8 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
       }
       const disabled = currentCount <= minCount;
       removeBtn.disabled = disabled;
-      removeBtn.style.opacity = disabled ? '0.5' : '1';
-      removeBtn.style.pointerEvents = disabled ? 'none' : 'auto';
+      removeBtn.style.opacity = disabled ? "0.5" : "1";
+      removeBtn.style.pointerEvents = disabled ? "none" : "auto";
     });
   }
 
@@ -1872,8 +2198,9 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
     if (!state.config.readonly && values.length < maxCount) {
       const addBtn = document.createElement("button");
       addBtn.type = "button";
-      addBtn.className = "add-number-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
-      addBtn.textContent = `+ Add ${element.label || 'Number'}`;
+      addBtn.className =
+        "add-number-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
+      addBtn.textContent = `+ Add ${element.label || "Number"}`;
       addBtn.onclick = () => {
         values.push(element.default || "");
         addNumberItem(element.default || "");
@@ -1885,7 +2212,7 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
   }
 
   // Render initial items
-  values.forEach(value => addNumberItem(value));
+  values.forEach((value) => addNumberItem(value));
   updateAddButton();
   updateRemoveButtons();
 
@@ -1931,7 +2258,7 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
   const maxCount = element.maxCount ?? 10;
 
   while (values.length < minCount) {
-    values.push(element.default || (element.options?.[0]?.value || ""));
+    values.push(element.default || element.options?.[0]?.value || "");
   }
 
   const container = document.createElement("div");
@@ -1953,7 +2280,8 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
     itemWrapper.className = "multiple-select-item flex items-center gap-2";
 
     const selectInput = document.createElement("select");
-    selectInput.className = "flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
+    selectInput.className =
+      "flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
     selectInput.disabled = state.config.readonly;
 
     // Add options
@@ -1983,15 +2311,16 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
 
   function updateRemoveButtons() {
     if (state.config.readonly) return;
-    const items = container.querySelectorAll('.multiple-select-item');
+    const items = container.querySelectorAll(".multiple-select-item");
     const currentCount = items.length;
     items.forEach((item) => {
-      let removeBtn = item.querySelector('.remove-item-btn');
+      let removeBtn = item.querySelector(".remove-item-btn");
       if (!removeBtn) {
-        removeBtn = document.createElement('button');
-        removeBtn.type = 'button';
-        removeBtn.className = 'remove-item-btn px-2 py-1 text-red-600 hover:bg-red-50 rounded';
-        removeBtn.innerHTML = '✕';
+        removeBtn = document.createElement("button");
+        removeBtn.type = "button";
+        removeBtn.className =
+          "remove-item-btn px-2 py-1 text-red-600 hover:bg-red-50 rounded";
+        removeBtn.textContent = "✕";
         removeBtn.onclick = () => {
           const currentIndex = Array.from(container.children).indexOf(item);
           if (container.children.length > minCount) {
@@ -2006,8 +2335,8 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
       }
       const disabled = currentCount <= minCount;
       removeBtn.disabled = disabled;
-      removeBtn.style.opacity = disabled ? '0.5' : '1';
-      removeBtn.style.pointerEvents = disabled ? 'none' : 'auto';
+      removeBtn.style.opacity = disabled ? "0.5" : "1";
+      removeBtn.style.pointerEvents = disabled ? "none" : "auto";
     });
   }
 
@@ -2018,10 +2347,12 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
     if (!state.config.readonly && values.length < maxCount) {
       const addBtn = document.createElement("button");
       addBtn.type = "button";
-      addBtn.className = "add-select-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
-      addBtn.textContent = `+ Add ${element.label || 'Selection'}`;
+      addBtn.className =
+        "add-select-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
+      addBtn.textContent = `+ Add ${element.label || "Selection"}`;
       addBtn.onclick = () => {
-        const defaultValue = element.default || (element.options?.[0]?.value || "");
+        const defaultValue =
+          element.default || element.options?.[0]?.value || "";
         values.push(defaultValue);
         addSelectItem(defaultValue);
         updateAddButton();
@@ -2032,7 +2363,7 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
   }
 
   // Render initial items
-  values.forEach(value => addSelectItem(value));
+  values.forEach((value) => addSelectItem(value));
   updateAddButton();
   updateRemoveButtons();
 
@@ -2054,7 +2385,11 @@ function renderFileElement(element, ctx, wrapper, pathKey) {
       const emptyState = document.createElement("div");
       emptyState.className =
         "aspect-video bg-gray-100 rounded-lg flex items-center justify-center text-gray-500";
-      emptyState.innerHTML = `<div class="text-center">${t("noFileSelected")}</div>`;
+      // Create empty state content safely
+      const textDiv = document.createElement("div");
+      textDiv.className = "text-center";
+      textDiv.textContent = t("noFileSelected");
+      emptyState.appendChild(textDiv);
       wrapper.appendChild(emptyState);
     }
   } else {
@@ -2114,8 +2449,14 @@ function renderFileElement(element, ctx, wrapper, pathKey) {
     // Add upload text
     const uploadText = document.createElement("p");
     uploadText.className = "text-xs text-gray-600 mt-2 text-center";
-    uploadText.innerHTML = `<span class="underline cursor-pointer">${t("uploadText")}</span> ${t("dragDropTextSingle")}`;
-    uploadText.querySelector("span").onclick = () => picker.click();
+    // Create upload text content safely
+    const uploadSpan = document.createElement("span");
+    uploadSpan.className = "underline cursor-pointer";
+    uploadSpan.textContent = t("uploadText");
+    uploadSpan.onclick = () => picker.click();
+
+    uploadText.appendChild(uploadSpan);
+    uploadText.appendChild(document.createTextNode(" " + t("dragDropTextSingle")));
     fileWrapper.appendChild(uploadText);
 
     // Add hint
@@ -2174,14 +2515,29 @@ function handleInitialFileData(
 }
 
 function setEmptyFileContainer(fileContainer) {
-  fileContainer.innerHTML = `
-    <div class="flex flex-col items-center justify-center h-full text-gray-400">
-        <svg class="w-6 h-6 mb-2" fill="currentColor" viewBox="0 0 24 24">
-            <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
-        </svg>
-        <div class="text-sm text-center">${t("clickDragText")}</div>
-    </div>
-  `;
+  // Create empty file container content safely
+  clear(fileContainer);
+
+  const wrapper = document.createElement("div");
+  wrapper.className = "flex flex-col items-center justify-center h-full text-gray-400";
+
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("class", "w-6 h-6 mb-2");
+  svg.setAttribute("fill", "currentColor");
+  svg.setAttribute("viewBox", "0 0 24 24");
+
+  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  path.setAttribute("d", "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z");
+
+  svg.appendChild(path);
+
+  const textDiv = document.createElement("div");
+  textDiv.className = "text-sm text-center";
+  textDiv.textContent = t("clickDragText");
+
+  wrapper.appendChild(svg);
+  wrapper.appendChild(textDiv);
+  fileContainer.appendChild(wrapper);
 }
 
 function renderFilesElement(element, ctx, wrapper, pathKey) {
@@ -2198,7 +2554,16 @@ function renderFilesElement(element, ctx, wrapper, pathKey) {
         resultsWrapper.appendChild(filePreview);
       });
     } else {
-      resultsWrapper.innerHTML = `<div class="aspect-video bg-gray-100 rounded-lg flex items-center justify-center text-gray-500"><div class="text-center">${t("noFilesSelected")}</div></div>`;
+      // Create empty state safely
+      const emptyDiv = document.createElement("div");
+      emptyDiv.className = "aspect-video bg-gray-100 rounded-lg flex items-center justify-center text-gray-500";
+
+      const textDiv = document.createElement("div");
+      textDiv.className = "text-center";
+      textDiv.textContent = t("noFilesSelected");
+
+      emptyDiv.appendChild(textDiv);
+      resultsWrapper.appendChild(emptyDiv);
     }
 
     wrapper.appendChild(resultsWrapper);
@@ -2279,7 +2644,16 @@ function renderMultipleFileElement(element, ctx, wrapper, pathKey) {
         resultsWrapper.appendChild(filePreview);
       });
     } else {
-      resultsWrapper.innerHTML = `<div class="aspect-video bg-gray-100 rounded-lg flex items-center justify-center text-gray-500"><div class="text-center">${t("noFilesSelected")}</div></div>`;
+      // Create empty state safely
+      const emptyDiv = document.createElement("div");
+      emptyDiv.className = "aspect-video bg-gray-100 rounded-lg flex items-center justify-center text-gray-500";
+
+      const textDiv = document.createElement("div");
+      textDiv.className = "text-center";
+      textDiv.textContent = t("noFilesSelected");
+
+      emptyDiv.appendChild(textDiv);
+      resultsWrapper.appendChild(emptyDiv);
     }
 
     wrapper.appendChild(resultsWrapper);
@@ -2321,17 +2695,18 @@ function renderMultipleFileElement(element, ctx, wrapper, pathKey) {
       // Show count and min/max info
       const countInfo = document.createElement("div");
       countInfo.className = "text-xs text-gray-500 mt-2";
-      const countText = `${initialFiles.length} file${initialFiles.length !== 1 ? 's' : ''}`;
-      const minMaxText = minFiles > 0 || maxFiles < Infinity
-        ? ` (${minFiles}-${maxFiles} allowed)`
-        : '';
+      const countText = `${initialFiles.length} file${initialFiles.length !== 1 ? "s" : ""}`;
+      const minMaxText =
+        minFiles > 0 || maxFiles < Infinity
+          ? ` (${minFiles}-${maxFiles} allowed)`
+          : "";
       countInfo.textContent = countText + minMaxText;
 
       // Remove previous count info
-      const existingCount = filesWrapper.querySelector('.file-count-info');
+      const existingCount = filesWrapper.querySelector(".file-count-info");
       if (existingCount) existingCount.remove();
 
-      countInfo.className += ' file-count-info';
+      countInfo.className += " file-count-info";
       filesWrapper.appendChild(countInfo);
     };
 
@@ -2515,7 +2890,18 @@ function renderRepeatableGroup(element, ctx, itemsWrap, left, groupWrap) {
     addBtn.type = "button";
     addBtn.className =
       "w-full py-2 px-4 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 flex items-center justify-center mt-3";
-    addBtn.innerHTML = `<svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>${t("addElement")}`;
+    // Create add button content safely
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("class", "w-4 h-4 mr-2");
+    svg.setAttribute("fill", "currentColor");
+    svg.setAttribute("viewBox", "0 0 24 24");
+
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttribute("d", "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z");
+
+    svg.appendChild(path);
+    addBtn.appendChild(svg);
+    addBtn.appendChild(document.createTextNode(t("addElement")));
     groupWrap.appendChild(addBtn);
   }
 
@@ -2523,7 +2909,16 @@ function renderRepeatableGroup(element, ctx, itemsWrap, left, groupWrap) {
     if (state.config.readonly) return;
     const n = countItems();
     if (addBtn) addBtn.disabled = n >= max;
-    left.innerHTML = `<span>${element.label || element.key}</span> <span class="text-slate-500 dark:text-slate-400 text-xs">[${n} / ${max === Infinity ? "∞" : max}, min=${min}]</span>`;
+    // Create elements safely
+    clear(left);
+    const labelSpan = document.createElement("span");
+    labelSpan.textContent = element.label || element.key;
+    const countSpan = document.createElement("span");
+    countSpan.className = "text-slate-500 dark:text-slate-400 text-xs";
+    countSpan.textContent = `[${n} / ${max === Infinity ? "∞" : max}, min=${min}]`;
+    left.appendChild(labelSpan);
+    left.appendChild(document.createTextNode(" "));
+    left.appendChild(countSpan);
   };
 
   if (pre && pre.length) {
@@ -2538,7 +2933,10 @@ function renderRepeatableGroup(element, ctx, itemsWrap, left, groupWrap) {
     addBtn.addEventListener("click", () => addItem(null));
   } else {
     // In readonly mode, just show the label without count controls
-    left.innerHTML = `<span>${element.label || element.key}</span>`;
+    clear(left);
+    const labelSpan = document.createElement("span");
+    labelSpan.textContent = element.label || element.key;
+    left.appendChild(labelSpan);
   }
 }
 
@@ -2555,7 +2953,10 @@ function renderSingleGroup(element, ctx, itemsWrap, left, groupWrap) {
     }
   });
   groupWrap.appendChild(itemsWrap);
-  left.innerHTML = `<span>${element.label || element.key}</span>`;
+  clear(left);
+  const labelSpan = document.createElement("span");
+  labelSpan.textContent = element.label || element.key;
+  left.appendChild(labelSpan);
 }
 
 function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
@@ -2588,7 +2989,10 @@ function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
     }
   });
   containerWrap.appendChild(itemsWrap);
-  left.innerHTML = `<span>${element.label || element.key}</span>`;
+  clear(left);
+  const labelSpan = document.createElement("span");
+  labelSpan.textContent = element.label || element.key;
+  left.appendChild(labelSpan);
 
   wrapper.appendChild(containerWrap);
 }
@@ -2639,7 +3043,8 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
           prefill: {},
         };
         const item = document.createElement("div");
-        item.className = "containerItem border border-gray-300 rounded-lg p-4 bg-white";
+        item.className =
+          "containerItem border border-gray-300 rounded-lg p-4 bg-white";
         item.setAttribute("data-container-item", `${element.key}[${idx}]`);
 
         element.elements.forEach((child) => {
@@ -2678,7 +3083,16 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       addBtn.disabled = currentCount >= max;
       addBtn.style.opacity = currentCount >= max ? "0.5" : "1";
     }
-    left.innerHTML = `<span>${element.label || element.key}</span> <span class="text-sm text-gray-500">(${currentCount}/${max === Infinity ? '∞' : max})</span>`;
+    // Create elements safely
+    clear(left);
+    const labelSpan = document.createElement("span");
+    labelSpan.textContent = element.label || element.key;
+    const countSpan = document.createElement("span");
+    countSpan.className = "text-sm text-gray-500";
+    countSpan.textContent = `(${currentCount}/${max === Infinity ? "∞" : max})`;
+    left.appendChild(labelSpan);
+    left.appendChild(document.createTextNode(" "));
+    left.appendChild(countSpan);
   };
 
   if (!state.config.readonly) {
@@ -2693,7 +3107,8 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         prefill: prefillObj || {},
       };
       const item = document.createElement("div");
-      item.className = "containerItem border border-gray-300 rounded-lg p-4 bg-white";
+      item.className =
+        "containerItem border border-gray-300 rounded-lg p-4 bg-white";
       item.setAttribute("data-container-item", `${element.key}[${idx}]`);
 
       element.elements.forEach((child) => {
@@ -2731,7 +3146,8 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         prefill: {},
       };
       const item = document.createElement("div");
-      item.className = "containerItem border border-gray-300 rounded-lg p-4 bg-white";
+      item.className =
+        "containerItem border border-gray-300 rounded-lg p-4 bg-white";
       item.setAttribute("data-container-item", `${element.key}[${idx}]`);
 
       element.elements.forEach((child) => {
@@ -2797,17 +3213,29 @@ function renderFilePreviewReadonly(resourceId, fileName) {
       try {
         const thumbnailUrl = state.config.getThumbnail(resourceId);
         if (thumbnailUrl) {
-          previewContainer.innerHTML = `<img src="${thumbnailUrl}" alt="${actualFileName}" class="w-full h-auto">`;
+          const img = document.createElement("img");
+          img.src = thumbnailUrl;
+          img.alt = actualFileName || "";
+          img.className = "w-full h-auto";
+          clear(previewContainer);
+          previewContainer.appendChild(img);
         } else {
           // Fallback to icon if getThumbnail returns null/undefined
-          previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">🖼️</div><div class="text-sm">${actualFileName}</div></div></div>`;
+          clear(previewContainer);
+          previewContainer.appendChild(
+            createPreviewElement("🖼️", actualFileName),
+          );
         }
       } catch (error) {
         console.warn("getThumbnail failed for", resourceId, error);
-        previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">🖼️</div><div class="text-sm">${actualFileName}</div></div></div>`;
+        clear(previewContainer);
+        previewContainer.appendChild(
+          createPreviewElement("🖼️", actualFileName),
+        );
       }
     } else {
-      previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">🖼️</div><div class="text-sm">${actualFileName}</div></div></div>`;
+      clear(previewContainer);
+      previewContainer.appendChild(createPreviewElement("🖼️", actualFileName));
     }
   } else if (isVideo) {
     // Video preview - try getThumbnail for video URL
@@ -2815,34 +3243,76 @@ function renderFilePreviewReadonly(resourceId, fileName) {
       try {
         const videoUrl = state.config.getThumbnail(resourceId);
         if (videoUrl) {
-          previewContainer.innerHTML = `
-                        <div class="relative group">
-                            <video class="w-full h-auto" controls preload="auto" muted>
-                                <source src="${videoUrl}" type="${meta?.type || "video/mp4"}">
-                                Ваш браузер не поддерживает видео.
-                            </video>
-                            <div class="absolute inset-0 bg-black bg-opacity-20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center pointer-events-none">
-                                <div class="bg-white bg-opacity-90 rounded-full p-3">
-                                    <svg class="w-8 h-8 text-gray-800" fill="currentColor" viewBox="0 0 24 24">
-                                        <path d="M8 5v14l11-7z"/>
-                                    </svg>
-                                </div>
-                            </div>
-                        </div>
-                    `;
+          // Create video elements safely
+          const wrapper = document.createElement("div");
+          wrapper.className = "relative group";
+
+          const video = document.createElement("video");
+          video.className = "w-full h-auto";
+          video.controls = true;
+          video.preload = "auto";
+          video.muted = true;
+
+          const source = document.createElement("source");
+          source.src = videoUrl;
+          source.type = meta?.type || "video/mp4";
+
+          video.appendChild(source);
+          video.appendChild(
+            document.createTextNode("Ваш браузер не поддерживает видео."),
+          );
+
+          const overlay = document.createElement("div");
+          overlay.className =
+            "absolute inset-0 bg-black bg-opacity-20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center pointer-events-none";
+
+          const overlayContent = document.createElement("div");
+          overlayContent.className = "bg-white bg-opacity-90 rounded-full p-3";
+
+          const svg = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "svg",
+          );
+          svg.setAttribute("class", "w-8 h-8 text-gray-800");
+          svg.setAttribute("fill", "currentColor");
+          svg.setAttribute("viewBox", "0 0 24 24");
+
+          const path = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path",
+          );
+          path.setAttribute("d", "M8 5v14l11-7z");
+
+          svg.appendChild(path);
+          overlayContent.appendChild(svg);
+          overlay.appendChild(overlayContent);
+
+          wrapper.appendChild(video);
+          wrapper.appendChild(overlay);
+
+          clear(previewContainer);
+          previewContainer.appendChild(wrapper);
         } else {
-          previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">🎥</div><div class="text-sm">${actualFileName}</div></div></div>`;
+          clear(previewContainer);
+          previewContainer.appendChild(
+            createPreviewElement("🎥", actualFileName),
+          );
         }
       } catch (error) {
         console.warn("getThumbnail failed for video", resourceId, error);
-        previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">🎥</div><div class="text-sm">${actualFileName}</div></div></div>`;
+        clear(previewContainer);
+        previewContainer.appendChild(
+          createPreviewElement("🎥", actualFileName),
+        );
       }
     } else {
-      previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">🎥</div><div class="text-sm">${actualFileName}</div></div></div>`;
+      clear(previewContainer);
+      previewContainer.appendChild(createPreviewElement("🎥", actualFileName));
     }
   } else {
     // Other file types
-    previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">📁</div><div class="text-sm">${actualFileName}</div></div></div>`;
+    clear(previewContainer);
+    previewContainer.appendChild(createPreviewElement("📁", actualFileName));
   }
 
   // File name
@@ -3008,6 +3478,8 @@ function saveDraft() {
 
 function clearForm() {
   if (state.formRoot) {
+    // Clean up any existing object URLs before clearing form
+    revokeAllObjectURLs();
     clear(state.formRoot);
   }
 }