Merge pull request #428 from embedpdf/fix/add-props-to-modal-ui

bobsingor · web-flow · commit 6357faa0ced8 · 2026-02-03T00:03:44.000+02:00
Pass modal props &amp; fix link modal context
diff --git a/.changeset/plugin-ui-modal-props.md b/.changeset/plugin-ui-modal-props.md
@@ -0,0 +1,10 @@
+---
+'@embedpdf/plugin-ui': minor
+---
+
+Added modal props feature to pass context when opening modals:
+
+- Extended `openModal(modalId, props?)` to accept optional props parameter
+- Added `props` field to `ModalSlotState` type
+- Added `modalProps` to `ModalRendererProps` for all frameworks (Preact, React, Svelte, Vue)
+- Updated schema renderers to pass `modalProps` through to modal components
diff --git a/.changeset/snippet-link-modal-context.md b/.changeset/snippet-link-modal-context.md
@@ -0,0 +1,10 @@
+---
+'@embedpdf/snippet': minor
+---
+
+Fixed link modal context handling:
+
+- Added `source` prop to LinkModal to distinguish between annotation and text selection context
+- Updated `annotation:add-link` command to pass `{ source: 'selection' }` when opening modal
+- Updated `annotation:toggle-link` command to pass `{ source: 'annotation' }` when opening modal
+- Prevents incorrect behavior where annotation selection would override text selection when creating links
diff --git a/examples/svelte-tailwind/src/lib/components/LinkModal.svelte b/examples/svelte-tailwind/src/lib/components/LinkModal.svelte
@@ -17,15 +17,18 @@
   import { Dialog, DialogContent, DialogFooter, Button } from './ui';
 
   type LinkTab = 'url' | 'page';
+  type LinkSource = 'annotation' | 'selection';
 
   interface Props {
     documentId: string;
     isOpen?: boolean;
     onClose?: () => void;
     onExited?: () => void;
+    /** Source context that triggered the modal */
+    source?: LinkSource;
   }
 
-  let { documentId, isOpen = false, onClose, onExited }: Props = $props();
+  let { documentId, isOpen = false, onClose, onExited, source }: Props = $props();
 
   const scrollCapability = useScrollCapability();
   const annotationCapability = useAnnotationCapability();
@@ -85,9 +88,10 @@
       };
     }
 
-    // Create links based on context
-    if (selectedAnnotation) {
-      // IRT-linked links from selected annotation
+    // Helper to create link on annotation
+    const createLinkOnAnnotation = () => {
+      if (!selectedAnnotation) return false;
+
       const rects =
         'segmentRects' in selectedAnnotation.object
           ? selectedAnnotation.object.segmentRects
@@ -107,7 +111,13 @@
           strokeWidth: 2,
         });
       }
-    } else if (textSelection.length > 0) {
+      return true;
+    };
+
+    // Helper to create link from text selection
+    const createLinkFromSelection = () => {
+      if (textSelection.length === 0) return false;
+
       const selectionText = selectionScope?.getSelectedText();
 
       // Create transparent highlight parent with IRT-linked links for each selection
@@ -153,6 +163,20 @@
         }, ignore);
       }
       selectionScope?.clear();
+      return true;
+    };
+
+    // Create links based on the source context passed when opening the modal
+    // This ensures the correct context is used even when both annotation and text are selected
+    if (source === 'annotation') {
+      createLinkOnAnnotation();
+    } else if (source === 'selection') {
+      createLinkFromSelection();
+    } else {
+      // Fallback for backwards compatibility: annotation first, then selection
+      if (!createLinkOnAnnotation()) {
+        createLinkFromSelection();
+      }
     }
 
     onClose?.();
diff --git a/examples/svelte-tailwind/src/lib/config/commands.ts b/examples/svelte-tailwind/src/lib/config/commands.ts
@@ -1343,8 +1343,8 @@ export const commands: Record<string, Command<State>> = {
       const ui = registry.getPlugin<UIPlugin>('ui')?.provides();
       if (!ui) return;
 
-      // Open the link modal - it will detect text selection context
-      ui.forDocument(documentId).openModal('link-modal');
+      // Open the link modal with selection context
+      ui.forDocument(documentId).openModal('link-modal', { source: 'selection' });
     },
     disabled: ({ state, documentId }) => {
       return lacksPermission(state, documentId, PdfPermissionFlag.ModifyAnnotations);
@@ -1388,7 +1388,7 @@ export const commands: Record<string, Command<State>> = {
       if (scope.hasAttachedLinks(selected.object.id)) {
         scope.deleteAttachedLinks(selected.object.id);
       } else {
-        ui.forDocument(documentId).openModal('link-modal');
+        ui.forDocument(documentId).openModal('link-modal', { source: 'annotation' });
       }
     },
     visible: ({ registry, documentId }) => {
diff --git a/examples/svelte-tailwind/src/lib/ui/SchemaModal.svelte b/examples/svelte-tailwind/src/lib/ui/SchemaModal.svelte
@@ -11,7 +11,7 @@
 
   interface Props extends ModalRendererProps {}
 
-  let { schema, documentId, isOpen, onClose, onExited }: Props = $props();
+  let { schema, documentId, isOpen, onClose, onExited, modalProps }: Props = $props();
 
   const { getCustomComponent } = useItemRenderer();
 
@@ -28,5 +28,5 @@
 </script>
 
 {#if ModalComponent}
-  <ModalComponent {documentId} {isOpen} {onClose} {onExited} />
+  <ModalComponent {documentId} {isOpen} {onClose} {onExited} {...modalProps} />
 {/if}
diff --git a/examples/vue-tailwind/src/components/LinkModal.vue b/examples/vue-tailwind/src/components/LinkModal.vue
@@ -104,12 +104,15 @@ import {
 import { Dialog, DialogContent, DialogFooter, Button } from './ui';
 
 type LinkTab = 'url' | 'page';
+type LinkSource = 'annotation' | 'selection';
 
 interface Props {
   documentId: string;
   isOpen?: boolean;
   onClose?: () => void;
   onExited?: () => void;
+  /** Source context that triggered the modal */
+  source?: LinkSource;
 }
 
 const props = defineProps<Props>();
@@ -186,9 +189,10 @@ const handleSubmit = () => {
     };
   }
 
-  // Create links based on context
-  if (selectedAnnotation.value) {
-    // IRT-linked links from selected annotation
+  // Helper to create link on annotation
+  const createLinkOnAnnotation = () => {
+    if (!selectedAnnotation.value) return false;
+
     const anno = selectedAnnotation.value;
     const rects = 'segmentRects' in anno.object ? anno.object.segmentRects : [anno.object.rect];
 
@@ -206,7 +210,13 @@ const handleSubmit = () => {
         strokeWidth: 2,
       });
     }
-  } else if (textSelection.value.length > 0) {
+    return true;
+  };
+
+  // Helper to create link from text selection
+  const createLinkFromSelection = () => {
+    if (textSelection.value.length === 0) return false;
+
     const selectionText = selectionScope.value?.getSelectedText();
 
     // Create transparent highlight parent with IRT-linked links for each selection
@@ -252,6 +262,20 @@ const handleSubmit = () => {
       }, ignore);
     }
     selectionScope.value?.clear();
+    return true;
+  };
+
+  // Create links based on the source context passed when opening the modal
+  // This ensures the correct context is used even when both annotation and text are selected
+  if (props.source === 'annotation') {
+    createLinkOnAnnotation();
+  } else if (props.source === 'selection') {
+    createLinkFromSelection();
+  } else {
+    // Fallback for backwards compatibility: annotation first, then selection
+    if (!createLinkOnAnnotation()) {
+      createLinkFromSelection();
+    }
   }
 
   props.onClose?.();
diff --git a/examples/vue-tailwind/src/config/commands.ts b/examples/vue-tailwind/src/config/commands.ts
@@ -1343,8 +1343,8 @@ export const commands: Record<string, Command<State>> = {
       const ui = registry.getPlugin<UIPlugin>('ui')?.provides();
       if (!ui) return;
 
-      // Open the link modal - it will detect text selection context
-      ui.forDocument(documentId).openModal('link-modal');
+      // Open the link modal with selection context
+      ui.forDocument(documentId).openModal('link-modal', { source: 'selection' });
     },
     disabled: ({ state, documentId }) => {
       return lacksPermission(state, documentId, PdfPermissionFlag.ModifyAnnotations);
@@ -1388,7 +1388,7 @@ export const commands: Record<string, Command<State>> = {
       if (scope.hasAttachedLinks(selected.object.id)) {
         scope.deleteAttachedLinks(selected.object.id);
       } else {
-        ui.forDocument(documentId).openModal('link-modal');
+        ui.forDocument(documentId).openModal('link-modal', { source: 'annotation' });
       }
     },
     visible: ({ registry, documentId }) => {
diff --git a/examples/vue-tailwind/src/ui/SchemaModal.vue b/examples/vue-tailwind/src/ui/SchemaModal.vue
@@ -20,6 +20,7 @@ interface Props {
   isOpen: boolean;
   onClose: () => void;
   onExited: () => void;
+  modalProps?: Record<string, unknown>;
 }
 
 const props = defineProps<Props>();
@@ -38,6 +39,7 @@ const modalContent = computed(() => {
     isOpen: props.isOpen,
     onClose: props.onClose,
     onExited: props.onExited,
+    ...props.modalProps,
   });
 });
 </script>
diff --git a/packages/plugin-ui/src/lib/actions.ts b/packages/plugin-ui/src/lib/actions.ts
@@ -73,7 +73,7 @@ export interface SetSidebarTabAction extends Action {
 // Modal action types (with animation lifecycle)
 export interface OpenModalAction extends Action {
   type: typeof OPEN_MODAL;
-  payload: { documentId: string; modalId: string };
+  payload: { documentId: string; modalId: string; props?: Record<string, unknown> };
 }
 
 export interface CloseModalAction extends Action {
@@ -196,9 +196,13 @@ export const setSidebarTab = (
 });
 
 // Modal action creators (with animation lifecycle)
-export const openModal = (documentId: string, modalId: string): OpenModalAction => ({
+export const openModal = (
+  documentId: string,
+  modalId: string,
+  props?: Record<string, unknown>,
+): OpenModalAction => ({
   type: OPEN_MODAL,
-  payload: { documentId, modalId },
+  payload: { documentId, modalId, props },
 });
 
 export const closeModal = (documentId: string): CloseModalAction => ({
diff --git a/packages/plugin-ui/src/lib/reducer.ts b/packages/plugin-ui/src/lib/reducer.ts
@@ -222,7 +222,7 @@ export const uiReducer = (state = initialState, action: UIAction): UIState => {
     // ─────────────────────────────────────────────────────────
 
     case OPEN_MODAL: {
-      const { documentId, modalId } = action.payload;
+      const { documentId, modalId, props } = action.payload;
       const docState = state.documents[documentId] || initialDocumentState;
 
       return {
@@ -234,6 +234,7 @@ export const uiReducer = (state = initialState, action: UIAction): UIState => {
             activeModal: {
               modalId,
               isOpen: true,
+              props,
             },
             openMenus: {}, // Close all menus when opening modal
           },
diff --git a/packages/plugin-ui/src/lib/types.ts b/packages/plugin-ui/src/lib/types.ts
@@ -48,6 +48,7 @@ export interface SidebarSlotState {
 export interface ModalSlotState {
   modalId: string;
   isOpen: boolean; // false = animating out, true = visible
+  props?: Record<string, unknown>; // Optional props passed when opening the modal
 }
 
 export interface UIDocumentState {
@@ -183,7 +184,7 @@ export interface UIScope {
   isSidebarOpen(placement: string, slot: string, sidebarId?: string): boolean;
 
   // Modals (with animation lifecycle support)
-  openModal(modalId: string): void;
+  openModal(modalId: string, props?: Record<string, unknown>): void;
   closeModal(): void;
   clearModal(): void; // Called after exit animation completes
   getActiveModal(): ModalSlotState | null;
@@ -235,7 +236,7 @@ export interface UICapability {
     documentId?: string,
     activeTab?: string,
   ): void;
-  openModal(modalId: string, documentId?: string): void;
+  openModal(modalId: string, props?: Record<string, unknown>, documentId?: string): void;
   openMenu(
     menuId: string,
     triggeredByCommandId: string,
diff --git a/packages/plugin-ui/src/lib/ui-plugin.ts b/packages/plugin-ui/src/lib/ui-plugin.ts
@@ -284,7 +284,8 @@ export class UIPlugin extends BasePlugin<UIPluginConfig, UICapability, UIState,
         this.setSidebarForDocument(placement, slot, sidebarId, documentId, activeTab),
       toggleSidebar: (placement, slot, sidebarId, documentId, activeTab) =>
         this.toggleSidebarForDocument(placement, slot, sidebarId, documentId, activeTab),
-      openModal: (modalId, documentId) => this.openModalForDocument(modalId, documentId),
+      openModal: (modalId, props, documentId) =>
+        this.openModalForDocument(modalId, props, documentId),
       openMenu: (menuId, triggeredByCommandId, triggeredByItemId, documentId) =>
         this.openMenuForDocument(menuId, triggeredByCommandId, triggeredByItemId, documentId),
       toggleMenu: (menuId, triggeredByCommandId, triggeredByItemId, documentId) =>
@@ -360,7 +361,7 @@ export class UIPlugin extends BasePlugin<UIPluginConfig, UICapability, UIState,
       getSidebarTab: (sidebarId) => this.getSidebarTabForDocument(sidebarId, documentId),
 
       // ───── Modals (with animation lifecycle) ─────
-      openModal: (modalId) => this.openModalForDocument(modalId, documentId),
+      openModal: (modalId, props) => this.openModalForDocument(modalId, props, documentId),
       closeModal: () => this.closeModalForDocument(documentId),
       clearModal: () => this.clearModalForDocument(documentId),
       getActiveModal: () => this.getActiveModalForDocument(documentId),
@@ -537,9 +538,13 @@ export class UIPlugin extends BasePlugin<UIPluginConfig, UICapability, UIState,
   // Core Operations - Modals (with animation lifecycle)
   // ─────────────────────────────────────────────────────────
 
-  private openModalForDocument(modalId: string, documentId?: string): void {
+  private openModalForDocument(
+    modalId: string,
+    props?: Record<string, unknown>,
+    documentId?: string,
+  ): void {
     const id = documentId ?? this.getActiveDocumentId();
-    this.dispatch(openModal(id, modalId));
+    this.dispatch(openModal(id, modalId, props));
     this.modalChanged$.emit(id, { modalId, isOpen: true });
   }
 
diff --git a/packages/plugin-ui/src/shared/hooks/use-schema-renderer.tsx b/packages/plugin-ui/src/shared/hooks/use-schema-renderer.tsx
@@ -168,6 +168,7 @@ export function useSchemaRenderer(documentId: string) {
               isOpen={activeModal.isOpen}
               onClose={handleClose}
               onExited={handleExited}
+              modalProps={activeModal.props}
             />
           )}
         </Fragment>
diff --git a/packages/plugin-ui/src/shared/types.ts b/packages/plugin-ui/src/shared/types.ts
@@ -60,6 +60,7 @@ export interface ModalRendererProps {
   onClose: () => void; // Triggers closeModal()
   onExited: () => void; // Triggers clearModal() after animation completes
   className?: string;
+  modalProps?: Record<string, unknown>; // Props passed when opening the modal
 }
 
 export type ModalRenderer = ComponentType<ModalRendererProps>;
diff --git a/packages/plugin-ui/src/svelte/hooks/use-schema-renderer.svelte.ts b/packages/plugin-ui/src/svelte/hooks/use-schema-renderer.svelte.ts
@@ -162,6 +162,7 @@ export function useSchemaRenderer(getDocumentId: () => string | null) {
         isOpen,
         onClose: handleClose,
         onExited: handleExited,
+        modalProps: uiState.state.activeModal.props,
       };
     },
 
diff --git a/packages/plugin-ui/src/svelte/types.ts b/packages/plugin-ui/src/svelte/types.ts
@@ -59,6 +59,7 @@ export interface ModalRendererProps {
   onClose: () => void; // Triggers closeModal()
   onExited: () => void; // Triggers clearModal() after animation completes
   className?: string;
+  modalProps?: Record<string, unknown>; // Props passed when opening the modal
 }
 
 export type ModalRenderer = Component<ModalRendererProps>;
diff --git a/packages/plugin-ui/src/vue/hooks/use-schema-renderer.ts b/packages/plugin-ui/src/vue/hooks/use-schema-renderer.ts
@@ -167,6 +167,7 @@ export function useSchemaRenderer(documentId: MaybeRefOrGetter<string>) {
         isOpen,
         onClose: handleClose,
         onExited: handleExited,
+        modalProps: uiState.value.activeModal.props,
       });
     },
 
diff --git a/packages/plugin-ui/src/vue/types.ts b/packages/plugin-ui/src/vue/types.ts
@@ -59,6 +59,7 @@ export interface ModalRendererProps {
   onClose: () => void; // Triggers closeModal()
   onExited: () => void; // Triggers clearModal() after animation completes
   className?: string;
+  modalProps?: Record<string, unknown>; // Props passed when opening the modal
 }
 
 export type ModalRenderer = Component<ModalRendererProps>;
diff --git a/viewers/snippet/src/components/link-modal.tsx b/viewers/snippet/src/components/link-modal.tsx
diff --git a/viewers/snippet/src/config/commands.ts b/viewers/snippet/src/config/commands.ts
diff --git a/viewers/snippet/src/ui/schema-modal.tsx b/viewers/snippet/src/ui/schema-modal.tsx
