mirror of
https://github.com/docmost/docmost.git
synced 2026-08-30 10:26:25 +08:00
feat: synced blocks (transclusion) (#2163)
* feat: synced blocks (transclusion) * fix:remove name * make placeholders smaller * feat: enforce strict transclusion schema * fix: scope synced blocks to workspace, gate unsync on edit permission * fix collab module error
This commit is contained in:
Philip Okugbe
+205
@@ -0,0 +1,205 @@
|
||||
.trigger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 3px 6px 3px 6px;
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-size: var(--mantine-font-size-xs);
|
||||
color: light-dark(
|
||||
var(--mantine-color-gray-7),
|
||||
var(--mantine-color-dark-1)
|
||||
);
|
||||
transition: background 120ms ease;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.trigger:hover {
|
||||
background: light-dark(
|
||||
var(--mantine-color-gray-1),
|
||||
var(--mantine-color-dark-5)
|
||||
);
|
||||
}
|
||||
|
||||
.triggerIcon {
|
||||
color: light-dark(
|
||||
var(--mantine-color-gray-5),
|
||||
var(--mantine-color-dark-2)
|
||||
);
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.triggerChev {
|
||||
color: light-dark(
|
||||
var(--mantine-color-gray-5),
|
||||
var(--mantine-color-dark-2)
|
||||
);
|
||||
display: inline-flex;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.banner {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 10px 14px;
|
||||
background: light-dark(
|
||||
var(--mantine-color-gray-0),
|
||||
var(--mantine-color-dark-6)
|
||||
);
|
||||
border-bottom: 1px solid
|
||||
light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
|
||||
color: light-dark(
|
||||
var(--mantine-color-gray-7),
|
||||
var(--mantine-color-dark-1)
|
||||
);
|
||||
font-size: var(--mantine-font-size-xs);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.bannerIcon {
|
||||
color: light-dark(
|
||||
var(--mantine-color-gray-6),
|
||||
var(--mantine-color-dark-2)
|
||||
);
|
||||
flex: none;
|
||||
display: inline-flex;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.bannerLink {
|
||||
color: light-dark(
|
||||
var(--mantine-color-gray-9),
|
||||
var(--mantine-color-dark-0)
|
||||
);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
text-decoration-thickness: 1px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.bannerLink:hover {
|
||||
text-decoration-thickness: 2px;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.sectionLabel {
|
||||
font-size: var(--mantine-font-size-xs);
|
||||
font-weight: 500;
|
||||
color: light-dark(
|
||||
var(--mantine-color-gray-6),
|
||||
var(--mantine-color-dark-2)
|
||||
);
|
||||
margin: 0 0 6px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 6px 8px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
color: light-dark(
|
||||
var(--mantine-color-gray-9),
|
||||
var(--mantine-color-dark-0)
|
||||
);
|
||||
font-size: var(--mantine-font-size-sm);
|
||||
text-decoration: none;
|
||||
transition: background 100ms ease;
|
||||
}
|
||||
|
||||
.row:hover {
|
||||
background: light-dark(
|
||||
var(--mantine-color-gray-1),
|
||||
var(--mantine-color-dark-5)
|
||||
);
|
||||
}
|
||||
|
||||
.rowIcon {
|
||||
color: light-dark(
|
||||
var(--mantine-color-gray-5),
|
||||
var(--mantine-color-dark-2)
|
||||
);
|
||||
flex: none;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.rowEmoji {
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
flex: none;
|
||||
display: inline-flex;
|
||||
width: 18px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.rowTitle {
|
||||
font-weight: 500;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 2px 7px;
|
||||
border-radius: 999px;
|
||||
background: light-dark(
|
||||
var(--mantine-color-gray-1),
|
||||
var(--mantine-color-dark-5)
|
||||
);
|
||||
color: light-dark(
|
||||
var(--mantine-color-gray-7),
|
||||
var(--mantine-color-dark-1)
|
||||
);
|
||||
text-transform: uppercase;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.badgeAccent {
|
||||
background: light-dark(
|
||||
var(--mantine-color-blue-0),
|
||||
var(--mantine-color-blue-9)
|
||||
);
|
||||
color: light-dark(
|
||||
var(--mantine-color-blue-7),
|
||||
var(--mantine-color-blue-2)
|
||||
);
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: 18px 14px;
|
||||
text-align: center;
|
||||
color: light-dark(
|
||||
var(--mantine-color-gray-6),
|
||||
var(--mantine-color-dark-2)
|
||||
);
|
||||
font-size: var(--mantine-font-size-xs);
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 18px;
|
||||
}
|
||||
@@ -0,0 +1,184 @@
|
||||
import { useState } from "react";
|
||||
import { Loader, Popover } from "@mantine/core";
|
||||
import {
|
||||
IconChevronDown,
|
||||
IconCornerDownLeft,
|
||||
IconFile,
|
||||
IconInfoCircle,
|
||||
} from "@tabler/icons-react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Trans, useTranslation } from "react-i18next";
|
||||
import { useReferencesQuery } from "@/features/transclusion/queries/transclusion-query";
|
||||
import type { ReferencingPage } from "@/features/transclusion/types/transclusion.types";
|
||||
import { buildPageUrl } from "@/features/page/page.utils";
|
||||
import classes from "./sync-block-references-dropdown.module.css";
|
||||
|
||||
type Props = {
|
||||
sourcePageId: string | null;
|
||||
transclusionId: string | null;
|
||||
/** The page currently being viewed - used to mark the "THIS PAGE" badge. */
|
||||
currentPageId: string;
|
||||
/**
|
||||
* Source: trigger reads "Editing original".
|
||||
* Reference: trigger reads "Synced to N other pages".
|
||||
*/
|
||||
mode: "source" | "reference";
|
||||
/** Notified whenever the dropdown opens/closes (for keep-chrome-visible). */
|
||||
onOpenChange?: (open: boolean) => void;
|
||||
};
|
||||
|
||||
export default function SyncBlockReferencesDropdown({
|
||||
sourcePageId,
|
||||
transclusionId,
|
||||
currentPageId,
|
||||
mode,
|
||||
onOpenChange,
|
||||
}: Props) {
|
||||
const { t } = useTranslation();
|
||||
const [opened, setOpened] = useState(false);
|
||||
|
||||
const handleOpenChange = (next: boolean) => {
|
||||
setOpened(next);
|
||||
onOpenChange?.(next);
|
||||
};
|
||||
|
||||
// Fetch eagerly so the "Synced to N other pages" count is correct even
|
||||
// before the dropdown is opened. The cache is keyed on (sourcePageId,
|
||||
// transclusionId), so two views (source + reference) share one fetch.
|
||||
const enabled = !!sourcePageId && !!transclusionId;
|
||||
const { data, isLoading } = useReferencesQuery(
|
||||
sourcePageId,
|
||||
transclusionId,
|
||||
enabled,
|
||||
);
|
||||
|
||||
const allPages: Array<{ page: ReferencingPage; isOriginal: boolean }> = [];
|
||||
if (data?.source) {
|
||||
allPages.push({ page: data.source, isOriginal: true });
|
||||
}
|
||||
for (const ref of data?.references ?? []) {
|
||||
allPages.push({ page: ref, isOriginal: false });
|
||||
}
|
||||
|
||||
const otherCount = allPages.filter((p) => p.page.id !== currentPageId).length;
|
||||
const label =
|
||||
mode === "source"
|
||||
? t("Editing original")
|
||||
: t("Synced to {{count}} other page", {
|
||||
count: otherCount,
|
||||
defaultValue_one: "Synced to {{count}} other page",
|
||||
defaultValue_other: "Synced to {{count}} other pages",
|
||||
});
|
||||
|
||||
return (
|
||||
<Popover
|
||||
position="bottom-start"
|
||||
shadow="lg"
|
||||
opened={opened}
|
||||
onChange={handleOpenChange}
|
||||
width={340}
|
||||
withinPortal
|
||||
>
|
||||
<Popover.Target>
|
||||
<button
|
||||
type="button"
|
||||
className={classes.trigger}
|
||||
onClick={() => handleOpenChange(!opened)}
|
||||
aria-expanded={opened}
|
||||
aria-haspopup="dialog"
|
||||
>
|
||||
<span className={classes.triggerIcon}>
|
||||
<IconCornerDownLeft size={14} stroke={1.8} />
|
||||
</span>
|
||||
<span>{label}</span>
|
||||
<span className={classes.triggerChev}>
|
||||
<IconChevronDown size={12} stroke={2} />
|
||||
</span>
|
||||
</button>
|
||||
</Popover.Target>
|
||||
|
||||
<Popover.Dropdown className={classes.dropdown}>
|
||||
{mode === "reference" && data?.source && (
|
||||
<div className={classes.banner}>
|
||||
<span className={classes.bannerIcon}>
|
||||
<IconInfoCircle size={16} stroke={1.6} />
|
||||
</span>
|
||||
<div>
|
||||
<Trans
|
||||
i18nKey="sourceReadOnlyHint"
|
||||
defaults="This section is read-only here. Edit it on the <link>original source page</link>."
|
||||
components={{
|
||||
link: (
|
||||
<Link
|
||||
to={
|
||||
data.source.spaceSlug
|
||||
? buildPageUrl(
|
||||
data.source.spaceSlug,
|
||||
data.source.slugId,
|
||||
data.source.title,
|
||||
)
|
||||
: `/p/${data.source.id}`
|
||||
}
|
||||
className={classes.bannerLink}
|
||||
onClick={() => handleOpenChange(false)}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLoading ? (
|
||||
<div className={classes.loading}>
|
||||
<Loader size="xs" />
|
||||
</div>
|
||||
) : allPages.length === 0 ? (
|
||||
<div className={classes.empty}>{t("No pages")}</div>
|
||||
) : (
|
||||
<div className={classes.section}>
|
||||
<div className={classes.sectionLabel}>{t("Synced to")}</div>
|
||||
<ul className={classes.list}>
|
||||
{allPages.map(({ page, isOriginal }) => {
|
||||
const isCurrent = page.id === currentPageId;
|
||||
const href = page.spaceSlug
|
||||
? buildPageUrl(page.spaceSlug, page.slugId, page.title)
|
||||
: `/p/${page.id}`;
|
||||
const title = page.title?.length ? page.title : t("Untitled");
|
||||
return (
|
||||
<li key={page.id}>
|
||||
<Link
|
||||
to={href}
|
||||
className={classes.row}
|
||||
onClick={() => handleOpenChange(false)}
|
||||
>
|
||||
{page.icon ? (
|
||||
<span className={classes.rowEmoji}>{page.icon}</span>
|
||||
) : (
|
||||
<span className={classes.rowIcon}>
|
||||
<IconFile size={16} stroke={1.6} />
|
||||
</span>
|
||||
)}
|
||||
<span className={classes.rowTitle} title={title}>
|
||||
{title}
|
||||
</span>
|
||||
{isCurrent ? (
|
||||
<span
|
||||
className={`${classes.badge} ${classes.badgeAccent}`}
|
||||
>
|
||||
{t("THIS PAGE")}
|
||||
</span>
|
||||
) : isOriginal ? (
|
||||
<span className={classes.badge}>{t("ORIGINAL")}</span>
|
||||
) : null}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import {
|
||||
listReferences,
|
||||
unsyncReference,
|
||||
} from "../services/transclusion-api";
|
||||
|
||||
export function useReferencesQuery(
|
||||
sourcePageId: string | null,
|
||||
transclusionId: string | null,
|
||||
enabled: boolean,
|
||||
) {
|
||||
return useQuery({
|
||||
queryKey: ["transclusion-references", sourcePageId, transclusionId],
|
||||
queryFn: () =>
|
||||
listReferences({
|
||||
sourcePageId: sourcePageId!,
|
||||
transclusionId: transclusionId!,
|
||||
}),
|
||||
enabled: enabled && !!sourcePageId && !!transclusionId,
|
||||
staleTime: 10 * 1000,
|
||||
});
|
||||
}
|
||||
|
||||
export function useUnsyncReferenceMutation() {
|
||||
return useMutation({
|
||||
mutationFn: (params: {
|
||||
referencePageId: string;
|
||||
sourcePageId: string;
|
||||
transclusionId: string;
|
||||
}) => unsyncReference(params),
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import api from "@/lib/api-client";
|
||||
import type {
|
||||
ReferencingPagesResponse,
|
||||
TransclusionLookup,
|
||||
} from "../types/transclusion.types";
|
||||
|
||||
export async function lookupTransclusion(params: {
|
||||
references: Array<{ sourcePageId: string; transclusionId: string }>;
|
||||
}): Promise<{ items: TransclusionLookup[] }> {
|
||||
const r = await api.post("/pages/transclusion/lookup", params);
|
||||
return r.data;
|
||||
}
|
||||
|
||||
export async function lookupTransclusionForShare(params: {
|
||||
shareId: string;
|
||||
references: Array<{ sourcePageId: string; transclusionId: string }>;
|
||||
}): Promise<{ items: TransclusionLookup[] }> {
|
||||
const r = await api.post("/shares/transclusion/lookup", params);
|
||||
return r.data;
|
||||
}
|
||||
|
||||
export async function listReferences(params: {
|
||||
sourcePageId: string;
|
||||
transclusionId: string;
|
||||
}): Promise<ReferencingPagesResponse> {
|
||||
const r = await api.post("/pages/transclusion/references", params);
|
||||
return r.data;
|
||||
}
|
||||
|
||||
export async function unsyncReference(params: {
|
||||
referencePageId: string;
|
||||
sourcePageId: string;
|
||||
transclusionId: string;
|
||||
}): Promise<{ content: unknown }> {
|
||||
const r = await api.post("/pages/transclusion/unsync-reference", params);
|
||||
return r.data;
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
export type TransclusionLookup =
|
||||
| {
|
||||
sourcePageId: string;
|
||||
transclusionId: string;
|
||||
content: unknown;
|
||||
sourceUpdatedAt: string;
|
||||
}
|
||||
| { sourcePageId: string; transclusionId: string; status: "not_found" }
|
||||
| { sourcePageId: string; transclusionId: string; status: "no_access" };
|
||||
|
||||
export type ReferencingPage = {
|
||||
id: string;
|
||||
slugId: string;
|
||||
title: string | null;
|
||||
icon: string | null;
|
||||
spaceId: string;
|
||||
spaceSlug: string | null;
|
||||
};
|
||||
|
||||
export type ReferencingPagesResponse = {
|
||||
source: ReferencingPage | null;
|
||||
references: ReferencingPage[];
|
||||
};
|
||||
Reference in New Issue
Block a user