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

fix: Full-width images have margin on side since #5197

Browse Source
This commit is contained in:
Tom Moor
2023-04-18 20:11:11 -04:00
parent e4fb151a71
commit 961afe7dc5
1 changed files with 12 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
shared/editor/components/Image.tsx
View File

@@ -36,7 +36,7 @@ const Image = (
const [offset, setOffset] = React.useState(0); const [offset, setOffset] = React.useState(0);
const [dragging, setDragging] = React.useState<DragDirection>(); const [dragging, setDragging] = React.useState<DragDirection>();
const [documentWidth, setDocumentWidth] = React.useState( const [documentWidth, setDocumentWidth] = React.useState(
props.view?.dom.clientWidth || 0 props.view ? getInnerWidth(props.view.dom) : 0
); );
const maxWidth = layoutClass ? documentWidth / 3 : documentWidth; const maxWidth = layoutClass ? documentWidth / 3 : documentWidth;
const isFullWidth = layoutClass === "full-width"; const isFullWidth = layoutClass === "full-width";
@@ -51,7 +51,7 @@ const Image = (
const contentWidth = const contentWidth =
document.body.querySelector("#full-width-container")?.clientWidth || 0; document.body.querySelector("#full-width-container")?.clientWidth || 0;
setContentWidth(contentWidth); setContentWidth(contentWidth);
setDocumentWidth(props.view?.dom.clientWidth || 0); setDocumentWidth(props.view ? getInnerWidth(props.view.dom) : 0);
}; };
window.addEventListener("resize", handleResize); window.addEventListener("resize", handleResize);
@@ -232,6 +232,16 @@ const Image = (
); );
}; };
function getInnerWidth(element: Element) {
const computedStyle = window.getComputedStyle(element, null);
let width = element.clientWidth;
width -=
parseFloat(computedStyle.paddingLeft) +
parseFloat(computedStyle.paddingRight);
return width;
}
function getPlaceholder(width: number, height: number) { function getPlaceholder(width: number, height: number) {
return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" />`; return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" />`;
} }