Merge pull request #661 from embedpdf/fix/sandboxed-form-submission

Use explicit submit handlers for sandboxed iframes

Author: bobsingor

.changeset/snippet-sandboxed-form-submission.md

@@ -0,0 +1,5 @@
+---
+"@embedpdf/snippet": patch
+---
+
+Fix UI actions that relied on native HTML form submission failing inside sandboxed iframes without the `allow-forms` permission. The comment input, zoom percentage input, and link modal now trigger their handlers via explicit button clicks and Enter keydown instead of form submission, so they work in sandboxed contexts while behaving identically everywhere else.

viewers/snippet/src/components/comment-sidebar/annotation-input.tsx

@@ -16,32 +16,37 @@ export const AnnotationInput = ({
 }: AnnotationInputProps) => {
   const [text, setText] = useState('');
 
-  const handleSubmit = (e?: h.JSX.TargetedEvent<HTMLFormElement, Event>) => {
-    e?.preventDefault();
+  const handleSubmit = () => {
     if (text.trim()) {
       onSubmit(text);
       setText('');
     }
   };
 
   return (
-    <form
+    <div
       className="border-border-subtle mt-4 flex items-end space-x-2 border-t pt-4"
       onClick={(e) => e.stopPropagation()}
-      onSubmit={handleSubmit}
     >
       <input
         ref={inputRef}
         type="text"
         placeholder={placeholder}
         value={text}
         onInput={(e) => setText(e.currentTarget.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            handleSubmit();
+          }
+        }}
         className={`bg-bg-input text-fg-primary placeholder-fg-muted w-full rounded-lg border px-3 py-1 text-base transition-colors focus:border-transparent focus:outline-none focus:ring-2 ${
           isFocused ? 'border-accent focus:ring-accent' : 'border-border-default focus:ring-accent'
         }`}
       />
       <button
-        type="submit"
+        type="button"
+        onClick={() => handleSubmit()}
         disabled={!text.trim()}
         className="bg-accent text-fg-on-accent hover:bg-accent-hover disabled:bg-interactive-disabled rounded-lg p-2 transition-colors disabled:cursor-not-allowed"
       >
@@ -54,6 +59,6 @@ export const AnnotationInput = ({
           />
         </svg>
       </button>
-    </form>
+    </div>
   );
 };

viewers/snippet/src/components/custom-zoom-toolbar.tsx

@@ -37,11 +37,8 @@ export function CustomZoomToolbar({ documentId }: CustomZoomToolbarProps) {
     setInputValue(zoomPercentage.toString());
   }, [zoomPercentage]);
 
-  const handleZoomChange = (e: Event) => {
-    e.preventDefault();
-    const form = e.target as HTMLFormElement;
-    const formData = new FormData(form);
-    const value = parseFloat((formData.get('zoom') as string) || inputValue);
+  const commitZoom = () => {
+    const value = parseFloat(inputValue);
 
     if (!isNaN(value) && value > 0) {
       provides.requestZoom(value / 100);
@@ -66,10 +63,7 @@ export function CustomZoomToolbar({ documentId }: CustomZoomToolbarProps) {
     <div className="relative">
       <div className="bg-interactive-hover flex items-center rounded">
         {/* Editable Zoom Percentage Input */}
-        <form
-          onSubmit={handleZoomChange}
-          className="flex min-w-0 flex-nowrap items-center overflow-hidden whitespace-nowrap"
-        >
+        <div className="flex min-w-0 flex-nowrap items-center overflow-hidden whitespace-nowrap">
           <input
             name="zoom"
             type="text"
@@ -81,9 +75,15 @@ export function CustomZoomToolbar({ documentId }: CustomZoomToolbarProps) {
             value={inputValue}
             onInput={handleInputChange}
             onBlur={handleBlur}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                commitZoom();
+              }
+            }}
           />
           <span className="shrink-0 text-sm">%</span>
-        </form>
+        </div>
         <CommandButton
           commandId="zoom:toggle-menu"
           documentId={documentId}

viewers/snippet/src/components/link-modal.tsx

@@ -180,9 +180,11 @@ export function LinkModal({ documentId, isOpen, onClose, onExited, source }: Lin
 
   const canSubmit = activeTab === 'page' || url.trim().length > 0;
 
-  const handleFormSubmit = (e: Event) => {
-    e.preventDefault();
-    handleSubmit();
+  const handleInputKeyDown = (e: h.JSX.TargetedKeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' && canSubmit) {
+      e.preventDefault();
+      handleSubmit();
+    }
   };
 
   return (
@@ -193,7 +195,7 @@ export function LinkModal({ documentId, isOpen, onClose, onExited, source }: Lin
       onExited={onExited}
       className="md:w-[28rem]"
     >
-      <form onSubmit={handleFormSubmit} className="space-y-6">
+      <div className="space-y-6">
         {/* Tab buttons */}
         <div className="border-border-subtle flex border-b">
           <TabButton active={activeTab === 'url'} onClick={() => setActiveTab('url')}>
@@ -215,6 +217,7 @@ export function LinkModal({ documentId, isOpen, onClose, onExited, source }: Lin
                 type="url"
                 value={url}
                 onInput={(e) => setUrl((e.target as HTMLInputElement).value)}
+                onKeyDown={handleInputKeyDown}
                 placeholder="https://example.com"
                 className="border-border-default bg-bg-input text-fg-primary focus:border-accent focus:ring-accent w-full rounded-md border px-3 py-2 text-base focus:outline-none focus:ring-1"
                 autoFocus
@@ -234,6 +237,7 @@ export function LinkModal({ documentId, isOpen, onClose, onExited, source }: Lin
                   const val = parseInt((e.target as HTMLInputElement).value, 10);
                   if (!isNaN(val)) setPageNumber(Math.max(1, Math.min(totalPages, val)));
                 }}
+                onKeyDown={handleInputKeyDown}
                 className="border-border-default bg-bg-input text-fg-primary focus:border-accent focus:ring-accent w-full rounded-md border px-3 py-2 text-base focus:outline-none focus:ring-1"
                 autoFocus
               />
@@ -255,14 +259,15 @@ export function LinkModal({ documentId, isOpen, onClose, onExited, source }: Lin
             {translate('common.cancel') || 'Cancel'}
           </Button>
           <Button
-            type="submit"
+            type="button"
+            onClick={handleSubmit}
             disabled={!canSubmit}
             className="bg-accent text-fg-on-accent hover:!bg-accent-hover rounded-md border border-transparent px-4 py-2 text-sm disabled:cursor-not-allowed disabled:opacity-50"
           >
             {translate('link.link') || 'Link'}
           </Button>
         </div>
-      </form>
+      </div>
     </Dialog>
   );
 }