diff --git a/apps/client/package.json b/apps/client/package.json index 404df47e..d21e178b 100644 --- a/apps/client/package.json +++ b/apps/client/package.json @@ -54,7 +54,6 @@ "react-router-dom": "^7.13.1", "semver": "^7.7.4", "socket.io-client": "^4.8.3", - "tiptap-extension-global-drag-handle": "^0.1.18", "zod": "^4.3.6" }, "devDependencies": { diff --git a/apps/client/public/locales/en-US/translation.json b/apps/client/public/locales/en-US/translation.json index 56709bbe..3d1c611e 100644 --- a/apps/client/public/locales/en-US/translation.json +++ b/apps/client/public/locales/en-US/translation.json @@ -900,5 +900,17 @@ "SCIM tokens": "SCIM tokens", "This action cannot be undone. Your identity provider will stop syncing immediately.": "This action cannot be undone. Your identity provider will stop syncing immediately.", "Toggle SCIM provisioning": "Toggle SCIM provisioning", - "Token": "Token" + "Token": "Token", + "Sync block": "Sync block", + "Create a block that stays in sync across pages.": "Create a block that stays in sync across pages.", + "Sync block name": "Sync block name", + "Editing original": "Editing original", + "Copy synced block": "Copy synced block", + "Unsync": "Unsync", + "Delete sync block": "Delete sync block", + "Synced to {{count}} other page_one": "Synced to {{count}} other page", + "Synced to {{count}} other page_other": "Synced to {{count}} other pages", + "ORIGINAL": "ORIGINAL", + "THIS PAGE": "THIS PAGE", + "No pages": "No pages" } diff --git a/apps/client/src/features/editor/components/bubble-menu/node-selector.tsx b/apps/client/src/features/editor/components/bubble-menu/node-selector.tsx index 7fecff9e..c716518c 100644 --- a/apps/client/src/features/editor/components/bubble-menu/node-selector.tsx +++ b/apps/client/src/features/editor/components/bubble-menu/node-selector.tsx @@ -12,6 +12,7 @@ import { IconInfoCircle, IconList, IconListNumbers, + IconQuote, IconTypography, } from "@tabler/icons-react"; import { Popover, Button, ScrollArea, Tooltip } from "@mantine/core"; @@ -59,6 +60,7 @@ export const NodeSelector: FC = ({ isCodeBlock: ctx.editor.isActive("codeBlock"), isCallout: ctx.editor.isActive("callout"), isDetails: ctx.editor.isActive("details"), + isTransclusion: ctx.editor.isActive("transclusion"), }; }, }); @@ -140,6 +142,12 @@ export const NodeSelector: FC = ({ command: () => editor.chain().focus().setDetails().run(), isActive: () => editorState?.isDetails, }, + { + name: "Sync block", + icon: IconQuote, + command: () => editor.chain().focus().toggleTransclusion().run(), + isActive: () => editorState?.isTransclusion, + }, ]; const activeItem = items.filter((item) => item.isActive()).pop() ?? { diff --git a/apps/client/src/features/editor/components/slash-menu/menu-items.ts b/apps/client/src/features/editor/components/slash-menu/menu-items.ts index 875e2efd..14e2639d 100644 --- a/apps/client/src/features/editor/components/slash-menu/menu-items.ts +++ b/apps/client/src/features/editor/components/slash-menu/menu-items.ts @@ -25,6 +25,7 @@ import { IconColumns3, IconColumns2, IconTag, + IconRotate2, } from "@tabler/icons-react"; import { CommandProps, @@ -477,6 +478,23 @@ const CommandGroups: SlashMenuGroupedItemsType = { editor.chain().focus().deleteRange(range).insertSubpages().run(); }, }, + { + title: "Sync block", + description: "Create a block that stays in sync across pages.", + searchTerms: [ + "sync", + "synced", + "sync block", + "excerpt", + "transclusion", + "reusable", + "snippet", + ], + icon: IconRotate2, + command: ({ editor, range }: CommandProps) => { + editor.chain().focus().deleteRange(range).insertTransclusion().run(); + }, + }, { title: "2 Columns", description: "Split content into two columns.", diff --git a/apps/client/src/features/editor/components/transclusion/error-placeholder.tsx b/apps/client/src/features/editor/components/transclusion/error-placeholder.tsx new file mode 100644 index 00000000..ae30d5bc --- /dev/null +++ b/apps/client/src/features/editor/components/transclusion/error-placeholder.tsx @@ -0,0 +1,22 @@ +import { IconAlertTriangle } from "@tabler/icons-react"; +import { useTranslation } from "react-i18next"; +import classes from "./transclusion.module.css"; + +export default function ErrorPlaceholder() { + const { t } = useTranslation(); + return ( +
+ +
+ {t("Failed to load transclusion")} +
+
+ {t("An error occurred while rendering this reference")} +
+
+ ); +} diff --git a/apps/client/src/features/editor/components/transclusion/no-access-placeholder.tsx b/apps/client/src/features/editor/components/transclusion/no-access-placeholder.tsx new file mode 100644 index 00000000..0070b107 --- /dev/null +++ b/apps/client/src/features/editor/components/transclusion/no-access-placeholder.tsx @@ -0,0 +1,16 @@ +import { IconEyeOff } from "@tabler/icons-react"; +import { useTranslation } from "react-i18next"; +import classes from "./transclusion.module.css"; + +export default function NoAccessPlaceholder() { + const { t } = useTranslation(); + return ( +
+ +
{t("No access")}
+
+ {t("You don't have access to this content")} +
+
+ ); +} diff --git a/apps/client/src/features/editor/components/transclusion/not-found-placeholder.tsx b/apps/client/src/features/editor/components/transclusion/not-found-placeholder.tsx new file mode 100644 index 00000000..1e1883e5 --- /dev/null +++ b/apps/client/src/features/editor/components/transclusion/not-found-placeholder.tsx @@ -0,0 +1,24 @@ +import { IconQuestionMark } from "@tabler/icons-react"; +import { useTranslation } from "react-i18next"; +import classes from "./transclusion.module.css"; + +export default function NotFoundPlaceholder() { + const { t } = useTranslation(); + return ( +
+ +
+ {t("Synced block unavailable")} +
+
+ {t( + "The source may have been removed, or embedding it here would create a loop.", + )} +
+
+ ); +} diff --git a/apps/client/src/features/editor/components/transclusion/transclusion-content.tsx b/apps/client/src/features/editor/components/transclusion/transclusion-content.tsx new file mode 100644 index 00000000..af1357f3 --- /dev/null +++ b/apps/client/src/features/editor/components/transclusion/transclusion-content.tsx @@ -0,0 +1,52 @@ +import { EditorProvider } from "@tiptap/react"; +import { useMemo } from "react"; +import { mainExtensions } from "@/features/editor/extensions/extensions"; +import { UniqueID } from "@docmost/editor-ext"; +import { TransclusionLookupProvider } from "./transclusion-lookup-context"; + +type Props = { + hostPageId: string; + content: unknown; +}; + +export default function TransclusionContent({ hostPageId, content }: Props) { + const extensions = useMemo(() => { + const filtered = mainExtensions.filter( + (e: any) => e.name !== "uniqueID" && e.name !== "globalDragHandle", + ); + return [ + ...filtered, + UniqueID.configure({ + types: ["heading", "paragraph", "transclusion"], + updateDocument: false, + }), + ]; + }, []); + + // Isolate the nested read-only editor's events from the host editor: + // - mousedown/click would otherwise make the host node-select the atom + // wrapper, blocking native text selection inside. + // - dragstart/dragover/drop would otherwise let the host treat events + // inside the nested view as drops on the host, duplicating dropped + // files at the transclusion's position. + const stop = (e: React.SyntheticEvent) => e.stopPropagation(); + + return ( + +
+ +
+ + ); +} diff --git a/apps/client/src/features/editor/components/transclusion/transclusion-lookup-context.tsx b/apps/client/src/features/editor/components/transclusion/transclusion-lookup-context.tsx new file mode 100644 index 00000000..f964e409 --- /dev/null +++ b/apps/client/src/features/editor/components/transclusion/transclusion-lookup-context.tsx @@ -0,0 +1,198 @@ +import React, { + createContext, + useCallback, + useContext, + useEffect, + useMemo, + useRef, + useState, +} from "react"; +import { lookupTransclusion } from "@/features/transclusion/services/transclusion-api"; +import type { TransclusionLookup } from "@/features/transclusion/types/transclusion.types"; + +type LookupKey = string; // `${sourcePageId}::${transclusionId}` + +type Subscriber = { + key: LookupKey; + sourcePageId: string; + transclusionId: string; + setResult: (r: TransclusionLookup) => void; +}; + +type ContextValue = { + /** Register a subscriber. Returns an unsubscribe function. */ + subscribe: (s: Subscriber) => () => void; + /** + * Force a re-fetch of `key` and resolve when the response arrives (or the + * request fails). Bypasses the cache and any in-flight de-dup so the user + * always sees a fresh server read. + */ + refresh: (key: LookupKey) => Promise; +}; + +const TransclusionLookupContext = createContext(null); + +export function TransclusionLookupProvider({ + children, +}: { + /** + * Retained for API compatibility with previous callers that passed the + * host page id; no longer used internally now that cycle prevention lives + * on the server side and lookups are stateless. + */ + hostPageId?: string; + children: React.ReactNode; +}) { + const subscribersRef = useRef(new Map()); + const queueRef = useRef(new Set()); + const tickRef = useRef | null>(null); + // Last looked-up value for each key. Re-subscribers (e.g. when the editor + // remounts after switching from static to live) get this immediately + // instead of triggering a duplicate fetch. + const resultCacheRef = useRef(new Map()); + // Keys that are currently in flight in a batch request. A second subscribe + // for the same key while the first request is pending is a no-op; the + // subscriber is added to subscribersRef and will be notified when the + // pending request completes. + const inFlightRef = useRef(new Set()); + // Resolvers waiting on the next response for a key. Populated by refresh() + // so callers can await the fetch round-trip; resolved on success and on + // network error so the UI never hangs in a loading state. + const pendingRef = useRef(new Map void>>()); + + const flush = useCallback(async () => { + tickRef.current = null; + const keys = Array.from(queueRef.current); + queueRef.current.clear(); + if (keys.length === 0) return; + + for (const k of keys) inFlightRef.current.add(k); + + const references = keys.map((k) => { + const [sourcePageId, transclusionId] = k.split("::"); + return { sourcePageId, transclusionId }; + }); + + const resolveWaiters = (key: LookupKey) => { + const waiters = pendingRef.current.get(key); + if (!waiters) return; + pendingRef.current.delete(key); + for (const w of waiters) w(); + }; + + try { + const { items } = await lookupTransclusion({ references }); + for (const r of items) { + const key = `${r.sourcePageId}::${r.transclusionId}`; + resultCacheRef.current.set(key, r); + inFlightRef.current.delete(key); + const subs = subscribersRef.current.get(key); + if (subs) { + for (const s of subs) s.setResult(r); + } + resolveWaiters(key); + } + } catch { + // Network error — leave subscribers in pending state and clear the + // in-flight flag so a future subscribe can retry. + for (const k of keys) { + inFlightRef.current.delete(k); + resolveWaiters(k); + } + } + }, []); + + const enqueue = useCallback( + (key: LookupKey) => { + queueRef.current.add(key); + if (tickRef.current === null) { + tickRef.current = setTimeout(flush, 10); + } + }, + [flush], + ); + + const subscribe = useCallback( + (s) => { + const list = subscribersRef.current.get(s.key) ?? []; + list.push(s); + subscribersRef.current.set(s.key, list); + + const cached = resultCacheRef.current.get(s.key); + if (cached) { + s.setResult(cached); + } else if (!inFlightRef.current.has(s.key)) { + enqueue(s.key); + } + + return () => { + const cur = subscribersRef.current.get(s.key) ?? []; + const next = cur.filter((x) => x !== s); + if (next.length === 0) subscribersRef.current.delete(s.key); + else subscribersRef.current.set(s.key, next); + }; + }, + [enqueue], + ); + + const refresh = useCallback( + (key) => + new Promise((resolve) => { + resultCacheRef.current.delete(key); + inFlightRef.current.delete(key); + const waiters = pendingRef.current.get(key) ?? []; + waiters.push(resolve); + pendingRef.current.set(key, waiters); + enqueue(key); + }), + [enqueue], + ); + + useEffect( + () => () => { + if (tickRef.current) clearTimeout(tickRef.current); + }, + [], + ); + + const value = useMemo( + () => ({ subscribe, refresh }), + [subscribe, refresh], + ); + + return ( + + {children} + + ); +} + +export function useTransclusionLookup( + sourcePageId: string | null | undefined, + transclusionId: string | null | undefined, +): { + result: TransclusionLookup | null; + refresh: () => Promise; +} { + const ctx = useContext(TransclusionLookupContext); + const [result, setResult] = useState(null); + + useEffect(() => { + if (!ctx || !sourcePageId || !transclusionId) return; + const key = `${sourcePageId}::${transclusionId}`; + const unsubscribe = ctx.subscribe({ + key, + sourcePageId, + transclusionId, + setResult, + }); + return unsubscribe; + }, [ctx, sourcePageId, transclusionId]); + + const refresh = useCallback(async () => { + if (!ctx || !sourcePageId || !transclusionId) return; + await ctx.refresh(`${sourcePageId}::${transclusionId}`); + }, [ctx, sourcePageId, transclusionId]); + + return { result, refresh }; +} diff --git a/apps/client/src/features/editor/components/transclusion/transclusion-reference-view.tsx b/apps/client/src/features/editor/components/transclusion/transclusion-reference-view.tsx new file mode 100644 index 00000000..23c1b3e6 --- /dev/null +++ b/apps/client/src/features/editor/components/transclusion/transclusion-reference-view.tsx @@ -0,0 +1,204 @@ +import { NodeViewProps, NodeViewWrapper } from "@tiptap/react"; +import { ActionIcon, Menu, Tooltip } from "@mantine/core"; +import { + IconDots, + IconExternalLink, + IconLinkOff, + IconRefresh, + IconTrash, +} from "@tabler/icons-react"; +import { useState } from "react"; +import { Link } from "react-router-dom"; +import { useTranslation } from "react-i18next"; +import { ErrorBoundary } from "react-error-boundary"; +import { useTransclusionLookup } from "./transclusion-lookup-context"; +import TransclusionContent from "./transclusion-content"; +import NoAccessPlaceholder from "./no-access-placeholder"; +import NotFoundPlaceholder from "./not-found-placeholder"; +import ErrorPlaceholder from "./error-placeholder"; +import classes from "./transclusion.module.css"; +import SyncBlockReferencesDropdown from "@/features/transclusion/components/sync-block-references-dropdown"; +import { + useReferencesQuery, + useUnsyncReferenceMutation, +} from "@/features/transclusion/queries/transclusion-query"; +import { buildPageUrl } from "@/features/page/page.utils"; + +export default function TransclusionReferenceView(props: NodeViewProps) { + const isEditable = props.editor.isEditable; + const sourcePageId: string | null = props.node.attrs.sourcePageId ?? null; + const transclusionId: string | null = props.node.attrs.transclusionId ?? null; + const [openMenus, setOpenMenus] = useState(0); + const trackOpen = (open: boolean) => + setOpenMenus((n) => Math.max(0, n + (open ? 1 : -1))); + + return ( + 0 ? "true" : "false"} + contentEditable={false} + > + } + > + + + + ); +} + +function TransclusionReferenceBody({ + editor, + node, + deleteNode, + getPos, + trackOpen, +}: NodeViewProps & { trackOpen: (open: boolean) => void }) { + const { t } = useTranslation(); + const sourcePageId: string | null = node.attrs.sourcePageId ?? null; + const transclusionId: string | null = node.attrs.transclusionId ?? null; + const isEditable = editor.isEditable; + + const { result, refresh } = useTransclusionLookup( + sourcePageId, + transclusionId, + ); + const [refreshing, setRefreshing] = useState(false); + const handleRefresh = async () => { + setRefreshing(true); + try { + await refresh(); + } finally { + setRefreshing(false); + } + }; + // @ts-ignore - editor.storage.pageId is set by the host editor + const hostPageId: string | undefined = editor.storage?.pageId; + const unsyncMutation = useUnsyncReferenceMutation(); + // Cached against the dropdown's identical query so the source link target + // is ready as soon as the controls fade in on hover, without a second + // fetch. + const referencesQuery = useReferencesQuery( + sourcePageId, + transclusionId, + isEditable, + ); + const sourcePageHref = (() => { + const source = referencesQuery.data?.source; + if (source?.spaceSlug) { + return buildPageUrl(source.spaceSlug, source.slugId, source.title); + } + return sourcePageId ? `/p/${sourcePageId}` : null; + })(); + + const handleUnsync = async () => { + if (!hostPageId || !sourcePageId || !transclusionId) return; + try { + const { content } = await unsyncMutation.mutateAsync({ + referencePageId: hostPageId, + sourcePageId, + transclusionId, + }); + const pos = getPos(); + if (typeof pos !== "number") return; + const from = pos; + const to = pos + node.nodeSize; + editor + .chain() + .focus() + .insertContentAt({ from, to }, content as any) + .run(); + } catch { + // mutation surfaces errors via React Query; node stays as-is + } + }; + + return ( + <> + {isEditable && ( +
+ {sourcePageId && transclusionId && hostPageId && ( + + )} + + + + + + + {sourcePageHref && ( + + + + + + )} + + + + + + + + } + onClick={handleUnsync} + disabled={ + unsyncMutation.isPending || + !hostPageId || + !sourcePageId || + !transclusionId + } + > + {t("Unsync")} + + } + onClick={() => deleteNode()} + > + {t("Remove from page")} + + + +
+ )} + + {!sourcePageId || !transclusionId ? ( + + ) : !result ? ( +
+ ) : !("status" in result) ? ( + + ) : result.status === "no_access" ? ( + + ) : ( + + )} + + ); +} diff --git a/apps/client/src/features/editor/components/transclusion/transclusion-view.tsx b/apps/client/src/features/editor/components/transclusion/transclusion-view.tsx new file mode 100644 index 00000000..fc0ff192 --- /dev/null +++ b/apps/client/src/features/editor/components/transclusion/transclusion-view.tsx @@ -0,0 +1,122 @@ +import { + NodeViewContent, + NodeViewProps, + NodeViewWrapper, +} from "@tiptap/react"; +import { ActionIcon, Menu, Tooltip } from "@mantine/core"; +import { notifications } from "@mantine/notifications"; +import { + IconCheck, + IconCopy, + IconDots, + IconLinkOff, + IconTrash, +} from "@tabler/icons-react"; +import { useState } from "react"; +import { useTranslation } from "react-i18next"; +import classes from "./transclusion.module.css"; +import SyncBlockReferencesDropdown from "@/features/transclusion/components/sync-block-references-dropdown"; + +export default function TransclusionView(props: NodeViewProps) { + const { editor, node, deleteNode } = props; + const { t } = useTranslation(); + const [openMenus, setOpenMenus] = useState(0); + const trackOpen = (open: boolean) => + setOpenMenus((n) => Math.max(0, n + (open ? 1 : -1))); + + const isEditable = editor.isEditable; + // @ts-ignore - editor.storage.pageId is set by the host editor (page-editor.tsx onCreate) + const sourcePageId: string | undefined = editor.storage?.pageId; + const transclusionId: string | null = node.attrs.id ?? null; + + const [copied, setCopied] = useState(false); + const handleCopy = async () => { + if (!sourcePageId || !transclusionId) return; + const html = `
`; + try { + await navigator.clipboard.write([ + new ClipboardItem({ + "text/html": new Blob([html], { type: "text/html" }), + "text/plain": new Blob([html], { type: "text/plain" }), + }), + ]); + } catch { + // Fallback for browsers without ClipboardItem write support + try { + await navigator.clipboard.writeText(html); + } catch { + return; + } + } + setCopied(true); + window.setTimeout(() => setCopied(false), 2000); + notifications.show({ + message: t("Copied. Paste on any page to embed this synced block."), + }); + }; + + const handleUnsync = () => { + editor.chain().focus().unsyncTransclusion().run(); + }; + + return ( + 0 ? "true" : "false"} + > + {isEditable && ( +
+ {sourcePageId && transclusionId && ( + + )} + + + + + + {copied ? : } + + + + + + + + + + + } + onClick={handleUnsync} + > + {t("Unsync")} + + } + onClick={() => deleteNode()} + > + {t("Delete sync block")} + + + +
+ )} + + + + ); +} diff --git a/apps/client/src/features/editor/components/transclusion/transclusion.module.css b/apps/client/src/features/editor/components/transclusion/transclusion.module.css new file mode 100644 index 00000000..48577bb7 --- /dev/null +++ b/apps/client/src/features/editor/components/transclusion/transclusion.module.css @@ -0,0 +1,199 @@ +.placeholder { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 4px; + padding: var(--mantine-spacing-md); + border-radius: var(--mantine-radius-md); + background: light-dark( + var(--mantine-color-gray-0), + var(--mantine-color-dark-6) + ); + border: 1px dashed + light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4)); + color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1)); +} + +.placeholderIcon { + color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3)); +} + +.placeholderTitle { + font-weight: 600; + font-size: var(--mantine-font-size-sm); +} + +.placeholderSubtext { + font-size: var(--mantine-font-size-xs); + color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2)); + text-align: center; +} + +.transclusionBadge { + display: inline-block; + padding: 2px 8px; + font-size: var(--mantine-font-size-xs); + font-weight: 600; + color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1)); + background: light-dark( + var(--mantine-color-gray-1), + var(--mantine-color-dark-5) + ); + border-radius: var(--mantine-radius-sm); + margin-bottom: 4px; +} + +.transclusionWrap { + position: relative; + margin-left: -3rem; + margin-right: -3rem; + width: calc(100% + 6rem); + padding: 0.5em 3rem; + border-radius: 4px; + border: 1px solid transparent; + transition: border 0.3s; +} + +.transclusionWrap:hover, +.transclusionWrap:focus-within { + border: 1px solid + light-dark(var(--mantine-color-gray-3), var(--mantine-color-gray-7)); +} + +.transclusionControls { + position: absolute; + bottom: calc(100% + 8px); + right: 4px; + display: flex; + align-items: center; + gap: 6px; + background: var(--mantine-color-body); + border: 1px solid var(--mantine-color-default-border); + border-radius: 6px; + padding: 4px 6px; + opacity: 0; + pointer-events: none; + transition: opacity 0.15s ease; + z-index: 2; +} + +/* Hover bridge: keeps :hover on the wrap while the cursor crosses the + 8px gap between wrap and floating chrome, so the menu doesn't fade out + on the way to it. */ +.transclusionControls::after { + content: ""; + position: absolute; + top: 100%; + left: 0; + right: 0; + height: 8px; +} + +.transclusionWrap:hover .transclusionControls, +.transclusionWrap:focus-within .transclusionControls, +.transclusionWrap[data-menu-open="true"] .transclusionControls { + opacity: 1; + pointer-events: auto; +} + +.controlsDivider { + display: inline-block; + width: 1px; + height: 16px; + background: var(--mantine-color-default-border); +} + +.includeWrap { + position: relative; + margin-left: -3rem; + margin-right: -3rem; + width: calc(100% + 6rem); + padding: 0.5em 0; + border-radius: 4px; + border: 1px solid transparent; + transition: border 0.3s; +} + +.includeWrap:hover, +.includeWrap[data-focused="true"], +.includeWrap[data-menu-open="true"] { + border: 1px solid + light-dark(var(--mantine-color-gray-3), var(--mantine-color-gray-7)); +} + +.includeControls { + position: absolute; + bottom: calc(100% + 8px); + right: 4px; + display: flex; + align-items: center; + gap: 6px; + background: var(--mantine-color-body); + border: 1px solid var(--mantine-color-default-border); + border-radius: 6px; + padding: 4px 6px; + opacity: 0; + pointer-events: none; + transition: opacity 0.15s ease; + z-index: 2; +} + +/* Hover bridge: keeps :hover on the wrap while the cursor crosses the + 8px gap between wrap and floating chrome, so the menu doesn't fade out + on the way to it. */ +.includeControls::after { + content: ""; + position: absolute; + top: 100%; + left: 0; + right: 0; + height: 8px; +} + +.includeWrap:hover .includeControls, +.includeWrap:focus-within .includeControls, +.includeWrap[data-focused="true"] .includeControls, +.includeWrap[data-menu-open="true"] .includeControls { + opacity: 1; + pointer-events: auto; +} + +:global(.react-renderer.node-transclusion.ProseMirror-selectednode), +:global(.react-renderer.node-transclusionReference.ProseMirror-selectednode) { + outline: none; +} + +@media (max-width: 48em) { + .transclusionWrap, + .includeWrap { + margin-left: -1rem; + margin-right: -1rem; + width: calc(100% + 2rem); + } + + .transclusionWrap { + padding-left: 1rem; + padding-right: 1rem; + } +} + +@media print { + .transclusionControls, + .includeControls { + display: none !important; + } +} + +.editingOriginalTag { + display: inline-block; + padding: 0 6px; + font-size: var(--mantine-font-size-xs); + font-weight: 500; + color: var(--mantine-color-blue-7); + background: light-dark( + var(--mantine-color-blue-0), + var(--mantine-color-blue-9) + ); + border-radius: var(--mantine-radius-sm); +} diff --git a/apps/client/src/features/editor/extensions/drag-handle.ts b/apps/client/src/features/editor/extensions/drag-handle.ts new file mode 100644 index 00000000..6067a974 --- /dev/null +++ b/apps/client/src/features/editor/extensions/drag-handle.ts @@ -0,0 +1,419 @@ +import { Extension } from "@tiptap/core"; +import { + NodeSelection, + Plugin, + PluginKey, + TextSelection, +} from "@tiptap/pm/state"; +import { Fragment, Slice, Node } from "@tiptap/pm/model"; +import { EditorView } from "@tiptap/pm/view"; + +export interface GlobalDragHandleOptions { + /** + * The width of the drag handle + */ + dragHandleWidth: number; + + /** + * The treshold for scrolling + */ + scrollThreshold: number; + + /* + * The css selector to query for the drag handle. (eg: '.custom-handle'). + * If handle element is found, that element will be used as drag handle. If not, a default handle will be created + */ + dragHandleSelector?: string; + + /** + * Tags to be excluded for drag handle + */ + excludedTags: string[]; + + /** + * Custom nodes to be included for drag handle + */ + customNodes: string[]; +} +function absoluteRect(node: Element) { + const data = node.getBoundingClientRect(); + const modal = node.closest('[role="dialog"]'); + + if (modal && window.getComputedStyle(modal).transform !== "none") { + const modalRect = modal.getBoundingClientRect(); + + return { + top: data.top - modalRect.top, + left: data.left - modalRect.left, + width: data.width, + }; + } + return { + top: data.top, + left: data.left, + width: data.width, + }; +} + +function nodeDOMAtCoords( + coords: { x: number; y: number }, + options: GlobalDragHandleOptions, + view: EditorView, +) { + const selectors = [ + "li", + "p:not(:first-child)", + "pre", + "blockquote", + "h1", + "h2", + "h3", + "h4", + "h5", + "h6", + ...options.customNodes.map((node) => `[data-type=${node}]`), + ].join(", "); + return document + .elementsFromPoint(coords.x, coords.y) + .find((elem: Element) => { + // Skip elements that belong to a nested editor (e.g. transclusion + // references render their own ProseMirror instance). Only consider + // elements whose closest editor is this host view. + if (elem.closest(".ProseMirror") !== view.dom) return false; + return ( + elem.parentElement?.matches?.(".ProseMirror") || + elem.matches(selectors) + ); + }); +} +function nodePosAtDOM( + node: Element, + view: EditorView, + options: GlobalDragHandleOptions, +) { + const boundingRect = node.getBoundingClientRect(); + + return view.posAtCoords({ + left: boundingRect.left + 50 + options.dragHandleWidth, + top: boundingRect.top + 1, + })?.inside; +} + +function calcNodePos(pos: number, view: EditorView) { + const $pos = view.state.doc.resolve(pos); + if ($pos.depth > 1) return $pos.before($pos.depth); + return pos; +} + +export function DragHandlePlugin( + options: GlobalDragHandleOptions & { pluginKey: string }, +) { + let listType = ""; + function handleDragStart(event: DragEvent, view: EditorView) { + view.focus(); + + if (!event.dataTransfer) return; + + const node = nodeDOMAtCoords( + { + x: event.clientX + 50 + options.dragHandleWidth, + y: event.clientY, + }, + options, + view, + ); + + if (!(node instanceof Element)) return; + + let draggedNodePos = nodePosAtDOM(node, view, options); + if (draggedNodePos == null || draggedNodePos < 0) return; + draggedNodePos = calcNodePos(draggedNodePos, view); + + const { from, to } = view.state.selection; + const diff = from - to; + + const fromSelectionPos = calcNodePos(from, view); + let differentNodeSelected = false; + + const nodePos = view.state.doc.resolve(fromSelectionPos); + + // Check if nodePos points to the top level node + if (nodePos.node().type.name === "doc") differentNodeSelected = true; + else { + const nodeSelection = NodeSelection.create( + view.state.doc, + nodePos.before(), + ); + + // Check if the node where the drag event started is part of the current selection + differentNodeSelected = !( + draggedNodePos + 1 >= nodeSelection.$from.pos && + draggedNodePos <= nodeSelection.$to.pos + ); + } + let selection = view.state.selection; + if ( + !differentNodeSelected && + diff !== 0 && + !(view.state.selection instanceof NodeSelection) + ) { + const endSelection = NodeSelection.create(view.state.doc, to - 1); + selection = TextSelection.create( + view.state.doc, + draggedNodePos, + endSelection.$to.pos, + ); + } else { + selection = NodeSelection.create(view.state.doc, draggedNodePos); + + // if inline node is selected, e.g mention -> go to the parent node to select the whole node + // if table row is selected, go to the parent node to select the whole node + if ( + (selection as NodeSelection).node.type.isInline || + (selection as NodeSelection).node.type.name === "tableRow" + ) { + let $pos = view.state.doc.resolve(selection.from); + selection = NodeSelection.create(view.state.doc, $pos.before()); + } + } + view.dispatch(view.state.tr.setSelection(selection)); + + // If the selected node is a list item, we need to save the type of the wrapping list e.g. OL or UL + if ( + view.state.selection instanceof NodeSelection && + view.state.selection.node.type.name === "listItem" + ) { + listType = node.parentElement!.tagName; + } + + const slice = view.state.selection.content(); + const { dom, text } = view.serializeForClipboard(slice); + + event.dataTransfer.clearData(); + event.dataTransfer.setData("text/html", dom.innerHTML); + event.dataTransfer.setData("text/plain", text); + event.dataTransfer.effectAllowed = "move"; + + event.dataTransfer.setDragImage(node, 0, 0); + + view.dragging = { slice, move: event.ctrlKey }; + } + + let dragHandleElement: HTMLElement | null = null; + + function hideDragHandle() { + if (dragHandleElement) { + dragHandleElement.classList.add("hide"); + } + } + + function showDragHandle() { + if (dragHandleElement) { + dragHandleElement.classList.remove("hide"); + } + } + + function hideHandleOnEditorOut(event: MouseEvent) { + if (event.target instanceof Element) { + // Check if the relatedTarget class is still inside the editor + const relatedTarget = event.relatedTarget as HTMLElement; + const isInsideEditor = + relatedTarget?.classList.contains("tiptap") || + relatedTarget?.classList.contains("drag-handle"); + + if (isInsideEditor) return; + } + hideDragHandle(); + } + + return new Plugin({ + key: new PluginKey(options.pluginKey), + view: (view) => { + const handleBySelector = options.dragHandleSelector + ? document.querySelector(options.dragHandleSelector) + : null; + dragHandleElement = handleBySelector ?? document.createElement("div"); + dragHandleElement.draggable = true; + dragHandleElement.dataset.dragHandle = ""; + dragHandleElement.classList.add("drag-handle"); + + function onDragHandleDragStart(e: DragEvent) { + handleDragStart(e, view); + } + + dragHandleElement.addEventListener("dragstart", onDragHandleDragStart); + + function onDragHandleDrag(e: DragEvent) { + hideDragHandle(); + let scrollY = window.scrollY; + if (e.clientY < options.scrollThreshold) { + window.scrollTo({ top: scrollY - 30, behavior: "smooth" }); + } else if (window.innerHeight - e.clientY < options.scrollThreshold) { + window.scrollTo({ top: scrollY + 30, behavior: "smooth" }); + } + } + + dragHandleElement.addEventListener("drag", onDragHandleDrag); + + hideDragHandle(); + + if (!handleBySelector) { + view?.dom?.parentElement?.appendChild(dragHandleElement); + } + view?.dom?.parentElement?.addEventListener( + "mouseout", + hideHandleOnEditorOut, + ); + + return { + destroy: () => { + if (!handleBySelector) { + dragHandleElement?.remove?.(); + } + dragHandleElement?.removeEventListener("drag", onDragHandleDrag); + dragHandleElement?.removeEventListener( + "dragstart", + onDragHandleDragStart, + ); + dragHandleElement = null; + view?.dom?.parentElement?.removeEventListener( + "mouseout", + hideHandleOnEditorOut, + ); + }, + }; + }, + props: { + handleDOMEvents: { + mousemove: (view, event) => { + if (!view.editable) { + return; + } + + const node = nodeDOMAtCoords( + { + x: event.clientX + 50 + options.dragHandleWidth, + y: event.clientY, + }, + options, + view, + ); + + const notDragging = node?.closest(".not-draggable"); + const excludedTagList = options.excludedTags + .concat(["ol", "ul"]) + .join(", "); + + if ( + !(node instanceof Element) || + node.matches(excludedTagList) || + notDragging + ) { + hideDragHandle(); + return; + } + + const compStyle = window.getComputedStyle(node); + const parsedLineHeight = parseInt(compStyle.lineHeight, 10); + const lineHeight = isNaN(parsedLineHeight) + ? parseInt(compStyle.fontSize) * 1.2 + : parsedLineHeight; + const paddingTop = parseInt(compStyle.paddingTop, 10); + + const rect = absoluteRect(node); + + rect.top += (lineHeight - 24) / 2; + rect.top += paddingTop; + // Li markers + if (node.matches("ul:not([data-type=taskList]) li, ol li")) { + rect.left -= options.dragHandleWidth; + } + rect.width = options.dragHandleWidth; + + if (!dragHandleElement) return; + + dragHandleElement.style.left = `${rect.left - rect.width}px`; + dragHandleElement.style.top = `${rect.top}px`; + showDragHandle(); + }, + keydown: () => { + hideDragHandle(); + }, + mousewheel: () => { + hideDragHandle(); + }, + // dragging class is used for CSS + dragstart: (view) => { + view.dom.classList.add("dragging"); + }, + drop: (view, event) => { + view.dom.classList.remove("dragging"); + hideDragHandle(); + let droppedNode: Node | null = null; + const dropPos = view.posAtCoords({ + left: event.clientX, + top: event.clientY, + }); + + if (!dropPos) return; + + if (view.state.selection instanceof NodeSelection) { + droppedNode = view.state.selection.node; + } + if (!droppedNode) return; + + const resolvedPos = view.state.doc.resolve(dropPos.pos); + + const isDroppedInsideList = + resolvedPos.parent.type.name === "listItem"; + + // If the selected node is a list item and is not dropped inside a list, we need to wrap it inside
    tag otherwise ol list items will be transformed into ul list item when dropped + if ( + view.state.selection instanceof NodeSelection && + view.state.selection.node.type.name === "listItem" && + !isDroppedInsideList && + listType == "OL" + ) { + const newList = view.state.schema.nodes.orderedList?.createAndFill( + null, + droppedNode, + ); + const slice = new Slice(Fragment.from(newList), 0, 0); + view.dragging = { slice, move: event.ctrlKey }; + } + }, + dragend: (view) => { + view.dom.classList.remove("dragging"); + }, + }, + }, + }); +} + +const GlobalDragHandle = Extension.create({ + name: "globalDragHandle", + + addOptions() { + return { + dragHandleWidth: 20, + scrollTreshold: 100, + excludedTags: [], + customNodes: [], + }; + }, + + addProseMirrorPlugins() { + return [ + DragHandlePlugin({ + pluginKey: "globalDragHandle", + dragHandleWidth: this.options.dragHandleWidth, + scrollThreshold: this.options.scrollThreshold, + dragHandleSelector: this.options.dragHandleSelector, + excludedTags: this.options.excludedTags, + customNodes: this.options.customNodes, + }), + ]; + }, +}); + +export default GlobalDragHandle; diff --git a/apps/client/src/features/editor/extensions/extensions.ts b/apps/client/src/features/editor/extensions/extensions.ts index 1ad93308..ed777390 100644 --- a/apps/client/src/features/editor/extensions/extensions.ts +++ b/apps/client/src/features/editor/extensions/extensions.ts @@ -9,7 +9,6 @@ import SubScript from "@tiptap/extension-subscript"; import { Typography } from "@tiptap/extension-typography"; import { TextStyle } from "@tiptap/extension-text-style"; import { Color } from "@tiptap/extension-color"; -import GlobalDragHandle from "tiptap-extension-global-drag-handle"; import { Youtube } from "@tiptap/extension-youtube"; import SlashCommand, { SlashCommandExtension as Command } from "@/features/editor/extensions/slash-command"; import renderItems from "@/features/editor/components/slash-menu/render-items"; @@ -52,6 +51,8 @@ import { Columns, Column, Status, + Transclusion, + TransclusionReference, } from "@docmost/editor-ext"; import { randomElement, @@ -80,6 +81,8 @@ import ExcalidrawView from "@/features/editor/components/excalidraw/excalidraw-v import EmbedView from "@/features/editor/components/embed/embed-view.tsx"; import PdfView from "@/features/editor/components/pdf/pdf-view.tsx"; import SubpagesView from "@/features/editor/components/subpages/subpages-view.tsx"; +import TransclusionView from "@/features/editor/components/transclusion/transclusion-view.tsx"; +import TransclusionReferenceView from "@/features/editor/components/transclusion/transclusion-reference-view.tsx"; import { common, createLowlight } from "lowlight"; import plaintext from "highlight.js/lib/languages/plaintext"; import powershell from "highlight.js/lib/languages/powershell"; @@ -100,6 +103,7 @@ import { MarkdownClipboard } from "@/features/editor/extensions/markdown-clipboa import EmojiCommand from "./emoji-command"; import { countWords } from "alfaaz"; import AutoJoiner from "@/features/editor/extensions/autojoiner.ts"; +import GlobalDragHandle from "@/features/editor/extensions/drag-handle.ts"; const lowlight = createLowlight(common); lowlight.register("mermaid", plaintext); @@ -167,7 +171,7 @@ export const mainExtensions = [ SharedStorage, Heading, UniqueID.configure({ - types: ["heading", "paragraph"], + types: ["heading", "paragraph", "transclusion"], filterTransaction: (transaction) => !isChangeOrigin(transaction), }), Placeholder.configure({ @@ -215,7 +219,9 @@ export const mainExtensions = [ }), Typography, TrailingNode, - GlobalDragHandle, + GlobalDragHandle.configure({ + customNodes: ["transclusion", "transclusionReference"], + }), TextStyle, Color, SlashCommand, @@ -351,6 +357,12 @@ export const mainExtensions = [ Status.configure({ view: StatusView, }), + Transclusion.configure({ + view: TransclusionView, + }), + TransclusionReference.configure({ + view: TransclusionReferenceView, + }), MarkdownClipboard.configure({ transformPastedText: true, }), diff --git a/apps/client/src/features/editor/page-editor.tsx b/apps/client/src/features/editor/page-editor.tsx index c8c07bc2..8b042a86 100644 --- a/apps/client/src/features/editor/page-editor.tsx +++ b/apps/client/src/features/editor/page-editor.tsx @@ -71,6 +71,7 @@ import { useEditorScroll } from "./hooks/use-editor-scroll"; import { EditorAiMenu } from "@/ee/ai/components/editor/ai-menu/ai-menu"; import { EditorLinkMenu } from "@/features/editor/components/link/link-menu"; import ColumnsMenu from "@/features/editor/components/columns/columns-menu.tsx"; +import { TransclusionLookupProvider } from "@/features/editor/components/transclusion/transclusion-lookup-context"; interface PageEditorProps { pageId: string; @@ -399,55 +400,60 @@ export default function PageEditor({ } }, [yjsConnectionStatus, isSynced]); - if (showStatic) { - return ( - - ); - } - return ( -
    -
    - + + {showStatic ? ( + + ) : ( +
    +
    + - {editor && ( - - )} + {editor && ( + + )} - {editor && editorIsEditable && ( -
    - - - - - - - - - - - - - + {editor && editorIsEditable && ( +
    + + + + + + + + + + + + + +
    + )} + {editor && + !editorIsEditable && + (editable || canComment) && + providersRef.current && ( + + )} + {showCommentPopup && ( + + )} + {showReadOnlyCommentPopup && ( + + )}
    - )} - {editor && !editorIsEditable && (editable || canComment) && providersRef.current && ( - - )} - {showCommentPopup && } - {showReadOnlyCommentPopup && ( - - )} -
    -
    editor.commands.focus("end")} - style={{ paddingBottom: "20vh" }} - >
    -
    +
    editor.commands.focus("end")} + style={{ paddingBottom: "20vh" }} + >
    +
    + )} + ); } diff --git a/apps/client/src/features/editor/readonly-page-editor.tsx b/apps/client/src/features/editor/readonly-page-editor.tsx index a27c7bfb..6c383328 100644 --- a/apps/client/src/features/editor/readonly-page-editor.tsx +++ b/apps/client/src/features/editor/readonly-page-editor.tsx @@ -9,6 +9,7 @@ import { Placeholder } from "@tiptap/extension-placeholder"; import { useAtom } from "jotai"; import { readOnlyEditorAtom } from "@/features/editor/atoms/editor-atoms.ts"; import { useEditorScroll } from "./hooks/use-editor-scroll"; +import { TransclusionLookupProvider } from "@/features/editor/components/transclusion/transclusion-lookup-context"; interface PageEditorProps { title: string; @@ -65,7 +66,7 @@ export default function ReadonlyPageEditor({ ]; return ( - <> +
    - + ); } diff --git a/apps/client/src/features/transclusion/components/sync-block-references-dropdown.module.css b/apps/client/src/features/transclusion/components/sync-block-references-dropdown.module.css new file mode 100644 index 00000000..a39da374 --- /dev/null +++ b/apps/client/src/features/transclusion/components/sync-block-references-dropdown.module.css @@ -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; +} diff --git a/apps/client/src/features/transclusion/components/sync-block-references-dropdown.tsx b/apps/client/src/features/transclusion/components/sync-block-references-dropdown.tsx new file mode 100644 index 00000000..966282a8 --- /dev/null +++ b/apps/client/src/features/transclusion/components/sync-block-references-dropdown.tsx @@ -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 ( + + + + + + + {mode === "reference" && data?.source && ( +
    + + + +
    + handleOpenChange(false)} + /> + ), + }} + /> +
    +
    + )} + + {isLoading ? ( +
    + +
    + ) : allPages.length === 0 ? ( +
    {t("No pages")}
    + ) : ( +
    +
    {t("Synced to")}
    +
      + {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 ( +
    • + handleOpenChange(false)} + > + {page.icon ? ( + {page.icon} + ) : ( + + + + )} + + {title} + + {isCurrent ? ( + + {t("THIS PAGE")} + + ) : isOriginal ? ( + {t("ORIGINAL")} + ) : null} + +
      • + ); + })} +
    +
    + )} +     +     + ); +} diff --git a/apps/client/src/features/transclusion/queries/transclusion-query.ts b/apps/client/src/features/transclusion/queries/transclusion-query.ts new file mode 100644 index 00000000..5cee0ad2 --- /dev/null +++ b/apps/client/src/features/transclusion/queries/transclusion-query.ts @@ -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), + }); +} diff --git a/apps/client/src/features/transclusion/services/transclusion-api.ts b/apps/client/src/features/transclusion/services/transclusion-api.ts new file mode 100644 index 00000000..44a53c3c --- /dev/null +++ b/apps/client/src/features/transclusion/services/transclusion-api.ts @@ -0,0 +1,29 @@ +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 listReferences(params: { + sourcePageId: string; + transclusionId: string; +}): Promise { + 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; +} diff --git a/apps/client/src/features/transclusion/types/transclusion.types.ts b/apps/client/src/features/transclusion/types/transclusion.types.ts new file mode 100644 index 00000000..3be6968c --- /dev/null +++ b/apps/client/src/features/transclusion/types/transclusion.types.ts @@ -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[]; +}; diff --git a/apps/server/src/collaboration/collaboration.module.ts b/apps/server/src/collaboration/collaboration.module.ts index 42814508..05aaf295 100644 --- a/apps/server/src/collaboration/collaboration.module.ts +++ b/apps/server/src/collaboration/collaboration.module.ts @@ -18,6 +18,7 @@ import { LoggerExtension } from './extensions/logger.extension'; import { CollaborationHandler } from './collaboration.handler'; import { CollabHistoryService } from './services/collab-history.service'; import { WatcherModule } from '../core/watcher/watcher.module'; +import { TransclusionService } from '../core/page/transclusion/transclusion.service'; @Module({ providers: [ @@ -28,6 +29,7 @@ import { WatcherModule } from '../core/watcher/watcher.module'; HistoryProcessor, CollabHistoryService, CollaborationHandler, + TransclusionService, ], exports: [CollaborationGateway], imports: [TokenModule, WatcherModule], diff --git a/apps/server/src/collaboration/collaboration.util.ts b/apps/server/src/collaboration/collaboration.util.ts index d8802b34..d9e5dd46 100644 --- a/apps/server/src/collaboration/collaboration.util.ts +++ b/apps/server/src/collaboration/collaboration.util.ts @@ -40,6 +40,8 @@ import { Status, addUniqueIdsToDoc, htmlToMarkdown, + Transclusion, + TransclusionReference, } from '@docmost/editor-ext'; import { generateText, getSchema, JSONContent } from '@tiptap/core'; import { generateHTML, generateJSON } from '../common/helpers/prosemirror/html'; @@ -101,6 +103,8 @@ export const tiptapExtensions = [ Columns, Column, Status, + Transclusion, + TransclusionReference, ] as any; export function jsonToHtml(tiptapJson: any) { diff --git a/apps/server/src/collaboration/extensions/persistence.extension.ts b/apps/server/src/collaboration/extensions/persistence.extension.ts index d32e4778..76bf4267 100644 --- a/apps/server/src/collaboration/extensions/persistence.extension.ts +++ b/apps/server/src/collaboration/extensions/persistence.extension.ts @@ -32,6 +32,7 @@ import { HISTORY_FAST_THRESHOLD, HISTORY_INTERVAL, } from '../constants'; +import { TransclusionService } from '../../core/page/transclusion/transclusion.service'; @Injectable() export class PersistenceExtension implements Extension { @@ -45,6 +46,7 @@ export class PersistenceExtension implements Extension { @InjectQueue(QueueName.HISTORY_QUEUE) private historyQueue: Queue, @InjectQueue(QueueName.NOTIFICATION_QUEUE) private notificationQueue: Queue, private readonly collabHistory: CollabHistoryService, + private readonly transclusionService: TransclusionService, ) {} async onLoadDocument(data: onLoadDocumentPayload) { @@ -134,7 +136,11 @@ export class PersistenceExtension implements Extension { try { const existingContributors = page.contributorIds || []; contributorIds = Array.from( - new Set([...existingContributors, ...editingUserIds, page.creatorId]), + new Set([ + ...existingContributors, + ...editingUserIds, + page.creatorId, + ]), ); } catch (err) { //this.logger.debug('Contributors error:' + err?.['message']); @@ -158,6 +164,10 @@ export class PersistenceExtension implements Extension { this.logger.error(`Failed to update page ${pageId}`, err); } + if (page) { + await this.syncTransclusion(pageId, tiptapJson); + } + if (page) { await this.collabHistory.addContributors(pageId, editingUserIds); @@ -165,7 +175,9 @@ export class PersistenceExtension implements Extension { const userMentions = extractUserMentions(mentions); const oldMentions = page.content ? extractMentions(page.content) : []; - const oldMentionedUserIds = extractUserMentions(oldMentions).map((m) => m.entityId); + const oldMentionedUserIds = extractUserMentions(oldMentions).map( + (m) => m.entityId, + ); if (userMentions.length > 0) { await this.notificationQueue.add(QueueJob.PAGE_MENTION_NOTIFICATION, { @@ -229,4 +241,29 @@ export class PersistenceExtension implements Extension { { jobId: page.id, delay }, ); } + + /** + * Refresh `page_transclusions` and `page_transclusion_references` to match + * the page's current content. Runs outside the page-write transaction and + * isolates each call so a failure here cannot affect the page save itself. + * The diff is idempotent — the next save converges if a round drops anything. + */ + private async syncTransclusion( + pageId: string, + tiptapJson: unknown, + ): Promise { + try { + await this.transclusionService.syncPageTransclusions(pageId, tiptapJson); + } catch (err) { + this.logger.error(`Failed to sync transclusions for page ${pageId}`, err); + } + try { + await this.transclusionService.syncPageReferences(pageId, tiptapJson); + } catch (err) { + this.logger.error( + `Failed to sync transclusion references for page ${pageId}`, + err, + ); + } + } } diff --git a/apps/server/src/core/page/page.module.ts b/apps/server/src/core/page/page.module.ts index a2042279..20f3b68e 100644 --- a/apps/server/src/core/page/page.module.ts +++ b/apps/server/src/core/page/page.module.ts @@ -6,11 +6,12 @@ import { TrashCleanupService } from './services/trash-cleanup.service'; import { StorageModule } from '../../integrations/storage/storage.module'; import { CollaborationModule } from '../../collaboration/collaboration.module'; import { WatcherModule } from '../watcher/watcher.module'; +import { TransclusionModule } from './transclusion/transclusion.module'; @Module({ controllers: [PageController], providers: [PageService, PageHistoryService, TrashCleanupService], exports: [PageService, PageHistoryService], - imports: [StorageModule, CollaborationModule, WatcherModule], + imports: [StorageModule, CollaborationModule, WatcherModule, TransclusionModule], }) export class PageModule {} diff --git a/apps/server/src/core/page/services/page.service.ts b/apps/server/src/core/page/services/page.service.ts index 0c8149f9..57acfc49 100644 --- a/apps/server/src/core/page/services/page.service.ts +++ b/apps/server/src/core/page/services/page.service.ts @@ -54,6 +54,7 @@ import { import { markdownToHtml } from '@docmost/editor-ext'; import { WatcherService } from '../../watcher/watcher.service'; import { sql } from 'kysely'; +import { TransclusionService } from '../transclusion/transclusion.service'; @Injectable() export class PageService { @@ -71,6 +72,7 @@ export class PageService { private eventEmitter: EventEmitter2, private collaborationGateway: CollaborationGateway, private readonly watcherService: WatcherService, + private readonly transclusionService: TransclusionService, ) {} async findById( @@ -600,6 +602,17 @@ export class PageService { } } + // Remap transclusion-reference source pages to their copies when + // the source page is also being duplicated in the same operation. + if (node.type.name === 'transclusionReference') { + const sourcePageId = node.attrs.sourcePageId; + if (sourcePageId && pageMap.has(sourcePageId)) { + const mappedPage = pageMap.get(sourcePageId); + //@ts-ignore + node.attrs.sourcePageId = mappedPage.newPageId; + } + } + // Update internal page links in link marks for (const mark of node.marks) { if ( @@ -659,6 +672,31 @@ export class PageService { await this.db.insertInto('pages').values(insertablePages).execute(); + // Extract transclusions from every duplicated page and persist them in + // one statement. Duplication bypasses Yjs onStoreDocument; brand-new + // pages never have prior rows so we can skip the diff and just bulk-insert. + try { + await this.transclusionService.insertTransclusionsForPages( + insertablePages.map((p) => ({ id: p.id, content: p.content })), + ); + } catch (err) { + this.logger.error( + 'Failed to insert transclusions for duplicated pages', + err, + ); + } + + try { + await this.transclusionService.insertReferencesForPages( + insertablePages.map((p) => ({ id: p.id, content: p.content })), + ); + } catch (err) { + this.logger.error( + 'Failed to insert transclusion references for duplicated pages', + err, + ); + } + const insertedPageIds = insertablePages.map((page) => page.id); this.eventEmitter.emit(EventName.PAGE_CREATED, { pageIds: insertedPageIds, diff --git a/apps/server/src/core/page/transclusion/dto/lookup.dto.ts b/apps/server/src/core/page/transclusion/dto/lookup.dto.ts new file mode 100644 index 00000000..9d1a2f58 --- /dev/null +++ b/apps/server/src/core/page/transclusion/dto/lookup.dto.ts @@ -0,0 +1,24 @@ +import { Type } from 'class-transformer'; +import { + ArrayMaxSize, + IsArray, + IsString, + IsUUID, + ValidateNested, +} from 'class-validator'; + +export class LookupReferenceDto { + @IsUUID() + sourcePageId!: string; + + @IsString() + transclusionId!: string; +} + +export class LookupDto { + @IsArray() + @ArrayMaxSize(50) + @ValidateNested({ each: true }) + @Type(() => LookupReferenceDto) + references!: LookupReferenceDto[]; +} diff --git a/apps/server/src/core/page/transclusion/dto/references.dto.ts b/apps/server/src/core/page/transclusion/dto/references.dto.ts new file mode 100644 index 00000000..a4bc3c36 --- /dev/null +++ b/apps/server/src/core/page/transclusion/dto/references.dto.ts @@ -0,0 +1,9 @@ +import { IsString, IsUUID } from 'class-validator'; + +export class ReferencesDto { + @IsUUID() + sourcePageId!: string; + + @IsString() + transclusionId!: string; +} diff --git a/apps/server/src/core/page/transclusion/dto/unsync-reference.dto.ts b/apps/server/src/core/page/transclusion/dto/unsync-reference.dto.ts new file mode 100644 index 00000000..63fa2c5e --- /dev/null +++ b/apps/server/src/core/page/transclusion/dto/unsync-reference.dto.ts @@ -0,0 +1,12 @@ +import { IsString, IsUUID } from 'class-validator'; + +export class UnsyncReferenceDto { + @IsUUID() + referencePageId!: string; + + @IsUUID() + sourcePageId!: string; + + @IsString() + transclusionId!: string; +} diff --git a/apps/server/src/core/page/transclusion/spec/transclusion-prosemirror.util.spec.ts b/apps/server/src/core/page/transclusion/spec/transclusion-prosemirror.util.spec.ts new file mode 100644 index 00000000..48e3fe76 --- /dev/null +++ b/apps/server/src/core/page/transclusion/spec/transclusion-prosemirror.util.spec.ts @@ -0,0 +1,232 @@ +import { + collectReferencesFromPmJson, + collectTransclusionsFromPmJson, +} from '../utils/transclusion-prosemirror.util'; + +describe('collectTransclusionsFromPmJson', () => { + it('returns [] for null/undefined doc', () => { + expect(collectTransclusionsFromPmJson(null)).toEqual([]); + expect(collectTransclusionsFromPmJson(undefined)).toEqual([]); + }); + + it('returns [] for a doc with no transclusion nodes', () => { + const doc = { + type: 'doc', + content: [{ type: 'paragraph', content: [{ type: 'text', text: 'hi' }] }], + }; + expect(collectTransclusionsFromPmJson(doc)).toEqual([]); + }); + + it('extracts a top-level transclusion with id, name and content', () => { + const doc = { + type: 'doc', + content: [ + { + type: 'transclusion', + attrs: { id: 'abc123', name: 'Pricing' }, + content: [{ type: 'paragraph', content: [{ type: 'text', text: 'Body' }] }], + }, + ], + }; + const got = collectTransclusionsFromPmJson(doc); + expect(got).toHaveLength(1); + expect(got[0].transclusionId).toBe('abc123'); + expect(got[0].name).toBe('Pricing'); + expect(got[0].content).toEqual({ + type: 'doc', + content: [{ type: 'paragraph', content: [{ type: 'text', text: 'Body' }] }], + }); + }); + + it('skips transclusion nodes with no id (transient before UniqueID assigns one)', () => { + const doc = { + type: 'doc', + content: [ + { type: 'transclusion', attrs: {}, content: [{ type: 'paragraph' }] }, + ], + }; + expect(collectTransclusionsFromPmJson(doc)).toEqual([]); + }); + + it('returns multiple top-level transclusions', () => { + const doc = { + type: 'doc', + content: [ + { type: 'transclusion', attrs: { id: 'a' }, content: [{ type: 'paragraph' }] }, + { type: 'transclusion', attrs: { id: 'b', name: 'Two' }, content: [{ type: 'paragraph' }] }, + ], + }; + const got = collectTransclusionsFromPmJson(doc); + expect(got.map((e) => e.transclusionId)).toEqual(['a', 'b']); + }); + + it('does not recurse into a nested transclusion (transclusion cannot contain transclusion per schema, but be defensive)', () => { + const doc = { + type: 'doc', + content: [ + { + type: 'transclusion', + attrs: { id: 'outer' }, + content: [ + { + type: 'transclusion', + attrs: { id: 'inner' }, + content: [{ type: 'paragraph' }], + }, + ], + }, + ], + }; + const got = collectTransclusionsFromPmJson(doc); + expect(got.map((e) => e.transclusionId)).toEqual(['outer']); + }); + + it('finds transclusions nested inside other block containers (e.g. column)', () => { + const doc = { + type: 'doc', + content: [ + { + type: 'column', + content: [ + { type: 'transclusion', attrs: { id: 'inCol' }, content: [{ type: 'paragraph' }] }, + ], + }, + ], + }; + expect(collectTransclusionsFromPmJson(doc).map((e) => e.transclusionId)).toEqual([ + 'inCol', + ]); + }); + + it('uses the last id when duplicate ids appear (later wins, deterministic)', () => { + const doc = { + type: 'doc', + content: [ + { type: 'transclusion', attrs: { id: 'dup', name: 'first' }, content: [{ type: 'paragraph' }] }, + { type: 'transclusion', attrs: { id: 'dup', name: 'second' }, content: [{ type: 'paragraph' }] }, + ], + }; + const got = collectTransclusionsFromPmJson(doc); + expect(got).toHaveLength(1); + expect(got[0].name).toBe('second'); + }); +}); + +describe('collectReferencesFromPmJson', () => { + it('returns [] for null/undefined doc', () => { + expect(collectReferencesFromPmJson(null)).toEqual([]); + expect(collectReferencesFromPmJson(undefined)).toEqual([]); + }); + + it('returns [] for a doc with no transclusionReference nodes', () => { + const doc = { + type: 'doc', + content: [ + { type: 'paragraph', content: [{ type: 'text', text: 'hi' }] }, + ], + }; + expect(collectReferencesFromPmJson(doc)).toEqual([]); + }); + + it('extracts a top-level reference', () => { + const doc = { + type: 'doc', + content: [ + { + type: 'transclusionReference', + attrs: { sourcePageId: 'p1', transclusionId: 'e1' }, + }, + ], + }; + expect(collectReferencesFromPmJson(doc)).toEqual([ + { containingTransclusionId: null, sourcePageId: 'p1', transclusionId: 'e1' }, + ]); + }); + + it('skips references missing sourcePageId or transclusionId', () => { + const doc = { + type: 'doc', + content: [ + { type: 'transclusionReference', attrs: { transclusionId: 'e1' } }, + { type: 'transclusionReference', attrs: { sourcePageId: 'p1' } }, + { type: 'transclusionReference', attrs: {} }, + ], + }; + expect(collectReferencesFromPmJson(doc)).toEqual([]); + }); + + it('finds references nested in other block containers (column, callout, etc.)', () => { + const doc = { + type: 'doc', + content: [ + { + type: 'column', + content: [ + { + type: 'transclusionReference', + attrs: { sourcePageId: 'p1', transclusionId: 'e1' }, + }, + ], + }, + { + type: 'callout', + content: [ + { + type: 'transclusionReference', + attrs: { sourcePageId: 'p2', transclusionId: 'e2' }, + }, + ], + }, + ], + }; + expect(collectReferencesFromPmJson(doc)).toEqual([ + { containingTransclusionId: null, sourcePageId: 'p1', transclusionId: 'e1' }, + { containingTransclusionId: null, sourcePageId: 'p2', transclusionId: 'e2' }, + ]); + }); + + it('also finds references nested inside a transclusion (source) node', () => { + const doc = { + type: 'doc', + content: [ + { + type: 'transclusion', + attrs: { id: 'src1' }, + content: [ + { + type: 'transclusionReference', + attrs: { sourcePageId: 'p1', transclusionId: 'e1' }, + }, + ], + }, + ], + }; + expect(collectReferencesFromPmJson(doc)).toEqual([ + { containingTransclusionId: 'src1', sourcePageId: 'p1', transclusionId: 'e1' }, + ]); + }); + + it('dedupes identical (containingTransclusionId, sourcePageId, transclusionId) triples', () => { + const doc = { + type: 'doc', + content: [ + { + type: 'transclusionReference', + attrs: { sourcePageId: 'p1', transclusionId: 'e1' }, + }, + { + type: 'transclusionReference', + attrs: { sourcePageId: 'p1', transclusionId: 'e1' }, + }, + { + type: 'transclusionReference', + attrs: { sourcePageId: 'p2', transclusionId: 'e2' }, + }, + ], + }; + expect(collectReferencesFromPmJson(doc)).toEqual([ + { containingTransclusionId: null, sourcePageId: 'p1', transclusionId: 'e1' }, + { containingTransclusionId: null, sourcePageId: 'p2', transclusionId: 'e2' }, + ]); + }); +}); diff --git a/apps/server/src/core/page/transclusion/spec/transclusion-unsync.util.spec.ts b/apps/server/src/core/page/transclusion/spec/transclusion-unsync.util.spec.ts new file mode 100644 index 00000000..6b16e7c1 --- /dev/null +++ b/apps/server/src/core/page/transclusion/spec/transclusion-unsync.util.spec.ts @@ -0,0 +1,161 @@ +import { + rewriteAttachmentsForUnsync, + type AttachmentRewritePlan, +} from '../utils/transclusion-unsync.util'; + +describe('rewriteAttachmentsForUnsync', () => { + const fixedIds = (() => { + let i = 0; + return () => `new-${++i}`; + }); + + it('returns content unchanged when no attachment nodes are present', () => { + const content = { + type: 'doc', + content: [ + { type: 'paragraph', content: [{ type: 'text', text: 'hello' }] }, + ], + }; + const r = rewriteAttachmentsForUnsync(content, fixedIds()); + expect(r.content).toEqual(content); + expect(r.copies).toEqual([]); + }); + + it('rewrites attachmentId and src on a single image node', () => { + const oldId = '11111111-1111-1111-1111-111111111111'; + const content = { + type: 'doc', + content: [ + { + type: 'image', + attrs: { + attachmentId: oldId, + src: `/api/files/${oldId}/cat.png`, + }, + }, + ], + }; + const gen = fixedIds(); + const r = rewriteAttachmentsForUnsync(content, gen); + + expect(r.copies).toHaveLength(1); + const plan: AttachmentRewritePlan = r.copies[0]; + expect(plan.oldAttachmentId).toBe(oldId); + expect(plan.newAttachmentId).toBe('new-1'); + + const img = (r.content as any).content[0]; + expect(img.attrs.attachmentId).toBe('new-1'); + expect(img.attrs.src).toBe('/api/files/new-1/cat.png'); + }); + + it('rewrites every attachment node type (image, video, audio, attachment, drawio, excalidraw, pdf)', () => { + const types = [ + 'image', + 'video', + 'audio', + 'attachment', + 'drawio', + 'excalidraw', + 'pdf', + ] as const; + const content = { + type: 'doc', + content: types.map((t, i) => ({ + type: t, + attrs: { + attachmentId: `old-${i}`, + src: `/api/files/old-${i}/file`, + }, + })), + }; + const r = rewriteAttachmentsForUnsync(content, fixedIds()); + expect(r.copies).toHaveLength(types.length); + expect((r.content as any).content.map((n: any) => n.attrs.attachmentId)).toEqual( + Array.from({ length: types.length }, (_, i) => `new-${i + 1}`), + ); + }); + + it('reuses one new id per old attachmentId across nodes (dedupe)', () => { + const shared = 'shared-old'; + const content = { + type: 'doc', + content: [ + { + type: 'image', + attrs: { + attachmentId: shared, + src: `/api/files/${shared}/a.png`, + }, + }, + { + type: 'image', + attrs: { + attachmentId: shared, + src: `/api/files/${shared}/a.png`, + }, + }, + ], + }; + const r = rewriteAttachmentsForUnsync(content, fixedIds()); + expect(r.copies).toHaveLength(1); + expect(r.copies[0].oldAttachmentId).toBe(shared); + const newId = r.copies[0].newAttachmentId; + expect((r.content as any).content[0].attrs.attachmentId).toBe(newId); + expect((r.content as any).content[1].attrs.attachmentId).toBe(newId); + }); + + it('does not mutate the input content object', () => { + const content = { + type: 'doc', + content: [ + { + type: 'image', + attrs: { attachmentId: 'old-x', src: '/api/files/old-x/x.png' }, + }, + ], + }; + const snapshot = JSON.parse(JSON.stringify(content)); + rewriteAttachmentsForUnsync(content, fixedIds()); + expect(content).toEqual(snapshot); + }); + + it('skips nodes whose attachmentId is missing or not a uuid-shaped string', () => { + const content = { + type: 'doc', + content: [ + { type: 'image', attrs: {} }, + { type: 'image', attrs: { attachmentId: '' } }, + ], + }; + const r = rewriteAttachmentsForUnsync(content, fixedIds()); + expect(r.copies).toEqual([]); + expect(r.content).toEqual(content); + }); + + it('recurses into nested containers (column, callout)', () => { + const oldId = 'old-nested'; + const content = { + type: 'doc', + content: [ + { + type: 'callout', + content: [ + { + type: 'image', + attrs: { + attachmentId: oldId, + src: `/api/files/${oldId}/x.png`, + }, + }, + ], + }, + ], + }; + const r = rewriteAttachmentsForUnsync(content, fixedIds()); + expect(r.copies).toHaveLength(1); + const newId = r.copies[0].newAttachmentId; + const inner = (r.content as any).content[0].content[0]; + expect(inner.attrs.attachmentId).toBe(newId); + expect(inner.attrs.src).toBe(`/api/files/${newId}/x.png`); + }); +}); diff --git a/apps/server/src/core/page/transclusion/spec/transclusion.controller.spec.ts b/apps/server/src/core/page/transclusion/spec/transclusion.controller.spec.ts new file mode 100644 index 00000000..ab772d02 --- /dev/null +++ b/apps/server/src/core/page/transclusion/spec/transclusion.controller.spec.ts @@ -0,0 +1,78 @@ +import { Test } from '@nestjs/testing'; +import { TransclusionController } from '../transclusion.controller'; +import { TransclusionService } from '../transclusion.service'; +import { JwtAuthGuard } from '../../../../common/guards/jwt-auth.guard'; + +describe('TransclusionController.lookup', () => { + let controller: TransclusionController; + let service: jest.Mocked; + + beforeEach(async () => { + service = { + lookup: jest.fn(), + listReferences: jest.fn(), + unsyncReference: jest.fn(), + } as any; + + const module = await Test.createTestingModule({ + controllers: [TransclusionController], + providers: [{ provide: TransclusionService, useValue: service }], + }) + .overrideGuard(JwtAuthGuard) + .useValue({ canActivate: () => true }) + .compile(); + + controller = module.get(TransclusionController); + }); + + const user = { id: 'u1' } as any; + const ref = { sourcePageId: 'p1', transclusionId: 'e1' }; + + it('returns content when lookup succeeds', async () => { + service.lookup.mockResolvedValue({ + items: [ + { + sourcePageId: 'p1', + transclusionId: 'e1', + content: { type: 'doc' }, + sourceUpdatedAt: new Date(), + }, + ], + } as any); + + const out = await controller.lookup({ references: [ref] } as any, user); + expect(out.items[0]).not.toHaveProperty('status'); + expect((out.items[0] as any).content).toEqual({ type: 'doc' }); + expect(service.lookup).toHaveBeenCalledWith([ref], 'u1'); + }); + + it('returns no_access when service says no_access', async () => { + service.lookup.mockResolvedValue({ + items: [ + { + sourcePageId: 'p1', + transclusionId: 'e1', + status: 'no_access', + }, + ], + } as any); + + const out = await controller.lookup({ references: [ref] } as any, user); + expect((out.items[0] as { status?: string }).status).toBe('no_access'); + }); + + it('returns not_found when service says not_found', async () => { + service.lookup.mockResolvedValue({ + items: [ + { + sourcePageId: 'p1', + transclusionId: 'e1', + status: 'not_found', + }, + ], + } as any); + + const out = await controller.lookup({ references: [ref] } as any, user); + expect((out.items[0] as { status?: string }).status).toBe('not_found'); + }); +}); diff --git a/apps/server/src/core/page/transclusion/spec/transclusion.service.spec.ts b/apps/server/src/core/page/transclusion/spec/transclusion.service.spec.ts new file mode 100644 index 00000000..e5e38c41 --- /dev/null +++ b/apps/server/src/core/page/transclusion/spec/transclusion.service.spec.ts @@ -0,0 +1,412 @@ +import { Test } from '@nestjs/testing'; +import { TransclusionService } from '../transclusion.service'; +import { PageTransclusionsRepo } from '@docmost/db/repos/page-transclusions/page-transclusions.repo'; +import { PageTransclusionReferencesRepo } from '@docmost/db/repos/page-transclusion-references/page-transclusion-references.repo'; +import { PageRepo } from '@docmost/db/repos/page/page.repo'; +import { PagePermissionRepo } from '@docmost/db/repos/page/page-permission.repo'; +import { AttachmentRepo } from '@docmost/db/repos/attachment/attachment.repo'; +import { StorageService } from '../../../../integrations/storage/storage.service'; + +describe('TransclusionService.syncPageTransclusions', () => { + let service: TransclusionService; + let repo: jest.Mocked; + + beforeEach(async () => { + const mockRepo: jest.Mocked> = { + findByPageId: jest.fn(), + insert: jest.fn(), + update: jest.fn(), + deleteByPageAndTransclusionIds: jest.fn(), + }; + const module = await Test.createTestingModule({ + providers: [ + TransclusionService, + { provide: PageTransclusionsRepo, useValue: mockRepo }, + { provide: PageTransclusionReferencesRepo, useValue: {} }, + { provide: PageRepo, useValue: {} }, + { provide: PagePermissionRepo, useValue: {} }, + { provide: AttachmentRepo, useValue: {} }, + { provide: StorageService, useValue: {} }, + ], + }).compile(); + service = module.get(TransclusionService); + repo = module.get(PageTransclusionsRepo); + }); + + const pageId = '00000000-0000-0000-0000-000000000001'; + + it('inserts new transclusions that did not exist before', async () => { + repo.findByPageId.mockResolvedValue([]); + const pm = { + type: 'doc', + content: [ + { + type: 'transclusion', + attrs: { id: 'a', name: 'Hello' }, + content: [{ type: 'paragraph' }], + }, + ], + }; + + const result = await service.syncPageTransclusions(pageId, pm); + + expect(result).toEqual({ inserted: 1, updated: 0, deleted: 0 }); + expect(repo.insert).toHaveBeenCalledTimes(1); + expect(repo.insert).toHaveBeenCalledWith( + expect.objectContaining({ + pageId, + transclusionId: 'a', + name: 'Hello', + }), + undefined, + ); + expect(repo.update).not.toHaveBeenCalled(); + expect(repo.deleteByPageAndTransclusionIds).not.toHaveBeenCalled(); + }); + + it('updates transclusions whose name or content changed', async () => { + repo.findByPageId.mockResolvedValue([ + { + id: 'row1', + pageId, + transclusionId: 'a', + name: 'Old', + content: { type: 'doc', content: [{ type: 'paragraph' }] }, + createdAt: new Date(), + updatedAt: new Date(), + } as any, + ]); + const pm = { + type: 'doc', + content: [ + { + type: 'transclusion', + attrs: { id: 'a', name: 'New' }, + content: [ + { type: 'paragraph', content: [{ type: 'text', text: 'X' }] }, + ], + }, + ], + }; + + const result = await service.syncPageTransclusions(pageId, pm); + + expect(result).toEqual({ inserted: 0, updated: 1, deleted: 0 }); + expect(repo.update).toHaveBeenCalledWith( + pageId, + 'a', + expect.objectContaining({ name: 'New' }), + undefined, + ); + }); + + it('skips update when name and content are unchanged', async () => { + const sameContent = { + type: 'doc', + content: [{ type: 'paragraph' }], + }; + repo.findByPageId.mockResolvedValue([ + { + id: 'row1', + pageId, + transclusionId: 'a', + name: 'Same', + content: sameContent, + createdAt: new Date(), + updatedAt: new Date(), + } as any, + ]); + const pm = { + type: 'doc', + content: [ + { + type: 'transclusion', + attrs: { id: 'a', name: 'Same' }, + content: sameContent.content, + }, + ], + }; + + const result = await service.syncPageTransclusions(pageId, pm); + + expect(result).toEqual({ inserted: 0, updated: 0, deleted: 0 }); + expect(repo.update).not.toHaveBeenCalled(); + }); + + it('deletes transclusions that no longer appear in the doc', async () => { + repo.findByPageId.mockResolvedValue([ + { + id: 'r', + pageId, + transclusionId: 'gone', + name: null, + content: { type: 'doc', content: [] }, + createdAt: new Date(), + updatedAt: new Date(), + } as any, + ]); + const pm = { type: 'doc', content: [{ type: 'paragraph' }] }; + + const result = await service.syncPageTransclusions(pageId, pm); + + expect(result).toEqual({ inserted: 0, updated: 0, deleted: 1 }); + expect(repo.deleteByPageAndTransclusionIds).toHaveBeenCalledWith( + pageId, + ['gone'], + undefined, + ); + }); + + it('handles empty doc → noop', async () => { + repo.findByPageId.mockResolvedValue([]); + const result = await service.syncPageTransclusions(pageId, null); + expect(result).toEqual({ inserted: 0, updated: 0, deleted: 0 }); + expect(repo.insert).not.toHaveBeenCalled(); + expect(repo.update).not.toHaveBeenCalled(); + expect(repo.deleteByPageAndTransclusionIds).not.toHaveBeenCalled(); + }); + + it('passes through the trx parameter to repo calls', async () => { + repo.findByPageId.mockResolvedValue([]); + const trx = { mock: 'trx' } as any; + const pm = { + type: 'doc', + content: [ + { type: 'transclusion', attrs: { id: 'a' }, content: [{ type: 'paragraph' }] }, + ], + }; + + await service.syncPageTransclusions(pageId, pm, trx); + + expect(repo.findByPageId).toHaveBeenCalledWith(pageId, trx); + expect(repo.insert).toHaveBeenCalledWith(expect.anything(), trx); + }); +}); + +describe('TransclusionService.syncPageReferences', () => { + let service: TransclusionService; + let refRepo: jest.Mocked; + + beforeEach(async () => { + const mockTransclusionsRepo: Partial = {}; + const mockRefRepo: jest.Mocked> = { + findByReferencePageId: jest.fn(), + insertMany: jest.fn(), + deleteByReferenceAndKeys: jest.fn(), + findCyclicEdgesForSource: jest.fn().mockResolvedValue([]), + deleteByIds: jest.fn(), + }; + const module = await Test.createTestingModule({ + providers: [ + TransclusionService, + { provide: PageTransclusionsRepo, useValue: mockTransclusionsRepo }, + { provide: PageTransclusionReferencesRepo, useValue: mockRefRepo }, + { provide: PageRepo, useValue: {} }, + { provide: PagePermissionRepo, useValue: {} }, + { provide: AttachmentRepo, useValue: {} }, + { provide: StorageService, useValue: {} }, + ], + }).compile(); + service = module.get(TransclusionService); + refRepo = module.get(PageTransclusionReferencesRepo); + }); + + const referencePageId = '00000000-0000-0000-0000-000000000001'; + + it('inserts new loose references, no deletes when none existed', async () => { + refRepo.findByReferencePageId.mockResolvedValue([]); + const pm = { + type: 'doc', + content: [ + { + type: 'transclusionReference', + attrs: { sourcePageId: 'p1', transclusionId: 'e1' }, + }, + { + type: 'transclusionReference', + attrs: { sourcePageId: 'p2', transclusionId: 'e2' }, + }, + ], + }; + + const result = await service.syncPageReferences(referencePageId, pm); + + expect(result).toEqual({ inserted: 2, deleted: 0 }); + expect(refRepo.insertMany).toHaveBeenCalledWith( + [ + { + referencePageId, + containingTransclusionId: null, + sourcePageId: 'p1', + transclusionId: 'e1', + }, + { + referencePageId, + containingTransclusionId: null, + sourcePageId: 'p2', + transclusionId: 'e2', + }, + ], + undefined, + ); + expect(refRepo.deleteByReferenceAndKeys).not.toHaveBeenCalled(); + // Loose references never seed cycle detection. + expect(refRepo.findCyclicEdgesForSource).not.toHaveBeenCalled(); + }); + + it('records the containing transclusion when references nest in a source', async () => { + refRepo.findByReferencePageId.mockResolvedValue([]); + const pm = { + type: 'doc', + content: [ + { + type: 'transclusion', + attrs: { id: 's1' }, + content: [ + { + type: 'transclusionReference', + attrs: { sourcePageId: 'p2', transclusionId: 'e2' }, + }, + ], + }, + ], + }; + + const result = await service.syncPageReferences(referencePageId, pm); + + expect(result).toEqual({ inserted: 1, deleted: 0 }); + expect(refRepo.insertMany).toHaveBeenCalledWith( + [ + { + referencePageId, + containingTransclusionId: 's1', + sourcePageId: 'p2', + transclusionId: 'e2', + }, + ], + undefined, + ); + expect(refRepo.findCyclicEdgesForSource).toHaveBeenCalledWith( + 'p2', + 'e2', + undefined, + ); + }); + + it('deletes edges that close a cycle and excludes them from the inserted count', async () => { + refRepo.findByReferencePageId.mockResolvedValue([]); + refRepo.findCyclicEdgesForSource.mockResolvedValue([ + { + id: 'closing-edge-id', + referencePageId, + containingTransclusionId: 's1', + sourcePageId: 'p2', + transclusionId: 'e2', + createdAt: new Date(), + } as any, + ]); + const pm = { + type: 'doc', + content: [ + { + type: 'transclusion', + attrs: { id: 's1' }, + content: [ + { + type: 'transclusionReference', + attrs: { sourcePageId: 'p2', transclusionId: 'e2' }, + }, + ], + }, + ], + }; + + const result = await service.syncPageReferences(referencePageId, pm); + + expect(result).toEqual({ inserted: 0, deleted: 0 }); + expect(refRepo.deleteByIds).toHaveBeenCalledWith( + ['closing-edge-id'], + undefined, + ); + }); + + it('deletes references that no longer appear', async () => { + refRepo.findByReferencePageId.mockResolvedValue([ + { + id: 'r1', + referencePageId, + containingTransclusionId: null, + sourcePageId: 'p1', + transclusionId: 'e1', + createdAt: new Date(), + } as any, + ]); + const pm = { type: 'doc', content: [{ type: 'paragraph' }] }; + + const result = await service.syncPageReferences(referencePageId, pm); + + expect(result).toEqual({ inserted: 0, deleted: 1 }); + expect(refRepo.deleteByReferenceAndKeys).toHaveBeenCalledWith( + referencePageId, + [ + { + containingTransclusionId: null, + sourcePageId: 'p1', + transclusionId: 'e1', + }, + ], + undefined, + ); + expect(refRepo.insertMany).not.toHaveBeenCalled(); + }); + + it('is a no-op when desired matches existing exactly', async () => { + refRepo.findByReferencePageId.mockResolvedValue([ + { + id: 'r', + referencePageId, + containingTransclusionId: null, + sourcePageId: 'p1', + transclusionId: 'e1', + createdAt: new Date(), + } as any, + ]); + const pm = { + type: 'doc', + content: [ + { + type: 'transclusionReference', + attrs: { sourcePageId: 'p1', transclusionId: 'e1' }, + }, + ], + }; + + const result = await service.syncPageReferences(referencePageId, pm); + + expect(result).toEqual({ inserted: 0, deleted: 0 }); + expect(refRepo.insertMany).not.toHaveBeenCalled(); + expect(refRepo.deleteByReferenceAndKeys).not.toHaveBeenCalled(); + }); + + it('passes through trx parameter to repo calls', async () => { + refRepo.findByReferencePageId.mockResolvedValue([]); + const trx = { mock: 'trx' } as any; + const pm = { + type: 'doc', + content: [ + { + type: 'transclusionReference', + attrs: { sourcePageId: 'p1', transclusionId: 'e1' }, + }, + ], + }; + + await service.syncPageReferences(referencePageId, pm, trx); + + expect(refRepo.findByReferencePageId).toHaveBeenCalledWith( + referencePageId, + trx, + ); + expect(refRepo.insertMany).toHaveBeenCalledWith(expect.anything(), trx); + }); +}); diff --git a/apps/server/src/core/page/transclusion/transclusion.controller.ts b/apps/server/src/core/page/transclusion/transclusion.controller.ts new file mode 100644 index 00000000..d1c19fd9 --- /dev/null +++ b/apps/server/src/core/page/transclusion/transclusion.controller.ts @@ -0,0 +1,57 @@ +import { + Body, + Controller, + HttpCode, + HttpStatus, + Post, + UseGuards, +} from '@nestjs/common'; +import { JwtAuthGuard } from '../../../common/guards/jwt-auth.guard'; +import { AuthUser } from '../../../common/decorators/auth-user.decorator'; +import { User } from '@docmost/db/types/entity.types'; +import { TransclusionService } from './transclusion.service'; +import { LookupDto } from './dto/lookup.dto'; +import { ReferencesDto } from './dto/references.dto'; +import { UnsyncReferenceDto } from './dto/unsync-reference.dto'; + +@UseGuards(JwtAuthGuard) +@Controller('pages/transclusion') +export class TransclusionController { + constructor(private readonly transclusionService: TransclusionService) {} + + @HttpCode(HttpStatus.OK) + @Post('lookup') + async lookup(@Body() dto: LookupDto, @AuthUser() user: User) { + return this.transclusionService.lookup( + dto.references, + user?.id ?? null, + ); + } + + @HttpCode(HttpStatus.OK) + @Post('references') + async references( + @Body() dto: ReferencesDto, + @AuthUser() user: User, + ) { + return this.transclusionService.listReferences({ + sourcePageId: dto.sourcePageId, + transclusionId: dto.transclusionId, + viewerUserId: user.id, + }); + } + + @HttpCode(HttpStatus.OK) + @Post('unsync-reference') + async unsyncReference( + @Body() dto: UnsyncReferenceDto, + @AuthUser() user: User, + ) { + return this.transclusionService.unsyncReference( + dto.referencePageId, + dto.sourcePageId, + dto.transclusionId, + user.id, + ); + } +} diff --git a/apps/server/src/core/page/transclusion/transclusion.module.ts b/apps/server/src/core/page/transclusion/transclusion.module.ts new file mode 100644 index 00000000..22b563a0 --- /dev/null +++ b/apps/server/src/core/page/transclusion/transclusion.module.ts @@ -0,0 +1,12 @@ +import { Module } from '@nestjs/common'; +import { TransclusionController } from './transclusion.controller'; +import { TransclusionService } from './transclusion.service'; +import { StorageModule } from '../../../integrations/storage/storage.module'; + +@Module({ + imports: [StorageModule], + controllers: [TransclusionController], + providers: [TransclusionService], + exports: [TransclusionService], +}) +export class TransclusionModule {} diff --git a/apps/server/src/core/page/transclusion/transclusion.service.ts b/apps/server/src/core/page/transclusion/transclusion.service.ts new file mode 100644 index 00000000..b3c3ba7f --- /dev/null +++ b/apps/server/src/core/page/transclusion/transclusion.service.ts @@ -0,0 +1,526 @@ +import { + Injectable, + Logger, + ForbiddenException, + NotFoundException, +} from '@nestjs/common'; +import { isDeepStrictEqual } from 'node:util'; +import { v7 as uuid7 } from 'uuid'; +import { KyselyTransaction } from '@docmost/db/types/kysely.types'; +import { PageTransclusionsRepo } from '@docmost/db/repos/page-transclusions/page-transclusions.repo'; +import { PageTransclusionReferencesRepo } from '@docmost/db/repos/page-transclusion-references/page-transclusion-references.repo'; +import { PageRepo } from '@docmost/db/repos/page/page.repo'; +import { PagePermissionRepo } from '@docmost/db/repos/page/page-permission.repo'; +import { AttachmentRepo } from '@docmost/db/repos/attachment/attachment.repo'; +import { StorageService } from '../../../integrations/storage/storage.service'; +import { + collectReferencesFromPmJson, + collectTransclusionsFromPmJson, +} from './utils/transclusion-prosemirror.util'; +import { rewriteAttachmentsForUnsync } from './utils/transclusion-unsync.util'; +import { TransclusionLookup } from './transclusion.types'; +import { Page } from '@docmost/db/types/entity.types'; + +type ReferencingPageInfo = { + id: string; + slugId: string; + title: string | null; + icon: string | null; + spaceId: string; + spaceSlug: string | null; +}; + +@Injectable() +export class TransclusionService { + private readonly logger = new Logger(TransclusionService.name); + + constructor( + private readonly pageTransclusionsRepo: PageTransclusionsRepo, + private readonly pageTransclusionReferencesRepo: PageTransclusionReferencesRepo, + private readonly pageRepo: PageRepo, + private readonly pagePermissionRepo: PagePermissionRepo, + private readonly attachmentRepo: AttachmentRepo, + private readonly storageService: StorageService, + ) {} + + async syncPageTransclusions( + pageId: string, + pmJson: unknown, + trx?: KyselyTransaction, + ): Promise<{ inserted: number; updated: number; deleted: number }> { + const desired = collectTransclusionsFromPmJson(pmJson); + const desiredById = new Map(desired.map((d) => [d.transclusionId, d])); + + const existing = await this.pageTransclusionsRepo.findByPageId(pageId, trx); + const existingById = new Map(existing.map((e) => [e.transclusionId, e])); + + let inserted = 0; + let updated = 0; + let deleted = 0; + + for (const d of desired) { + const prev = existingById.get(d.transclusionId); + if (!prev) { + await this.pageTransclusionsRepo.insert( + { + pageId, + transclusionId: d.transclusionId, + name: d.name, + content: d.content as any, + }, + trx, + ); + inserted += 1; + continue; + } + + const nameChanged = prev.name !== d.name; + const contentChanged = !isDeepStrictEqual(prev.content, d.content); + if (nameChanged || contentChanged) { + await this.pageTransclusionsRepo.update( + pageId, + d.transclusionId, + { name: d.name, content: d.content as any }, + trx, + ); + updated += 1; + } + } + + const removedIds = existing + .filter((e) => !desiredById.has(e.transclusionId)) + .map((e) => e.transclusionId); + if (removedIds.length > 0) { + await this.pageTransclusionsRepo.deleteByPageAndTransclusionIds( + pageId, + removedIds, + trx, + ); + deleted = removedIds.length; + } + + return { inserted, updated, deleted }; + } + + async syncPageReferences( + referencePageId: string, + pmJson: unknown, + trx?: KyselyTransaction, + ): Promise<{ inserted: number; deleted: number }> { + const desired = collectReferencesFromPmJson(pmJson); + const keyOf = (s: { + containingTransclusionId: string | null; + sourcePageId: string; + transclusionId: string; + }) => + `${s.containingTransclusionId ?? ''}::${s.sourcePageId}::${s.transclusionId}`; + const desiredKeys = new Set(desired.map(keyOf)); + + const existing = await this.pageTransclusionReferencesRepo.findByReferencePageId( + referencePageId, + trx, + ); + const existingKeys = new Set(existing.map(keyOf)); + + const toInsert = desired + .filter((d) => !existingKeys.has(keyOf(d))) + .map((d) => ({ + referencePageId, + containingTransclusionId: d.containingTransclusionId, + sourcePageId: d.sourcePageId, + transclusionId: d.transclusionId, + })); + + const toDelete = existing + .filter((e) => !desiredKeys.has(keyOf(e))) + .map((e) => ({ + containingTransclusionId: e.containingTransclusionId, + sourcePageId: e.sourcePageId, + transclusionId: e.transclusionId, + })); + + if (toInsert.length > 0) { + await this.pageTransclusionReferencesRepo.insertMany(toInsert, trx); + } + if (toDelete.length > 0) { + await this.pageTransclusionReferencesRepo.deleteByReferenceAndKeys( + referencePageId, + toDelete, + trx, + ); + } + + const removedCount = await this.removeCyclicEdgesIntroducedBy( + toInsert, + trx, + ); + + return { + inserted: toInsert.length - removedCount, + deleted: toDelete.length, + }; + } + + /** + * Run cycle detection rooted at each newly-introduced edge's target and + * delete any closing edge that belongs to a cycle. Lookups for those rows + * then return `not_found`, which the editor renders as the cycle-aware + * placeholder. Returns the count of rows removed. + */ + private async removeCyclicEdgesIntroducedBy( + candidates: ReadonlyArray<{ + referencePageId: string; + containingTransclusionId: string | null; + sourcePageId: string; + transclusionId: string; + }>, + trx?: KyselyTransaction, + ): Promise { + const seedKeys = new Set(); + const seeds: Array<{ sourcePageId: string; transclusionId: string }> = []; + for (const c of candidates) { + if (c.containingTransclusionId === null) continue; + const key = `${c.sourcePageId}::${c.transclusionId}`; + if (seedKeys.has(key)) continue; + seedKeys.add(key); + seeds.push({ + sourcePageId: c.sourcePageId, + transclusionId: c.transclusionId, + }); + } + if (seeds.length === 0) return 0; + + const offendingIds = new Set(); + for (const seed of seeds) { + const cyclicEdges = + await this.pageTransclusionReferencesRepo.findCyclicEdgesForSource( + seed.sourcePageId, + seed.transclusionId, + trx, + ); + for (const edge of cyclicEdges) offendingIds.add(edge.id); + } + + if (offendingIds.size === 0) return 0; + + await this.pageTransclusionReferencesRepo.deleteByIds( + Array.from(offendingIds), + trx, + ); + return offendingIds.size; + } + + /** + * Extract transclusions from each page's PM JSON and bulk-insert into + * `page_transclusions` in a single statement. Intended for brand-new pages + * (e.g. duplication, import) where there is nothing to diff against. + */ + async insertTransclusionsForPages( + pages: Array<{ id: string; content: unknown }>, + trx?: KyselyTransaction, + ): Promise<{ inserted: number }> { + const rows: Parameters[0] = []; + for (const page of pages) { + const snapshots = collectTransclusionsFromPmJson(page.content); + for (const s of snapshots) { + rows.push({ + pageId: page.id, + transclusionId: s.transclusionId, + name: s.name, + content: s.content as any, + }); + } + } + if (rows.length === 0) return { inserted: 0 }; + await this.pageTransclusionsRepo.insertMany(rows, trx); + return { inserted: rows.length }; + } + + /** + * Walk each page's PM JSON for `transclusionReference` nodes and bulk-insert + * one row per `(containing, source, target)` triple. For brand-new pages + * (duplication, import) where there is nothing to diff against. + * + * Cycle detection runs once per distinct seed source after the bulk insert; + * any closing edges are removed so lookups return `not_found` and the + * editor renders the cycle-aware placeholder. + */ + async insertReferencesForPages( + pages: Array<{ id: string; content: unknown }>, + trx?: KyselyTransaction, + ): Promise<{ inserted: number }> { + const rows: Array<{ + referencePageId: string; + containingTransclusionId: string | null; + sourcePageId: string; + transclusionId: string; + }> = []; + for (const page of pages) { + const refs = collectReferencesFromPmJson(page.content); + for (const r of refs) { + rows.push({ + referencePageId: page.id, + containingTransclusionId: r.containingTransclusionId, + sourcePageId: r.sourcePageId, + transclusionId: r.transclusionId, + }); + } + } + if (rows.length === 0) return { inserted: 0 }; + await this.pageTransclusionReferencesRepo.insertMany(rows, trx); + + const removedCount = await this.removeCyclicEdgesIntroducedBy(rows, trx); + return { inserted: rows.length - removedCount }; + } + + async lookup( + references: Array<{ sourcePageId: string; transclusionId: string }>, + viewerUserId: string | null, + ): Promise<{ items: TransclusionLookup[] }> { + if (references.length === 0) return { items: [] }; + + const items: TransclusionLookup[] = new Array(references.length).fill(null); + const pendingIdx = references.map((_, i) => i); + + // 1) permission filter on the candidate pageIds (auth users only; + // unauthenticated share viewers get no_access for any private page). + const candidatePageIds = Array.from( + new Set(pendingIdx.map((i) => references[i].sourcePageId)), + ); + const accessibleSet = viewerUserId + ? new Set( + await this.pagePermissionRepo.filterAccessiblePageIds({ + pageIds: candidatePageIds, + userId: viewerUserId, + }), + ) + : new Set(); + + // 2) one DB hit for all (page_id, transclusion_id) keys still pending and accessible + const accessiblePending = pendingIdx.filter((i) => + accessibleSet.has(references[i].sourcePageId), + ); + const rows = await this.pageTransclusionsRepo.findManyByPageAndTransclusion( + accessiblePending.map((i) => ({ + pageId: references[i].sourcePageId, + transclusionId: references[i].transclusionId, + })), + ); + const rowKey = (r: { pageId: string; transclusionId: string }) => + `${r.pageId}::${r.transclusionId}`; + const rowMap = new Map(rows.map((r) => [rowKey(r), r])); + + // 3) pull updatedAt from each accessible page so we can return + // sourceUpdatedAt on each successful result. + const accessiblePageIds = Array.from( + new Set(accessiblePending.map((i) => references[i].sourcePageId)), + ); + const pageMeta = new Map(); + for (const pid of accessiblePageIds) { + const p = await this.pageRepo.findById(pid); + if (p && !p.deletedAt) pageMeta.set(p.id, p.updatedAt); + } + + // 4) stitch the results + for (const i of pendingIdx) { + const ref = references[i]; + if (!accessibleSet.has(ref.sourcePageId)) { + items[i] = { + sourcePageId: ref.sourcePageId, + transclusionId: ref.transclusionId, + status: 'no_access', + }; + continue; + } + const updatedAt = pageMeta.get(ref.sourcePageId); + if (!updatedAt) { + items[i] = { + sourcePageId: ref.sourcePageId, + transclusionId: ref.transclusionId, + status: 'not_found', + }; + continue; + } + + const row = rowMap.get(`${ref.sourcePageId}::${ref.transclusionId}`); + if (!row) { + items[i] = { + sourcePageId: ref.sourcePageId, + transclusionId: ref.transclusionId, + status: 'not_found', + }; + continue; + } + items[i] = { + sourcePageId: ref.sourcePageId, + transclusionId: ref.transclusionId, + content: row.content, + sourceUpdatedAt: updatedAt, + }; + } + + return { items }; + } + + async listReferences(opts: { + sourcePageId: string; + transclusionId: string; + viewerUserId: string; + }): Promise<{ + source: ReferencingPageInfo | null; + references: ReferencingPageInfo[]; + }> { + const { sourcePageId, transclusionId, viewerUserId } = opts; + + const referencePageIds = + await this.pageTransclusionReferencesRepo.findReferencePageIdsByTransclusion( + sourcePageId, + transclusionId, + ); + + const candidatePageIds = Array.from( + new Set([sourcePageId, ...referencePageIds]), + ); + const accessibleSet = new Set( + await this.pagePermissionRepo.filterAccessiblePageIds({ + pageIds: candidatePageIds, + userId: viewerUserId, + }), + ); + + const accessibleIds = candidatePageIds.filter((id) => + accessibleSet.has(id), + ); + if (accessibleIds.length === 0) { + return { source: null, references: [] }; + } + + const rows = await Promise.all( + accessibleIds.map((id) => + this.pageRepo.findById(id, { includeSpace: true }), + ), + ); + const byId = new Map(); + for (const p of rows) { + if (!p || p.deletedAt) continue; + const space = (p as Page & { space?: { slug?: string } }).space; + byId.set(p.id, { + id: p.id, + slugId: p.slugId, + title: p.title ?? null, + icon: p.icon ?? null, + spaceId: p.spaceId, + spaceSlug: space?.slug ?? null, + }); + } + + const source = byId.get(sourcePageId) ?? null; + const references = referencePageIds + .map((id) => byId.get(id)) + .filter((p): p is ReferencingPageInfo => Boolean(p)); + + return { source, references }; + } + + /** + * Convert a `transclusionReference` into a self-contained copy on the + * reference page: load source content, generate fresh attachment ids, copy storage + * files, insert new attachment rows, return rewritten content. The caller + * (controller) returns the content blob to the client which then performs + * `editor.commands.insertContentAt(range, content)` to replace the + * reference node. The next Yjs save naturally cleans up the + * page_transclusion_references row, but we also delete it eagerly here so a + * crash between server response and client save doesn't leave a stale row. + */ + async unsyncReference( + referencePageId: string, + sourcePageId: string, + transclusionId: string, + viewerUserId: string, + ): Promise<{ content: unknown }> { + const referencePage = await this.pageRepo.findById(referencePageId); + if (!referencePage || referencePage.deletedAt) { + throw new NotFoundException('Reference page not found'); + } + + const sourcePage = await this.pageRepo.findById(sourcePageId); + if (!sourcePage || sourcePage.deletedAt) { + throw new NotFoundException('Source page not found'); + } + + const accessible = new Set( + await this.pagePermissionRepo.filterAccessiblePageIds({ + pageIds: [referencePageId, sourcePageId], + userId: viewerUserId, + }), + ); + if (!accessible.has(referencePageId) || !accessible.has(sourcePageId)) { + throw new ForbiddenException(); + } + + const transclusion = + await this.pageTransclusionsRepo.findByPageAndTransclusion( + sourcePageId, + transclusionId, + ); + if (!transclusion) { + throw new NotFoundException('Sync block not found'); + } + + const { content, copies } = rewriteAttachmentsForUnsync( + transclusion.content, + () => uuid7(), + ); + + if (copies.length > 0) { + const oldIds = copies.map((c) => c.oldAttachmentId); + const oldRows = await this.attachmentRepo.findBySpaceId(sourcePage.spaceId); + const byOldId = new Map( + oldRows + .filter( + (a) => oldIds.includes(a.id) && a.pageId === sourcePageId, + ) + .map((a) => [a.id, a]), + ); + + for (const plan of copies) { + const old = byOldId.get(plan.oldAttachmentId); + if (!old) continue; + + const newFilePath = old.filePath + .split(plan.oldAttachmentId) + .join(plan.newAttachmentId); + try { + await this.storageService.copy(old.filePath, newFilePath); + } catch (err) { + this.logger.error( + `unsync: failed to copy attachment ${old.id}`, + err as Error, + ); + continue; + } + await this.attachmentRepo.insertAttachment({ + id: plan.newAttachmentId, + type: old.type, + filePath: newFilePath, + fileName: old.fileName, + fileSize: old.fileSize, + mimeType: old.mimeType, + fileExt: old.fileExt, + creatorId: viewerUserId, + workspaceId: referencePage.workspaceId, + pageId: referencePageId, + spaceId: referencePage.spaceId, + }); + } + } + + await this.pageTransclusionReferencesRepo.deleteOne( + referencePageId, + sourcePageId, + transclusionId, + ); + + return { content }; + } +} diff --git a/apps/server/src/core/page/transclusion/transclusion.types.ts b/apps/server/src/core/page/transclusion/transclusion.types.ts new file mode 100644 index 00000000..ba951d93 --- /dev/null +++ b/apps/server/src/core/page/transclusion/transclusion.types.ts @@ -0,0 +1,15 @@ +export type TransclusionLookup = + | { + sourcePageId: string; + transclusionId: string; + content: unknown; + sourceUpdatedAt: Date; + } + | { sourcePageId: string; transclusionId: string; status: 'not_found' } + | { sourcePageId: string; transclusionId: string; status: 'no_access' }; + +export type TransclusionNodeSnapshot = { + transclusionId: string; + name: string | null; + content: unknown; +}; diff --git a/apps/server/src/core/page/transclusion/utils/transclusion-prosemirror.util.ts b/apps/server/src/core/page/transclusion/utils/transclusion-prosemirror.util.ts new file mode 100644 index 00000000..af54d0dc --- /dev/null +++ b/apps/server/src/core/page/transclusion/utils/transclusion-prosemirror.util.ts @@ -0,0 +1,111 @@ +import { TransclusionNodeSnapshot } from '../transclusion.types'; + +const TRANSCLUSION_TYPE = 'transclusion'; +const REFERENCE_TYPE = 'transclusionReference'; + +export type TransclusionReferenceSnapshot = { + /** + * Id of the `transclusion` (source) node whose content holds this reference, + * or `null` if the reference is loose on the page (not nested inside a source). + * Used by the cycle-detection CTE to walk source-to-source edges. + */ + containingTransclusionId: string | null; + sourcePageId: string; + transclusionId: string; +}; + +/** + * Walks a ProseMirror JSON document and returns one snapshot per top-level + * `transclusion` node. Does not recurse into transclusions (schema disallows + * nesting). Skips transclusion nodes without an id (transient state). When + * duplicate ids are encountered, the later occurrence wins so the result is + * deterministic. + */ +export function collectTransclusionsFromPmJson( + doc: unknown, +): TransclusionNodeSnapshot[] { + if (!doc || typeof doc !== 'object') return []; + + const byId = new Map(); + + const visit = (node: any): void => { + if (!node || typeof node !== 'object') return; + + if (node.type === TRANSCLUSION_TYPE) { + const id = node.attrs?.id; + if (typeof id === 'string' && id.length > 0) { + const name = + typeof node.attrs?.name === 'string' && node.attrs.name.length > 0 + ? node.attrs.name + : null; + byId.set(id, { + transclusionId: id, + name, + content: { type: 'doc', content: node.content ?? [] }, + }); + } + return; // do not recurse into transclusion children + } + + if (Array.isArray(node.content)) { + for (const child of node.content) visit(child); + } + }; + + visit(doc); + return Array.from(byId.values()); +} + +/** + * Walks a ProseMirror JSON document and returns one snapshot per unique + * `(containingTransclusionId, sourcePageId, transclusionId)` triple found on + * `transclusionReference` nodes. Recurses into every container, including + * `transclusion` (a source node may contain a reference to another source). + * Order preserved by first-seen. + */ +export function collectReferencesFromPmJson( + doc: unknown, +): TransclusionReferenceSnapshot[] { + if (!doc || typeof doc !== 'object') return []; + + const seen = new Set(); + const out: TransclusionReferenceSnapshot[] = []; + + const visit = (node: any, containingTransclusionId: string | null): void => { + if (!node || typeof node !== 'object') return; + + if (node.type === REFERENCE_TYPE) { + const sourcePageId = node.attrs?.sourcePageId; + const transclusionId = node.attrs?.transclusionId; + if ( + typeof sourcePageId === 'string' && + sourcePageId.length > 0 && + typeof transclusionId === 'string' && + transclusionId.length > 0 + ) { + const key = `${containingTransclusionId ?? ''}::${sourcePageId}::${transclusionId}`; + if (!seen.has(key)) { + seen.add(key); + out.push({ + containingTransclusionId, + sourcePageId, + transclusionId, + }); + } + } + return; // atom node - no children + } + + const nextContainer = + node.type === TRANSCLUSION_TYPE && typeof node.attrs?.id === 'string' + ? node.attrs.id + : containingTransclusionId; + + if (Array.isArray(node.content)) { + for (const child of node.content) visit(child, nextContainer); + } + }; + + visit(doc, null); + return out; +} diff --git a/apps/server/src/core/page/transclusion/utils/transclusion-unsync.util.ts b/apps/server/src/core/page/transclusion/utils/transclusion-unsync.util.ts new file mode 100644 index 00000000..35ea5e59 --- /dev/null +++ b/apps/server/src/core/page/transclusion/utils/transclusion-unsync.util.ts @@ -0,0 +1,65 @@ +import { isAttachmentNode } from '../../../../common/helpers/prosemirror/utils'; + +export type AttachmentRewritePlan = { + oldAttachmentId: string; + newAttachmentId: string; +}; + +export type RewriteResult = { + content: unknown; + copies: AttachmentRewritePlan[]; +}; + +/** + * Walk a ProseMirror JSON tree, rewrite every attachment-like node so its + * `attachmentId` (and any `src` substring matching that id) point at a fresh + * id. Each unique old id maps to exactly one new id; the caller is responsible + * for actually copying the underlying storage file. + * + * Pure: does not mutate the input. Returns a deep clone. + */ +export function rewriteAttachmentsForUnsync( + content: unknown, + generateId: () => string, +): RewriteResult { + const cloned = content ? JSON.parse(JSON.stringify(content)) : content; + const idMap = new Map(); + + const visit = (node: any): void => { + if (!node || typeof node !== 'object') return; + + if ( + typeof node.type === 'string' && + isAttachmentNode(node.type) && + node.attrs + ) { + const oldId = node.attrs.attachmentId; + if (typeof oldId === 'string' && oldId.length > 0) { + let newId = idMap.get(oldId); + if (!newId) { + newId = generateId(); + idMap.set(oldId, newId); + } + node.attrs.attachmentId = newId; + if (typeof node.attrs.src === 'string' && node.attrs.src.includes(oldId)) { + node.attrs.src = node.attrs.src.split(oldId).join(newId); + } + } + } + + if (Array.isArray(node.content)) { + for (const child of node.content) visit(child); + } + }; + + visit(cloned); + + const copies: AttachmentRewritePlan[] = Array.from(idMap.entries()).map( + ([oldAttachmentId, newAttachmentId]) => ({ + oldAttachmentId, + newAttachmentId, + }), + ); + + return { content: cloned, copies }; +} diff --git a/apps/server/src/database/database.module.ts b/apps/server/src/database/database.module.ts index 748cf697..7f73b30d 100644 --- a/apps/server/src/database/database.module.ts +++ b/apps/server/src/database/database.module.ts @@ -11,6 +11,8 @@ import { SpaceMemberRepo } from '@docmost/db/repos/space/space-member.repo'; import { PageRepo } from './repos/page/page.repo'; import { PagePermissionRepo } from './repos/page/page-permission.repo'; import { CommentRepo } from './repos/comment/comment.repo'; +import { PageTransclusionsRepo } from './repos/page-transclusions/page-transclusions.repo'; +import { PageTransclusionReferencesRepo } from './repos/page-transclusion-references/page-transclusion-references.repo'; import { PageHistoryRepo } from './repos/page/page-history.repo'; import { AttachmentRepo } from './repos/attachment/attachment.repo'; import { KyselyDB } from '@docmost/db/types/kysely.types'; @@ -75,6 +77,8 @@ import { normalizePostgresUrl } from '../common/helpers'; SpaceMemberRepo, PageRepo, PagePermissionRepo, + PageTransclusionsRepo, + PageTransclusionReferencesRepo, PageHistoryRepo, CommentRepo, FavoriteRepo, @@ -97,6 +101,8 @@ import { normalizePostgresUrl } from '../common/helpers'; SpaceMemberRepo, PageRepo, PagePermissionRepo, + PageTransclusionsRepo, + PageTransclusionReferencesRepo, PageHistoryRepo, CommentRepo, FavoriteRepo, diff --git a/apps/server/src/database/migrations/20260501T202258-page-transclusions.ts b/apps/server/src/database/migrations/20260501T202258-page-transclusions.ts new file mode 100644 index 00000000..eabf23e2 --- /dev/null +++ b/apps/server/src/database/migrations/20260501T202258-page-transclusions.ts @@ -0,0 +1,79 @@ +import { type Kysely, sql } from 'kysely'; + +export async function up(db: Kysely): Promise { + await db.schema + .createTable('page_transclusions') + .addColumn('id', 'uuid', (col) => + col.primaryKey().defaultTo(sql`gen_uuid_v7()`), + ) + .addColumn('page_id', 'uuid', (col) => + col.notNull().references('pages.id').onDelete('cascade'), + ) + .addColumn('transclusion_id', 'varchar', (col) => col.notNull()) + .addColumn('name', 'text') + .addColumn('content', 'jsonb', (col) => col.notNull()) + .addColumn('created_at', 'timestamptz', (col) => + col.notNull().defaultTo(sql`now()`), + ) + .addColumn('updated_at', 'timestamptz', (col) => + col.notNull().defaultTo(sql`now()`), + ) + .addUniqueConstraint('page_transclusions_page_transclusion_unique', [ + 'page_id', + 'transclusion_id', + ]) + .execute(); + + await db.schema + .createIndex('idx_page_transclusions_page_id') + .on('page_transclusions') + .column('page_id') + .execute(); + + await db.schema + .createTable('page_transclusion_references') + .addColumn('id', 'uuid', (col) => + col.primaryKey().defaultTo(sql`gen_uuid_v7()`), + ) + .addColumn('reference_page_id', 'uuid', (col) => + col.notNull().references('pages.id').onDelete('cascade'), + ) + .addColumn('containing_transclusion_id', 'varchar') + .addColumn('source_page_id', 'uuid', (col) => + col.notNull().references('pages.id').onDelete('cascade'), + ) + .addColumn('transclusion_id', 'varchar', (col) => col.notNull()) + .addColumn('created_at', 'timestamptz', (col) => + col.notNull().defaultTo(sql`now()`), + ) + .addUniqueConstraint('page_transclusion_references_unique', [ + 'reference_page_id', + 'containing_transclusion_id', + 'source_page_id', + 'transclusion_id', + ]) + .execute(); + + await db.schema + .createIndex('idx_page_transclusion_references_reference_page_id') + .on('page_transclusion_references') + .column('reference_page_id') + .execute(); + + await db.schema + .createIndex('idx_page_transclusion_references_source') + .on('page_transclusion_references') + .columns(['source_page_id', 'transclusion_id']) + .execute(); + + await db.schema + .createIndex('idx_page_transclusion_references_container') + .on('page_transclusion_references') + .columns(['reference_page_id', 'containing_transclusion_id']) + .execute(); +} + +export async function down(db: Kysely): Promise { + await db.schema.dropTable('page_transclusion_references').execute(); + await db.schema.dropTable('page_transclusions').execute(); +} diff --git a/apps/server/src/database/repos/page-transclusion-references/page-transclusion-references.repo.ts b/apps/server/src/database/repos/page-transclusion-references/page-transclusion-references.repo.ts new file mode 100644 index 00000000..0601747d --- /dev/null +++ b/apps/server/src/database/repos/page-transclusion-references/page-transclusion-references.repo.ts @@ -0,0 +1,181 @@ +import { Injectable } from '@nestjs/common'; +import { InjectKysely } from 'nestjs-kysely'; +import { sql } from 'kysely'; +import { KyselyDB, KyselyTransaction } from '@docmost/db/types/kysely.types'; +import { dbOrTx } from '@docmost/db/utils'; +import { + InsertablePageTransclusionReference, + PageTransclusionReference, +} from '@docmost/db/types/entity.types'; + +export type TransclusionReferenceKey = { + containingTransclusionId: string | null; + sourcePageId: string; + transclusionId: string; +}; + +@Injectable() +export class PageTransclusionReferencesRepo { + constructor(@InjectKysely() private readonly db: KyselyDB) {} + + async findByReferencePageId( + referencePageId: string, + trx?: KyselyTransaction, + ): Promise { + return dbOrTx(this.db, trx) + .selectFrom('pageTransclusionReferences') + .selectAll() + .where('referencePageId', '=', referencePageId) + .execute(); + } + + async findReferencePageIdsByTransclusion( + sourcePageId: string, + transclusionId: string, + trx?: KyselyTransaction, + ): Promise { + const rows = await dbOrTx(this.db, trx) + .selectFrom('pageTransclusionReferences') + .select('referencePageId') + .distinct() + .where('sourcePageId', '=', sourcePageId) + .where('transclusionId', '=', transclusionId) + .execute(); + return rows.map((r) => r.referencePageId); + } + + async insertMany( + rows: InsertablePageTransclusionReference[], + trx?: KyselyTransaction, + ): Promise { + if (rows.length === 0) return; + await dbOrTx(this.db, trx) + .insertInto('pageTransclusionReferences') + .values(rows) + .onConflict((oc) => + oc + .columns([ + 'referencePageId', + 'containingTransclusionId', + 'sourcePageId', + 'transclusionId', + ]) + .doNothing(), + ) + .execute(); + } + + async deleteByReferenceAndKeys( + referencePageId: string, + keys: TransclusionReferenceKey[], + trx?: KyselyTransaction, + ): Promise { + if (keys.length === 0) return; + await dbOrTx(this.db, trx) + .deleteFrom('pageTransclusionReferences') + .where('referencePageId', '=', referencePageId) + .where((eb) => + eb.or( + keys.map((k) => + eb.and([ + k.containingTransclusionId === null + ? eb('containingTransclusionId', 'is', null) + : eb( + 'containingTransclusionId', + '=', + k.containingTransclusionId, + ), + eb('sourcePageId', '=', k.sourcePageId), + eb('transclusionId', '=', k.transclusionId), + ]), + ), + ), + ) + .execute(); + } + + async deleteOne( + referencePageId: string, + sourcePageId: string, + transclusionId: string, + trx?: KyselyTransaction, + ): Promise { + await dbOrTx(this.db, trx) + .deleteFrom('pageTransclusionReferences') + .where('referencePageId', '=', referencePageId) + .where('sourcePageId', '=', sourcePageId) + .where('transclusionId', '=', transclusionId) + .execute(); + } + + async deleteByIds(ids: string[], trx?: KyselyTransaction): Promise { + if (ids.length === 0) return; + await dbOrTx(this.db, trx) + .deleteFrom('pageTransclusionReferences') + .where('id', 'in', ids) + .execute(); + } + + /** + * Finds reference rows that participate in a cycle reachable from a given + * source `(pageId, transclusionId)`. The walk follows source-to-source edges + * (rows where `containing_transclusion_id IS NOT NULL`); loose page-level + * references are not graph edges and are ignored. + * + * Returned rows are the *closing edges* — those whose insertion completed a + * cycle. They are the safe set to remove to break the cycle while preserving + * unrelated structure. + */ + async findCyclicEdgesForSource( + sourcePageId: string, + transclusionId: string, + trx?: KyselyTransaction, + ): Promise { + const rows = await sql` + WITH RECURSIVE walk( + start_page, + start_id, + page_id, + transclusion_id, + edge_id, + is_cycle, + path + ) AS ( + SELECT + ${sourcePageId}::uuid, + ${transclusionId}::varchar, + ${sourcePageId}::uuid, + ${transclusionId}::varchar, + NULL::uuid, + false, + ARRAY[(${sourcePageId}::uuid, ${transclusionId}::varchar)] + UNION ALL + SELECT + w.start_page, + w.start_id, + r.source_page_id, + r.transclusion_id, + r.id, + (r.source_page_id, r.transclusion_id) = ANY(w.path), + w.path || ARRAY[(r.source_page_id, r.transclusion_id)] + FROM page_transclusion_references r + JOIN walk w + ON r.reference_page_id = w.page_id + AND r.containing_transclusion_id = w.transclusion_id + WHERE r.containing_transclusion_id IS NOT NULL + AND NOT w.is_cycle + ) + SELECT + r.id, + r.created_at AS "createdAt", + r.reference_page_id AS "referencePageId", + r.containing_transclusion_id AS "containingTransclusionId", + r.source_page_id AS "sourcePageId", + r.transclusion_id AS "transclusionId" + FROM walk w + JOIN page_transclusion_references r ON r.id = w.edge_id + WHERE w.is_cycle + `.execute(dbOrTx(this.db, trx)); + return rows.rows; + } +} diff --git a/apps/server/src/database/repos/page-transclusions/page-transclusions.repo.ts b/apps/server/src/database/repos/page-transclusions/page-transclusions.repo.ts new file mode 100644 index 00000000..f0526c40 --- /dev/null +++ b/apps/server/src/database/repos/page-transclusions/page-transclusions.repo.ts @@ -0,0 +1,112 @@ +import { Injectable } from '@nestjs/common'; +import { InjectKysely } from 'nestjs-kysely'; +import { KyselyDB, KyselyTransaction } from '@docmost/db/types/kysely.types'; +import { dbOrTx } from '@docmost/db/utils'; +import { + InsertablePageTransclusion, + PageTransclusion, + UpdatablePageTransclusion, +} from '@docmost/db/types/entity.types'; +import { sql } from 'kysely'; + +@Injectable() +export class PageTransclusionsRepo { + constructor(@InjectKysely() private readonly db: KyselyDB) {} + + async findByPageId( + pageId: string, + trx?: KyselyTransaction, + ): Promise { + return dbOrTx(this.db, trx) + .selectFrom('pageTransclusions') + .selectAll() + .where('pageId', '=', pageId) + .orderBy(sql`name asc nulls last`) + .orderBy('createdAt', 'asc') + .execute(); + } + + async findByPageAndTransclusion( + pageId: string, + transclusionId: string, + trx?: KyselyTransaction, + ): Promise { + return dbOrTx(this.db, trx) + .selectFrom('pageTransclusions') + .selectAll() + .where('pageId', '=', pageId) + .where('transclusionId', '=', transclusionId) + .executeTakeFirst(); + } + + async findManyByPageAndTransclusion( + keys: Array<{ pageId: string; transclusionId: string }>, + trx?: KyselyTransaction, + ): Promise { + if (keys.length === 0) return []; + return dbOrTx(this.db, trx) + .selectFrom('pageTransclusions') + .selectAll() + .where((eb) => + eb.or( + keys.map((k) => + eb.and([ + eb('pageId', '=', k.pageId), + eb('transclusionId', '=', k.transclusionId), + ]), + ), + ), + ) + .execute(); + } + + async insert( + data: InsertablePageTransclusion, + trx?: KyselyTransaction, + ): Promise { + return dbOrTx(this.db, trx) + .insertInto('pageTransclusions') + .values(data) + .returningAll() + .executeTakeFirstOrThrow(); + } + + async insertMany( + data: InsertablePageTransclusion[], + trx?: KyselyTransaction, + ): Promise { + if (data.length === 0) return; + await dbOrTx(this.db, trx) + .insertInto('pageTransclusions') + .values(data) + .execute(); + } + + async update( + pageId: string, + transclusionId: string, + data: UpdatablePageTransclusion, + trx?: KyselyTransaction, + ): Promise { + await dbOrTx(this.db, trx) + .updateTable('pageTransclusions') + .set({ ...data, updatedAt: new Date() }) + .where('pageId', '=', pageId) + .where('transclusionId', '=', transclusionId) + .execute(); + } + + async deleteByPageAndTransclusionIds( + pageId: string, + transclusionIds: string[], + trx?: KyselyTransaction, + ): Promise { + if (transclusionIds.length === 0) return; + await dbOrTx(this.db, trx) + .deleteFrom('pageTransclusions') + .where('pageId', '=', pageId) + .where('transclusionId', 'in', transclusionIds) + .execute(); + } + +} diff --git a/apps/server/src/database/types/db.d.ts b/apps/server/src/database/types/db.d.ts index ef2c02a0..6854a274 100644 --- a/apps/server/src/database/types/db.d.ts +++ b/apps/server/src/database/types/db.d.ts @@ -228,6 +228,25 @@ export interface GroupUsers { userId: string; } +export interface PageTransclusionReferences { + createdAt: Generated; + transclusionId: string; + referencePageId: string; + containingTransclusionId: string | null; + id: Generated; + sourcePageId: string; +} + +export interface PageTransclusions { + content: Json; + createdAt: Generated; + transclusionId: string; + id: Generated; + name: string | null; + pageId: string; + updatedAt: Generated; +} + export interface PageHistory { content: Json | null; contributorIds: Generated; @@ -571,6 +590,8 @@ export interface DB { groupUsers: GroupUsers; notifications: Notifications; pageAccess: PageAccess; + pageTransclusionReferences: PageTransclusionReferences; + pageTransclusions: PageTransclusions; pagePermissions: PagePermissions; pageHistory: PageHistory; pageVerifications: PageVerifications; diff --git a/apps/server/src/database/types/entity.types.ts b/apps/server/src/database/types/entity.types.ts index ffac8406..da1f66f3 100644 --- a/apps/server/src/database/types/entity.types.ts +++ b/apps/server/src/database/types/entity.types.ts @@ -7,6 +7,8 @@ import { Groups, Notifications, PageAccess as _PageAccess, + PageTransclusions, + PageTransclusionReferences, PagePermissions as _PagePermissions, PageVerifications as _PageVerifications, PageVerifiers as _PageVerifiers, @@ -145,6 +147,18 @@ export type Favorite = Selectable; export type InsertableFavorite = Insertable; export type UpdatableFavorite = Updateable>; +// Page Transclusion +export type PageTransclusion = Selectable; +export type InsertablePageTransclusion = Insertable; +export type UpdatablePageTransclusion = Updateable>; + +// Page Transclusion Reference +export type PageTransclusionReference = Selectable; +export type InsertablePageTransclusionReference = Insertable; +export type UpdatablePageTransclusionReference = Updateable< + Omit +>; + // File Task export type FileTask = Selectable; export type InsertableFileTask = Insertable; diff --git a/packages/editor-ext/src/index.ts b/packages/editor-ext/src/index.ts index f338bcfa..22a67f82 100644 --- a/packages/editor-ext/src/index.ts +++ b/packages/editor-ext/src/index.ts @@ -21,6 +21,7 @@ export * from "./lib/markdown"; export * from "./lib/search-and-replace"; export * from "./lib/embed-provider"; export * from "./lib/subpages"; +export * from "./lib/transclusion"; export * from "./lib/highlight"; export * from "./lib/heading/heading"; export * from "./lib/unique-id"; diff --git a/packages/editor-ext/src/lib/transclusion/index.ts b/packages/editor-ext/src/lib/transclusion/index.ts new file mode 100644 index 00000000..431311f0 --- /dev/null +++ b/packages/editor-ext/src/lib/transclusion/index.ts @@ -0,0 +1,2 @@ +export * from "./transclusion"; +export * from "./transclusion-reference"; diff --git a/packages/editor-ext/src/lib/transclusion/transclusion-reference.ts b/packages/editor-ext/src/lib/transclusion/transclusion-reference.ts new file mode 100644 index 00000000..a220e89a --- /dev/null +++ b/packages/editor-ext/src/lib/transclusion/transclusion-reference.ts @@ -0,0 +1,92 @@ +import { mergeAttributes, Node } from "@tiptap/core"; +import { ReactNodeViewRenderer } from "@tiptap/react"; + +export interface TransclusionReferenceOptions { + HTMLAttributes: Record; + view: any; +} + +export interface TransclusionReferenceAttributes { + sourcePageId?: string | null; + transclusionId?: string | null; +} + +declare module "@tiptap/core" { + interface Commands { + transclusionReference: { + insertTransclusionReference: ( + attributes: TransclusionReferenceAttributes, + ) => ReturnType; + }; + } +} + +export const TransclusionReference = Node.create({ + name: "transclusionReference", + + addOptions() { + return { + HTMLAttributes: {}, + view: null, + }; + }, + + group: "block", + atom: true, + selectable: true, + draggable: false, + + addAttributes() { + return { + sourcePageId: { + default: null, + parseHTML: (el) => el.getAttribute("data-source-page-id"), + renderHTML: (attrs) => + attrs.sourcePageId + ? { "data-source-page-id": attrs.sourcePageId } + : {}, + }, + transclusionId: { + default: null, + parseHTML: (el) => el.getAttribute("data-transclusion-id"), + renderHTML: (attrs) => + attrs.transclusionId + ? { "data-transclusion-id": attrs.transclusionId } + : {}, + }, + }; + }, + + parseHTML() { + return [{ tag: `div[data-type="${this.name}"]` }]; + }, + + renderHTML({ HTMLAttributes }) { + return [ + "div", + mergeAttributes( + { "data-type": this.name }, + this.options.HTMLAttributes, + HTMLAttributes, + ), + ]; + }, + + addCommands() { + return { + insertTransclusionReference: + (attributes) => + ({ commands }) => + commands.insertContent({ + type: this.name, + attrs: attributes, + }), + }; + }, + + addNodeView() { + if (!this.options.view) return null; + this.editor.isInitialized = true; + return ReactNodeViewRenderer(this.options.view); + }, +}); diff --git a/packages/editor-ext/src/lib/transclusion/transclusion.ts b/packages/editor-ext/src/lib/transclusion/transclusion.ts new file mode 100644 index 00000000..3d64e257 --- /dev/null +++ b/packages/editor-ext/src/lib/transclusion/transclusion.ts @@ -0,0 +1,181 @@ +import { mergeAttributes, Node } from "@tiptap/core"; +import { ReactNodeViewRenderer } from "@tiptap/react"; +import { Plugin, PluginKey } from "@tiptap/pm/state"; +import { ReplaceStep, ReplaceAroundStep } from "@tiptap/pm/transform"; + +export interface TransclusionOptions { + HTMLAttributes: Record; + view: any; +} + +export interface TransclusionAttributes { + id?: string | null; + name?: string | null; +} + +declare module "@tiptap/core" { + interface Commands { + transclusion: { + insertTransclusion: (attributes?: TransclusionAttributes) => ReturnType; + setTransclusionName: (name: string | null) => ReturnType; + toggleTransclusion: () => ReturnType; + unsyncTransclusion: () => ReturnType; + }; + } +} + +export const Transclusion = Node.create({ + name: "transclusion", + + addOptions() { + return { + HTMLAttributes: {}, + view: null, + }; + }, + + group: "block", + content: "block+", + defining: true, + isolating: true, + + addAttributes() { + return { + id: { + default: null, + parseHTML: (el) => el.getAttribute("data-id"), + renderHTML: (attrs) => + attrs.id ? { "data-id": attrs.id } : {}, + }, + name: { + default: null, + parseHTML: (el) => el.getAttribute("data-name"), + renderHTML: (attrs) => + attrs.name ? { "data-name": attrs.name } : {}, + }, + }; + }, + + parseHTML() { + return [{ tag: `div[data-type="${this.name}"]` }]; + }, + + renderHTML({ HTMLAttributes }) { + return [ + "div", + mergeAttributes( + { "data-type": this.name }, + this.options.HTMLAttributes, + HTMLAttributes, + ), + 0, + ]; + }, + + addCommands() { + return { + insertTransclusion: + (attributes) => + ({ commands, state, chain }) => { + const { $from } = state.selection; + for (let depth = $from.depth; depth > 0; depth -= 1) { + if ($from.node(depth).type.name === this.name) return false; + } + + const node = { + type: this.name, + attrs: attributes ?? {}, + content: [{ type: "paragraph" }], + }; + + const parent = $from.parent; + const isEmptyParagraph = + parent.type.name === "paragraph" && parent.content.size === 0; + + if (isEmptyParagraph) { + return chain() + .insertContentAt( + { from: $from.before(), to: $from.after() }, + node, + ) + .run(); + } + + return commands.insertContent(node); + }, + setTransclusionName: + (name) => + ({ commands }) => + commands.updateAttributes(this.name, { name }), + toggleTransclusion: + () => + ({ commands }) => + commands.toggleWrap(this.name), + unsyncTransclusion: + () => + ({ state, tr, dispatch }) => { + const { $from } = state.selection; + // Walk up to the nearest transclusion wrapper. + let depth = $from.depth; + while (depth > 0 && $from.node(depth).type.name !== this.name) { + depth -= 1; + } + if (depth === 0) return false; + + const node = $from.node(depth); + const start = $from.before(depth); + const end = start + node.nodeSize; + + if (dispatch) { + tr.replaceWith(start, end, node.content); + dispatch(tr); + } + return true; + }, + }; + }, + + addNodeView() { + if (!this.options.view) return null; + // Force the react node view to render immediately using flush sync + this.editor.isInitialized = true; + return ReactNodeViewRenderer(this.options.view); + }, + + addProseMirrorPlugins() { + const typeName = this.name; + return [ + new Plugin({ + key: new PluginKey(`${typeName}-noNesting`), + filterTransaction: (tr, state) => { + if (!tr.docChanged) return true; + for (const step of tr.steps) { + if ( + !(step instanceof ReplaceStep) && + !(step instanceof ReplaceAroundStep) + ) { + continue; + } + let sliceContainsTransclusion = false; + step.slice.content.descendants((node) => { + if (node.type.name === typeName) { + sliceContainsTransclusion = true; + return false; + } + return true; + }); + if (!sliceContainsTransclusion) continue; + + const $insert = state.doc.resolve(step.from); + for (let depth = $insert.depth; depth > 0; depth -= 1) { + if ($insert.node(depth).type.name === typeName) { + return false; + } + } + } + return true; + }, + }), + ]; + }, +}); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a3ca7b67..73948d8e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -382,9 +382,6 @@ importers: socket.io-client: specifier: ^4.8.3 version: 4.8.3 - tiptap-extension-global-drag-handle: - specifier: ^0.1.18 - version: 0.1.18 zod: specifier: ^4.3.6 version: 4.3.6 @@ -3915,7 +3912,7 @@ packages: resolution: {integrity: sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg==} '@react-email/body@0.3.0': - resolution: {integrity: sha512-uGo0BOOzjbMUo3lu+BIDWayvn5o6Xyfmnlla5VGf05n8gHMvO1ll7U4FtzWe3hxMLxMLwt53pmc4iE0M+B5slG+Ug==} + resolution: {integrity: sha512-uGo0BOOzjbMUo3lu+BIDWayvn5o6Xyfmnlla5VGf05n8gHMvO1ll7U4FtzWe3hxMLwt53pmc4iE0M+B5slG+Ug==} engines: {node: '>=20.0.0'} peerDependencies: react: ^18.0 || ^19.0 || ^19.0.0-rc @@ -4388,6 +4385,7 @@ packages: '@smithy/util-retry@4.3.6': resolution: {integrity: sha512-p6/FO1n2KxMeQyna067i0uJ6TSbb165ZhnRtCpWh4Foxqbfc6oW+XITaL8QkFJj3KFnDe2URt4gOhgU06EP9ew==} engines: {node: '>=18.0.0'} + deprecated: '@smithy/util-retry v4.3.6 contains a bug in Adaptive Retry, see https://github.com/smithy-lang/smithy-typescript/issues/1993. Upgrade to 4.3.7+' '@smithy/util-stream@4.5.25': resolution: {integrity: sha512-/PFpG4k8Ze8Ei+mMKj3oiPICYekthuzePZMgZbCqMiXIHHf4n2aZ4Ps0aSRShycFTGuj/J6XldmC0x0DwednIA==} @@ -9895,9 +9893,6 @@ packages: resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==} engines: {node: '>=12.0.0'} - tiptap-extension-global-drag-handle@0.1.18: - resolution: {integrity: sha512-jwFuy1K8DP3a4bFy76Hpc63w1Sil0B7uZ3mvhQomVvUFCU787Lg2FowNhn7NFzeyok761qY2VG+PZ/FDthWUdg==} - tlds@1.261.0: resolution: {integrity: sha512-QXqwfEl9ddlGBaRFXIvNKK6OhipSiLXuRuLJX5DErz0o0Q0rYxulWLdFryTkV5PkdZct5iMInwYEGe/eR++1AA==} hasBin: true @@ -21253,8 +21248,6 @@ snapshots: fdir: 6.5.0(picomatch@4.0.4) picomatch: 4.0.4 - tiptap-extension-global-drag-handle@0.1.18: {} - tlds@1.261.0: {} tldts-core@6.1.72: {}