feat(view): add support of yfm-files to useFilesGallery() hook

Author: d3m1d0v

demo/stories/view/gallery/markup.ts

@@ -6,5 +6,13 @@ export const galleryMarkup = `
 
 ![Dojocat](https://octodex.github.com/images/dojocat.jpg "The Dojocat")
 
+## Video
+
 [Video](https://static.videezy.com/system/resources/previews/000/013/444/original/Water_43_-_37s_-_4k_res.mp4)
+
+## Files
+
+{% file src="https://octodex.github.com/images/forktocat.jpg" name="Forktocat" type="image/jpeg" %} 
+
+{% file src="https://static.videezy.com/system/resources/previews/000/012/253/original/Water_17_-_9s_-_4k_res.mp4" name="Rings of water" type="video/mp4" %} 
 `.trim();

src/view/hooks/useFilesGallery/constants.ts

@@ -5,3 +5,9 @@ export const supportedVideoExtensions = ['mp4', 'webm', 'ogg'];
 export const supportedExtensions = [...supportedImageExtensions, ...supportedVideoExtensions];
 
 export const extensionRegex = /\w+?$/;
+
+export const YfmFileClassname = 'yfm-file';
+export const YfmFileAttrs = {
+    Download: 'download',
+    Type: 'type',
+} as const;

src/view/hooks/useFilesGallery/helpers.ts

@@ -0,0 +1,34 @@
+import {YfmFileAttrs, YfmFileClassname} from './constants';
+
+type LinkObject = {
+    name?: string | null;
+    mimetype?: string | null;
+    type: 'image' | 'link' | 'file';
+    link: string;
+};
+
+export function buildLinkObject(elem: Element): LinkObject | null {
+    let obj: LinkObject | null = null;
+
+    if (elem.tagName === 'IMG') {
+        obj = {
+            type: 'image',
+            name: elem.getAttribute('alt'),
+            link: elem.getAttribute('src') ?? '',
+        };
+    } else if (elem.tagName === 'A') {
+        obj = {
+            type: 'link',
+            name: elem.getAttribute('title'),
+            link: elem.getAttribute('href') ?? '',
+        };
+
+        if (elem.classList.contains(YfmFileClassname)) {
+            obj.type = 'file';
+            obj.name = elem.getAttribute(YfmFileAttrs.Download);
+            obj.mimetype = elem.getAttribute(YfmFileAttrs.Type);
+        }
+    }
+
+    return obj;
+}

src/view/hooks/useFilesGallery/useFilesGallery.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import {useCallback} from 'react';
 
 import {
     type GalleryItemAction,
@@ -13,6 +13,7 @@ import {useToaster} from '@gravity-ui/uikit';
 import {i18n} from 'src/i18n/gallery';
 
 import {extensionRegex, supportedExtensions, supportedVideoExtensions} from './constants';
+import {buildLinkObject} from './helpers';
 import type {FilesGalleryItemType, GalleryItemPropsWithUrl, UseFilesGalleryOptions} from './types';
 
 export function useFilesGallery(
@@ -28,40 +29,32 @@ export function useFilesGallery(
     const toaster = useToaster();
 
     return {
-        openFilesGallery: React.useCallback(
+        openFilesGallery: useCallback(
             (event: React.MouseEvent<HTMLDivElement>) => {
                 if (!(event.target instanceof HTMLElement)) {
                     return false;
                 }
 
-                let fileLink = '';
+                if (event.target.tagName === 'IMG' && event.target.closest('a')) return false;
 
-                if (event.target.tagName === 'IMG' && !event.target.closest('a')) {
-                    fileLink = event.target.getAttribute('src') ?? '';
-                } else if (event.target.tagName === 'A') {
-                    fileLink = event.target.getAttribute('href') ?? '';
-                }
+                const targetFile = buildLinkObject(event.target);
 
-                if (!fileLink) {
-                    return false;
-                }
+                if (!targetFile || !targetFile.link) return false;
 
                 const filesFromContent = [
                     ...(event.currentTarget?.querySelectorAll('img,a') ?? []),
                 ].reduce<GalleryItemPropsWithUrl[]>((result, element) => {
-                    const isImage = element.tagName === 'IMG';
-                    const link = isImage
-                        ? element.getAttribute('src')
-                        : element.getAttribute('href');
+                    const linkObj = buildLinkObject(element);
 
-                    if (link && !customFiles?.some((item) => item.url === link)) {
-                        const extension = link.match(extensionRegex)?.[0] || '';
+                    if (linkObj?.link && !customFiles?.some((item) => item.url === linkObj.link)) {
+                        const extension =
+                            linkObj.mimetype?.match(extensionRegex)?.[0] ||
+                            linkObj.link.match(extensionRegex)?.[0] ||
+                            '';
 
-                        if (isImage || supportedExtensions.includes(extension)) {
-                            const name =
-                                (isImage
-                                    ? element.getAttribute('alt')
-                                    : element.getAttribute('title')) || '';
+                        if (linkObj.type === 'image' || supportedExtensions.includes(extension)) {
+                            const link = linkObj.link;
+                            const name = linkObj.name || '';
 
                             const filesGalleryItemType: FilesGalleryItemType =
                                 supportedVideoExtensions.includes(extension) ? 'video' : 'image';
@@ -127,7 +120,7 @@ export function useFilesGallery(
 
                 const files = [...(customFiles ?? []), ...filesFromContent];
 
-                const initialItemIndex = files.findIndex((item) => item.url === fileLink);
+                const initialItemIndex = files.findIndex((item) => item.url === targetFile.link);
 
                 if (initialItemIndex !== -1) {
                     event.preventDefault();