@noya-app/noya-file-explorer 0.0.19 → 0.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-file-explorer",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -20,13 +20,13 @@
     "dev": "npm run build:main -- --watch"
   },
   "dependencies": {
-    "@noya-app/noya-designsystem": "0.1.66",
-    "@noya-app/noya-icons": "0.1.13",
-    "@noya-app/noya-multiplayer-react": "0.1.66",
+    "@noya-app/noya-designsystem": "0.1.67",
+    "@noya-app/noya-icons": "0.1.14",
+    "@noya-app/noya-multiplayer-react": "0.1.67",
     "@noya-app/noya-keymap": "0.1.4",
     "@noya-app/react-utils": "0.1.26",
     "@noya-app/noya-utils": "0.1.8",
-    "@noya-app/noya-schemas": "0.1.7",
+    "@noya-app/noya-schemas": "0.1.8",
     "imfs": "^0.1.0",
     "browser-fs-access": "0.35.0"
   },

package/src/MediaCollection.tsx

@@ -548,11 +548,12 @@ export const MediaCollection = memo(
 
           // Create assets in parallel for better performance
           const uploadPromises = files.map(async (file) => {
-            const asset = await assetManager.create(file);
+            const created = await assetManager.create(file);
+            const assetStableId = created.id;
             const assetPath = path.join(parentPath, path.basename(file.name));
             return {
               assetPath,
-              asset: createMediaAsset({ assetId: asset.id }),
+              asset: createMediaAsset({ assetId: assetStableId }),
             };
           });
 
@@ -585,12 +586,14 @@ export const MediaCollection = memo(
       [tree.idToPathMap, setMedia, media, assetManager, onAssetsUploaded]
     );
 
-    const handleDownload = useCallback(
-      async (selectedItems: MediaItem[]) => {
-        const downloadPromises = selectedItems
-          .filter((item) => item.kind === "asset")
-          .map(async (item) => {
-            const asset = assets.find((a) => a.id === item.assetId);
+      const handleDownload = useCallback(
+        async (selectedItems: MediaItem[]) => {
+          const downloadPromises = selectedItems
+            .filter((item) => item.kind === "asset")
+            .map(async (item) => {
+            const asset =
+              assets.find((a) => a.stableId === item.assetId) ??
+              assets.find((a) => a.id === item.assetId);
             if (!asset?.url) return;
             return downloadUrl(asset.url, tree.getNameForId(item.id));
           });
@@ -600,12 +603,14 @@ export const MediaCollection = memo(
       [assets, tree]
     );
 
-    const handlePreview = useCallback(
-      async (selectedItems: MediaItem[]) => {
-        const previewPromises = selectedItems
-          .filter((item) => item.kind === "asset")
-          .map(async (item) => {
-            const asset = assets.find((a) => a.id === item.assetId);
+      const handlePreview = useCallback(
+        async (selectedItems: MediaItem[]) => {
+          const previewPromises = selectedItems
+            .filter((item) => item.kind === "asset")
+            .map(async (item) => {
+            const asset =
+              assets.find((a) => a.stableId === item.assetId) ??
+              assets.find((a) => a.id === item.assetId);
             if (!asset?.url) return;
             return window?.open(asset.url, "_blank");
           });
@@ -621,7 +626,8 @@ export const MediaCollection = memo(
           const file = await fileOpen();
           if (!file) return;
           // Create the asset
-          const asset = await assetManager.create(file);
+          const created = await assetManager.create(file);
+          const assetStableId = created.id;
           const oldFile = selectedItem;
           const oldFilePath = tree.idToPathMap.get(oldFile.id);
           if (!oldFilePath || oldFile.kind !== "asset") return;
@@ -631,7 +637,7 @@ export const MediaCollection = memo(
               ...media,
               [oldFilePath]: createMediaAsset({
                 ...oldFile,
-                assetId: asset.id,
+                assetId: assetStableId,
               }),
             }
           );
@@ -905,7 +911,9 @@ export const MediaCollection = memo(
             renderAction={renderAction}
             renderDetail={(file, selected) => {
               if (file.kind !== "asset") return null;
-              const asset = assets.find((a) => a.id === file.assetId);
+              const asset =
+                assets.find((a) => a.stableId === file.assetId) ??
+                assets.find((a) => a.id === file.assetId);
               if (!asset) return null;
               return (
                 <FileExplorerDetail selected={selected} size={size}>

package/src/ResourceExplorer.tsx

@@ -74,6 +74,7 @@ import {
 import { Size } from "@noya-app/noya-geometry";
 import { path } from "imfs";
 import React from "react";
+import { getContentTypeFromFile } from "./utils/contentType";
 import { handleDataTransfer } from "./utils/handleFileDrop";
 import {
   deleteResources,
@@ -235,6 +236,8 @@ type ResourceExplorerProps = {
   virtualized?: boolean;
 
   renderUser?: (resource: Resource) => ReactNode;
+  /** Show file sizes in list view detail. Defaults to true. */
+  showFileSizes?: boolean;
 } & Pick<
   CollectionProps<Resource, MenuAction>,
   | "sortableId"
@@ -288,6 +291,7 @@ export const ResourceExplorer = memo(
         publishedResources,
         virtualized = false,
         renderUser,
+        showFileSizes = true,
       },
       ref
     ) {
@@ -537,7 +541,7 @@ export const ResourceExplorer = memo(
                   id: uuid(),
                   asset: {
                     content: Base64.encode(await file.arrayBuffer()),
-                    contentType: file.type,
+                    contentType: getContentTypeFromFile(file),
                     encoding: "base64",
                   },
                   path: assetPath,
@@ -581,7 +585,9 @@ export const ResourceExplorer = memo(
           const downloadPromises = selectedItems
             .filter((item) => item.type === "asset")
             .map(async (item) => {
-              const asset = assets.find((a) => a.id === item.assetId);
+              const asset =
+                assets.find((a) => a.stableId === item.assetId) ??
+                assets.find((a) => a.id === item.assetId);
               if (!asset?.url) return;
               return downloadUrl(asset.url, tree.getNameForId(item.id));
             });
@@ -596,7 +602,9 @@ export const ResourceExplorer = memo(
           const previewPromises = selectedItems
             .filter((item) => item.type === "asset")
             .map(async (item) => {
-              const asset = assets.find((a) => a.id === item.assetId);
+              const asset =
+                assets.find((a) => a.stableId === item.assetId) ??
+                assets.find((a) => a.id === item.assetId);
               if (!asset?.url) return;
               return window?.open(asset.url, "_blank");
             });
@@ -612,7 +620,8 @@ export const ResourceExplorer = memo(
             const file = await fileOpen();
             if (!file) return;
             // Create the asset
-            const asset = await assetManager.create(file);
+            const created = await assetManager.create(file);
+            const assetStableId = created.id;
             const oldFile = selectedItem;
             const oldFilePath = tree.idToPathMap.get(oldFile.id);
             if (!oldFilePath || oldFile.type !== "asset") return;
@@ -622,7 +631,7 @@ export const ResourceExplorer = memo(
                 ...media,
                 [oldFilePath]: createAssetResource({
                   ...oldFile,
-                  assetId: asset.id,
+                  assetId: assetStableId,
                 }),
               }
             );
@@ -887,6 +896,7 @@ export const ResourceExplorer = memo(
           }}
           getExpanded={getExpanded}
           setExpanded={handleSetExpanded}
+          renameSelectsBeforeDot
           getRenamable={(item) => {
             if (item.id === rootResource.id) return false;
             return true;
@@ -925,7 +935,7 @@ export const ResourceExplorer = memo(
 
             return (
               <div
-                style={{ display: "flex", alignItems: "center", gap: "1.5px" }}
+                style={{ display: "flex", alignItems: "center", gap: "6px" }}
               >
                 {publishStatus && (
                   <Chip
@@ -945,9 +955,11 @@ export const ResourceExplorer = memo(
             );
           }}
           renderDetail={(file, selected) => {
+            if (!showFileSizes) return null;
             if (file.type !== "asset") return null;
-
-            const asset = assets.find((a) => a.id === file.assetId);
+            const asset =
+              assets.find((a) => a.stableId === file.assetId) ??
+              assets.find((a) => a.id === file.assetId);
 
             if (!asset) return null;
 

package/src/index.ts

@@ -1,6 +1,7 @@
 import "./index.css";
 export * from "./MediaCollection";
 export * from "./ResourceExplorer";
+export * from "./utils/contentType";
 export * from "./utils/files";
 export * from "./utils/mediaItemTree";
 export * from "./utils/resourceUtils";

package/src/utils/contentType.ts

@@ -0,0 +1,99 @@
+/**
+ * Get the content type (MIME type) for a file.
+ *
+ * This function first checks if the browser has determined a content type
+ * for the file. If not (which commonly happens for files like .md, .txt, etc.
+ * that don't have OS-registered MIME types), it falls back to extension-based
+ * detection.
+ */
+export function getContentTypeFromFile(file: File): string {
+  // If browser provides a type, use it
+  if (file.type) {
+    return file.type;
+  }
+
+  // Fall back to extension-based detection
+  const extension = file.name.split(".").pop()?.toLowerCase();
+
+  return getContentTypeFromExtension(extension);
+}
+
+/** Get the content type (MIME type) for a file extension. */
+export function getContentTypeFromExtension(
+  extension: string | undefined
+): string {
+  if (!extension) {
+    return "application/octet-stream";
+  }
+
+  const extensionToMimeType: Record<string, string> = {
+    // Text files
+    md: "text/markdown",
+    markdown: "text/markdown",
+    txt: "text/plain",
+    json: "application/json",
+    xml: "application/xml",
+    csv: "text/csv",
+    html: "text/html",
+    htm: "text/html",
+    css: "text/css",
+    js: "text/javascript",
+    mjs: "text/javascript",
+    ts: "text/typescript",
+    tsx: "text/typescript",
+    jsx: "text/javascript",
+
+    // Images
+    svg: "image/svg+xml",
+    png: "image/png",
+    jpg: "image/jpeg",
+    jpeg: "image/jpeg",
+    gif: "image/gif",
+    webp: "image/webp",
+    bmp: "image/bmp",
+    ico: "image/x-icon",
+    tiff: "image/tiff",
+    tif: "image/tiff",
+
+    // Documents
+    pdf: "application/pdf",
+    doc: "application/msword",
+    docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+    xls: "application/vnd.ms-excel",
+    xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    ppt: "application/vnd.ms-powerpoint",
+    pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+
+    // Audio
+    mp3: "audio/mpeg",
+    wav: "audio/wav",
+    ogg: "audio/ogg",
+    m4a: "audio/mp4",
+    flac: "audio/flac",
+
+    // Video
+    mp4: "video/mp4",
+    webm: "video/webm",
+    mov: "video/quicktime",
+    avi: "video/x-msvideo",
+    mkv: "video/x-matroska",
+
+    // Archives
+    zip: "application/zip",
+    tar: "application/x-tar",
+    gz: "application/gzip",
+    "7z": "application/x-7z-compressed",
+    rar: "application/vnd.rar",
+
+    // Fonts
+    woff: "font/woff",
+    woff2: "font/woff2",
+    ttf: "font/ttf",
+    otf: "font/otf",
+
+    // Other
+    sketch: "application/x-sketch",
+  };
+
+  return extensionToMimeType[extension] || "application/octet-stream";
+}

package/src/utils/handleFileDrop.ts

@@ -8,6 +8,7 @@ import {
 } from "@noya-app/noya-schemas";
 import { Base64, uuid } from "@noya-app/noya-utils";
 import { path } from "imfs";
+import { getContentTypeFromFile } from "./contentType";
 
 function isDirectoryEntry(
   entry: FileSystemEntry
@@ -143,7 +144,7 @@ export async function handleDataTransfer({
               id: uuid(),
               asset: {
                 content: Base64.encode(await file.arrayBuffer()),
-                contentType: file.type,
+                contentType: getContentTypeFromFile(file),
                 encoding: "base64",
               },
               path: path.join(rootItemPath, relativePath),