feat(view): support gallery preview for custom file types beyond images and videos

[d3m1d0v]

Description

Added resolveCustomItem option to useFilesGallery hook. Previously the hook only opened the gallery for images and videos with known extensions — all other file links (<a class="yfm-file"> with PDF, archives, etc.) were silently ignored. Now callers can handle these files themselves.

New option: resolveCustomItem

resolveCustomItem?: (
    url: string,
    type: 'file',
    element: Element,
    linkObj: {name?: string | null; mimetype?: string | null},
) => GalleryItemProps | undefined

• Return GalleryItemProps to include the element in the gallery
• Return undefined to skip it (preserves current behavior)
• The returned props go through the same download / copyUrl / overrideItemProps pipeline as built-in image/video items

⚠️ Type change

FilesGalleryItemType is widened from 'image' | 'video' to 'image' | 'video' | 'file'. This is a non-breaking runtime change, but callers doing an exhaustive switch on type in download, copyUrl, or overrideItemProps callbacks may now get a TypeScript warning about the unhandled 'file' case.

Usage example

const {openFilesGallery} = useFilesGallery(undefined, {
    resolveCustomItem(url, _type, _element, {name, mimetype}) {
        if (mimetype !== 'application/pdf') return undefined;
        return getGalleryItemImage({src: '/icons/pdf.svg', name: name ?? url});
    },
});

Summary by Sourcery

Add support in useFilesGallery for including non-image/video file links in the gallery via a new customization hook and extend item type handling to cover generic files.

New Features:

• Introduce a resolveCustomItem option to useFilesGallery to allow callers to provide gallery items for arbitrary file links such as PDFs or other documents.

Enhancements:

• Refactor gallery item construction into a reusable helper so custom and built-in items share the same download, copy link, and override pipelines.
• Extend FilesGalleryItemType to include a new 'file' variant for representing generic file items in the gallery.

Documentation:

• Document the new resolveCustomItem option, its behavior, and provide an example of handling custom file types like PDFs in the useFilesGallery README.

[sourcery-ai]

Reviewer's Guide

Extends the useFilesGallery hook to support gallery items for arbitrary file links via a new resolveCustomItem option, refactors item construction to be reusable for all item types, and widens FilesGalleryItemType to include a new 'file' type with corresponding documentation updates.

File-Level Changes

Change	Details	Files
Extend useFilesGallery hook to allow custom non-image/video file links to appear in the gallery via a new resolveCustomItem option and a shared item-building helper.	Add resolveCustomItem to UseFilesGalleryOptions and thread it into useFilesGallery alongside existing download, copyUrl, and overrideItemProps callbacks. Introduce a buildItem helper that composes gallery item actions (copy link and download) and applies overrideItemProps for any FilesGalleryItemType. Update click handling logic to: build standard image/video items via buildItem, and when resolveCustomItem is provided, call it for non-image/video links to get base GalleryItemProps and then wrap them with buildItem using type 'file'.	packages/editor/src/view/hooks/useFilesGallery/useFilesGallery.tsx packages/editor/src/view/hooks/useFilesGallery/types.ts
Widen the FilesGalleryItemType and document the new behavior and option in the useFilesGallery README, including an example for handling PDFs.	Change FilesGalleryItemType union type to include 'file', which is used for custom-resolved items. Document resolveCustomItem in the options table, including its signature, semantics, and the fact that returned props still go through the standard download/copyUrl/overrideItemProps pipeline with type 'file'. Add a README usage example showing how to use resolveCustomItem to render PDF links in the gallery with a custom icon and label.	packages/editor/src/view/hooks/useFilesGallery/types.ts packages/editor/src/view/hooks/useFilesGallery/README.md

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey - I've left some high level feedback:

• In buildItem, you overwrite the actions field on baseProps instead of merging with any actions a custom resolveCustomItem might provide; consider combining baseProps.actions with the generated download/copy actions so consumers can still inject their own item-level actions.
• resolveCustomItem is only ever called with type: 'file', but its signature exposes the full FilesGalleryItemType union; consider narrowing this parameter to 'file' (and reflecting that consistently in README examples) to avoid suggesting it will be invoked for images/videos.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- In `buildItem`, you overwrite the `actions` field on `baseProps` instead of merging with any actions a custom `resolveCustomItem` might provide; consider combining `baseProps.actions` with the generated download/copy actions so consumers can still inject their own item-level actions.
- `resolveCustomItem` is only ever called with `type: 'file'`, but its signature exposes the full `FilesGalleryItemType` union; consider narrowing this parameter to `'file'` (and reflecting that consistently in README examples) to avoid suggesting it will be invoked for images/videos.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[gravity-ui]

[gravity-ui]