yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Alignment of caption on fullwidth images

Browse Source
This commit is contained in:
Tom Moor
2023-01-22 10:13:15 -05:00
parent 049f49ebe8
commit c1aa4c8dde
1 changed files with 14 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
shared/editor/nodes/Image.tsx
View File

@@ -594,7 +594,7 @@ const ImageComponent = (
onClick: (event: React.MouseEvent<HTMLDivElement>) => void; onClick: (event: React.MouseEvent<HTMLDivElement>) => void;
onDownload: (event: React.MouseEvent<HTMLButtonElement>) => void; onDownload: (event: React.MouseEvent<HTMLButtonElement>) => void;
onChangeSize: (props: { width: number; height?: number }) => void; onChangeSize: (props: { width: number; height?: number }) => void;
children: React.ReactNode; children: React.ReactElement;
view: EditorView; view: EditorView;
} }
) => { ) => {
@@ -721,27 +721,23 @@ const ImageComponent = (
}; };
}, [dragging, handlePointerMove, handlePointerUp]); }, [dragging, handlePointerMove, handlePointerUp]);
const style = isFullWidth const widthStyle = isFullWidth
? { width: contentWidth } ? { width: contentWidth }
: { width: size.width || "auto" }; : { width: size.width || "auto" };
const containerStyle = isFullWidth
? ({
"--offset": `${-(contentWidth - documentWidth) / 2}px`,
} as React.CSSProperties)
: undefined;
return ( return (
<div <div contentEditable={false} className={className} style={containerStyle}>
contentEditable={false}
className={className}
style={
isFullWidth
? ({
"--offset": `${-(contentWidth - documentWidth) / 2}px`,
} as React.CSSProperties)
: undefined
}
>
<ImageWrapper <ImageWrapper
isFullWidth={isFullWidth} isFullWidth={isFullWidth}
className={isSelected || dragging ? "ProseMirror-selectednode" : ""} className={isSelected || dragging ? "ProseMirror-selectednode" : ""}
onClick={dragging ? undefined : props.onClick} onClick={dragging ? undefined : props.onClick}
style={style} style={widthStyle}
> >
{!dragging && size.width > 60 && size.height > 60 && ( {!dragging && size.width > 60 && size.height > 60 && (
<Button onClick={props.onDownload}> <Button onClick={props.onDownload}>
@@ -750,7 +746,7 @@ const ImageComponent = (
)} )}
<ImageZoom zoomMargin={24}> <ImageZoom zoomMargin={24}>
<img <img
style={style} style={widthStyle}
src={sanitizeUrl(src) ?? ""} src={sanitizeUrl(src) ?? ""}
onLoad={(ev: React.SyntheticEvent<HTMLImageElement>) => { onLoad={(ev: React.SyntheticEvent<HTMLImageElement>) => {
// For some SVG's Firefox does not provide the naturalWidth, in this // For some SVG's Firefox does not provide the naturalWidth, in this
@@ -783,7 +779,9 @@ const ImageComponent = (
</> </>
)} )}
</ImageWrapper> </ImageWrapper>
{props.children} {isFullWidth
? React.cloneElement(props.children, { style: widthStyle })
: props.children}
</div> </div>
); );
}; };