fix media

apps/client/src/features/editor/components/video/video-view.module.css

@@ -2,6 +2,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  max-width: 100%;
   border-radius: 8px;
   overflow: hidden;
   animation: pulse 1.2s ease-in-out infinite;

packages/editor-ext/src/lib/drawio.ts

@@ -318,12 +318,16 @@ export const Drawio = Node.create<DrawioOptions>({
         });
       }
 
-      // Hide until image loads
+      // Show skeleton background while image loads from server
-      dom.style.visibility = "hidden";
       dom.style.pointerEvents = "none";
+      dom.style.overflow = "hidden";
+      dom.style.borderRadius = "8px";
+      dom.style.background =
+        "light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6))";
+
       el.onload = () => {
-        dom.style.visibility = "";
         dom.style.pointerEvents = "";
+        dom.style.background = "";
       };
 
       return nodeView;

packages/editor-ext/src/lib/excalidraw.ts

@@ -318,12 +318,16 @@ export const Excalidraw = Node.create<ExcalidrawOptions>({
         });
       }
 
-      // Hide until image loads
+      // Show skeleton background while image loads from server
-      dom.style.visibility = "hidden";
       dom.style.pointerEvents = "none";
+      dom.style.overflow = "hidden";
+      dom.style.borderRadius = "8px";
+      dom.style.background =
+        "light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6))";
+
       el.onload = () => {
-        dom.style.visibility = "";
         dom.style.pointerEvents = "";
+        dom.style.background = "";
       };
 
       return nodeView;

packages/editor-ext/src/lib/video/video.ts

@@ -231,6 +231,13 @@ export const TiptapVideo = Node.create<VideoOptions>({
       el.style.maxWidth = "100%";
       el.style.borderRadius = "8px";
 
+      if (typeof node.attrs.width === "number" && node.attrs.width > 0) {
+        el.style.width = `${node.attrs.width}px`;
+        if (typeof node.attrs.height === "number" && node.attrs.height > 0) {
+          el.style.height = `${node.attrs.height}px`;
+        }
+      }
+
       let currentNode = node;
 
       const nodeView = new ResizableNodeView({
@@ -319,12 +326,16 @@ export const TiptapVideo = Node.create<VideoOptions>({
         });
       }
 
-      // Hide until video metadata loads
+      // Show skeleton background while video loads from server
-      dom.style.visibility = "hidden";
       dom.style.pointerEvents = "none";
+      dom.style.overflow = "hidden";
+      dom.style.borderRadius = "8px";
+      dom.style.background =
+        "light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6))";
+
       el.onloadedmetadata = () => {
-        dom.style.visibility = "";
         dom.style.pointerEvents = "";
+        dom.style.background = "";
       };
 
       return nodeView;