Ryan/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2026-07-13 03:04:47 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix(base): apply embed width-extension after base loads, not just on mount

Browse Source 
useEffect ran once on mount with empty deps, but the wrapper div was
inside a conditional branch that only renders after the base query
resolves. Result: the ref was null when the effect ran, so nothing
extended. Move the wrapper outside the conditional so the ref is
always set, and re-run the effect when isLoading / isError / pageId
change so the extension applies once the table mounts.
This commit is contained in:
Philipinho
2026-04-27 03:43:38 +01:00
parent e0e87329f4
commit 8132b171f4
1 changed files with 21 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/editor/components/base-embed/base-embed-view.tsx
+21 -28
View File
@@ -24,6 +24,7 @@ function findWiderAncestor(el: HTMLElement): HTMLElement | null {
function applyExtension(wrapper: HTMLDivElement) {
const wrapperRect = wrapper.getBoundingClientRect();
if (wrapperRect.width === 0) return;
const wider = findWiderAncestor(wrapper);
if (!wider) {
wrapper.style.setProperty("--embed-shift", "0px");
@@ -45,6 +46,7 @@ function applyExtension(wrapper: HTMLDivElement) {
export function BaseEmbedView({ node }: NodeViewProps) {
const pageId = node.attrs.pageId as string | null;
const wrapperRef = useRef<HTMLDivElement | null>(null);
const { isLoading, isError } = useBaseQuery(pageId ?? "");
useEffect(() => {
const wrapper = wrapperRef.current;
@@ -63,44 +65,35 @@ export function BaseEmbedView({ node }: NodeViewProps) {
ro.disconnect();
window.removeEventListener("resize", update);
};
}, []);
}, [isLoading, isError, pageId]);
let content: React.ReactNode;
if (!pageId) {
return (
<NodeViewWrapper>
<Box p="md">
<Text c="red">Invalid base embed (missing page id)</Text>
</Box>
</NodeViewWrapper>
content = (
<Box p="md">
<Text c="red">Invalid base embed (missing page id)</Text>
</Box>
);
}
const { isLoading, isError } = useBaseQuery(pageId);
if (isLoading) {
return (
<NodeViewWrapper>
<Box p="md">
<Text c="dimmed">Loading...</Text>
</Box>
</NodeViewWrapper>
} else if (isLoading) {
content = (
<Box p="md">
<Text c="dimmed">Loading...</Text>
</Box>
);
}
if (isError) {
return (
<NodeViewWrapper>
<Box p="md" bg="gray.0" style={{ borderRadius: 8 }}>
<Text c="dimmed">You don't have access to this database.</Text>
</Box>
</NodeViewWrapper>
} else if (isError) {
content = (
<Box p="md" bg="gray.0" style={{ borderRadius: 8 }}>
<Text c="dimmed">You don't have access to this database.</Text>
</Box>
);
} else {
content = <BaseTable pageId={pageId} embedded />;
}
return (
<NodeViewWrapper>
<div ref={wrapperRef} style={{ minHeight: 200 }}>
<BaseTable pageId={pageId} embedded />
{content}
</div>
</NodeViewWrapper>
);