@fibery/ui-kit 1.39.0 → 1.39.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @fibery/ui-kit
 
+## 1.39.1
+
+### Patch Changes
+
+- 66dca07: add mode attribute for code block node
+
 ## 1.39.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.39.0",
+  "version": "1.39.1",
   "private": false,
   "license": "UNLICENSED",
   "dependencies": {
@@ -47,9 +47,9 @@
     "screenfull": "6.0.2",
     "tabbable": "5.2.1",
     "ua-parser-js": "1.0.39",
+    "@fibery/emoji-data": "2.7.1",
     "@fibery/helpers": "1.3.4",
-    "@fibery/react": "1.4.6",
-    "@fibery/emoji-data": "2.7.1"
+    "@fibery/react": "1.4.6"
   },
   "peerDependencies": {
     "react": "18.3.1",

package/src/file-item-2.tsx

@@ -21,6 +21,7 @@ import {copyToClipboard} from "./copy-to-clipboard";
 import {useToast} from "./toast/toast-provider";
 import {Icon} from "./icons/Icon";
 import {useImagesGalleryMethods, useImagesGalleryRegistry} from "./images-gallery/images-gallery";
+import {isPhoneApp} from "./use-is-phone";
 
 const fileItemStyle = css`
   display: block;
@@ -79,12 +80,14 @@ export type FileItemType = {
 
 export type FileItemProps = {
   data: FileItemType;
+  onDownloadClick?: () => void;
   onRemoveClick?: (x: FileItemType) => void;
   disabled?: boolean;
 };
 
 export function FileItem(props: FileItemProps) {
-  const {name, url, thumbnailUrl, status, previewData: preview, contentType} = props.data;
+  const {onDownloadClick, onRemoveClick} = props;
+  const {name, thumbnailUrl, status, previewData: preview, contentType} = props.data;
   const isPending = status === "uploading" || status === "deleting";
   const isBackgroundReady = Boolean(thumbnailUrl && !isPending);
   const [isActionsOpened, setIsActionsOpened] = useState(false);
@@ -105,9 +108,9 @@ export function FileItem(props: FileItemProps) {
       src: preview.originalSrc,
       zoomed: false,
       setZoomed,
-      actions: <FilePreviewActions url={preview.originalSrc} name={name} />,
+      actions: <FilePreviewActions url={preview.originalSrc} name={name} onDownloadClick={onDownloadClick} />,
     });
-  }, [imagesRegistry, name, preview]);
+  }, [imagesRegistry, name, preview, onDownloadClick]);
 
   useEffect(() => {
     if (!preview) {
@@ -126,18 +129,18 @@ export function FileItem(props: FileItemProps) {
         src: preview.originalSrc,
         zoomed,
         setZoomed,
-        actions: <FilePreviewActions url={preview.originalSrc} name={name} />,
+        actions: <FilePreviewActions url={preview.originalSrc} name={name} onDownloadClick={onDownloadClick} />,
       });
     }
-  }, [galleryMethods, zoomed, preview, imagesRegistry, name]);
+  }, [galleryMethods, zoomed, preview, imagesRegistry, name, onDownloadClick]);
 
   const onContainerClick = useCallback(() => {
     if (preview) {
       setZoomed(true);
     } else {
-      stratFileDownload(url, name);
+      onDownloadClick?.();
     }
-  }, [name, preview, url]);
+  }, [preview, onDownloadClick]);
 
   return (
     <div
@@ -248,7 +251,8 @@ export function FileItem(props: FileItemProps) {
                 data={props.data}
                 disabled={props.disabled}
                 isBackgroundReady={isBackgroundReady}
-                onRemoveClick={props.onRemoveClick}
+                onDownloadClick={onDownloadClick}
+                onRemoveClick={onRemoveClick}
               />
             </div>
           </div>
@@ -278,6 +282,7 @@ export function FileItem(props: FileItemProps) {
                   data={props.data}
                   disabled={props.disabled}
                   isBackgroundReady={isBackgroundReady}
+                  onDownloadClick={onDownloadClick}
                   onRemoveClick={props.onRemoveClick}
                 />
               </div>
@@ -305,10 +310,12 @@ function FileActionsMenu({
   data,
   disabled,
   setIsActionsOpened,
+  onDownloadClick,
   onRemoveClick,
   isBackgroundReady,
 }: {
   data: FileItemType;
+  onDownloadClick?: () => void;
   onRemoveClick?: (data: FileItemType) => void;
   disabled?: boolean;
   setIsActionsOpened: (val: boolean) => void;
@@ -339,11 +346,19 @@ function FileActionsMenu({
         Copy file URL
       </ActionsMenuItem>
       <a href={data.url} target="_blank" rel="noopener noreferrer">
-        <ActionsMenuItem Icon={RicheditorOpenLink}>Open in new tab</ActionsMenuItem>
-      </a>
-      <a download={data.name} href={`${data.url}?attachment`}>
-        <ActionsMenuItem Icon={FileDownload}>Download</ActionsMenuItem>
+        <ActionsMenuItem Icon={RicheditorOpenLink}>
+          {isPhoneApp() ? "Open in browser" : "Open in new tab"}
+        </ActionsMenuItem>
       </a>
+      {isPhoneApp() ? (
+        <ActionsMenuItem Icon={FileDownload} onSelect={onDownloadClick}>
+          Download
+        </ActionsMenuItem>
+      ) : (
+        <a download={data.name} href={`${data.url}?attachment`}>
+          <ActionsMenuItem Icon={FileDownload}>Download</ActionsMenuItem>
+        </a>
+      )}
       <ActionsMenuSeparator />
       <ActionsMenuItem Icon={Delete} onSelect={() => onRemoveClick?.(data)} dangerous disabled={disabled}>
         Delete
@@ -387,7 +402,20 @@ function FileTitle({title, className}: {title: string; className?: string}) {
   );
 }
 
-function FilePreviewActions({url, name}: {url: string; name: string}) {
+function FilePreviewActions({url, name, onDownloadClick}: {url: string; name: string; onDownloadClick?: () => void}) {
+  if (isPhoneApp()) {
+    return (
+      <>
+        <a href={url} target="_blank" rel="noopener noreferrer">
+          <ActionsMenuItem Icon={RicheditorOpenLink}>Open in browser</ActionsMenuItem>
+        </a>
+        <ActionsMenuItem Icon={FileDownload} onSelect={onDownloadClick}>
+          Download
+        </ActionsMenuItem>
+      </>
+    );
+  }
+
   return (
     <>
       <a href={url} target="_blank" rel="noopener noreferrer">
@@ -400,17 +428,6 @@ function FilePreviewActions({url, name}: {url: string; name: string}) {
   );
 }
 
-function stratFileDownload(url: string, filename: string) {
-  const a = document.createElement("a");
-  a.href = `${url}?attachment`;
-  a.download = filename;
-  a.style.display = "none";
-
-  document.body.appendChild(a);
-  a.click();
-  document.body.removeChild(a);
-}
-
 function FileIcon({contentType}: {contentType: string}) {
   if (contentType.startsWith("image/")) {
     return <FileImage />;

package/src/file-item.tsx

@@ -13,6 +13,7 @@ import Link from "./icons/react/Link";
 import Pencil from "./icons/react/Pencil";
 import {copyToClipboard} from "./copy-to-clipboard";
 import {useToast} from "./toast/toast-provider";
+import {isPhoneApp} from "./use-is-phone";
 
 const fileItemStyle = css`
   ${{
@@ -86,12 +87,14 @@ export type FileItemType = {
 
 export type FileItemProps = {
   data: FileItemType;
+  onDownloadClick?: () => void;
   onRemoveClick?: (x: FileItemType) => void;
   disabled?: boolean;
   onRenameClick?: (p: {id: string; name: string}) => void;
 };
 
 export function FileItem(props: FileItemProps) {
+  const {onDownloadClick, onRemoveClick} = props;
   const {name, url, thumbnailUrl, status, previewData: preview} = props.data;
   const isActive = status === "uploading" || status === "deleting";
   const isBackgroundReady = thumbnailUrl && !isActive;
@@ -111,12 +114,12 @@ export function FileItem(props: FileItemProps) {
       contentType: preview.contentType,
       zoomed: false,
       setZoomed,
-      actions: <FilePreviewActions url={preview.originalSrc} name={name} />,
+      actions: <FilePreviewActions url={preview.originalSrc} name={name} onDownloadClick={onDownloadClick} />,
     });
     return () => {
       imagesRegistry.delete(preview.originalSrc);
     };
-  }, [imagesRegistry, name, preview]);
+  }, [imagesRegistry, name, preview, onDownloadClick]);
 
   useEffect(() => {
     if (!preview) {
@@ -136,25 +139,18 @@ export function FileItem(props: FileItemProps) {
         contentType: preview.contentType,
         zoomed,
         setZoomed,
-        actions: <FilePreviewActions url={preview.originalSrc} name={name} />,
+        actions: <FilePreviewActions url={preview.originalSrc} name={name} onDownloadClick={onDownloadClick} />,
       });
     }
-  }, [galleryMethods, zoomed, preview, imagesRegistry, name]);
+  }, [galleryMethods, zoomed, preview, imagesRegistry, name, onDownloadClick]);
 
   const onContainerClick = useCallback(() => {
     if (preview) {
       setZoomed(true);
     } else {
-      const a = document.createElement("a");
-      a.href = `${url}?attachment`;
-      a.download = name;
-      a.style.display = "none";
-
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
+      onDownloadClick?.();
     }
-  }, [name, preview, url]);
+  }, [preview, onDownloadClick]);
 
   return (
     <div
@@ -211,9 +207,15 @@ export function FileItem(props: FileItemProps) {
                   <a href={url} target="_blank" rel="noopener noreferrer">
                     <ActionsMenuItem Icon={RicheditorOpenLink}>Open in new tab</ActionsMenuItem>
                   </a>
-                  <a download={name} href={props.data.downloadUrl ?? url}>
-                    <ActionsMenuItem Icon={FileDownload}>Download</ActionsMenuItem>
-                  </a>
+                  {isPhoneApp() ? (
+                    <ActionsMenuItem Icon={FileDownload} onSelect={onDownloadClick}>
+                      Download
+                    </ActionsMenuItem>
+                  ) : (
+                    <a download={name} href={props.data.downloadUrl ?? url}>
+                      <ActionsMenuItem Icon={FileDownload}>Download</ActionsMenuItem>
+                    </a>
+                  )}
                   {props.onRenameClick && status === "done" ? (
                     <ActionsMenuItem
                       Icon={Pencil}
@@ -224,7 +226,7 @@ export function FileItem(props: FileItemProps) {
                   ) : null}
                   <ActionsMenuItem
                     Icon={Delete}
-                    onSelect={() => props.onRemoveClick?.(props.data)}
+                    onSelect={() => onRemoveClick?.(props.data)}
                     dangerous
                     disabled={props.disabled}
                   >
@@ -288,7 +290,20 @@ function resolveStatusText(status?: string) {
   return statusText;
 }
 
-function FilePreviewActions({url, name}: {url: string; name: string}) {
+function FilePreviewActions({url, name, onDownloadClick}: {url: string; name: string; onDownloadClick?: () => void}) {
+  if (isPhoneApp()) {
+    return (
+      <>
+        <a href={url} target="_blank" rel="noopener noreferrer">
+          <ActionsMenuItem Icon={RicheditorOpenLink}>Open in browser</ActionsMenuItem>
+        </a>
+        <ActionsMenuItem Icon={FileDownload} onSelect={onDownloadClick}>
+          Download
+        </ActionsMenuItem>
+      </>
+    );
+  }
+
   return (
     <>
       <a href={url} target="_blank" rel="noopener noreferrer">