From 9759aff227188e2edc010ac8a28ffa8fb0cdb57c Mon Sep 17 00:00:00 2001 From: Nathan Date: Tue, 23 Sep 2025 12:37:49 +0800 Subject: [PATCH] chore: use isFileURL --- .../gallery-preview/GalleryPreview.tsx | 13 ++++---- .../cell/file-media/FileMediaCell.tsx | 3 +- .../cell/file-media/PreviewImage.tsx | 11 +++---- .../cell/file-media/UnPreviewFile.tsx | 9 +++-- .../database-row/file-media/FileMediaCell.tsx | 3 +- .../database-row/file-media/FileMediaItem.tsx | 15 ++++----- .../blocks/gallery/GalleryBlock.tsx | 20 +++++------ .../components/blocks/image/ImageToolbar.tsx | 3 +- src/components/editor/utils/file-url.ts | 16 +++------ src/utils/file-storage-url.ts | 33 +++++++++++-------- 10 files changed, 63 insertions(+), 63 deletions(-) diff --git a/src/components/_shared/gallery-preview/GalleryPreview.tsx b/src/components/_shared/gallery-preview/GalleryPreview.tsx index 15991f18..2f771bcb 100644 --- a/src/components/_shared/gallery-preview/GalleryPreview.tsx +++ b/src/components/_shared/gallery-preview/GalleryPreview.tsx @@ -12,8 +12,7 @@ import { ReactComponent as ReloadIcon } from '@/assets/icons/reset.svg'; import { ReactComponent as DownloadIcon } from '@/assets/icons/save_as.svg'; import { notify } from '@/components/_shared/notify'; import { copyTextToClipboard } from '@/utils/copy'; -import isURL from 'validator/lib/isURL'; -import { getFileLegacyUrl } from '@/utils/file-storage-url'; +import { getFileUrl, isFileURL } from '@/utils/file-storage-url'; export interface GalleryImage { src: string; @@ -25,11 +24,12 @@ export interface GalleryPreviewProps { onClose: () => void; previewIndex: number; workspaceId: string; + viewId: string; } const buttonClassName = 'p-1 hover:bg-transparent text-white hover:text-text-action p-0'; -function GalleryPreview({ images, open, onClose, previewIndex, workspaceId }: GalleryPreviewProps) { +function GalleryPreview({ images, open, onClose, previewIndex, workspaceId, viewId }: GalleryPreviewProps) { const { t } = useTranslation(); const [index, setIndex] = useState(previewIndex); const transformComponentRef = useRef(null); @@ -96,14 +96,13 @@ function GalleryPreview({ images, open, onClose, previewIndex, workspaceId }: Ga }, [handleKeydown]); const imageUrl = useMemo(() => { - if (isURL(images[index].src)) { + if (isFileURL(images[index].src)) { return images[index].src; } const fileId = images[index].src; - - return getFileLegacyUrl(workspaceId, fileId); - }, [images, index, workspaceId]); + return getFileUrl(workspaceId, viewId, fileId); + }, [images, index, workspaceId, viewId]); if (!open) { return null; diff --git a/src/components/database/components/cell/file-media/FileMediaCell.tsx b/src/components/database/components/cell/file-media/FileMediaCell.tsx index fd2c34d3..09498886 100644 --- a/src/components/database/components/cell/file-media/FileMediaCell.tsx +++ b/src/components/database/components/cell/file-media/FileMediaCell.tsx @@ -25,7 +25,7 @@ export function FileMediaCell({ readOnly, }: CellProps) { const value = cell?.data; - const { workspaceId } = useDatabaseContext(); + const { workspaceId, viewId } = useDatabaseContext(); const [openPreview, setOpenPreview] = React.useState(false); const previewIndexRef = React.useRef(0); const photos = useMemo(() => { @@ -113,6 +113,7 @@ export function FileMediaCell({ void }) { - const { workspaceId } = useDatabaseContext(); + const { workspaceId, viewId } = useDatabaseContext(); const thumb = useMemo(() => { let fileUrl = file.url; if (!fileUrl) return ''; - if (!isURL(fileUrl)) { - fileUrl = getFileLegacyUrl(workspaceId, file.url); + if (!isFileURL(fileUrl)) { + fileUrl = getFileUrl(workspaceId, viewId, file.url); } const url = new URL(fileUrl); @@ -22,7 +21,7 @@ function PreviewImage({ file, onClick }: { file: FileMediaCellDataItem; onClick: url.searchParams.set('fit', 'crop'); return url.toString() + '&w=240&q=80'; - }, [file.url, workspaceId]); + }, [file.url, workspaceId, viewId]); return (
@@ -20,13 +19,13 @@ function UnPreviewFile({ file }: { file: FileMediaCellDataItem }) { className={'cursor-pointer rounded-[4px] bg-fill-content-hover text-icon-secondary'} onClick={(e) => { e.stopPropagation(); - if (file.url && isURL(file.url)) { + if (file.url && isFileURL(file.url)) { void openUrl(file.url, '_blank'); return; } const fileId = file.url; - const newUrl = getFileLegacyUrl(workspaceId, fileId); + const newUrl = getFileUrl(workspaceId, viewId, fileId); void openUrl(newUrl, '_blank'); }} diff --git a/src/components/database/components/database-row/file-media/FileMediaCell.tsx b/src/components/database/components/database-row/file-media/FileMediaCell.tsx index 6413cea0..c631501d 100644 --- a/src/components/database/components/database-row/file-media/FileMediaCell.tsx +++ b/src/components/database/components/database-row/file-media/FileMediaCell.tsx @@ -31,7 +31,7 @@ export function FileMediaCell ({ const value = cell?.data; const { t } = useTranslation(); const { field, clock } = useFieldSelector(fieldId); - const { workspaceId } = useDatabaseContext(); + const { workspaceId, viewId } = useDatabaseContext(); const typeOption = useMemo(() => { if (!field) return null; return parseFileMediaTypeOptions(field); @@ -169,6 +169,7 @@ export function FileMediaCell ({ />} {openPreview && void; }) { const readOnly = useReadOnly(); - const { workspaceId } = useDatabaseContext(); + const { workspaceId, viewId } = useDatabaseContext(); const isImage = file.file_type === FileMediaType.Image; const mouseDownStartTimeRef = useRef(null); @@ -48,14 +47,14 @@ function FileMediaItem({ }, [file.file_type]); const fileUrl = useMemo(() => { - if (file.url && isURL(file.url)) { + if (file.url && isFileURL(file.url)) { return file.url; } const fileId = file.url; - return getFileLegacyUrl(workspaceId, fileId); - }, [file.url, workspaceId]); + return getFileUrl(workspaceId, viewId, fileId); + }, [file.url, workspaceId, viewId]); const [hover, setHover] = useState(false); @@ -65,13 +64,13 @@ function FileMediaItem({ e.stopPropagation(); // Open the file in a new tab if (file.file_type !== FileMediaType.Image) { - if (file.url && isURL(file.url)) { + if (file.url && isFileURL(file.url)) { void openUrl(file.url, '_blank'); return; } const fileId = file.url; - const newUrl = getFileLegacyUrl(workspaceId, fileId); + const newUrl = getFileUrl(workspaceId, viewId, fileId); void openUrl(newUrl, '_blank'); } diff --git a/src/components/editor/components/blocks/gallery/GalleryBlock.tsx b/src/components/editor/components/blocks/gallery/GalleryBlock.tsx index ecfa24ac..60c479e9 100644 --- a/src/components/editor/components/blocks/gallery/GalleryBlock.tsx +++ b/src/components/editor/components/blocks/gallery/GalleryBlock.tsx @@ -1,7 +1,6 @@ import React, { forwardRef, memo, Suspense, useCallback, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useReadOnly } from 'slate-react'; -import isURL from 'validator/lib/isURL'; import { GalleryLayout } from '@/application/types'; import { ReactComponent as GalleryIcon } from '@/assets/icons/gallery.svg'; @@ -13,12 +12,12 @@ import ImageGallery from '@/components/editor/components/blocks/gallery/ImageGal import { EditorElementProps, GalleryBlockNode } from '@/components/editor/editor.type'; import { useEditorContext } from '@/components/editor/EditorContext'; import { copyTextToClipboard } from '@/utils/copy'; -import { getFileLegacyUrl } from '@/utils/file-storage-url'; +import { getFileUrl, isFileURL } from '@/utils/file-storage-url'; const GalleryBlock = memo( forwardRef>(({ node, children, ...attributes }, ref) => { const { t } = useTranslation(); - const { workspaceId } = useEditorContext(); + const { workspaceId, viewId } = useEditorContext(); const { images, layout } = useMemo(() => node.data || {}, [node.data]); const [openPreview, setOpenPreview] = React.useState(false); const previewIndexRef = React.useRef(0); @@ -36,8 +35,8 @@ const GalleryBlock = memo( let imageUrl = image.url; if (!imageUrl) return null; - if (!isURL(image.url)) { - imageUrl = getFileLegacyUrl(workspaceId, image.url); + if (!isFileURL(image.url)) { + imageUrl = getFileUrl(workspaceId, viewId, image.url); } const url = new URL(imageUrl); @@ -51,11 +50,11 @@ const GalleryBlock = memo( }; }) .filter(Boolean) as { - src: string; - thumb: string; - responsive: string; - }[]; - }, [images, workspaceId]); + src: string; + thumb: string; + responsive: string; + }[]; + }, [images, workspaceId, viewId]); const handleOpenPreview = useCallback(() => { setOpenPreview(true); @@ -131,6 +130,7 @@ const GalleryBlock = memo( { setOpenPreview(true); }; @@ -63,6 +63,7 @@ function ImageToolbar({ node }: { node: ImageBlockNode }) {