@nocobase/app-template-default 0.0.0-stage → 1.0.0-beta.57

package/client/extensions/nocobase-file-component-ui/components/previewers/file-preview-content.tsx

@@ -0,0 +1,255 @@
+import { messageKey } from '../../lib/message-key.js';
+import { useTranslation } from '@nocobase/i18n/client';
+import type { FileRecord } from '../../types';
+import { useEffect, useRef, useState, type ReactElement } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+import {
+  resolveOfficeEmbedUrl,
+  resolveOfficeOpenXmlFormat,
+  type FilePreviewKind,
+} from '../../lib/file-preview';
+import { Button } from '#components/ui/button';
+import { resolveSafeFileUrl } from '../../lib/file-url';
+import { FileThumbnail } from '../file-thumbnail';
+
+import { OfficeOpenXmlPreview } from './office-open-xml-preview';
+
+const OFFICE_PREVIEW_TIMEOUT_MS = 15_000;
+
+export interface FilePreviewContentProps {
+  readonly file: FileRecord;
+  readonly kind: FilePreviewKind;
+  readonly url?: string;
+  readonly text?: string;
+  readonly error?: string;
+  readonly onDownload?: () => void;
+}
+
+export function FilePreviewContent(
+  inputProps: FilePreviewContentProps,
+): ReactElement {
+  const { t } = useTranslation('@nocobase/app-plugin-file');
+  const { file, kind, url, text, error, onDownload } = inputProps;
+
+  const format =
+    kind === 'ooxml' ? resolveOfficeOpenXmlFormat(file) : undefined;
+  if (format) {
+    return (
+      <OfficeOpenXmlPreview
+        key={`${file.id}:${format}:${url ?? ''}:${error ?? ''}`}
+        file={file}
+        format={format}
+        url={url}
+        error={error}
+        onDownload={onDownload}
+      />
+    );
+  }
+
+  if (kind === 'office') {
+    return (
+      <OfficePreview
+        file={file}
+        url={url}
+        error={error}
+        onDownload={onDownload}
+      />
+    );
+  }
+  if (error)
+    return (
+      <div role='alert'>{t(messageKey(error), { defaultValue: error })}</div>
+    );
+  if (!url)
+    return kind === 'unsupported' ? (
+      <DownloadFallback file={file} onDownload={onDownload} />
+    ) : (
+      <div role='status'>
+        {t('files.loadingPreview', { defaultValue: 'Loading preview...' })}
+      </div>
+    );
+  switch (kind) {
+    case 'image':
+      return <ImagePreview file={file} url={url} onDownload={onDownload} />;
+    case 'pdf':
+      return (
+        <iframe title={file.filename} src={url} className='h-[70vh] w-full' />
+      );
+    case 'audio':
+      return <audio controls src={url} className='w-full' />;
+    case 'video':
+      return <video controls src={url} className='max-h-[70vh] max-w-full' />;
+    case 'markdown':
+      return <MarkdownPreview text={text} />;
+    case 'text':
+      return (
+        <pre className='max-h-[70vh] overflow-auto whitespace-pre-wrap rounded-md bg-muted p-3 text-sm'>
+          {text ??
+            t('files.loadingPreview', { defaultValue: 'Loading preview...' })}
+        </pre>
+      );
+    default:
+      return <DownloadFallback file={file} onDownload={onDownload} />;
+  }
+}
+
+function MarkdownPreview(inputProps: { readonly text?: string }): ReactElement {
+  const { t } = useTranslation('@nocobase/app-plugin-file');
+  const { text } = inputProps;
+
+  if (text === undefined)
+    return (
+      <div role='status'>
+        {t('files.loadingPreview', { defaultValue: 'Loading preview...' })}
+      </div>
+    );
+  return (
+    <article className='prose max-h-[70vh] max-w-none overflow-auto rounded-md bg-muted/30 p-4'>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        urlTransform={(url) => resolveSafeFileUrl(url) ?? ''}
+        components={{
+          a: ({ children, ...props }) => (
+            <a {...props} target='_blank' rel='noreferrer'>
+              {children}
+            </a>
+          ),
+        }}
+      >
+        {text}
+      </ReactMarkdown>
+    </article>
+  );
+}
+
+function ImagePreview(inputProps: {
+  readonly file: FileRecord;
+  readonly url: string;
+  readonly onDownload?: () => void;
+}): ReactElement {
+  const { t } = useTranslation('@nocobase/app-plugin-file');
+  const { file, url, onDownload } = inputProps;
+
+  // The browser decodes the image itself, so its error event is the only signal
+  // that a corrupt or mislabelled file would otherwise leave as a broken icon.
+  // Remember which URL failed rather than a flag, so a new URL is tried again.
+  const [failedUrl, setFailedUrl] = useState<string>();
+  if (url === failedUrl)
+    return (
+      <DownloadFallback
+        file={file}
+        message={t('files.imageFailed', {
+          defaultValue:
+            'This image could not be displayed. It may be corrupted or in an unsupported format.',
+        })}
+        thumbnailIconOnly
+        onDownload={onDownload}
+      />
+    );
+  return (
+    <img
+      src={url}
+      alt={file.filename}
+      className='max-h-[70vh] max-w-full object-contain'
+      onError={() => setFailedUrl(url)}
+    />
+  );
+}
+
+function OfficePreview(inputProps: {
+  readonly file: FileRecord;
+  readonly url?: string;
+  readonly error?: string;
+  readonly onDownload?: () => void;
+}): ReactElement {
+  const { t } = useTranslation('@nocobase/app-plugin-file');
+  const { file, url, error, onDownload } = inputProps;
+
+  const [failed, setFailed] = useState(false);
+  const [loaded, setLoaded] = useState(false);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const embedUrl = url ? resolveOfficeEmbedUrl(url) : undefined;
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe || !embedUrl) return undefined;
+    const handleError = () => setFailed(true);
+    iframe.addEventListener('error', handleError);
+    return () => iframe.removeEventListener('error', handleError);
+  }, [embedUrl]);
+  useEffect(() => {
+    if (!embedUrl || loaded) return undefined;
+    const timeout = window.setTimeout(
+      () => setFailed(true),
+      OFFICE_PREVIEW_TIMEOUT_MS,
+    );
+    return () => window.clearTimeout(timeout);
+  }, [embedUrl, loaded]);
+  if (!url && !error)
+    return (
+      <div role='status'>
+        {t('files.loadingPreview', { defaultValue: 'Loading preview...' })}
+      </div>
+    );
+  if (!embedUrl || failed) {
+    return (
+      <DownloadFallback
+        file={file}
+        message={
+          (error ? t(messageKey(error), { defaultValue: error }) : undefined) ??
+          (failed
+            ? t('files.officeFailed', {
+                defaultValue: 'Office Online could not load this file.',
+              })
+            : t('files.officeUrl', {
+                defaultValue:
+                  'Office Online requires an internet-accessible absolute file URL.',
+              }))
+        }
+        onDownload={onDownload}
+      />
+    );
+  }
+  return (
+    <iframe
+      ref={iframeRef}
+      title={file.filename}
+      src={embedUrl}
+      className='h-[70vh] w-full'
+      onLoad={() => setLoaded(true)}
+    />
+  );
+}
+
+function DownloadFallback(inputProps: {
+  readonly file: FileRecord;
+  readonly message?: string;
+  readonly thumbnailIconOnly?: boolean;
+  readonly onDownload?: () => void;
+}): ReactElement {
+  const { t } = useTranslation('@nocobase/app-plugin-file');
+  const {
+    file,
+    message = t('files.previewUnavailable', {
+      defaultValue: 'Preview is unavailable for this file type.',
+    }),
+    thumbnailIconOnly = false,
+    onDownload,
+  } = inputProps;
+
+  return (
+    <div className='flex flex-col items-center gap-3 py-8'>
+      <div className='h-24 w-24'>
+        {/* After an image fails, a thumbnail would load the same bytes again. */}
+        <FileThumbnail file={file} iconOnly={thumbnailIconOnly} />
+      </div>
+      <p>{message}</p>
+      {onDownload ? (
+        <Button type='button' onClick={onDownload}>
+          {t('files.downloadFile', { defaultValue: 'Download file' })}
+        </Button>
+      ) : null}
+    </div>
+  );
+}

package/client/extensions/nocobase-file-component-ui/components/previewers/office-open-xml-preview.tsx

@@ -0,0 +1,226 @@
+import { useTranslation } from '@nocobase/i18n/client';
+import { useEffect, useRef, useState, type ReactElement } from 'react';
+
+import { Button } from '#components/ui/button';
+import type { OfficeOpenXmlFormat } from '../../lib/file-preview.js';
+import { fileUrlCredentials } from '../../lib/file-url.js';
+import type { FileRecord } from '../../types.js';
+import { FileThumbnail } from '../file-thumbnail.js';
+
+// Covers the file request, the Viewer import and the first render together, so a request or renderer that never
+// settles ends in the download fallback instead of an indefinite loading state.
+const OFFICE_OPEN_XML_PREVIEW_TIMEOUT_MS = 180_000;
+
+interface OfficeOpenXmlViewer {
+  load(source: string | ArrayBuffer): Promise<void>;
+  destroy(): void;
+}
+
+export interface OfficeOpenXmlPreviewProps {
+  readonly file: FileRecord;
+  readonly format: OfficeOpenXmlFormat;
+  readonly url?: string;
+  readonly error?: string;
+  readonly onDownload?: () => void;
+}
+
+export function OfficeOpenXmlPreview({
+  file,
+  format,
+  url,
+  error,
+  onDownload,
+}: OfficeOpenXmlPreviewProps): ReactElement {
+  const { t } = useTranslation('@nocobase/app-plugin-file');
+  const hostRef = useRef<HTMLDivElement>(null);
+  const [loaded, setLoaded] = useState(false);
+  const [viewerError, setViewerError] = useState<string>();
+
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host || !url || error) return undefined;
+
+    let active = true;
+    let viewer: OfficeOpenXmlViewer | undefined;
+    const controller = new AbortController();
+    const reportViewerError = (cause: unknown): void => {
+      if (!active || isAbortError(cause)) return;
+      // The first failure settles the preview; later ones, including the timeout, are ignored.
+      active = false;
+      const failedViewer = viewer;
+      viewer = undefined;
+      failedViewer?.destroy();
+      setViewerError(
+        cause instanceof OfficeOpenXmlPreviewError
+          ? cause.message
+          : t('files.ooxmlLoadFailed', {
+              defaultValue: 'Unable to render this Office Open XML file.',
+            }),
+      );
+    };
+    const timeout = window.setTimeout(() => {
+      reportViewerError(
+        new OfficeOpenXmlPreviewError(
+          t('files.ooxmlLoadTimedOut', {
+            defaultValue: `The preview did not finish loading within ${OFFICE_OPEN_XML_PREVIEW_TIMEOUT_MS / 60_000} minutes.`,
+            minutes: OFFICE_OPEN_XML_PREVIEW_TIMEOUT_MS / 60_000,
+          }),
+        ),
+      );
+      controller.abort();
+    }, OFFICE_OPEN_XML_PREVIEW_TIMEOUT_MS);
+
+    void (async () => {
+      const data = await fetchOfficeOpenXml(url, controller.signal, t);
+      if (!active) return;
+      const createdViewer = await createOfficeOpenXmlViewer(
+        format,
+        host,
+        reportViewerError,
+      );
+      if (!active) {
+        createdViewer.destroy();
+        return;
+      }
+      viewer = createdViewer;
+      await viewer.load(data);
+      if (!active) return;
+      window.clearTimeout(timeout);
+      setLoaded(true);
+    })().catch(reportViewerError);
+
+    return () => {
+      active = false;
+      window.clearTimeout(timeout);
+      controller.abort();
+      viewer?.destroy();
+    };
+  }, [error, format, t, url]);
+
+  const resolvedError = error ?? viewerError;
+  if (resolvedError) {
+    return (
+      <OfficeOpenXmlDownloadFallback
+        file={file}
+        message={resolvedError}
+        onDownload={onDownload}
+      />
+    );
+  }
+  if (!url) {
+    return (
+      <div role='status'>
+        {t('files.loadingPreview', { defaultValue: 'Loading preview...' })}
+      </div>
+    );
+  }
+
+  return (
+    <div className='relative h-[70vh] min-h-0 w-full overflow-hidden bg-muted/30'>
+      {!loaded ? (
+        <div
+          role='status'
+          className='absolute inset-0 z-10 flex items-center justify-center bg-background'
+        >
+          {t('files.loadingPreview', { defaultValue: 'Loading preview...' })}
+        </div>
+      ) : null}
+      <div
+        ref={hostRef}
+        className='h-full min-h-0 w-full overflow-hidden'
+        data-office-open-xml-format={format}
+      />
+    </div>
+  );
+}
+
+/** Carries a message that is already fit to show to the user. */
+class OfficeOpenXmlPreviewError extends Error {}
+
+async function fetchOfficeOpenXml(
+  url: string,
+  signal: AbortSignal,
+  t: ReturnType<typeof useTranslation>['t'],
+): Promise<ArrayBuffer> {
+  const response = await fetch(url, {
+    credentials: fileUrlCredentials(url),
+    signal,
+  });
+  if (!response.ok) {
+    throw new OfficeOpenXmlPreviewError(
+      t('files.previewRequestFailed', {
+        defaultValue: `Preview request failed (${response.status}).`,
+        status: response.status,
+      }),
+    );
+  }
+  return await response.arrayBuffer();
+}
+
+function isAbortError(cause: unknown): boolean {
+  return cause instanceof Error && cause.name === 'AbortError';
+}
+
+async function createOfficeOpenXmlViewer(
+  format: OfficeOpenXmlFormat,
+  host: HTMLElement,
+  onError: (error: Error) => void,
+): Promise<OfficeOpenXmlViewer> {
+  const commonOptions = {
+    mode: 'main' as const,
+    useGoogleFonts: false,
+    onError,
+  };
+  switch (format) {
+    case 'docx': {
+      const { DocxScrollViewer } = await import('@silurus/ooxml/docx');
+      return new DocxScrollViewer(host, {
+        ...commonOptions,
+        enableTextSelection: true,
+        gap: 16,
+        progressiveLayout: true,
+      });
+    }
+    case 'pptx': {
+      const { PptxScrollViewer } = await import('@silurus/ooxml/pptx');
+      return new PptxScrollViewer(host, {
+        ...commonOptions,
+        enableTextSelection: true,
+        gap: 16,
+        progressiveLayout: true,
+      });
+    }
+    case 'xlsx': {
+      const { XlsxViewer } = await import('@silurus/ooxml/xlsx');
+      return new XlsxViewer(host, {
+        ...commonOptions,
+        showZoomSlider: true,
+      });
+    }
+  }
+}
+
+function OfficeOpenXmlDownloadFallback({
+  file,
+  message,
+  onDownload,
+}: {
+  readonly file: FileRecord;
+  readonly message: string;
+  readonly onDownload?: () => void;
+}): ReactElement {
+  const { t } = useTranslation('@nocobase/app-plugin-file');
+  return (
+    <div className='flex flex-col items-center gap-3 py-8'>
+      <div className='h-24 w-24'>
+        <FileThumbnail file={file} />
+      </div>
+      <p role='alert'>{message}</p>
+      {onDownload ? (
+        <Button type='button' onClick={onDownload}>
+          {t('files.downloadFile', { defaultValue: 'Download file' })}
+        </Button>
+      ) : null}
+    </div>
+  );
+}

package/client/extensions/nocobase-file-component-ui/index.ts

@@ -0,0 +1,8 @@
+export { FileList } from './components/file-list';
+export { FilePreviewDialog } from './components/file-preview-dialog';
+export { FilePreviewField } from './components/file-preview-field';
+export { FileThumbnail } from './components/file-thumbnail';
+export { FileUploadField } from './components/file-upload-field';
+export type * from './types';
+export { clientFileRepositoryManagerToken } from '@nocobase/app-plugin-file/client';
+export type { ClientFileRepository } from '@nocobase/app-plugin-file/client';

package/client/extensions/nocobase-file-component-ui/lib/file-preview.ts

@@ -0,0 +1,194 @@
+import type { FileRecord } from '@nocobase/app-plugin-file/client';
+
+export type FilePreviewKind =
+  | 'image'
+  | 'pdf'
+  | 'audio'
+  | 'video'
+  | 'text'
+  | 'markdown'
+  | 'ooxml'
+  | 'office'
+  | 'unsupported';
+
+export type OfficeOpenXmlFormat = 'docx' | 'xlsx' | 'pptx';
+
+const ACTIVE_MIME_TYPES: ReadonlySet<string> = new Set([
+  'application/xhtml+xml',
+  'application/xml',
+  'image/svg+xml',
+  'text/html',
+  'text/xml',
+]);
+const ACTIVE_EXTENSIONS: ReadonlySet<string> = new Set([
+  '.htm',
+  '.html',
+  '.svg',
+  '.xhtml',
+  '.xml',
+]);
+const OFFICE_OPEN_XML_EXTENSIONS: Readonly<
+  Record<string, OfficeOpenXmlFormat>
+> = {
+  '.docx': 'docx',
+  '.pptx': 'pptx',
+  '.xlsx': 'xlsx',
+};
+const OFFICE_OPEN_XML_MIME_TYPES: Readonly<
+  Record<string, OfficeOpenXmlFormat>
+> = {
+  'application/vnd.openxmlformats-officedocument.presentationml.presentation':
+    'pptx',
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'xlsx',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+    'docx',
+};
+const OFFICE_EXTENSIONS: ReadonlySet<string> = new Set([
+  '.doc',
+  '.odf',
+  '.odg',
+  '.odm',
+  '.odp',
+  '.ods',
+  '.odt',
+  '.otg',
+  '.oth',
+  '.otp',
+  '.ots',
+  '.ott',
+  '.ppt',
+  '.xls',
+]);
+const OFFICE_MIME_TYPES: ReadonlySet<string> = new Set([
+  'application/msword',
+  'application/vnd.ms-excel',
+  'application/vnd.ms-powerpoint',
+  'application/vnd.oasis.opendocument.formula',
+  'application/vnd.oasis.opendocument.graphics',
+  'application/vnd.oasis.opendocument.graphics-template',
+  'application/vnd.oasis.opendocument.presentation',
+  'application/vnd.oasis.opendocument.presentation-template',
+  'application/vnd.oasis.opendocument.spreadsheet',
+  'application/vnd.oasis.opendocument.spreadsheet-template',
+  'application/vnd.oasis.opendocument.text',
+  'application/vnd.oasis.opendocument.text-master',
+  'application/vnd.oasis.opendocument.text-template',
+]);
+
+export function fileExtension(filename: string): string {
+  const dot = filename.lastIndexOf('.');
+  return dot < 0 ? '' : filename.slice(dot).toLowerCase();
+}
+
+function normalizeMimeType(value: string): string {
+  return value.split(';', 1)[0]?.trim().toLowerCase() ?? '';
+}
+
+// Active markup runs script when a browser treats it as a document.
+export function isActiveMarkupMimeType(value: string): boolean {
+  const mimeType = normalizeMimeType(value);
+  return ACTIVE_MIME_TYPES.has(mimeType) || mimeType.endsWith('+xml');
+}
+
+export function isSafeImagePreview(file: FileRecord): boolean {
+  const mimeType = normalizeMimeType(file.mimeType);
+  return (
+    mimeType.startsWith('image/') &&
+    mimeType !== 'image/svg+xml' &&
+    !ACTIVE_EXTENSIONS.has(fileExtension(file.filename))
+  );
+}
+
+export function resolveOfficeOpenXmlFormat(
+  file: FileRecord,
+): OfficeOpenXmlFormat | undefined {
+  const mimeType = normalizeMimeType(file.mimeType);
+  const extension = fileExtension(file.filename);
+  if (
+    isActiveMarkupMimeType(mimeType) ||
+    ACTIVE_EXTENSIONS.has(extension) ||
+    OFFICE_EXTENSIONS.has(extension)
+  ) {
+    return undefined;
+  }
+
+  const extensionFormat = OFFICE_OPEN_XML_EXTENSIONS[extension];
+  if (extensionFormat) return extensionFormat;
+  return OFFICE_OPEN_XML_MIME_TYPES[mimeType];
+}
+
+export function resolveFilePreviewKind(file: FileRecord): FilePreviewKind {
+  const mimeType = normalizeMimeType(file.mimeType);
+  const extension = fileExtension(file.filename);
+  if (isActiveMarkupMimeType(mimeType) || ACTIVE_EXTENSIONS.has(extension)) {
+    return 'unsupported';
+  }
+  if (mimeType === 'text/markdown' || extension === '.md') return 'markdown';
+  if (resolveOfficeOpenXmlFormat(file)) return 'ooxml';
+  if (OFFICE_MIME_TYPES.has(mimeType) || OFFICE_EXTENSIONS.has(extension)) {
+    return 'office';
+  }
+  if (isSafeImagePreview(file)) return 'image';
+  if (mimeType === 'application/pdf' || extension === '.pdf') return 'pdf';
+  if (mimeType.startsWith('audio/')) return 'audio';
+  if (mimeType.startsWith('video/')) return 'video';
+  if (
+    mimeType.startsWith('text/') ||
+    mimeType === 'application/json' ||
+    extension === '.json'
+  ) {
+    return 'text';
+  }
+  return 'unsupported';
+}
+
+export function resolveOfficeEmbedUrl(value: string): string | undefined {
+  let source: URL;
+  try {
+    source = new URL(value);
+  } catch {
+    return undefined;
+  }
+  if (source.protocol !== 'http:' && source.protocol !== 'https:') {
+    return undefined;
+  }
+  if (source.username || source.password) return undefined;
+  if (!isPublicOfficeHostname(source.hostname)) return undefined;
+  const embed = new URL('https://view.officeapps.live.com/op/embed.aspx');
+  embed.searchParams.set('src', source.toString());
+  return embed.toString();
+}
+
+function isPublicOfficeHostname(hostname: string): boolean {
+  const value = hostname
+    .toLowerCase()
+    .replace(/^\[|\]$/gu, '')
+    .replace(/\.$/u, '');
+  if (
+    !value ||
+    value === 'localhost' ||
+    value.endsWith('.localhost') ||
+    value.endsWith('.local') ||
+    value.endsWith('.internal') ||
+    value.endsWith('.lan') ||
+    !value.includes('.') ||
+    value === '::1' ||
+    value === '0:0:0:0:0:0:0:1' ||
+    value.includes(':')
+  ) {
+    return false;
+  }
+  const octets = value.split('.').map(Number);
+  if (octets.length !== 4 || octets.some((octet) => !Number.isInteger(octet))) {
+    return true;
+  }
+  const [first = -1, second = -1] = octets;
+  return !(
+    first === 0 ||
+    first === 10 ||
+    first === 127 ||
+    (first === 169 && second === 254) ||
+    (first === 172 && second >= 16 && second <= 31) ||
+    (first === 192 && second === 168)
+  );
+}

package/client/extensions/nocobase-file-component-ui/lib/file-url.ts

@@ -0,0 +1,22 @@
+export function resolveSafeFileUrl(
+  value: string,
+  trustedBlobUrls: ReadonlySet<string> = new Set(),
+): string | undefined {
+  const url = value.trim();
+  if (!url) return undefined;
+  if (trustedBlobUrls.has(url) && url.startsWith('blob:')) return url;
+  try {
+    const resolved = new URL(url, window.location.href);
+    return resolved.protocol === 'http:' || resolved.protocol === 'https:'
+      ? url
+      : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+export function fileUrlCredentials(url: string): RequestCredentials {
+  return new URL(url, window.location.href).origin === window.location.origin
+    ? 'same-origin'
+    : 'omit';
+}