Ryan/docmost-ryan
1
0
Fork 0
mirror of https://github.com/Shadowfita/docmost.git synced 2025-11-13 08:12:32 +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 { useMemo } from "react";
import { Image } from "@mantine/core"; import { Image } from "@mantine/core";
import { getFileUrl } from "@/lib/config.ts"; import { getFileUrl } from "@/lib/config.ts";
import clsx from "clsx";
export default function ImageView(props: NodeViewProps) { export default function ImageView(props: NodeViewProps) {
const { node, selected } = props; const { node, selected } = props;
const { src, width, align, title } = node.attrs; const { src, width, align, title } = node.attrs;
const flexJustifyContent = useMemo(() => { const alignClass = useMemo(() => {
if (align === "center") return "center"; if (align === "left") return "alignLeft";
if (align === "right") return "flex-end"; if (align === "right") return "alignRight";
return "flex-start"; if (align === "center") return "alignCenter";
return "alignCenter";
}, [align]); }, [align]);
return ( return (
<NodeViewWrapper <NodeViewWrapper>
style={{
position: "relative",
display: "flex",
justifyContent: flexJustifyContent,
}}
>
<Image <Image
radius="md" radius="md"
fit="contain" fit="contain"
w={width} w={width}
src={getFileUrl(src)} src={getFileUrl(src)}
alt={title} alt={title}
className={selected ? "ProseMirror-selectednode" : ""} className={clsx(selected ? "ProseMirror-selectednode" : "", alignClass)}
/> />
</NodeViewWrapper> </NodeViewWrapper>
); );

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

@ -1,31 +1,27 @@
import { NodeViewProps, NodeViewWrapper } from "@tiptap/react"; import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
import { useMemo } from "react"; import { useMemo } from "react";
import { getFileUrl } from "@/lib/config.ts"; import { getFileUrl } from "@/lib/config.ts";
import clsx from "clsx";
export default function VideoView(props: NodeViewProps) { export default function VideoView(props: NodeViewProps) {
const { node, selected } = props; const { node, selected } = props;
const { src, width, align } = node.attrs; const { src, width, align } = node.attrs;
const flexJustifyContent = useMemo(() => { const alignClass = useMemo(() => {
if (align === "center") return "center"; if (align === "left") return "alignLeft";
if (align === "right") return "flex-end"; if (align === "right") return "alignRight";
return "flex-start"; if (align === "center") return "alignCenter";
return "alignCenter";
}, [align]); }, [align]);
return ( return (
<NodeViewWrapper <NodeViewWrapper>
style={{
position: "relative",
display: "flex",
justifyContent: flexJustifyContent,
}}
>
<video <video
preload="metadata" preload="metadata"
width={width} width={width}
controls controls
src={getFileUrl(src)} src={getFileUrl(src)}
className={selected ? "ProseMirror-selectednode" : ""} className={clsx(selected ? "ProseMirror-selectednode" : "", alignClass)}
/> />
</NodeViewWrapper> </NodeViewWrapper>
); );

15
apps/client/src/features/editor/styles/core.css
View File

@ -125,6 +125,21 @@
cursor: ew-resize; cursor: ew-resize;
cursor: col-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 { .ProseMirror-icon {