From 9f583174a9a1c0af1ce11f1fe5b97e3d67b161e2 Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Wed, 3 Jul 2024 11:53:09 +0100
Subject: [PATCH] fix media visibility in firefox

---
 .../editor/components/image/image-view.tsx    | 20 ++++++++-----------
 .../editor/components/video/video-view.tsx    | 20 ++++++++-----------
 .../src/features/editor/styles/core.css       | 15 ++++++++++++++
 3 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/apps/client/src/features/editor/components/image/image-view.tsx b/apps/client/src/features/editor/components/image/image-view.tsx
index be6888b..87ce41d 100644
--- a/apps/client/src/features/editor/components/image/image-view.tsx
+++ b/apps/client/src/features/editor/components/image/image-view.tsx
@@ -2,32 +2,28 @@ import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
 import { useMemo } from "react";
 import { Image } from "@mantine/core";
 import { getFileUrl } from "@/lib/config.ts";
+import clsx from "clsx";
 
 export default function ImageView(props: NodeViewProps) {
   const { node, selected } = props;
   const { src, width, align, title } = node.attrs;
 
-  const flexJustifyContent = useMemo(() => {
-    if (align === "center") return "center";
-    if (align === "right") return "flex-end";
-    return "flex-start";
+  const alignClass = useMemo(() => {
+    if (align === "left") return "alignLeft";
+    if (align === "right") return "alignRight";
+    if (align === "center") return "alignCenter";
+    return "alignCenter";
   }, [align]);
 
   return (
-    <NodeViewWrapper
-      style={{
-        position: "relative",
-        display: "flex",
-        justifyContent: flexJustifyContent,
-      }}
-    >
+    <NodeViewWrapper>
       <Image
         radius="md"
         fit="contain"
         w={width}
         src={getFileUrl(src)}
         alt={title}
-        className={selected ? "ProseMirror-selectednode" : ""}
+        className={clsx(selected ? "ProseMirror-selectednode" : "", alignClass)}
       />
     </NodeViewWrapper>
   );
diff --git a/apps/client/src/features/editor/components/video/video-view.tsx b/apps/client/src/features/editor/components/video/video-view.tsx
index 21f25d6..40b646a 100644
--- a/apps/client/src/features/editor/components/video/video-view.tsx
+++ b/apps/client/src/features/editor/components/video/video-view.tsx
@@ -1,31 +1,27 @@
 import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
 import { useMemo } from "react";
 import { getFileUrl } from "@/lib/config.ts";
+import clsx from "clsx";
 
 export default function VideoView(props: NodeViewProps) {
   const { node, selected } = props;
   const { src, width, align } = node.attrs;
 
-  const flexJustifyContent = useMemo(() => {
-    if (align === "center") return "center";
-    if (align === "right") return "flex-end";
-    return "flex-start";
+  const alignClass = useMemo(() => {
+    if (align === "left") return "alignLeft";
+    if (align === "right") return "alignRight";
+    if (align === "center") return "alignCenter";
+    return "alignCenter";
   }, [align]);
 
   return (
-    <NodeViewWrapper
-      style={{
-        position: "relative",
-        display: "flex",
-        justifyContent: flexJustifyContent,
-      }}
-    >
+    <NodeViewWrapper>
       <video
         preload="metadata"
         width={width}
         controls
         src={getFileUrl(src)}
-        className={selected ? "ProseMirror-selectednode" : ""}
+        className={clsx(selected ? "ProseMirror-selectednode" : "", alignClass)}
       />
     </NodeViewWrapper>
   );
diff --git a/apps/client/src/features/editor/styles/core.css b/apps/client/src/features/editor/styles/core.css
index f470554..d2a09f1 100644
--- a/apps/client/src/features/editor/styles/core.css
+++ b/apps/client/src/features/editor/styles/core.css
@@ -125,6 +125,21 @@
     cursor: ew-resize;
     cursor: col-resize;
   }
+
+  .alignLeft {
+    margin-left: 0;
+    margin-right: auto;
+  }
+
+  .alignRight {
+    margin-right: 0;
+    margin-left: auto;
+  }
+
+  .alignCenter {
+    margin-left: auto;
+    margin-right: auto;
+  }
 }
 
 .ProseMirror-icon {