fix placeholder

apps/client/src/features/editor/components/attachment/attachment-view.tsx

@@ -10,7 +10,7 @@ import { useCallback } from "react";
 export default function AttachmentView(props: NodeViewProps) {
   const { t } = useTranslation();
   const { editor, node, getPos, selected } = props;
-  const { url, name, size, mime, attachmentId } = node.attrs;
+  const { url, name, size, mime, attachmentId, placeholder } = node.attrs;
   const { hovered, ref } = useHover();
 
   const isPdf = mime === "application/pdf" || name?.toLowerCase().endsWith(".pdf");
@@ -49,14 +49,14 @@ export default function AttachmentView(props: NodeViewProps) {
           h={25}
         >
           <Group wrap="nowrap" gap="sm" style={{ minWidth: 0, flex: 1 }}>
-            {url ? (
+            {!url && placeholder ? (
-              <IconPaperclip size={20} style={{ flexShrink: 0 }} />
-            ) : (
               <Loader size={20} style={{ flexShrink: 0 }} />
+            ) : (
+              <IconPaperclip size={20} style={{ flexShrink: 0 }} />
             )}
 
             <Text component="span" size="md" truncate="end" style={{ minWidth: 0 }}>
-              {url ? name : t("Uploading {{name}}", { name })}
+              {!url && placeholder ? t("Uploading {{name}}", { name }) : name}
             </Text>
 
             <Text component="span" size="sm" c="dimmed" style={{ flexShrink: 0 }}>

apps/client/src/features/editor/components/audio/audio-view.tsx

@@ -29,7 +29,7 @@ export default function AudioView(props: NodeViewProps) {
 
   return (
     <NodeViewWrapper data-drag-handle>
-      <div className={`${classes.audioWrapper} ${!safeSrc ? classes.skeleton : ''}`}>
+      <div className={`${classes.audioWrapper} ${!safeSrc && placeholder ? classes.skeleton : ''}`}>
         {safeSrc && (
           <audio
             className={classes.audio}
@@ -49,7 +49,7 @@ export default function AudioView(props: NodeViewProps) {
             <Loader size={20} pos="absolute" top={6} right={6} />
           </Group>
         )}
-        {!safeSrc && !previewSrc && (
+        {!safeSrc && !previewSrc && placeholder && (
           <Group justify="center" wrap="nowrap" gap="xs" maw="100%" px="md" h={54}>
             <Loader size={20} style={{ flexShrink: 0 }} />
             <Text component="span" size="sm" truncate="end">
@@ -59,6 +59,9 @@ export default function AudioView(props: NodeViewProps) {
             </Text>
           </Group>
         )}
+        {!safeSrc && !previewSrc && !placeholder && (
+          <audio className={classes.audio} controls />
+        )}
       </div>
     </NodeViewWrapper>
   );

apps/client/src/features/editor/components/image/image-view.tsx

@@ -33,7 +33,7 @@ export default function ImageView(props: NodeViewProps) {
         className={clsx(
           selected && "ProseMirror-selectednode",
           classes.imageWrapper,
-          !src && classes.skeleton,
+          !src && placeholder && classes.skeleton,
           alignClass,
         )}
         style={{
@@ -55,7 +55,7 @@ export default function ImageView(props: NodeViewProps) {
             <Loader size={20} pos="absolute" bottom={6} right={6} />
           </Group>
         )}
-        {!src && !previewSrc && (
+        {!src && !previewSrc && placeholder && (
           <Group justify="center" wrap="nowrap" gap="xs" maw="100%" px="md">
             <Loader size={20} style={{ flexShrink: 0 }} />
             <Text component="span" size="sm" truncate="end">

apps/client/src/features/editor/components/pdf/pdf-view.tsx

@@ -73,15 +73,17 @@ export default function PdfView(props: NodeViewProps) {
   if (!src || !safeSrc) {
     return (
       <NodeViewWrapper data-drag-handle>
-        <div className={`${classes.pdfWrapper} ${classes.skeleton}`} style={{ height: 600 }}>
+        <div className={`${classes.pdfWrapper} ${placeholder ? classes.skeleton : ''}`} style={{ height: placeholder ? 600 : undefined }}>
-          <Group justify="center" wrap="nowrap" gap="xs" maw="100%" px="md">
+          {placeholder && (
-            <Loader size={20} style={{ flexShrink: 0 }} />
+            <Group justify="center" wrap="nowrap" gap="xs" maw="100%" px="md">
-            <Text component="span" size="sm" truncate="end">
+              <Loader size={20} style={{ flexShrink: 0 }} />
-              {placeholder?.name
+              <Text component="span" size="sm" truncate="end">
-                ? t("Uploading {{name}}", { name: placeholder.name })
+                {placeholder?.name
-                : t("Uploading file")}
+                  ? t("Uploading {{name}}", { name: placeholder.name })
-            </Text>
+                  : t("Uploading file")}
-          </Group>
+              </Text>
+            </Group>
+          )}
         </div>
       </NodeViewWrapper>
     );

apps/client/src/features/editor/components/video/video-view.tsx

@@ -33,7 +33,7 @@ export default function VideoView(props: NodeViewProps) {
         className={clsx(
           selected && "ProseMirror-selectednode",
           classes.videoWrapper,
-          !src && classes.skeleton,
+          !src && placeholder && classes.skeleton,
           alignClass,
         )}
         style={{
@@ -60,7 +60,7 @@ export default function VideoView(props: NodeViewProps) {
             <Loader size={20} pos="absolute" top={6} right={6} />
           </Group>
         )}
-        {!src && !previewSrc && (
+        {!src && !previewSrc && placeholder && (
           <Group justify="center" wrap="nowrap" gap="xs" maw="100%" px="md">
             <Loader size={20} style={{ flexShrink: 0 }} />
             <Text component="span" size="sm" truncate="end">
@@ -70,6 +70,9 @@ export default function VideoView(props: NodeViewProps) {
             </Text>
           </Group>
         )}
+        {!src && !previewSrc && !placeholder && (
+          <video className={classes.video} controls />
+        )}
       </div>
     </NodeViewWrapper>
   );