Ryan/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2025-11-19 09:41:11 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix media visibility in firefox

Browse Source
This commit is contained in:
Philipinho
2024-07-03 11:53:09 +01:00
parent 05633082c5
commit 9f583174a9
3 changed files with 31 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>
);