update react-email

apps/client/package.json

@@ -25,7 +25,7 @@
     "@tabler/icons-react": "^3.40.0",
     "@tanstack/react-query": "5.90.17",
     "alfaaz": "^1.1.0",
-    "axios": "1.16.0",
+    "axios": "1.15.0",
     "blueimp-load-image": "^5.16.0",
     "clsx": "^2.1.1",
     "emoji-mart": "^5.6.0",
@@ -54,6 +54,7 @@
     "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": {

apps/client/public/locales/en-US/translation.json

@@ -870,12 +870,6 @@
   "Previous 7 days": "Previous 7 days",
   "Previous 30 days": "Previous 30 days",
   "Search chats...": "Search chats...",
-  "Search chats": "Search chats",
-  "Ask anything... Use @ to mention pages": "Ask anything... Use @ to mention pages",
-  "Ask anything or search your workspace": "Ask anything or search your workspace",
-  "Welcome to {{name}}": "Welcome to {{name}}",
-  "Add files": "Add files",
-  "Mention a page": "Mention a page",
   "Start a new chat to see it here.": "Start a new chat to see it here.",
   "Summarize this page": "Summarize this page",
   "Toggle AI Chat": "Toggle AI Chat",
@@ -932,43 +926,5 @@
   "Settings navigation": "Settings navigation",
   "AI navigation": "AI navigation",
   "Breadcrumb": "Breadcrumb",
-  "Synced block": "Synced block",
+  "Skip to main content": "Skip to main content"
-  "Create a block that stays in sync across pages.": "Create a block that stays in sync across pages.",
-  "Editing original": "Editing original",
-  "Copy synced block": "Copy synced block",
-  "Unsync": "Unsync",
-  "Delete synced block": "Delete synced 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",
-  "The original synced block no longer exists": "The original synced block no longer exists",
-  "You don't have access to this synced block": "You don't have access to this synced block",
-  "Failed to load this synced block": "Failed to load this synced block",
-  "Fixed editor toolbar": "Fixed editor toolbar",
-  "Show a formatting toolbar above the editor with quick access to common actions.": "Show a formatting toolbar above the editor with quick access to common actions.",
-  "Toggle fixed editor toolbar": "Toggle fixed editor toolbar",
-  "Normal text": "Normal text",
-  "More inline formatting": "More inline formatting",
-  "Subscript": "Subscript",
-  "Superscript": "Superscript",
-  "Inline code": "Inline code",
-  "Insert media": "Insert media",
-  "Mention": "Mention",
-  "Emoji": "Emoji",
-  "Columns": "Columns",
-  "More inserts": "More inserts",
-  "Embeds": "Embeds",
-  "Diagrams": "Diagrams",
-  "Advanced": "Advanced",
-  "Utility": "Utility",
-  "Decrease indent": "Decrease indent",
-  "Increase indent": "Increase indent",
-  "Clear formatting": "Clear formatting",
-  "Code block": "Code block",
-  "Experimental": "Experimental",
-  "Strikethrough": "Strikethrough",
-  "Undo": "Undo",
-  "Redo": "Redo"
 }

apps/client/src/components/layouts/global/app-shell.module.css

@@ -27,3 +27,23 @@
     background: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-5))
   }
 }
+
+.skipLink {
+  position: fixed;
+  left: 8px;
+  top: 8px;
+  padding: 8px 12px;
+  background: var(--mantine-color-blue-6);
+  color: #fff;
+  border-radius: 4px;
+  text-decoration: none;
+  z-index: 1000;
+  transform: translateY(-150%);
+
+  &:focus {
+    transform: translateY(0);
+    outline: 2px solid var(--mantine-color-blue-3);
+  }
+}
+
+

apps/client/src/components/layouts/global/global-app-shell.tsx

@@ -81,7 +81,11 @@ export default function GlobalAppShell({
   const showGlobalSidebar = !isSpaceRoute && !isSettingsRoute && !isAiRoute;
 
   return (
-    <AppShell
+    <>
+      <a href="#main-content" className={classes.skipLink}>
+        {t("Skip to main content")}
+      </a>
+      <AppShell
       header={{ height: 45 }}
       navbar={{
         width: isSpaceRoute ? sidebarWidth : 300,
@@ -154,5 +158,6 @@ export default function GlobalAppShell({
         </AppShell.Aside>
       )}
     </AppShell>
+    </>
   );
 }

apps/client/src/components/settings/app-version.tsx

@@ -29,7 +29,7 @@ export default function AppVersion() {
       >
         <Indicator
           label={t("New update")}
-          color="gray"
+          color="dark"
           inline
           size={16}
           position="middle-end"

apps/client/src/components/ui/custom-avatar.tsx

@@ -42,11 +42,6 @@ function pickInitialsColor(name: string) {
   return SAFE_INITIALS_COLORS[hashName(name) % SAFE_INITIALS_COLORS.length];
 }
 
-function sanitizeInitialsSource(name: string) {
-  const sanitized = name.replace(/[^\p{L}\p{N}\s]/gu, " ").trim();
-  return sanitized || name;
-}
-
 export const CustomAvatar = React.forwardRef<
   HTMLInputElement,
   CustomAvatarProps
@@ -54,13 +49,12 @@ export const CustomAvatar = React.forwardRef<
   const avatarLink = getAvatarUrl(avatarUrl, type);
   const resolvedColor =
     !color || color === "initials" ? pickInitialsColor(name ?? "") : color;
-  const initialsSource = sanitizeInitialsSource(name ?? "");
 
   return (
     <Avatar
       ref={ref}
       src={avatarLink}
-      name={initialsSource}
+      name={name}
       alt={name}
       color={resolvedColor}
       {...props}

apps/client/src/ee/ai-chat/components/ai-chat-sidebar.tsx

@@ -137,8 +137,7 @@ export default function AiChatSidebar() {
 
       <TextInput
         className={classes.searchInput}
-        placeholder={t("Search chats...")}
+        placeholder="Search chats..."
-        aria-label={t("Search chats")}
         leftSection={<IconSearch size={14} />}
         size="xs"
         value={search}

apps/client/src/ee/ai-chat/components/aside-chat-panel.tsx

@@ -178,7 +178,6 @@ export default function AsideChatPanel() {
             href="/ai"
             variant="subtle"
             color="dark"
-            aria-label={t("New chat")}
             onClick={handleNewChat}
           >
             <IconPlus size={20} stroke={1.75} />
@@ -186,23 +185,13 @@ export default function AsideChatPanel() {
         </Tooltip>
 
         <Tooltip label={t("Open full page")} openDelay={250}>
-          <ActionIcon
+          <ActionIcon variant="subtle" color="dark" onClick={handleExpand}>
-            variant="subtle"
-            color="dark"
-            aria-label={t("Open full page")}
-            onClick={handleExpand}
-          >
             <IconArrowsDiagonal size={18} stroke={1.5} />
           </ActionIcon>
         </Tooltip>
 
         <Tooltip label={t("Close")} openDelay={250}>
-          <ActionIcon
+          <ActionIcon variant="subtle" color="dark" onClick={handleClose}>
-            variant="subtle"
-            color="dark"
-            aria-label={t("Close")}
-            onClick={handleClose}
-          >
             <IconX size={20} stroke={1.75} />
           </ActionIcon>
         </Tooltip>

apps/client/src/ee/ai-chat/components/chat-empty-state.tsx

@@ -65,7 +65,7 @@ export default function ChatEmptyState({ isStreaming, onSend, onStop }: Props) {
           isStreaming={isStreaming}
           onSend={onSend}
           onStop={onStop}
-          placeholder={t("Ask anything... Use @ to mention pages")}
+          placeholder="Ask anything... Use @ to mention pages"
           autofocus
         />
       </div>

apps/client/src/ee/ai-chat/components/chat-input.tsx

@@ -200,7 +200,7 @@ export default function ChatInput({
         link: false,
       }),
       Placeholder.configure({
-        placeholder: placeholder || t("Ask anything... Use @ to mention pages"),
+        placeholder: placeholder || "Ask anything... Use @ to mention pages",
       }),
       CharacterCount.configure({
         limit: 50000,
@@ -225,10 +225,6 @@ export default function ChatInput({
       }),
     ],
     editorProps: {
-      attributes: {
-        "aria-label": placeholder || t("Ask anything... Use @ to mention pages"),
-        "aria-multiline": "true",
-      },
       handleDOMEvents: {
         keydown: (_view, event) => {
           if (
@@ -279,8 +275,6 @@ export default function ChatInput({
         type="file"
         accept={ACCEPTED_FILE_TYPES}
         multiple
-        aria-label={t("Add files")}
-        tabIndex={-1}
         style={{ display: "none" }}
         onChange={(e) => handleFileSelect(e.target.files)}
       />

apps/client/src/ee/ai-chat/components/chat-tool-group.tsx

@@ -31,16 +31,7 @@ export default function ChatToolGroup({ toolCalls, isStreaming }: Props) {
     <div className={classes.toolGroup}>
       <div
         className={classes.toolGroupHeader}
-        role="button"
-        tabIndex={0}
-        aria-expanded={expanded}
         onClick={() => setExpanded((prev) => !prev)}
-        onKeyDown={(event) => {
-          if (event.key === "Enter" || event.key === " ") {
-            event.preventDefault();
-            setExpanded((prev) => !prev);
-          }
-        }}
       >
         {activeLabel ? (
           <IconLoader2 size={12} className={classes.processingSpinner} />

apps/client/src/ee/ai-chat/styles/ai-chat.module.css

@@ -98,7 +98,7 @@
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: var(--mantine-color-dimmed);
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
   margin-bottom: var(--mantine-spacing-xs);
 }
 
@@ -125,7 +125,7 @@
 .suggestionsLabel {
   font-size: var(--mantine-font-size-xs);
   font-weight: 500;
-  color: var(--mantine-color-dimmed);
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-bottom: var(--mantine-spacing-sm);

apps/client/src/ee/ai-chat/styles/chat-input.module.css

@@ -43,7 +43,7 @@
   margin-top: 6px;
   text-align: center;
   font-size: var(--mantine-font-size-xs);
-  color: var(--mantine-color-dimmed);
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
 }
 
 .attachmentChips {

apps/client/src/ee/ai-chat/styles/chat-sidebar.module.css

@@ -36,7 +36,7 @@
   padding: 4px var(--mantine-spacing-xs);
   font-size: var(--mantine-font-size-xs);
   font-weight: 600;
-  color: var(--mantine-color-dimmed);
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
   user-select: none;
 }
 
@@ -104,7 +104,7 @@
 
 .chatItemDate {
   font-size: var(--mantine-font-size-xs);
-  color: var(--mantine-color-dimmed);
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
   white-space: nowrap;
   transition: opacity 150ms;
 }

apps/client/src/features/editor/components/bubble-menu/bubble-menu.module.css

@@ -28,18 +28,6 @@
   }
 }
 
-.colorSwatch:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--mantine-color-blue-6);
-  position: relative;
-  z-index: 1;
-}
-
-.removeColor:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--mantine-color-blue-6);
-}
-
 .buttonRoot {
   height: 34px;
   padding-left: rem(8);

apps/client/src/features/editor/components/bubble-menu/bubble-menu.tsx

@@ -27,7 +27,7 @@ import { isCellSelection, isTextSelected } from "@docmost/editor-ext";
 import { LinkSelector } from "@/features/editor/components/bubble-menu/link-selector.tsx";
 import { useTranslation } from "react-i18next";
 import { showAiMenuAtom, showLinkMenuAtom } from "@/features/editor/atoms/editor-atoms";
-import { userAtom, workspaceAtom } from "@/features/user/atoms/current-user-atom";
+import { workspaceAtom } from "@/features/user/atoms/current-user-atom";
 
 export interface BubbleMenuItem {
   name: string;
@@ -46,9 +46,6 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
   const [showCommentPopup, setShowCommentPopup] = useAtom(showCommentPopupAtom);
   const workspace = useAtomValue(workspaceAtom);
   const isGenerativeAiEnabled = workspace?.settings?.ai?.generative === true;
-  const user = useAtomValue(userAtom);
-  const editorToolbarEnabled =
-    user?.settings?.preferences?.editorToolbar ?? false;
   const [, setDraftCommentId] = useAtom(draftCommentIdAtom);
   const showCommentPopupRef = useRef(showCommentPopup);
   const showAiMenuRef = useRef(showAiMenu);
@@ -152,7 +149,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
       return isTextSelected(editor);
     },
     options: {
-      placement: editorToolbarEnabled ? "bottom" : "top",
+      placement: "top",
       offset: 8,
       onHide: () => {
         setIsNodeSelectorOpen(false);
@@ -191,60 +188,56 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
             <div className={classes.divider} />
           </>
         )}
-        {!editorToolbarEnabled && (
+        <NodeSelector
-          <>
+          editor={props.editor}
-            <NodeSelector
+          isOpen={isNodeSelectorOpen}
-              editor={props.editor}
+          setIsOpen={() => {
-              isOpen={isNodeSelectorOpen}
+            setIsNodeSelectorOpen(!isNodeSelectorOpen);
-              setIsOpen={() => {
+            setIsTextAlignmentOpen(false);
-                setIsNodeSelectorOpen(!isNodeSelectorOpen);
+            setIsColorSelectorOpen(false);
-                setIsTextAlignmentOpen(false);
+          }}
-                setIsColorSelectorOpen(false);
+        />
-              }}
-            />
 
-            <TextAlignmentSelector
+        <TextAlignmentSelector
-              editor={props.editor}
+          editor={props.editor}
-              isOpen={isTextAlignmentSelectorOpen}
+          isOpen={isTextAlignmentSelectorOpen}
-              setIsOpen={() => {
+          setIsOpen={() => {
-                setIsTextAlignmentOpen(!isTextAlignmentSelectorOpen);
+            setIsTextAlignmentOpen(!isTextAlignmentSelectorOpen);
-                setIsNodeSelectorOpen(false);
+            setIsNodeSelectorOpen(false);
-                setIsColorSelectorOpen(false);
+            setIsColorSelectorOpen(false);
-              }}
+          }}
-            />
+        />
 
-            <ActionIcon.Group>
+        <ActionIcon.Group>
-              {items.map((item, index) => (
+          {items.map((item, index) => (
-                <Tooltip key={index} label={t(item.name)} withArrow>
+            <Tooltip key={index} label={t(item.name)} withArrow>
-                  <ActionIcon
+              <ActionIcon
-                    key={index}
+                key={index}
-                    variant="default"
+                variant="default"
-                    size="lg"
+                size="lg"
-                    radius="0"
+                radius="0"
-                    aria-label={t(item.name)}
+                aria-label={t(item.name)}
-                    className={clsx({ [classes.active]: item.isActive() })}
+                className={clsx({ [classes.active]: item.isActive() })}
-                    style={{ border: "none" }}
+                style={{ border: "none" }}
-                    onClick={item.command}
+                onClick={item.command}
-                  >
+              >
-                    <item.icon style={{ width: rem(16) }} stroke={2} />
+                <item.icon style={{ width: rem(16) }} stroke={2} />
-                  </ActionIcon>
+              </ActionIcon>
-                </Tooltip>
+            </Tooltip>
-              ))}
+          ))}
-            </ActionIcon.Group>
+        </ActionIcon.Group>
 
-            <LinkSelector />
+        <LinkSelector />
 
-            <ColorSelector
+        <ColorSelector
-              editor={props.editor}
+          editor={props.editor}
-              isOpen={isColorSelectorOpen}
+          isOpen={isColorSelectorOpen}
-              setIsOpen={() => {
+          setIsOpen={() => {
-                setIsColorSelectorOpen(!isColorSelectorOpen);
+            setIsColorSelectorOpen(!isColorSelectorOpen);
-                setIsNodeSelectorOpen(false);
+            setIsNodeSelectorOpen(false);
-                setIsTextAlignmentOpen(false);
+            setIsTextAlignmentOpen(false);
-              }}
+          }}
-            />
+        />
-          </>
-        )}
 
         <Tooltip label={t(commentItem.name)} withArrow withinPortal={false}>
           <ActionIcon

apps/client/src/features/editor/components/bubble-menu/color-selector.tsx

@@ -4,6 +4,7 @@ import {
   Button,
   Popover,
   rem,
+  ScrollArea,
   Text,
   Tooltip,
   SimpleGrid,
@@ -113,63 +114,6 @@ const HIGHLIGHT_COLORS: BubbleColorMenuItem[] = [
   },
 ];
 
-const COLOR_GRID_COLS = 5;
-
-function focusSwatch(grid: "text" | "highlight", index: number) {
-  const el = document.querySelector<HTMLElement>(
-    `[data-color-grid="${grid}"][data-color-index="${index}"]`,
-  );
-  el?.focus();
-}
-
-function handleColorKeyNav(
-  e: React.KeyboardEvent<HTMLDivElement>,
-  index: number,
-  grid: "text" | "highlight",
-) {
-  const cols = COLOR_GRID_COLS;
-  const total =
-    grid === "text" ? TEXT_COLORS.length : HIGHLIGHT_COLORS.length;
-  const col = index % cols;
-
-  if (e.key === "ArrowRight") {
-    e.preventDefault();
-    if (index < total - 1) focusSwatch(grid, index + 1);
-    return;
-  }
-  if (e.key === "ArrowLeft") {
-    e.preventDefault();
-    if (index > 0) focusSwatch(grid, index - 1);
-    return;
-  }
-  if (e.key === "ArrowDown") {
-    e.preventDefault();
-    const next = index + cols;
-    if (next < total) {
-      focusSwatch(grid, next);
-    } else if (grid === "text") {
-      focusSwatch("highlight", Math.min(col, HIGHLIGHT_COLORS.length - 1));
-    } else if (grid === "highlight") {
-      document
-        .querySelector<HTMLElement>('[data-color-grid="remove"]')
-        ?.focus();
-    }
-    return;
-  }
-  if (e.key === "ArrowUp") {
-    e.preventDefault();
-    const prev = index - cols;
-    if (prev >= 0) {
-      focusSwatch(grid, prev);
-    } else if (grid === "highlight") {
-      const lastRowStart =
-        Math.floor((TEXT_COLORS.length - 1) / cols) * cols;
-      focusSwatch("text", Math.min(lastRowStart + col, TEXT_COLORS.length - 1));
-    }
-    return;
-  }
-}
-
 export const ColorSelector: FC<ColorSelectorProps> = ({
   editor,
   isOpen,
@@ -213,20 +157,13 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
   );
 
   return (
-    <Popover
+    <Popover width={220} opened={isOpen} withArrow>
-      width={220}
-      opened={isOpen}
-      onChange={setIsOpen}
-      trapFocus
-      withArrow
-    >
       <Popover.Target>
         <Tooltip label={t("Text color")} withArrow>
           <Button
             variant="default"
             radius="0"
             rightSection={<IconChevronDown size={16} />}
-            onMouseDown={(e) => e.preventDefault()}
             onClick={() => setIsOpen(!isOpen)}
             data-text-color={activeColorItem?.color || ""}
             data-highlight-color={activeHighlightItem?.color || ""}
@@ -244,8 +181,9 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
         </Tooltip>
       </Popover.Target>
 
-      <Popover.Dropdown onMouseDown={(e) => e.preventDefault()}>
+      <Popover.Dropdown>
-        <Stack gap="md" p="2px">
+        <ScrollArea.Autosize type="scroll" mah="400">
+          <Stack gap="md">
             <Box>
               <Text size="sm" fw={600} mb="xs">
                 {t("Text color")}
@@ -269,10 +207,6 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                     <Box
                       role="button"
                       tabIndex={0}
-                      data-autofocus={index === 0 ? true : undefined}
-                      data-color-grid="text"
-                      data-color-index={index}
-                      className={classes.colorSwatch}
                       aria-label={t(name)}
                       aria-pressed={!!editorState[`text_${color}`]}
                       onClick={applyTextColor}
@@ -280,9 +214,7 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                         if (e.key === "Enter" || e.key === " ") {
                           e.preventDefault();
                           applyTextColor();
-                          return;
                         }
-                        handleColorKeyNav(e, index, "text");
                       }}
                       style={{
                         width: rem(28),
@@ -335,9 +267,6 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                     <Box
                       role="button"
                       tabIndex={0}
-                      data-color-grid="highlight"
-                      data-color-index={index}
-                      className={classes.colorSwatch}
                       aria-label={t(name)}
                       aria-pressed={!!editorState[`highlight_${color}`]}
                       onClick={applyHighlight}
@@ -345,9 +274,7 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                         if (e.key === "Enter" || e.key === " ") {
                           e.preventDefault();
                           applyHighlight();
-                          return;
                         }
-                        handleColorKeyNav(e, index, "highlight");
                       }}
                       style={{
                         width: rem(28),
@@ -383,27 +310,16 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
             <Button
               variant="default"
               fullWidth
-              data-color-grid="remove"
-              className={classes.removeColor}
               onClick={() => {
                 editor.commands.unsetColor();
                 editor.commands.unsetHighlight();
                 setIsOpen(false);
               }}
-              onKeyDown={(e) => {
-                if (e.key === "ArrowUp") {
-                  e.preventDefault();
-                  const lastRowStart =
-                    Math.floor(
-                      (HIGHLIGHT_COLORS.length - 1) / COLOR_GRID_COLS,
-                    ) * COLOR_GRID_COLS;
-                  focusSwatch("highlight", lastRowStart);
-                }
-              }}
             >
               {t("Remove color")}
             </Button>
           </Stack>
+        </ScrollArea.Autosize>
       </Popover.Dropdown>
     </Popover>
   );

apps/client/src/features/editor/components/bubble-menu/node-selector.tsx

@@ -12,7 +12,6 @@ import {
   IconInfoCircle,
   IconList,
   IconListNumbers,
-  IconQuote,
   IconTypography,
 } from "@tabler/icons-react";
 import { Popover, Button, ScrollArea, Tooltip } from "@mantine/core";
@@ -60,7 +59,6 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
         isCodeBlock: ctx.editor.isActive("codeBlock"),
         isCallout: ctx.editor.isActive("callout"),
         isDetails: ctx.editor.isActive("details"),
-        isTransclusionSource: ctx.editor.isActive("transclusionSource"),
       };
     },
   });
@@ -124,12 +122,6 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
           .run(),
       isActive: () => editorState?.isBlockquote,
     },
-    {
-      name: "Synced block",
-      icon: IconQuote,
-      command: () => editor.chain().focus().toggleTransclusionSource().run(),
-      isActive: () => editorState?.isTransclusionSource,
-    },
     {
       name: "Code",
       icon: IconCode,
@@ -155,14 +147,9 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
   };
 
   return (
-    <Popover opened={isOpen} onChange={setIsOpen} withArrow>
+    <Popover opened={isOpen} withArrow>
       <Popover.Target>
-        <Tooltip
+        <Tooltip label={t("Turn into")} withArrow withinPortal={false} disabled={isOpen}>
-          label={t("Turn into")}
-          withArrow
-          withinPortal={false}
-          disabled={isOpen}
-        >
           <Button
             className={classes.buttonRoot}
             variant="default"

apps/client/src/features/editor/components/bubble-menu/text-alignment-selector.tsx

@@ -7,7 +7,7 @@ import {
   IconCheck,
   IconChevronDown,
 } from "@tabler/icons-react";
-import { Menu, Button, Tooltip, rem } from "@mantine/core";
+import { Popover, Button, ScrollArea, Tooltip, rem } from "@mantine/core";
 import type { Editor } from "@tiptap/react";
 import { useEditorState } from "@tiptap/react";
 import { useTranslation } from "react-i18next";
@@ -82,22 +82,15 @@ export const TextAlignmentSelector: FC<TextAlignmentProps> = ({
   const activeItem = items.filter((item) => item.isActive()).pop() ?? items[0];
 
   return (
-    <Menu
+    <Popover opened={isOpen} withArrow>
-      shadow="md"
+      <Popover.Target>
-      position="bottom-start"
+        <Tooltip label={t("Text align")} withArrow withinPortal={false} disabled={isOpen}>
-      withArrow={false}
-      opened={isOpen}
-      onChange={setIsOpen}
-    >
-      <Menu.Target>
-        <Tooltip label={t("Text align")} withArrow disabled={isOpen}>
           <Button
             variant="default"
             style={{ border: "none", height: "34px" }}
             px="5"
             radius="0"
             rightSection={<IconChevronDown size={16} />}
-            onMouseDown={(e) => e.preventDefault()}
             onClick={() => setIsOpen(!isOpen)}
             aria-label={t("Text align")}
             aria-haspopup="menu"
@@ -106,25 +99,33 @@ export const TextAlignmentSelector: FC<TextAlignmentProps> = ({
             <activeItem.icon style={{ width: rem(16) }} stroke={2} />
           </Button>
         </Tooltip>
-      </Menu.Target>
+      </Popover.Target>
 
-      <Menu.Dropdown>
+      <Popover.Dropdown>
-        {items.map((item, index) => (
+        <ScrollArea.Autosize type="scroll" mah={400}>
-          <Menu.Item
+          <Button.Group orientation="vertical">
-            key={index}
+            {items.map((item, index) => (
-            leftSection={<item.icon size={16} />}
+              <Button
-            rightSection={
+                key={index}
-              activeItem.name === item.name ? <IconCheck size={16} /> : null
+                variant="default"
-            }
+                leftSection={<item.icon size={16} />}
-            onClick={() => {
+                rightSection={
-              item.command();
+                  activeItem.name === item.name && <IconCheck size={16} />
-              setIsOpen(false);
+                }
-            }}
+                justify="left"
-          >
+                fullWidth
-            {t(item.name)}
+                onClick={() => {
-          </Menu.Item>
+                  item.command();
-        ))}
+                  setIsOpen(false);
-      </Menu.Dropdown>
+                }}
-    </Menu>
+                style={{ border: "none" }}
+              >
+                {t(item.name)}
+              </Button>
+            ))}
+          </Button.Group>
+        </ScrollArea.Autosize>
+      </Popover.Dropdown>
+    </Popover>
   );
 };

apps/client/src/features/editor/components/emoji-menu/emoji-items.ts

@@ -1,26 +1,30 @@
 import { CommandProps, EmojiMenuItemType } from "./types";
-import { buildEmojiIndex, getFrequentlyUsedEmoji, sortFrequentlyUsedEmoji } from "./utils";
+import { SearchIndex } from "emoji-mart";
+import { getFrequentlyUsedEmoji, sortFrequentlyUsedEmoji } from "./utils";
 
-const MAX_RESULTS = 5;
+const searchEmoji = async (value: string): Promise<EmojiMenuItemType[]> => {
-
+  if (value === "") {
-const searchEmoji = async (query: string): Promise<EmojiMenuItemType[]> => {
+    const frequentlyUsedEmoji = getFrequentlyUsedEmoji();
-  if (query === "") {
+    return sortFrequentlyUsedEmoji(frequentlyUsedEmoji);
-    return sortFrequentlyUsedEmoji(getFrequentlyUsedEmoji());
   }
 
-  const q = query.toLowerCase();
+  const emojis = await SearchIndex.search(value);
-  const index = await buildEmojiIndex();
+  const results = emojis.map((emoji: any) => {
-
+    return {
-  return index
+      id: emoji.id,
-    .filter((e) => e.name.includes(q) || e.id.includes(q))
+      emoji: emoji.skins[0].native,
-    .slice(0, MAX_RESULTS)
-    .map((entry) => ({
-      id: entry.id,
-      emoji: entry.native,
       command: ({ editor, range }: CommandProps) => {
-        editor.chain().focus().deleteRange(range).insertContent(entry.native + " ").run();
+        editor
+          .chain()
+          .focus()
+          .deleteRange(range)
+          .insertContent(emoji.skins[0].native + " ")
+          .run();
       },
-    }));
+    };
+  });
+
+  return results;
 };
 
 export const getEmojiItems = async ({

apps/client/src/features/editor/components/emoji-menu/emoji-list.tsx

@@ -1,208 +1,154 @@
-import { Loader, Paper, ScrollArea, Text, UnstyledButton } from "@mantine/core";
-import clsx from "clsx";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { EmojiMenuItemType } from "./types";
 import {
-  EmojiCategory,
+  ActionIcon,
-  EmojiIndexEntry,
+  Loader,
-  getEmojiCategories,
+  Paper,
-  incrementEmojiUsage,
+  ScrollArea,
-} from "./utils";
+  SimpleGrid,
+  Text,
+} from "@mantine/core";
+import { EmojiMenuItemType } from "./types";
+import clsx from "clsx";
 import classes from "./emoji-menu.module.css";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { GRID_COLUMNS, incrementEmojiUsage } from "./utils";
 
-const COLS = 8;
+const EmojiList = ({
-
-const CAT_ICONS: Record<string, string> = {
-  people:   "😀",
-  nature:   "🌿",
-  foods:    "🍕",
-  activity: "🎮",
-  places:   "🗺️",
-  objects:  "🔧",
-  symbols:  "💯",
-  flags:    "🚩",
-};
-
-function EmojiList({
   items,
   isLoading,
   command,
   editor,
   range,
-  query = "",
 }: {
   items: EmojiMenuItemType[];
   isLoading: boolean;
-  command: (item: EmojiMenuItemType) => void;
+  command: any;
   editor: any;
   range: any;
-  query?: string;
+}) => {
-}) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
-  const { t } = useTranslation();
+  const viewportRef = useRef<HTMLDivElement>(null);
-  const [idx, setIdx] = useState(0);
-  const [cats, setCats] = useState<EmojiCategory[]>([]);
-  const [activeCat, setActiveCat] = useState("");
-  const [focusZone, setFocusZone] = useState<"grid" | "tabs">("grid");
-  const listViewport = useRef<HTMLDivElement>(null);
-  const gridViewport = useRef<HTMLDivElement>(null);
-  const catBar = useRef<HTMLDivElement>(null);
 
-  const searching = query.length > 0;
+  const selectItem = useCallback(
-  const browseLoading = !searching && cats.length === 0;
+    (index: number) => {
-  const gridItems = cats.find((c) => c.id === activeCat)?.emojis ?? [];
+      const item = items[index];
-
+      if (item) {
-  useEffect(() => {
+        command(item);
-    getEmojiCategories().then((data) => {
+        incrementEmojiUsage(item.id);
-      setCats(data);
-      setActiveCat((prev) => prev || data[0]?.id || "");
-    });
-  }, []);
-
-  useEffect(() => { setIdx(0); }, [query, activeCat]);
-
-  useEffect(() => { if (searching) setFocusZone("grid"); }, [searching]);
-
-  useEffect(() => {
-    if (focusZone !== "tabs") return;
-    catBar.current?.querySelector<HTMLElement>(`[data-cat="${activeCat}"]`)?.scrollIntoView({ block: "nearest", inline: "nearest" });
-  }, [activeCat, focusZone]);
-
-  useEffect(() => {
-    if (focusZone === "tabs") return;
-    const vp = searching ? listViewport.current : gridViewport.current;
-    vp?.querySelector<HTMLElement>(`[data-i="${idx}"]`)?.scrollIntoView({ block: "nearest" });
-  }, [idx, searching, focusZone]);
-
-  const pickSearchItem = useCallback(
-    (i: number) => {
-      const item = items[i];
-      if (!item) return;
-      command(item);
-      incrementEmojiUsage(item.id);
-    },
-    [command, items],
-  );
-
-  const pickGridItem = useCallback(
-    (entry: EmojiIndexEntry) => {
-      editor.chain().focus().deleteRange(range).insertContent(entry.native + " ").run();
-      incrementEmojiUsage(entry.id);
-    },
-    [editor, range],
-  );
-
-  useEffect(() => {
-    function onKey(e: KeyboardEvent) {
-      if (searching) {
-        if      (e.key === "ArrowDown") { e.preventDefault(); setIdx((i) => Math.min(i + 1, items.length - 1)); }
-        else if (e.key === "ArrowUp")   { e.preventDefault(); setIdx((i) => Math.max(i - 1, 0)); }
-        else if (e.key === "Enter")     { e.preventDefault(); pickSearchItem(idx); }
-      } else if (focusZone === "tabs") {
-        const catIdx = cats.findIndex((c) => c.id === activeCat);
-        if      (e.key === "ArrowRight") { e.preventDefault(); const next = cats[Math.min(catIdx + 1, cats.length - 1)]; if (next) setActiveCat(next.id); }
-        else if (e.key === "ArrowLeft")  { e.preventDefault(); const prev = cats[Math.max(catIdx - 1, 0)]; if (prev) setActiveCat(prev.id); }
-        else if (e.key === "ArrowDown" || e.key === "Enter") { e.preventDefault(); setFocusZone("grid"); }
-        else if (e.key === "ArrowUp")    { e.preventDefault(); }
-      } else {
-        const total = gridItems.length;
-        if      (e.key === "ArrowRight") { e.preventDefault(); setIdx((i) => Math.min(i + 1, total - 1)); }
-        else if (e.key === "ArrowLeft")  { e.preventDefault(); setIdx((i) => Math.max(i - 1, 0)); }
-        else if (e.key === "ArrowDown")  { e.preventDefault(); setIdx((i) => Math.min(i + COLS, total - 1)); }
-        else if (e.key === "ArrowUp")    {
-          e.preventDefault();
-          if (idx < COLS) setFocusZone("tabs");
-          else            setIdx((i) => Math.max(i - COLS, 0));
-        }
-        else if (e.key === "Enter")      { e.preventDefault(); if (gridItems[idx]) pickGridItem(gridItems[idx]); }
       }
-    }
+    },
-    document.addEventListener("keydown", onKey);
+    [command, items]
-    return () => document.removeEventListener("keydown", onKey);
+  );
-  }, [searching, items, idx, gridItems, pickSearchItem, pickGridItem, focusZone, cats, activeCat]);
 
-  return (
+  useEffect(() => {
+    const navigationKeys = [
+      "ArrowRight",
+      "ArrowLeft",
+      "ArrowUp",
+      "ArrowDown",
+      "Enter",
+    ];
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (navigationKeys.includes(e.key)) {
+        e.preventDefault();
+
+        if (e.key === "ArrowRight") {
+          setSelectedIndex(
+            selectedIndex + 1 < items.length ? selectedIndex + 1 : selectedIndex
+          );
+          return true;
+        }
+
+        if (e.key === "ArrowLeft") {
+          setSelectedIndex(
+            selectedIndex - 1 >= 0 ? selectedIndex - 1 : selectedIndex
+          );
+          return true;
+        }
+
+        if (e.key === "ArrowUp") {
+          setSelectedIndex(
+            selectedIndex - GRID_COLUMNS >= 0
+              ? selectedIndex - GRID_COLUMNS
+              : selectedIndex
+          );
+          return true;
+        }
+
+        if (e.key === "ArrowDown") {
+          setSelectedIndex(
+            selectedIndex + GRID_COLUMNS < items.length
+              ? selectedIndex + GRID_COLUMNS
+              : selectedIndex
+          );
+          return true;
+        }
+
+        if (e.key === "Enter") {
+          selectItem(selectedIndex);
+          return true;
+        }
+        return false;
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [items, selectedIndex, setSelectedIndex]);
+
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [items]);
+
+  useEffect(() => {
+    viewportRef.current
+      ?.querySelector(`[data-item-index="${selectedIndex}"]`)
+      ?.scrollIntoView({ block: "nearest" });
+  }, [selectedIndex]);
+
+  return items.length > 0 || isLoading ? (
     <Paper
       id="emoji-command"
-      p={0}
+      p="0"
       shadow="md"
       withBorder
-      style={{ width: 280 }}
       role="listbox"
-      aria-label={t("Emoji picker")}
+      aria-label="Emoji results"
+      aria-activedescendant={
+        items.length > 0 ? `emoji-command-option-${selectedIndex}` : undefined
+      }
     >
-      {searching ? (
+      {isLoading && <Loader m="xs" color="blue" type="dots" />}
-        <>
+      {items.length > 0 && (
-          {isLoading && <Loader m="xs" size="xs" color="blue" type="dots" />}
+        <ScrollArea.Autosize
-          <ScrollArea.Autosize mah={260} scrollbarSize={6} viewportRef={listViewport}>
+          viewportRef={viewportRef}
-            <div style={{ padding: 4 }}>
+          mah={250}
-              {items.length === 0 && !isLoading ? (
+          scrollbarSize={8}
-                <Text size="sm" c="dimmed" p="xs">{t("No results")}</Text>
+          pr="5"
-              ) : items.map((item, i) => (
+        >
-                <UnstyledButton
+          <SimpleGrid cols={GRID_COLUMNS} p="xs" spacing="xs">
-                  key={item.id}
+            {items.map((item, index: number) => (
-                  data-i={i}
+              <ActionIcon
-                  w="100%"
+                data-item-index={index}
-                  className={clsx(classes.row, { [classes.active]: i === idx })}
+                id={`emoji-command-option-${index}`}
-                  onClick={() => pickSearchItem(i)}
+                role="option"
-                  onMouseEnter={() => setIdx(i)}
+                aria-selected={index === selectedIndex}
-                  role="option"
+                aria-label={item.id}
-                  aria-selected={i === idx}
+                variant="transparent"
-                >
+                key={item.id}
-                  <span style={{ fontSize: 20, lineHeight: 1, minWidth: 26 }}>{item.emoji}</span>
+                className={clsx(classes.menuBtn, {
-                  <Text size="sm" c="dimmed" ff="monospace" span>:{item.id}:</Text>
+                  [classes.selectedItem]: index === selectedIndex,
-                </UnstyledButton>
+                })}
-              ))}
+                onClick={() => selectItem(index)}
-            </div>
+              >
-          </ScrollArea.Autosize>
+                <Text size="xl">{item.emoji}</Text>
-        </>
+              </ActionIcon>
-      ) : browseLoading ? (
+            ))}
-        <Loader m="xs" size="xs" color="blue" type="dots" />
+          </SimpleGrid>
-      ) : (
+        </ScrollArea.Autosize>
-        <>
-          <div className={classes.catBar} role="tablist" ref={catBar}>
-            {cats.map((c) => {
-              const isActive = c.id === activeCat;
-              const isFocused = isActive && focusZone === "tabs";
-              return (
-                <button
-                  key={c.id}
-                  data-cat={c.id}
-                  title={c.id}
-                  role="tab"
-                  aria-selected={isActive}
-                  className={clsx(classes.catTab, {
-                    [classes.catTabActive]: isActive,
-                    [classes.catTabFocused]: isFocused,
-                  })}
-                  onClick={() => { setActiveCat(c.id); setFocusZone("grid"); }}
-                  onMouseEnter={() => setFocusZone("grid")}
-                >
-                  {CAT_ICONS[c.id] ?? "🔣"}
-                </button>
-              );
-            })}
-          </div>
-          <ScrollArea.Autosize mah={220} scrollbarSize={6} viewportRef={gridViewport}>
-            <div className={classes.grid} style={{ gridTemplateColumns: `repeat(${COLS}, 1fr)` }}>
-              {gridItems.map((entry, i) => (
-                <button
-                  key={entry.id}
-                  data-i={i}
-                  title={`:${entry.id}:`}
-                  className={clsx(classes.emojiBtn, { [classes.active]: i === idx })}
-                  onClick={() => pickGridItem(entry)}
-                  onMouseEnter={() => setIdx(i)}
-                >
-                  {entry.native}
-                </button>
-              ))}
-            </div>
-          </ScrollArea.Autosize>
-        </>
       )}
     </Paper>
-  );
+  ) : null;
-}
+};
 
 export default EmojiList;

apps/client/src/features/editor/components/emoji-menu/emoji-menu.module.css

@@ -1,13 +1,9 @@
-.row {
+.menuBtn {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 10px;
   border-radius: var(--mantine-radius-sm);
 
   &:hover {
     @mixin light {
-      background: var(--mantine-color-gray-1);
+      background: var(--mantine-color-gray-2);
     }
 
     @mixin dark {
@@ -16,7 +12,7 @@
   }
 }
 
-.active {
+.selectedItem {
   @mixin light {
     background: var(--mantine-color-gray-2);
   }
@@ -25,83 +21,3 @@
     background: var(--mantine-color-gray-light);
   }
 }
-
-.catBar {
-  display: flex;
-  gap: 2px;
-  padding: 4px 6px;
-  overflow-x: auto;
-  scrollbar-width: none;
-
-  @mixin light {
-    border-bottom: 1px solid var(--mantine-color-gray-2);
-  }
-
-  @mixin dark {
-    border-bottom: 1px solid var(--mantine-color-dark-4);
-  }
-}
-
-.catTab {
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  font-size: 16px;
-  line-height: 1;
-  padding: 4px 5px;
-  border-radius: var(--mantine-radius-sm);
-  flex-shrink: 0;
-
-  &:hover {
-    @mixin light {
-      background: var(--mantine-color-gray-1);
-    }
-
-    @mixin dark {
-      background: var(--mantine-color-gray-light);
-    }
-  }
-}
-
-.catTabActive {
-  @mixin light {
-    background: var(--mantine-color-gray-2);
-  }
-
-  @mixin dark {
-    background: var(--mantine-color-gray-light);
-  }
-}
-
-.catTabFocused {
-  outline: 1px solid var(--mantine-color-blue-filled);
-  outline-offset: -1px;
-}
-
-.grid {
-  display: grid;
-  gap: 1px;
-  padding: 6px;
-}
-
-.emojiBtn {
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  font-size: 20px;
-  line-height: 1;
-  padding: 3px;
-  border-radius: var(--mantine-radius-sm);
-  aspect-ratio: 1 / 1;
-
-  &:hover {
-    @mixin light {
-      background: var(--mantine-color-gray-1);
-    }
-
-    @mixin dark {
-      background: var(--mantine-color-gray-light);
-    }
-  }
-}
-

apps/client/src/features/editor/components/emoji-menu/render-emoji-items.ts

@@ -1,5 +1,6 @@
 import { ReactRenderer, useEditor } from "@tiptap/react";
 import EmojiList from "./emoji-list";
+import { init } from "emoji-mart";
 import {
   autoUpdate,
   computePosition,
@@ -36,6 +37,10 @@ const renderEmojiItems = () => {
       editor: ReturnType<typeof useEditor>;
       clientRect: () => DOMRect;
     }) => {
+      init({
+        data: async () => (await import("@emoji-mart/data")).default,
+      });
+
       component = new ReactRenderer(EmojiList, {
         props: { isLoading: true, items: [] },
         editor: props.editor,

apps/client/src/features/editor/components/emoji-menu/utils.ts

@@ -1,4 +1,8 @@
-import { CommandProps, EmojiMartFrequentlyType, EmojiMenuItemType } from "./types";
+import { CommandProps } from "./types";
+import { getEmojiDataFromNative } from "emoji-mart";
+import { EmojiMartFrequentlyType, EmojiMenuItemType } from "./types";
+
+export const GRID_COLUMNS = 10;
 
 export const LOCAL_STORAGE_FREQUENT_KEY = "emoji-mart.frequently";
 
@@ -15,76 +19,41 @@ export const DEFAULT_FREQUENTLY_USED_EMOJI_MART = `{
     "rocket": 1
 }`;
 
-export type EmojiIndexEntry = { id: string; name: string; native: string };
-
-let _emojiIndex: EmojiIndexEntry[] | null = null;
-
-export const buildEmojiIndex = async (): Promise<EmojiIndexEntry[]> => {
-  if (_emojiIndex) return _emojiIndex;
-  const { default: data } = await import("@emoji-mart/data");
-  _emojiIndex = (Object.values((data as any).emojis) as any[])
-    .filter((e) => e.id && e.name && e.skins?.[0]?.native)
-    .map((e) => ({
-      id: e.id as string,
-      name: (e.name as string).toLowerCase(),
-      native: e.skins[0].native as string,
-    }));
-  return _emojiIndex;
-};
-
 export const incrementEmojiUsage = (emojiId: string) => {
-  const stored = JSON.parse(
+  const frequentlyUsedEmoji =
-    localStorage.getItem(LOCAL_STORAGE_FREQUENT_KEY) || DEFAULT_FREQUENTLY_USED_EMOJI_MART,
+    JSON.parse(localStorage.getItem(LOCAL_STORAGE_FREQUENT_KEY) || DEFAULT_FREQUENTLY_USED_EMOJI_MART);
+  frequentlyUsedEmoji[emojiId]
+    ? (frequentlyUsedEmoji[emojiId] += 1)
+    : (frequentlyUsedEmoji[emojiId] = 1);
+  localStorage.setItem(
+    LOCAL_STORAGE_FREQUENT_KEY,
+    JSON.stringify(frequentlyUsedEmoji)
   );
-  stored[emojiId] = (stored[emojiId] ?? 0) + 1;
-  localStorage.setItem(LOCAL_STORAGE_FREQUENT_KEY, JSON.stringify(stored));
 };
 
 export const sortFrequentlyUsedEmoji = async (
-  frequentlyUsedEmoji: EmojiMartFrequentlyType,
+  frequentlyUsedEmoji: EmojiMartFrequentlyType
 ): Promise<EmojiMenuItemType[]> => {
-  const index = await buildEmojiIndex();
+  const data = await Promise.all(
-  const results: EmojiMenuItemType[] = Object.entries(frequentlyUsedEmoji)
+    Object.entries(frequentlyUsedEmoji).map(
-    .map(([id, count]): EmojiMenuItemType | null => {
+      async ([id, count]): Promise<EmojiMenuItemType> => ({
-      const entry = index.find((e) => e.id === id);
-      if (!entry) return null;
-      return {
         id,
         count,
-        emoji: entry.native,
+        emoji: (await getEmojiDataFromNative(id))?.native,
-        command: ({ editor, range }: CommandProps) => {
+        command: async ({ editor, range }: CommandProps) => {
-          editor.chain().focus().deleteRange(range).insertContent(entry.native + " ").run();
+          editor
+            .chain()
+            .focus()
+            .deleteRange(range)
+            .insertContent((await getEmojiDataFromNative(id))?.native + " ")
+            .run();
         },
-      };
+      })
-    })
+    )
-    .filter((e): e is EmojiMenuItemType => e !== null);
-  return results.sort((a, b) => (b.count ?? 0) - (a.count ?? 0)).slice(0, 5);
-};
-
-export const getFrequentlyUsedEmoji = (): EmojiMartFrequentlyType => {
-  return JSON.parse(
-    localStorage.getItem(LOCAL_STORAGE_FREQUENT_KEY) || DEFAULT_FREQUENTLY_USED_EMOJI_MART,
   );
+  return data.sort((a, b) => b.count - a.count);
 };
 
-export type EmojiCategory = { id: string; emojis: EmojiIndexEntry[] };
+export const getFrequentlyUsedEmoji = () => {
-
+  return JSON.parse(localStorage.getItem(LOCAL_STORAGE_FREQUENT_KEY) || DEFAULT_FREQUENTLY_USED_EMOJI_MART);
-let _cats: EmojiCategory[] | null = null;
+}
-
-export const getEmojiCategories = async (): Promise<EmojiCategory[]> => {
-  if (_cats) return _cats;
-  const [{ default: data }, index] = await Promise.all([
-    import("@emoji-mart/data"),
-    buildEmojiIndex(),
-  ]);
-  const byId = new Map(index.map((e) => [e.id, e]));
-  _cats = ((data as any).categories as { id: string; emojis: string[] }[])
-    .map((cat) => ({
-      id: cat.id,
-      emojis: cat.emojis
-        .map((id) => byId.get(id))
-        .filter((e): e is EmojiIndexEntry => !!e),
-    }))
-    .filter((c) => c.emojis.length > 0);
-  return _cats;
-};

apps/client/src/features/editor/components/fixed-toolbar/fixed-toolbar.module.css

@@ -1,72 +0,0 @@
-.fixedToolbar {
-  position: fixed;
-  top: calc(var(--app-shell-header-offset, 0rem) + 45px);
-  inset-inline-start: var(--app-shell-navbar-offset, 0rem);
-  inset-inline-end: var(--app-shell-aside-offset, 0rem);
-  z-index: 50;
-  display: flex;
-  align-items: center;
-  background: var(--mantine-color-body);
-  border-bottom: 1px solid
-    light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
-  overflow-x: auto;
-}
-
-.fixedToolbar::-webkit-scrollbar {
-  height: 2px;
-}
-
-.fixedToolbar::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.fixedToolbar::-webkit-scrollbar-thumb {
-  background: light-dark(
-    var(--mantine-color-gray-4),
-    var(--mantine-color-dark-3)
-  );
-  border-radius: 1px;
-}
-
-.inner {
-  display: flex;
-  align-items: center;
-  flex-wrap: nowrap;
-  gap: 4px;
-  padding: 4px 8px;
-  margin-inline: auto;
-}
-
-.inner > * {
-  flex-shrink: 0;
-}
-
-.spacer {
-  height: 45px;
-}
-
-.divider {
-  flex-shrink: 0;
-  width: 1px;
-  height: 20px;
-  margin: 0 4px;
-  background: light-dark(
-    var(--mantine-color-gray-3),
-    var(--mantine-color-dark-4)
-  );
-}
-
-.active,
-.active:hover {
-  color: var(--mantine-color-blue-6);
-  background-color: light-dark(
-    var(--mantine-color-gray-1),
-    var(--mantine-color-dark-5)
-  );
-}
-
-@media print {
-  .fixedToolbar {
-    display: none;
-  }
-}

apps/client/src/features/editor/components/fixed-toolbar/fixed-toolbar.tsx

@@ -1,65 +0,0 @@
-import { FC } from "react";
-import { useAtomValue } from "jotai";
-import { pageEditorAtom } from "@/features/editor/atoms/editor-atoms";
-import { useToolbarState } from "./use-toolbar-state";
-import { BlockTypeGroup } from "./groups/block-type-group";
-import { InlineMarksGroup } from "./groups/inline-marks-group";
-import { ColorGroup } from "./groups/color-group";
-import { ListsGroup } from "./groups/lists-group";
-import { LinkGroup } from "./groups/link-group";
-import { AlignmentGroup } from "./groups/alignment-group";
-import { MediaGroup } from "./groups/media-group";
-import { QuickInsertsGroup } from "./groups/quick-inserts-group";
-import { MoreInsertsGroup } from "./groups/more-inserts-group";
-import { HistoryGroup } from "./groups/history-group";
-import { AskAiGroup } from "./groups/ask-ai-group";
-import { workspaceAtom } from "@/features/user/atoms/current-user-atom";
-import classes from "./fixed-toolbar.module.css";
-
-export const FixedToolbar: FC = () => {
-  const editor = useAtomValue(pageEditorAtom);
-  const state = useToolbarState(editor);
-  const workspace = useAtomValue(workspaceAtom);
-  const isGenerativeAiEnabled = workspace?.settings?.ai?.generative === true;
-
-  if (!editor || !state) return null;
-
-  return (
-    <>
-      <div
-        className={classes.fixedToolbar}
-        role="toolbar"
-        aria-label="Editor toolbar"
-        onMouseDown={(e) => e.preventDefault()}
-      >
-        <div className={classes.inner}>
-          {/* {isGenerativeAiEnabled && (
-            <>
-              <AskAiGroup />
-              <div className={classes.divider} />
-            </>
-          )} */}
-          <BlockTypeGroup editor={editor} />
-          <div className={classes.divider} />
-          <InlineMarksGroup editor={editor} state={state} />
-          <div className={classes.divider} />
-          <ColorGroup editor={editor} />
-          <div className={classes.divider} />
-          <ListsGroup editor={editor} state={state} />
-          <div className={classes.divider} />
-          <LinkGroup />
-          <div className={classes.divider} />
-          <AlignmentGroup editor={editor} />
-          <div className={classes.divider} />
-          <MediaGroup editor={editor} />
-          <div className={classes.divider} />
-          <QuickInsertsGroup editor={editor} />
-          <MoreInsertsGroup editor={editor} />
-          <div className={classes.divider} />
-          <HistoryGroup editor={editor} state={state} />
-        </div>
-      </div>
-      <div className={classes.spacer} aria-hidden />
-    </>
-  );
-};

apps/client/src/features/editor/components/fixed-toolbar/groups/alignment-group.tsx

@@ -1,28 +0,0 @@
-import { FC, useEffect, useState } from "react";
-import type { Editor } from "@tiptap/react";
-import { TextAlignmentSelector } from "@/features/editor/components/bubble-menu/text-alignment-selector";
-
-interface Props {
-  editor: Editor;
-}
-
-export const AlignmentGroup: FC<Props> = ({ editor }) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  useEffect(() => {
-    if (!isOpen) return;
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") setIsOpen(false);
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [isOpen]);
-
-  return (
-    <TextAlignmentSelector
-      editor={editor}
-      isOpen={isOpen}
-      setIsOpen={setIsOpen}
-    />
-  );
-};

apps/client/src/features/editor/components/fixed-toolbar/groups/ask-ai-group.tsx

@@ -1,23 +0,0 @@
-import { FC } from "react";
-import { Button } from "@mantine/core";
-import { IconSparkles } from "@tabler/icons-react";
-import { useSetAtom } from "jotai";
-import { useTranslation } from "react-i18next";
-import { showAiMenuAtom } from "@/features/editor/atoms/editor-atoms";
-
-export const AskAiGroup: FC = () => {
-  const { t } = useTranslation();
-  const setShowAiMenu = useSetAtom(showAiMenuAtom);
-
-  return (
-    <Button
-      variant="subtle"
-      color="dark"
-      size="xs"
-      leftSection={<IconSparkles size={14} />}
-      onClick={() => setShowAiMenu(true)}
-    >
-      {t("Ask AI")}
-    </Button>
-  );
-};

apps/client/src/features/editor/components/fixed-toolbar/groups/block-type-group.tsx

@@ -1,108 +0,0 @@
-import { FC } from "react";
-import type { Editor } from "@tiptap/react";
-import { useEditorState } from "@tiptap/react";
-import { Button, Menu } from "@mantine/core";
-import {
-  IconBlockquote,
-  IconBraces,
-  IconChevronDown,
-  IconH1,
-  IconH2,
-  IconH3,
-  IconMenu4,
-  IconTypography,
-} from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-
-interface Props {
-  editor: Editor;
-}
-
-export const BlockTypeGroup: FC<Props> = ({ editor }) => {
-  const { t } = useTranslation();
-
-  const state = useEditorState({
-    editor,
-    selector: (ctx) => ({
-      isHeading1: ctx.editor.isActive("heading", { level: 1 }),
-      isHeading2: ctx.editor.isActive("heading", { level: 2 }),
-      isHeading3: ctx.editor.isActive("heading", { level: 3 }),
-      isBlockquote: ctx.editor.isActive("blockquote"),
-      isCodeBlock: ctx.editor.isActive("codeBlock"),
-    }),
-  });
-
-  let label = t("Normal text");
-  if (state.isHeading1) label = t("Heading 1");
-  else if (state.isHeading2) label = t("Heading 2");
-  else if (state.isHeading3) label = t("Heading 3");
-  else if (state.isBlockquote) label = t("Quote");
-  else if (state.isCodeBlock) label = t("Code block");
-
-  return (
-    <Menu shadow="md" position="bottom-start" withArrow={false}>
-      <Menu.Target>
-        <Button
-          variant="subtle"
-          color="dark"
-          size="xs"
-          rightSection={<IconChevronDown size={14} />}
-        >
-          {label}
-        </Button>
-      </Menu.Target>
-      <Menu.Dropdown>
-        <Menu.Item
-          leftSection={<IconTypography size={16} />}
-          onClick={() =>
-            editor.chain().focus().toggleNode("paragraph", "paragraph").run()
-          }
-        >
-          {t("Text")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconH1 size={16} />}
-          onClick={() =>
-            editor.chain().focus().toggleHeading({ level: 1 }).run()
-          }
-        >
-          {t("Heading 1")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconH2 size={16} />}
-          onClick={() =>
-            editor.chain().focus().toggleHeading({ level: 2 }).run()
-          }
-        >
-          {t("Heading 2")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconH3 size={16} />}
-          onClick={() =>
-            editor.chain().focus().toggleHeading({ level: 3 }).run()
-          }
-        >
-          {t("Heading 3")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconBlockquote size={16} />}
-          onClick={() => editor.chain().focus().toggleBlockquote().run()}
-        >
-          {t("Quote")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconBraces size={16} />}
-          onClick={() => editor.chain().focus().toggleCodeBlock().run()}
-        >
-          {t("Code block")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconMenu4 size={16} />}
-          onClick={() => editor.chain().focus().setHorizontalRule().run()}
-        >
-          {t("Divider")}
-        </Menu.Item>
-      </Menu.Dropdown>
-    </Menu>
-  );
-};

apps/client/src/features/editor/components/fixed-toolbar/groups/color-group.tsx

@@ -1,24 +0,0 @@
-import { FC, useEffect, useState } from "react";
-import type { Editor } from "@tiptap/react";
-import { ColorSelector } from "@/features/editor/components/bubble-menu/color-selector";
-
-interface Props {
-  editor: Editor;
-}
-
-export const ColorGroup: FC<Props> = ({ editor }) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  useEffect(() => {
-    if (!isOpen) return;
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") setIsOpen(false);
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [isOpen]);
-
-  return (
-    <ColorSelector editor={editor} isOpen={isOpen} setIsOpen={setIsOpen} />
-  );
-};

apps/client/src/features/editor/components/fixed-toolbar/groups/history-group.tsx

@@ -1,44 +0,0 @@
-import { FC } from "react";
-import type { Editor } from "@tiptap/react";
-import { ActionIcon, Tooltip } from "@mantine/core";
-import { IconArrowBackUp, IconArrowForwardUp } from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-import type { ToolbarState } from "../use-toolbar-state";
-
-interface Props {
-  editor: Editor;
-  state: ToolbarState;
-}
-
-export const HistoryGroup: FC<Props> = ({ editor, state }) => {
-  const { t } = useTranslation();
-
-  return (
-    <ActionIcon.Group>
-      <Tooltip label={t("Undo")} withArrow>
-        <ActionIcon
-          variant="subtle"
-          color="dark"
-          size="md"
-          aria-label={t("Undo")}
-          disabled={!state.canUndo}
-          onClick={() => editor.chain().focus().undo().run()}
-        >
-          <IconArrowBackUp size={16} />
-        </ActionIcon>
-      </Tooltip>
-      <Tooltip label={t("Redo")} withArrow>
-        <ActionIcon
-          variant="subtle"
-          color="dark"
-          size="md"
-          aria-label={t("Redo")}
-          disabled={!state.canRedo}
-          onClick={() => editor.chain().focus().redo().run()}
-        >
-          <IconArrowForwardUp size={16} />
-        </ActionIcon>
-      </Tooltip>
-    </ActionIcon.Group>
-  );
-};

apps/client/src/features/editor/components/fixed-toolbar/groups/inline-marks-group.tsx

@@ -1,131 +0,0 @@
-import { FC } from "react";
-import type { Editor } from "@tiptap/react";
-import { ActionIcon, Menu, Tooltip } from "@mantine/core";
-import {
-  IconBold,
-  IconChevronDown,
-  IconClearFormatting,
-  IconCode,
-  IconIndentDecrease,
-  IconIndentIncrease,
-  IconItalic,
-  IconStrikethrough,
-  IconSubscript,
-  IconSuperscript,
-  IconUnderline,
-} from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-import clsx from "clsx";
-import type { ToolbarState } from "../use-toolbar-state";
-import classes from "../fixed-toolbar.module.css";
-
-interface Props {
-  editor: Editor;
-  state: ToolbarState;
-}
-
-export const InlineMarksGroup: FC<Props> = ({ editor, state }) => {
-  const { t } = useTranslation();
-
-  return (
-    <ActionIcon.Group>
-      <Tooltip label={t("Bold")} withArrow>
-        <ActionIcon
-          variant="subtle"
-          color="dark"
-          size="md"
-          aria-label={t("Bold")}
-          aria-pressed={state.isBold}
-          className={clsx({ [classes.active]: state.isBold })}
-          onClick={() => editor.chain().focus().toggleBold().run()}
-        >
-          <IconBold size={16} />
-        </ActionIcon>
-      </Tooltip>
-      <Tooltip label={t("Underline")} withArrow>
-        <ActionIcon
-          variant="subtle"
-          color="dark"
-          size="md"
-          aria-label={t("Underline")}
-          aria-pressed={state.isUnderline}
-          className={clsx({ [classes.active]: state.isUnderline })}
-          onClick={() => editor.chain().focus().toggleUnderline().run()}
-        >
-          <IconUnderline size={16} />
-        </ActionIcon>
-      </Tooltip>
-      <Tooltip label={t("Italic")} withArrow>
-        <ActionIcon
-          variant="subtle"
-          color="dark"
-          size="md"
-          aria-label={t("Italic")}
-          aria-pressed={state.isItalic}
-          className={clsx({ [classes.active]: state.isItalic })}
-          onClick={() => editor.chain().focus().toggleItalic().run()}
-        >
-          <IconItalic size={16} />
-        </ActionIcon>
-      </Tooltip>
-      <Menu shadow="md" position="bottom-start" withArrow={false}>
-        <Menu.Target>
-          <ActionIcon
-            variant="subtle"
-            color="dark"
-            size="md"
-            aria-label={t("More inline formatting")}
-          >
-            <IconChevronDown size={14} />
-          </ActionIcon>
-        </Menu.Target>
-        <Menu.Dropdown>
-          <Menu.Item
-            leftSection={<IconStrikethrough size={16} />}
-            onClick={() => editor.chain().focus().toggleStrike().run()}
-          >
-            {t("Strikethrough")}
-          </Menu.Item>
-          <Menu.Item
-            leftSection={<IconCode size={16} />}
-            onClick={() => editor.chain().focus().toggleCode().run()}
-          >
-            {t("Inline code")}
-          </Menu.Item>
-          <Menu.Item
-            leftSection={<IconSubscript size={16} />}
-            onClick={() => editor.chain().focus().toggleSubscript().run()}
-          >
-            {t("Subscript")}
-          </Menu.Item>
-          <Menu.Item
-            leftSection={<IconSuperscript size={16} />}
-            onClick={() => editor.chain().focus().toggleSuperscript().run()}
-          >
-            {t("Superscript")}
-          </Menu.Item>
-          <Menu.Divider />
-          <Menu.Item
-            leftSection={<IconIndentIncrease size={16} />}
-            onClick={() => editor.chain().focus().indent().run()}
-          >
-            {t("Increase indent")}
-          </Menu.Item>
-          <Menu.Item
-            leftSection={<IconIndentDecrease size={16} />}
-            onClick={() => editor.chain().focus().outdent().run()}
-          >
-            {t("Decrease indent")}
-          </Menu.Item>
-          <Menu.Divider />
-          <Menu.Item
-            leftSection={<IconClearFormatting size={16} />}
-            onClick={() => editor.chain().focus().unsetAllMarks().run()}
-          >
-            {t("Clear formatting")}
-          </Menu.Item>
-        </Menu.Dropdown>
-      </Menu>
-    </ActionIcon.Group>
-  );
-};

apps/client/src/features/editor/components/fixed-toolbar/groups/link-group.tsx

@@ -1,6 +0,0 @@
-import { FC } from "react";
-import { LinkSelector } from "@/features/editor/components/bubble-menu/link-selector";
-
-export const LinkGroup: FC = () => {
-  return <LinkSelector />;
-};

apps/client/src/features/editor/components/fixed-toolbar/groups/lists-group.tsx

@@ -1,61 +0,0 @@
-import { FC } from "react";
-import type { Editor } from "@tiptap/react";
-import { ActionIcon, Tooltip } from "@mantine/core";
-import { IconCheckbox, IconList, IconListNumbers } from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-import clsx from "clsx";
-import type { ToolbarState } from "../use-toolbar-state";
-import classes from "../fixed-toolbar.module.css";
-
-interface Props {
-  editor: Editor;
-  state: ToolbarState;
-}
-
-export const ListsGroup: FC<Props> = ({ editor, state }) => {
-  const { t } = useTranslation();
-
-  return (
-    <ActionIcon.Group>
-      <Tooltip label={t("Bullet List")} withArrow>
-        <ActionIcon
-          variant="subtle"
-          color="dark"
-          size="md"
-          aria-label={t("Bullet List")}
-          aria-pressed={state.isBulletList}
-          className={clsx({ [classes.active]: state.isBulletList })}
-          onClick={() => editor.chain().focus().toggleBulletList().run()}
-        >
-          <IconList size={16} />
-        </ActionIcon>
-      </Tooltip>
-      <Tooltip label={t("Numbered List")} withArrow>
-        <ActionIcon
-          variant="subtle"
-          color="dark"
-          size="md"
-          aria-label={t("Numbered List")}
-          aria-pressed={state.isOrderedList}
-          className={clsx({ [classes.active]: state.isOrderedList })}
-          onClick={() => editor.chain().focus().toggleOrderedList().run()}
-        >
-          <IconListNumbers size={16} />
-        </ActionIcon>
-      </Tooltip>
-      <Tooltip label={t("To-do List")} withArrow>
-        <ActionIcon
-          variant="subtle"
-          color="dark"
-          size="md"
-          aria-label={t("To-do List")}
-          aria-pressed={state.isTaskList}
-          className={clsx({ [classes.active]: state.isTaskList })}
-          onClick={() => editor.chain().focus().toggleTaskList().run()}
-        >
-          <IconCheckbox size={16} />
-        </ActionIcon>
-      </Tooltip>
-    </ActionIcon.Group>
-  );
-};

apps/client/src/features/editor/components/fixed-toolbar/groups/media-group.tsx

@@ -1,118 +0,0 @@
-import { FC } from "react";
-import type { Editor } from "@tiptap/react";
-import { ActionIcon, Menu, Tooltip } from "@mantine/core";
-import {
-  IconFileTypePdf,
-  IconMovie,
-  IconMusic,
-  IconPaperclip,
-  IconPhoto,
-} from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-import { uploadImageAction } from "@/features/editor/components/image/upload-image-action";
-import { uploadVideoAction } from "@/features/editor/components/video/upload-video-action";
-import { uploadAudioAction } from "@/features/editor/components/audio/upload-audio-action";
-import { uploadAttachmentAction } from "@/features/editor/components/attachment/upload-attachment-action";
-import { uploadPdfAction } from "@/features/editor/components/pdf/upload-pdf-action";
-
-interface Props {
-  editor: Editor;
-}
-
-type UploadFn = (
-  file: File,
-  editor: Editor,
-  pos: number,
-  pageId: string,
-  ...rest: any[]
-) => void;
-
-function pickFile(
-  editor: Editor,
-  accept: string,
-  multiple: boolean,
-  upload: UploadFn,
-  extra?: boolean,
-) {
-  // @ts-ignore — editor.storage.pageId is set by PageEditor.onCreate
-  const pageId = editor.storage?.pageId as string | undefined;
-  if (!pageId) return;
-
-  const input = document.createElement("input");
-  input.type = "file";
-  input.accept = accept;
-  input.multiple = multiple;
-  input.style.display = "none";
-  document.body.appendChild(input);
-  input.onchange = () => {
-    if (input.files?.length) {
-      for (const file of input.files) {
-        const pos = editor.view.state.selection.from;
-        if (extra !== undefined) {
-          upload(file, editor, pos, pageId, extra);
-        } else {
-          upload(file, editor, pos, pageId);
-        }
-      }
-    }
-    input.remove();
-  };
-  input.click();
-}
-
-export const MediaGroup: FC<Props> = ({ editor }) => {
-  const { t } = useTranslation();
-
-  return (
-    <Menu shadow="md" position="bottom-start" withArrow={false}>
-      <Menu.Target>
-        <Tooltip label={t("Insert media")} withArrow>
-          <ActionIcon
-            variant="subtle"
-            color="dark"
-            size="md"
-            aria-label={t("Insert media")}
-          >
-            <IconPhoto size={16} />
-          </ActionIcon>
-        </Tooltip>
-      </Menu.Target>
-      <Menu.Dropdown>
-        <Menu.Item
-          leftSection={<IconPhoto size={16} />}
-          onClick={() => pickFile(editor, "image/*", true, uploadImageAction)}
-        >
-          {t("Image")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconMovie size={16} />}
-          onClick={() => pickFile(editor, "video/*", true, uploadVideoAction)}
-        >
-          {t("Video")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconMusic size={16} />}
-          onClick={() => pickFile(editor, "audio/*", true, uploadAudioAction)}
-        >
-          {t("Audio")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconFileTypePdf size={16} />}
-          onClick={() =>
-            pickFile(editor, "application/pdf", false, uploadPdfAction)
-          }
-        >
-          PDF
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconPaperclip size={16} />}
-          onClick={() =>
-            pickFile(editor, "", true, uploadAttachmentAction, true)
-          }
-        >
-          {t("File attachment")}
-        </Menu.Item>
-      </Menu.Dropdown>
-    </Menu>
-  );
-};

apps/client/src/features/editor/components/fixed-toolbar/groups/more-inserts-group.tsx

@@ -1,217 +0,0 @@
-import { FC } from "react";
-import type { Editor } from "@tiptap/react";
-import { ActionIcon, Menu, Tooltip } from "@mantine/core";
-import {
-  IconAppWindow,
-  IconCalendar,
-  IconCaretRightFilled,
-  IconChevronDown,
-  IconInfoCircle,
-  IconMath,
-  IconMathFunction,
-  IconRotate2,
-  IconSitemap,
-  IconTag,
-} from "@tabler/icons-react";
-import IconExcalidraw from "@/components/icons/icon-excalidraw";
-import IconMermaid from "@/components/icons/icon-mermaid";
-import IconDrawio from "@/components/icons/icon-drawio";
-import {
-  AirtableIcon,
-  FigmaIcon,
-  FramerIcon,
-  GoogleDriveIcon,
-  GoogleSheetsIcon,
-  LoomIcon,
-  MiroIcon,
-  TypeformIcon,
-  VimeoIcon,
-  YoutubeIcon,
-} from "@/components/icons";
-import { useTranslation } from "react-i18next";
-
-interface Props {
-  editor: Editor;
-}
-
-export const MoreInsertsGroup: FC<Props> = ({ editor }) => {
-  const { t } = useTranslation();
-
-  const setEmbed = (provider: string) =>
-    editor.chain().focus().setEmbed({ provider }).run();
-
-  const insertDate = () => {
-    const currentDate = new Date().toLocaleDateString("en-US", {
-      year: "numeric",
-      month: "long",
-      day: "numeric",
-    });
-    editor.chain().focus().insertContent(currentDate).run();
-  };
-
-  return (
-    <Menu shadow="md" position="bottom-start" withArrow={false} width={240}>
-      <Menu.Target>
-        <Tooltip label={t("More inserts")} withArrow>
-          <ActionIcon
-            variant="subtle"
-            color="dark"
-            size="md"
-            aria-label={t("More inserts")}
-          >
-            <IconChevronDown size={16} />
-          </ActionIcon>
-        </Tooltip>
-      </Menu.Target>
-      <Menu.Dropdown mah={400} style={{ overflowY: "auto" }}>
-        <Menu.Label>{t("Advanced")}</Menu.Label>
-        <Menu.Item
-          leftSection={<IconInfoCircle size={16} />}
-          onClick={() => editor.chain().focus().toggleCallout().run()}
-        >
-          {t("Callout")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconCaretRightFilled size={16} />}
-          onClick={() => editor.chain().focus().setDetails().run()}
-        >
-          {t("Toggle block")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconTag size={16} />}
-          onClick={() =>
-            editor.chain().focus().setStatus({ text: "", color: "gray" }).run()
-          }
-        >
-          {t("Status")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconSitemap size={16} />}
-          onClick={() => editor.chain().focus().insertSubpages().run()}
-        >
-          {t("Subpages")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconRotate2 size={16} />}
-          onClick={() =>
-            editor.chain().focus().insertTransclusionSource().run()
-          }
-        >
-          {t("Synced block")}
-        </Menu.Item>
-
-        <Menu.Divider />
-        <Menu.Label>{t("Diagrams")}</Menu.Label>
-        <Menu.Item
-          leftSection={<IconMermaid size={16} />}
-          onClick={() =>
-            editor
-              .chain()
-              .focus()
-              .setCodeBlock({ language: "mermaid" })
-              .insertContent("flowchart LR\n    A --> B")
-              .run()
-          }
-        >
-          {t("Mermaid diagram")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconDrawio size={16} />}
-          onClick={() => editor.chain().focus().setDrawio().run()}
-        >
-          Draw.io
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconExcalidraw size={16} />}
-          onClick={() => editor.chain().focus().setExcalidraw().run()}
-        >
-          Excalidraw
-        </Menu.Item>
-
-        <Menu.Divider />
-        <Menu.Label>{t("Embeds")}</Menu.Label>
-        <Menu.Item
-          leftSection={<IconAppWindow size={16} />}
-          onClick={() => setEmbed("iframe")}
-        >
-          Iframe
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<YoutubeIcon size={16} />}
-          onClick={() => setEmbed("youtube")}
-        >
-          YouTube
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<VimeoIcon size={16} />}
-          onClick={() => setEmbed("vimeo")}
-        >
-          Vimeo
-        </Menu.Item>
-        <Menu.Item leftSection={<LoomIcon size={16} />} onClick={() => setEmbed("loom")}>
-          Loom
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<FigmaIcon size={16} />}
-          onClick={() => setEmbed("figma")}
-        >
-          Figma
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<AirtableIcon size={16} />}
-          onClick={() => setEmbed("airtable")}
-        >
-          Airtable
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<TypeformIcon size={16} />}
-          onClick={() => setEmbed("typeform")}
-        >
-          Typeform
-        </Menu.Item>
-        <Menu.Item leftSection={<MiroIcon size={16} />} onClick={() => setEmbed("miro")}>
-          Miro
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<FramerIcon size={16} />}
-          onClick={() => setEmbed("framer")}
-        >
-          Framer
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<GoogleDriveIcon size={16} />}
-          onClick={() => setEmbed("gdrive")}
-        >
-          Google Drive
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<GoogleSheetsIcon size={16} />}
-          onClick={() => setEmbed("gsheets")}
-        >
-          Google Sheets
-        </Menu.Item>
-
-        <Menu.Divider />
-        <Menu.Label>{t("Utility")}</Menu.Label>
-        <Menu.Item
-          leftSection={<IconCalendar size={16} />}
-          onClick={insertDate}
-        >
-          {t("Date")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconMathFunction size={16} />}
-          onClick={() => editor.chain().focus().setMathInline().run()}
-        >
-          {t("Math inline")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconMath size={16} />}
-          onClick={() => editor.chain().focus().setMathBlock().run()}
-        >
-          {t("Math block")}
-        </Menu.Item>
-      </Menu.Dropdown>
-    </Menu>
-  );
-};

apps/client/src/features/editor/components/fixed-toolbar/groups/quick-inserts-group.tsx

@@ -1,117 +0,0 @@
-import { FC } from "react";
-import type { Editor } from "@tiptap/react";
-import { ActionIcon, Menu, Tooltip } from "@mantine/core";
-import {
-  IconAt,
-  IconColumns2,
-  IconColumns3,
-  IconMoodSmile,
-  IconTable,
-} from "@tabler/icons-react";
-import { IconColumns4 } from "@/components/icons/icon-columns-4";
-import { IconColumns5 } from "@/components/icons/icon-columns-5";
-import { useTranslation } from "react-i18next";
-
-interface Props {
-  editor: Editor;
-}
-
-export const QuickInsertsGroup: FC<Props> = ({ editor }) => {
-  const { t } = useTranslation();
-
-  return (
-    <ActionIcon.Group>
-      <Tooltip label={t("Mention")} withArrow>
-        <ActionIcon
-          variant="subtle"
-          color="dark"
-          size="md"
-          aria-label={t("Mention")}
-          onClick={() => editor.chain().focus().insertContent("@").run()}
-        >
-          <IconAt size={16} />
-        </ActionIcon>
-      </Tooltip>
-      <Tooltip label={t("Emoji")} withArrow>
-        <ActionIcon
-          variant="subtle"
-          color="dark"
-          size="md"
-          aria-label={t("Emoji")}
-          onClick={() => editor.chain().focus().insertContent(":").run()}
-        >
-          <IconMoodSmile size={16} />
-        </ActionIcon>
-      </Tooltip>
-      <Menu shadow="md" position="bottom-start" withArrow={false}>
-        <Menu.Target>
-          <Tooltip label={t("Columns")} withArrow>
-            <ActionIcon
-              variant="subtle"
-              color="dark"
-              size="md"
-              aria-label={t("Columns")}
-            >
-              <IconColumns2 size={16} />
-            </ActionIcon>
-          </Tooltip>
-        </Menu.Target>
-        <Menu.Dropdown>
-          <Menu.Item
-            leftSection={<IconColumns2 size={16} />}
-            onClick={() =>
-              editor.chain().focus().insertColumns({ layout: "two_equal" }).run()
-            }
-          >
-            {t("{{count}} Columns", { count: 2 })}
-          </Menu.Item>
-          <Menu.Item
-            leftSection={<IconColumns3 size={16} />}
-            onClick={() =>
-              editor
-                .chain()
-                .focus()
-                .insertColumns({ layout: "three_equal" })
-                .run()
-            }
-          >
-            {t("{{count}} Columns", { count: 3 })}
-          </Menu.Item>
-          <Menu.Item
-            leftSection={<IconColumns4 size={16} />}
-            onClick={() =>
-              editor.chain().focus().insertColumns({ layout: "four_equal" }).run()
-            }
-          >
-            {t("{{count}} Columns", { count: 4 })}
-          </Menu.Item>
-          <Menu.Item
-            leftSection={<IconColumns5 size={16} />}
-            onClick={() =>
-              editor.chain().focus().insertColumns({ layout: "five_equal" }).run()
-            }
-          >
-            {t("{{count}} Columns", { count: 5 })}
-          </Menu.Item>
-        </Menu.Dropdown>
-      </Menu>
-      <Tooltip label={t("Table")} withArrow>
-        <ActionIcon
-          variant="subtle"
-          color="dark"
-          size="md"
-          aria-label={t("Table")}
-          onClick={() =>
-            editor
-              .chain()
-              .focus()
-              .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
-              .run()
-          }
-        >
-          <IconTable size={16} />
-        </ActionIcon>
-      </Tooltip>
-    </ActionIcon.Group>
-  );
-};

apps/client/src/features/editor/components/fixed-toolbar/use-toolbar-state.ts

@@ -1,50 +0,0 @@
-import type { Editor } from "@tiptap/react";
-import { useEditorState } from "@tiptap/react";
-
-export interface ToolbarState {
-  isBold: boolean;
-  isItalic: boolean;
-  isUnderline: boolean;
-  isStrike: boolean;
-  isCode: boolean;
-  isSubscript: boolean;
-  isSuperscript: boolean;
-  isBulletList: boolean;
-  isOrderedList: boolean;
-  isTaskList: boolean;
-  canUndo: boolean;
-  canRedo: boolean;
-}
-
-// Undo/redo come from either StarterKit's history or the Yjs collaboration
-// history extension. During the brief moment a page is rendered with the
-// static editor (mainExtensions only, undoRedo disabled), neither is loaded
-// and editor.can().undo/redo is undefined.
-function safeCan(editor: Editor, command: "undo" | "redo"): boolean {
-  const can = editor.can() as Record<string, unknown>;
-  const fn = can[command];
-  return typeof fn === "function" ? (fn as () => boolean)() : false;
-}
-
-export function useToolbarState(editor: Editor | null): ToolbarState | null {
-  return useEditorState({
-    editor,
-    selector: (ctx) => {
-      if (!ctx.editor) return null;
-      return {
-        isBold: ctx.editor.isActive("bold"),
-        isItalic: ctx.editor.isActive("italic"),
-        isUnderline: ctx.editor.isActive("underline"),
-        isStrike: ctx.editor.isActive("strike"),
-        isCode: ctx.editor.isActive("code"),
-        isSubscript: ctx.editor.isActive("subscript"),
-        isSuperscript: ctx.editor.isActive("superscript"),
-        isBulletList: ctx.editor.isActive("bulletList"),
-        isOrderedList: ctx.editor.isActive("orderedList"),
-        isTaskList: ctx.editor.isActive("taskList"),
-        canUndo: safeCan(ctx.editor, "undo"),
-        canRedo: safeCan(ctx.editor, "redo"),
-      };
-    },
-  });
-}

apps/client/src/features/editor/components/slash-menu/menu-items.ts

@@ -25,8 +25,6 @@ import {
   IconColumns3,
   IconColumns2,
   IconTag,
-  IconMoodSmile,
-  IconRotate2,
 } from "@tabler/icons-react";
 import {
   CommandProps,
@@ -134,7 +132,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
     {
       title: "Numbered list",
       description: "Create a list with numbering.",
-      searchTerms: ["numbered", "ordered", "list", "ol"],
+      searchTerms: ["numbered", "ordered", "list"],
       icon: IconListNumbers,
       command: ({ editor, range }: CommandProps) => {
         editor.chain().focus().deleteRange(range).toggleOrderedList().run();
@@ -233,15 +231,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
     {
       title: "Audio",
       description: "Upload any audio from your device.",
-      searchTerms: [
+      searchTerms: ["audio", "music", "sound", "mp3", "media", "file", "attachment"],
-        "audio",
-        "music",
-        "sound",
-        "mp3",
-        "media",
-        "file",
-        "attachment",
-      ],
       icon: IconMusic,
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).run();
@@ -478,53 +468,15 @@ const CommandGroups: SlashMenuGroupedItemsType = {
           .run();
       },
     },
-    {
-      title: "Emoji",
-      description: "Insert emoji.",
-      searchTerms: ["emoji", "icon", "smiley", "emoticon", "symbol", "reaction"],
-      icon: IconMoodSmile,
-      command: ({ editor, range }: CommandProps) => {
-        editor.chain().focus().deleteRange(range).insertContent(":").run();
-      },
-    },
     {
       title: "Subpages (Child pages)",
       description: "List all subpages of the current page",
-      searchTerms: [
+      searchTerms: ["subpages", "child", "children", "nested", "hierarchy"],
-        "subpages",
-        "child",
-        "children",
-        "nested",
-        "hierarchy",
-        "toc",
-      ],
       icon: IconSitemap,
       command: ({ editor, range }: CommandProps) => {
         editor.chain().focus().deleteRange(range).insertSubpages().run();
       },
     },
-    {
-      title: "Synced block",
-      description: "Create a block that stays in sync across pages.",
-      searchTerms: [
-        "sync",
-        "synced",
-        "synced block",
-        "excerpt",
-        "transclusion",
-        "reusable",
-        "snippet",
-      ],
-      icon: IconRotate2,
-      command: ({ editor, range }: CommandProps) => {
-        editor
-          .chain()
-          .focus()
-          .deleteRange(range)
-          .insertTransclusionSource()
-          .run();
-      },
-    },
     {
       title: "2 Columns",
       description: "Split content into two columns.",

apps/client/src/features/editor/components/table-of-contents/table-of-contents.tsx

@@ -25,7 +25,7 @@ const recalculateLinks = (nodePos: NodePos[]) => {
     (acc, item) => {
       const label = item.node.textContent;
       const level = Number(item.node.attrs.level);
-      if (label.length && level <= 4) {
+      if (label.length && level <= 3) {
         acc.push({
           label,
           level,

apps/client/src/features/editor/components/transclusion/error-placeholder.tsx

@@ -1,17 +0,0 @@
-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 (
-    <div className={classes.placeholder}>
-      <IconAlertTriangle
-        size={18}
-        stroke={1.6}
-        className={classes.placeholderIcon}
-      />
-      <span>{t("Failed to load this synced block")}</span>
-    </div>
-  );
-}

apps/client/src/features/editor/components/transclusion/no-access-placeholder.tsx

@@ -1,13 +0,0 @@
-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 (
-    <div className={classes.placeholder}>
-      <IconEyeOff size={18} stroke={1.6} className={classes.placeholderIcon} />
-      <span>{t("You don't have access to this synced block")}</span>
-    </div>
-  );
-}

apps/client/src/features/editor/components/transclusion/not-found-placeholder.tsx

@@ -1,17 +0,0 @@
-import { IconInfoCircle } from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-import classes from "./transclusion.module.css";
-
-export default function NotFoundPlaceholder() {
-  const { t } = useTranslation();
-  return (
-    <div className={classes.placeholder}>
-      <IconInfoCircle
-        size={18}
-        stroke={1.6}
-        className={classes.placeholderIcon}
-      />
-      <span>{t("The original synced block no longer exists")}</span>
-    </div>
-  );
-}

apps/client/src/features/editor/components/transclusion/transclusion-content.tsx

@@ -1,48 +0,0 @@
-import { EditorProvider } from "@tiptap/react";
-import { useMemo } from "react";
-import { mainExtensions } from "@/features/editor/extensions/extensions";
-import { UniqueID } from "@docmost/editor-ext";
-
-type Props = {
-  content: unknown;
-};
-
-export default function TransclusionContent({ content }: Props) {
-  const extensions = useMemo(() => {
-    const filtered = mainExtensions.filter(
-      (e: any) => e.name !== "uniqueID" && e.name !== "globalDragHandle",
-    );
-    return [
-      ...filtered,
-      UniqueID.configure({
-        types: ["heading", "paragraph", "transclusionSource"],
-        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 (
-    <div
-      onMouseDown={stop}
-      onClick={stop}
-      onDragStart={stop}
-      onDragOver={stop}
-      onDrop={stop}
-    >
-      <EditorProvider
-        editable={false}
-        immediatelyRender={true}
-        extensions={extensions}
-        content={content as any}
-      />
-    </div>
-  );
-}

apps/client/src/features/editor/components/transclusion/transclusion-lookup-context.tsx

@@ -1,213 +0,0 @@
-import React, {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import {
-  lookupTransclusion,
-  lookupTransclusionForShare,
-} 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<void>;
-};
-
-const TransclusionLookupContext = createContext<ContextValue | null>(null);
-
-export function TransclusionLookupProvider({
-  children,
-  shareId,
-}: {
-  children: React.ReactNode;
-  /**
-   * When set, lookups go through the share-scoped public endpoint and are
-   * gated by the share graph (source page must have its own share or inherit
-   * one). Used by the public share viewer; left undefined in the authenticated
-   * app, where personal permissions gate access.
-   */
-  shareId?: string;
-}) {
-  const subscribersRef = useRef(new Map<LookupKey, Subscriber[]>());
-  const queueRef = useRef(new Set<LookupKey>());
-  const tickRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  // Read inside flush() via ref so changing share context doesn't churn the
-  // memoized callbacks (and thus doesn't re-render every consumer).
-  const shareIdRef = useRef<string | undefined>(shareId);
-  shareIdRef.current = shareId;
-  // 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<LookupKey, TransclusionLookup>());
-  // 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<LookupKey>());
-  // 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<LookupKey, Array<() => 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 activeShareId = shareIdRef.current;
-      const { items } = activeShareId
-        ? await lookupTransclusionForShare({
-            shareId: activeShareId,
-            references,
-          })
-        : 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<ContextValue["subscribe"]>(
-    (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<ContextValue["refresh"]>(
-    (key) =>
-      new Promise<void>((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<ContextValue>(
-    () => ({ subscribe, refresh }),
-    [subscribe, refresh],
-  );
-
-  return (
-    <TransclusionLookupContext.Provider value={value}>
-      {children}
-    </TransclusionLookupContext.Provider>
-  );
-}
-
-export function useTransclusionLookup(
-  sourcePageId: string | null | undefined,
-  transclusionId: string | null | undefined,
-): {
-  result: TransclusionLookup | null;
-  refresh: () => Promise<void>;
-} {
-  const ctx = useContext(TransclusionLookupContext);
-  const [result, setResult] = useState<TransclusionLookup | null>(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 };
-}

apps/client/src/features/editor/components/transclusion/transclusion-reference-view.tsx

@@ -1,212 +0,0 @@
-import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
-import { ActionIcon, Menu, Tooltip } from "@mantine/core";
-import {
-  IconDots,
-  IconLinkOff,
-  IconPencil,
-  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 (
-    <NodeViewWrapper
-      className={classes.includeWrap}
-      data-focused={isEditable && props.selected ? "true" : "false"}
-      data-menu-open={openMenus > 0 ? "true" : "false"}
-      contentEditable={false}
-    >
-      <ErrorBoundary
-        resetKeys={[sourcePageId, transclusionId]}
-        fallback={<ErrorPlaceholder />}
-      >
-        <TransclusionReferenceBody {...props} trackOpen={trackOpen} />
-      </ErrorBoundary>
-    </NodeViewWrapper>
-  );
-}
-
-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;
-    const base = source?.spaceSlug
-      ? buildPageUrl(source.spaceSlug, source.slugId, source.title)
-      : sourcePageId
-        ? `/p/${sourcePageId}`
-        : null;
-    if (!base) return null;
-    return transclusionId ? `${base}#${transclusionId}` : base;
-  })();
-
-  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 && (
-        <div
-          className={classes.includeControls}
-          contentEditable={false}
-          onMouseDown={(e) => e.preventDefault()}
-        >
-          {sourcePageId && transclusionId && hostPageId && (
-            <SyncBlockReferencesDropdown
-              sourcePageId={sourcePageId}
-              transclusionId={transclusionId}
-              currentPageId={hostPageId}
-              mode="reference"
-              onOpenChange={trackOpen}
-            />
-          )}
-          <span className={classes.controlsDivider} />
-          <Tooltip label={t("Refresh")}>
-            <ActionIcon
-              variant="subtle"
-              color="gray"
-              size="sm"
-              onClick={handleRefresh}
-              loading={refreshing}
-              disabled={!sourcePageId || !transclusionId}
-            >
-              <IconRefresh size={14} />
-            </ActionIcon>
-          </Tooltip>
-          {sourcePageHref && (
-            <Tooltip label={t("Edit source")}>
-              <ActionIcon
-                component={Link}
-                to={sourcePageHref}
-                variant="subtle"
-                color="gray"
-                size="sm"
-                style={{
-                  textDecoration: "none",
-                  borderBottom: "none",
-                }}
-              >
-                <IconPencil size={14} />
-              </ActionIcon>
-            </Tooltip>
-          )}
-          <Menu position="bottom-end" withinPortal onChange={trackOpen}>
-            <Menu.Target>
-              <ActionIcon variant="subtle" color="gray" size="sm">
-                <IconDots size={14} />
-              </ActionIcon>
-            </Menu.Target>
-            <Menu.Dropdown>
-              <Menu.Item
-                leftSection={<IconLinkOff size={14} />}
-                onClick={handleUnsync}
-                disabled={
-                  unsyncMutation.isPending ||
-                  !hostPageId ||
-                  !sourcePageId ||
-                  !transclusionId
-                }
-              >
-                {t("Unsync")}
-              </Menu.Item>
-              <Menu.Item
-                color="red"
-                leftSection={<IconTrash size={14} />}
-                onClick={() => deleteNode()}
-              >
-                {t("Remove from page")}
-              </Menu.Item>
-            </Menu.Dropdown>
-          </Menu>
-        </div>
-      )}
-
-      {!sourcePageId || !transclusionId ? (
-        <NotFoundPlaceholder />
-      ) : !result ? (
-        <div style={{ minHeight: 24 }} />
-      ) : !("status" in result) ? (
-        <TransclusionContent content={result.content} />
-      ) : result.status === "no_access" ? (
-        <NoAccessPlaceholder />
-      ) : (
-        <NotFoundPlaceholder />
-      )}
-    </>
-  );
-}

apps/client/src/features/editor/components/transclusion/transclusion-view.tsx

@@ -1,126 +0,0 @@
-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 = `<div data-type="transclusionReference" data-source-page-id="${sourcePageId}" data-transclusion-id="${transclusionId}"></div>`;
-    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().unsyncTransclusionSource().run();
-  };
-
-  return (
-    <NodeViewWrapper
-      className={classes.transclusionWrap}
-      data-menu-open={openMenus > 0 ? "true" : "false"}
-      data-id={transclusionId ?? undefined}
-    >
-      {isEditable && (
-        <div
-          className={classes.transclusionControls}
-          contentEditable={false}
-          onMouseDown={(e) => e.preventDefault()}
-        >
-          {sourcePageId && transclusionId && (
-            <SyncBlockReferencesDropdown
-              sourcePageId={sourcePageId}
-              transclusionId={transclusionId}
-              currentPageId={sourcePageId}
-              mode="source"
-              onOpenChange={trackOpen}
-            />
-          )}
-
-          <span className={classes.controlsDivider} />
-
-          <Tooltip label={copied ? t("Copied") : t("Copy synced block")}>
-            <ActionIcon
-              variant="subtle"
-              color={copied ? "teal" : "gray"}
-              size="sm"
-              onClick={handleCopy}
-              disabled={!sourcePageId || !transclusionId}
-            >
-              {copied ? <IconCheck size={14} /> : <IconCopy size={14} />}
-            </ActionIcon>
-          </Tooltip>
-
-          <Menu position="bottom-end" withinPortal onChange={trackOpen}>
-            <Menu.Target>
-              <ActionIcon variant="subtle" color="gray" size="sm">
-                <IconDots size={14} />
-              </ActionIcon>
-            </Menu.Target>
-            <Menu.Dropdown>
-              <Menu.Item
-                leftSection={<IconLinkOff size={14} />}
-                onClick={handleUnsync}
-              >
-                {t("Unsync")}
-              </Menu.Item>
-              <Menu.Item
-                color="red"
-                leftSection={<IconTrash size={14} />}
-                onClick={() => deleteNode()}
-              >
-                {t("Delete synced block")}
-              </Menu.Item>
-            </Menu.Dropdown>
-          </Menu>
-        </div>
-      )}
-
-      <NodeViewContent />
-    </NodeViewWrapper>
-  );
-}

apps/client/src/features/editor/components/transclusion/transclusion.module.css

@@ -1,209 +0,0 @@
-.placeholder {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  border-radius: var(--mantine-radius-md);
-  background: light-dark(
-    var(--mantine-color-gray-0),
-    var(--mantine-color-dark-6)
-  );
-  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
-  font-size: var(--mantine-font-size-sm);
-  user-select: none;
-}
-
-.placeholderIcon {
-  flex: none;
-  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
-}
-
-.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: 8px;
-  border: 2px solid transparent;
-  transition: border 0.3s;
-}
-
-.transclusionWrap:hover,
-.transclusionWrap:focus-within {
-  border: 2px solid
-    light-dark(
-      var(--mantine-color-orange-2),
-      color-mix(in srgb, var(--mantine-color-orange-9), transparent 55%)
-    );
-}
-
-.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);
-}
-
-.transclusionControls a[href],
-.includeControls a[href] {
-  color: var(--ai-color);
-  border-bottom: none;
-  font-weight: inherit;
-}
-
-.includeWrap {
-  position: relative;
-  margin-left: -3rem;
-  margin-right: -3rem;
-  width: calc(100% + 6rem);
-  padding: 0.5em 0;
-  border-radius: 8px;
-  border: 2px solid transparent;
-  transition: border 0.3s;
-}
-
-.includeWrap:hover,
-.includeWrap[data-focused="true"],
-.includeWrap[data-menu-open="true"] {
-  border: 2px solid
-    light-dark(
-      var(--mantine-color-orange-2),
-      color-mix(in srgb, var(--mantine-color-orange-9), transparent 55%)
-    );
-}
-
-.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-transclusionSource.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;
-  }
-  .transclusionWrap,
-  .includeWrap {
-    border: none !important;
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-    width: 100% !important;
-    padding: 0 !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);
-}

apps/client/src/features/editor/extensions/drag-handle.ts

@@ -1,419 +0,0 @@
-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<HTMLElement>(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 <ol> 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,
-      scrollThreshold: 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;

apps/client/src/features/editor/extensions/extensions.ts

@@ -9,10 +9,9 @@ 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, {
+import SlashCommand, { SlashCommandExtension as Command } from "@/features/editor/extensions/slash-command";
-  SlashCommandExtension as Command,
-} from "@/features/editor/extensions/slash-command";
 import renderItems from "@/features/editor/components/slash-menu/render-items";
 import getSuggestionItems from "@/features/editor/components/slash-menu/menu-items";
 import { Collaboration, isChangeOrigin } from "@tiptap/extension-collaboration";
@@ -48,14 +47,11 @@ import {
   Subpages,
   Heading,
   Highlight,
-  Indent,
   UniqueID,
   SharedStorage,
   Columns,
   Column,
   Status,
-  TransclusionSource,
-  TransclusionReference,
 } from "@docmost/editor-ext";
 import {
   randomElement,
@@ -84,8 +80,6 @@ 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";
@@ -106,7 +100,6 @@ 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);
@@ -174,7 +167,7 @@ export const mainExtensions = [
   SharedStorage,
   Heading,
   UniqueID.configure({
-    types: ["heading", "paragraph", "transclusionSource"],
+    types: ["heading", "paragraph"],
     filterTransaction: (transaction) => !isChangeOrigin(transaction),
   }),
   Placeholder.configure({
@@ -204,7 +197,6 @@ export const mainExtensions = [
     showOnlyWhenEditable: true,
   }),
   TextAlign.configure({ types: ["heading", "paragraph"] }),
-  Indent,
   TaskList,
   TaskItem.configure({
     nested: true,
@@ -223,9 +215,7 @@ export const mainExtensions = [
   }),
   Typography,
   TrailingNode,
-  GlobalDragHandle.configure({
+  GlobalDragHandle,
-    customNodes: ["transclusionSource", "transclusionReference"],
-  }),
   TextStyle,
   Color,
   SlashCommand,
@@ -315,8 +305,6 @@ export const mainExtensions = [
     view: CodeBlockView,
     //@ts-ignore
     lowlight,
-    enableTabIndentation: true,
-    tabSize: 2,
     HTMLAttributes: {
       spellcheck: false,
     },
@@ -363,12 +351,6 @@ export const mainExtensions = [
   Status.configure({
     view: StatusView,
   }),
-  TransclusionSource.configure({
-    view: TransclusionView,
-  }),
-  TransclusionReference.configure({
-    view: TransclusionReferenceView,
-  }),
   MarkdownClipboard.configure({
     transformPastedText: true,
   }),
@@ -411,10 +393,7 @@ const TEMPLATE_EXCLUDED_SLASH_ITEMS = new Set([
 const TemplateSlashCommand = Command.configure({
   suggestion: {
     items: ({ query }: { query: string }) =>
-      getSuggestionItems({
+      getSuggestionItems({ query, excludeItems: TEMPLATE_EXCLUDED_SLASH_ITEMS }),
-        query,
-        excludeItems: TEMPLATE_EXCLUDED_SLASH_ITEMS,
-      }),
     render: renderItems,
   },
 });

apps/client/src/features/editor/full-editor.tsx

@@ -17,8 +17,6 @@ import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import { PageVerificationBadge } from "@/ee/page-verification";
 import { useTranslation } from "react-i18next";
 import { IContributor } from "@/features/page/types/page.types.ts";
-import { FixedToolbar } from "@/features/editor/components/fixed-toolbar/fixed-toolbar";
-import { PageEditMode } from "@/features/user/types/user.types.ts";
 
 const MemoizedTitleEditor = React.memo(TitleEditor);
 const MemoizedPageEditor = React.memo(PageEditor);
@@ -54,11 +52,6 @@ export function FullEditor({
 }: FullEditorProps) {
   const [user] = useAtom(userAtom);
   const fullPageWidth = user.settings?.preferences?.fullPageWidth;
-  const editorToolbarEnabled =
-    user.settings?.preferences?.editorToolbar ?? false;
-  const userPageEditMode =
-    user.settings?.preferences?.pageEditMode ?? PageEditMode.Edit;
-  const isEditMode = userPageEditMode === PageEditMode.Edit;
 
   return (
     <Container
@@ -66,7 +59,6 @@ export function FullEditor({
       size={!fullPageWidth && 900}
       className={classes.editor}
     >
-      {editorToolbarEnabled && editable && isEditMode && <FixedToolbar />}
       <MemoizedTitleEditor
         pageId={pageId}
         slugId={slugId}

apps/client/src/features/editor/page-editor.tsx

@@ -71,7 +71,6 @@ 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;
@@ -400,60 +399,55 @@ export default function PageEditor({
     }
   }, [yjsConnectionStatus, isSynced]);
 
+  if (showStatic) {
+    return (
+      <EditorProvider
+        editable={false}
+        immediatelyRender={true}
+        extensions={mainExtensions}
+        content={content}
+      />
+    );
+  }
+
   return (
-    <TransclusionLookupProvider>
+    <div className="editor-container" style={{ position: "relative" }}>
-      {showStatic ? (
+      <div ref={menuContainerRef}>
-        <EditorProvider
+        <EditorContent editor={editor} />
-          editable={false}
-          immediatelyRender={true}
-          extensions={mainExtensions}
-          content={content}
-        />
-      ) : (
-        <div className="editor-container" style={{ position: "relative" }}>
-          <div ref={menuContainerRef}>
-            <EditorContent editor={editor} />
 
-            {editor && (
+        {editor && (
-              <SearchAndReplaceDialog editor={editor} editable={editable} />
+          <SearchAndReplaceDialog editor={editor} editable={editable} />
-            )}
+        )}
 
-            {editor && editorIsEditable && (
+        {editor && editorIsEditable && (
-              <div>
+          <div>
-                <EditorAiMenu editor={editor} />
+            <EditorAiMenu editor={editor} />
-                <EditorLinkMenu editor={editor} />
+            <EditorLinkMenu editor={editor} />
-                <EditorBubbleMenu editor={editor} />
+            <EditorBubbleMenu editor={editor} />
-                <TableMenu editor={editor} />
+            <TableMenu editor={editor} />
-                <TableCellMenu editor={editor} appendTo={menuContainerRef} />
+            <TableCellMenu editor={editor} appendTo={menuContainerRef} />
-                <ImageMenu editor={editor} />
+            <ImageMenu editor={editor} />
-                <VideoMenu editor={editor} />
+            <VideoMenu editor={editor} />
-                <PdfMenu editor={editor} />
+            <PdfMenu editor={editor} />
-                <CalloutMenu editor={editor} />
+            <CalloutMenu editor={editor} />
-                <SubpagesMenu editor={editor} />
+            <SubpagesMenu editor={editor} />
-                <ExcalidrawMenu editor={editor} />
+            <ExcalidrawMenu editor={editor} />
-                <DrawioMenu editor={editor} />
+            <DrawioMenu editor={editor} />
-                <ColumnsMenu editor={editor} />
+            <ColumnsMenu editor={editor} />
-              </div>
-            )}
-            {editor &&
-              !editorIsEditable &&
-              (editable || canComment) &&
-              providersRef.current && (
-                <ReadonlyBubbleMenu editor={editor} />
-              )}
-            {showCommentPopup && (
-              <CommentDialog editor={editor} pageId={pageId} />
-            )}
-            {showReadOnlyCommentPopup && (
-              <CommentDialog editor={editor} pageId={pageId} readOnly />
-            )}
           </div>
-          <div
+        )}
-            onClick={() => editor.commands.focus("end")}
+        {editor && !editorIsEditable && (editable || canComment) && providersRef.current && (
-            style={{ paddingBottom: "20vh" }}
+          <ReadonlyBubbleMenu editor={editor} />
-          ></div>
+        )}
-        </div>
+        {showCommentPopup && <CommentDialog editor={editor} pageId={pageId} />}
-      )}
+        {showReadOnlyCommentPopup && (
-    </TransclusionLookupProvider>
+          <CommentDialog editor={editor} pageId={pageId} readOnly />
+        )}
+      </div>
+      <div
+        onClick={() => editor.commands.focus("end")}
+        style={{ paddingBottom: "20vh" }}
+      ></div>
+    </div>
   );
 }

apps/client/src/features/editor/readonly-page-editor.tsx

@@ -9,26 +9,17 @@ 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;
   content: any;
   pageId?: string;
-  /**
-   * When rendering inside a public share, pass the share's id (or key). Lookups
-   * for transclusion content then resolve against the share graph instead of
-   * the viewer's personal permissions, so a share never leaks source content
-   * that isn't itself shared.
-   */
-  shareId?: string;
 }
 
 export default function ReadonlyPageEditor({
   title,
   content,
   pageId,
-  shareId,
 }: PageEditorProps) {
   const [, setReadOnlyEditor] = useAtom(readOnlyEditorAtom);
   const isComponentMounted = useRef(false);
@@ -74,7 +65,7 @@ export default function ReadonlyPageEditor({
   ];
 
   return (
-    <TransclusionLookupProvider shareId={shareId}>
+    <>
       <div className="page-title">
         <EditorProvider
           editable={false}
@@ -104,6 +95,6 @@ export default function ReadonlyPageEditor({
         }}
       ></EditorProvider>
       <div style={{ paddingBottom: "20vh" }}></div>
-    </TransclusionLookupProvider>
+    </>
   );
 }

apps/client/src/features/editor/styles/indent.css

@@ -1,14 +0,0 @@
-.ProseMirror {
-  --indent-step: 2rem;
-}
-
-.ProseMirror [data-indent="1"] { padding-inline-start: calc(var(--indent-step) * 1); }
-.ProseMirror [data-indent="2"] { padding-inline-start: calc(var(--indent-step) * 2); }
-.ProseMirror [data-indent="3"] { padding-inline-start: calc(var(--indent-step) * 3); }
-.ProseMirror [data-indent="4"] { padding-inline-start: calc(var(--indent-step) * 4); }
-.ProseMirror [data-indent="5"] { padding-inline-start: calc(var(--indent-step) * 5); }
-.ProseMirror [data-indent="6"] { padding-inline-start: calc(var(--indent-step) * 6); }
-.ProseMirror [data-indent="7"] { padding-inline-start: calc(var(--indent-step) * 7); }
-.ProseMirror [data-indent="8"] { padding-inline-start: calc(var(--indent-step) * 8); }
-.ProseMirror [data-indent="9"] { padding-inline-start: calc(var(--indent-step) * 9); }
-.ProseMirror [data-indent="10"] { padding-inline-start: calc(var(--indent-step) * 10); }

apps/client/src/features/editor/styles/index.css

@@ -13,6 +13,5 @@
 @import "./mention.css";
 @import "./ordered-list.css";
 @import "./highlight.css";
-@import "./indent.css";
 @import "./columns.css";
 @import "./status.css";

apps/client/src/features/home/components/home-ai-prompt.module.css

@@ -16,7 +16,7 @@
 
 .subtitle {
   font-size: var(--mantine-font-size-sm);
-  color: var(--mantine-color-dimmed);
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
   text-align: center;
   margin-top: 6px;
   margin-bottom: var(--mantine-spacing-lg);

apps/client/src/features/transclusion/components/sync-block-references-dropdown.module.css

@@ -1,205 +0,0 @@
-.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;
-}

apps/client/src/features/transclusion/components/sync-block-references-dropdown.tsx

@@ -1,184 +0,0 @@
-import { useState } from "react";
-import { Loader, Popover } from "@mantine/core";
-import {
-  IconChevronDown,
-  IconCornerDownLeft,
-  IconFile,
-  IconInfoCircle,
-} from "@tabler/icons-react";
-import { Link } from "react-router-dom";
-import { Trans, useTranslation } from "react-i18next";
-import { useReferencesQuery } from "@/features/transclusion/queries/transclusion-query";
-import type { ReferencingPage } from "@/features/transclusion/types/transclusion.types";
-import { buildPageUrl } from "@/features/page/page.utils";
-import classes from "./sync-block-references-dropdown.module.css";
-
-type Props = {
-  sourcePageId: string | null;
-  transclusionId: string | null;
-  /** The page currently being viewed - used to mark the "THIS PAGE" badge. */
-  currentPageId: string;
-  /**
-   * Source: trigger reads "Editing original".
-   * Reference: trigger reads "Synced to N other pages".
-   */
-  mode: "source" | "reference";
-  /** Notified whenever the dropdown opens/closes (for keep-chrome-visible). */
-  onOpenChange?: (open: boolean) => void;
-};
-
-export default function SyncBlockReferencesDropdown({
-  sourcePageId,
-  transclusionId,
-  currentPageId,
-  mode,
-  onOpenChange,
-}: Props) {
-  const { t } = useTranslation();
-  const [opened, setOpened] = useState(false);
-
-  const handleOpenChange = (next: boolean) => {
-    setOpened(next);
-    onOpenChange?.(next);
-  };
-
-  // Fetch eagerly so the "Synced to N other pages" count is correct even
-  // before the dropdown is opened. The cache is keyed on (sourcePageId,
-  // transclusionId), so two views (source + reference) share one fetch.
-  const enabled = !!sourcePageId && !!transclusionId;
-  const { data, isLoading } = useReferencesQuery(
-    sourcePageId,
-    transclusionId,
-    enabled,
-  );
-
-  const allPages: Array<{ page: ReferencingPage; isOriginal: boolean }> = [];
-  if (data?.source) {
-    allPages.push({ page: data.source, isOriginal: true });
-  }
-  for (const ref of data?.references ?? []) {
-    allPages.push({ page: ref, isOriginal: false });
-  }
-
-  const otherCount = allPages.filter((p) => p.page.id !== currentPageId).length;
-  const label =
-    mode === "source"
-      ? t("Editing original")
-      : t("Synced to {{count}} other page", {
-          count: otherCount,
-          defaultValue_one: "Synced to {{count}} other page",
-          defaultValue_other: "Synced to {{count}} other pages",
-        });
-
-  return (
-    <Popover
-      position="bottom-start"
-      shadow="lg"
-      opened={opened}
-      onChange={handleOpenChange}
-      width={340}
-      withinPortal
-    >
-      <Popover.Target>
-        <button
-          type="button"
-          className={classes.trigger}
-          onClick={() => handleOpenChange(!opened)}
-          aria-expanded={opened}
-          aria-haspopup="dialog"
-        >
-          <span className={classes.triggerIcon}>
-            <IconCornerDownLeft size={14} stroke={1.8} />
-          </span>
-          <span>{label}</span>
-          <span className={classes.triggerChev}>
-            <IconChevronDown size={12} stroke={2} />
-          </span>
-        </button>
-      </Popover.Target>
-
-      <Popover.Dropdown className={classes.dropdown}>
-        {mode === "reference" && data?.source && (
-          <div className={classes.banner}>
-            <span className={classes.bannerIcon}>
-              <IconInfoCircle size={16} stroke={1.6} />
-            </span>
-            <div>
-              <Trans
-                i18nKey="sourceReadOnlyHint"
-                defaults="This section is read-only here. Edit it on the <link>original source page</link>."
-                components={{
-                  link: (
-                    <Link
-                      to={
-                        data.source.spaceSlug
-                          ? buildPageUrl(
-                              data.source.spaceSlug,
-                              data.source.slugId,
-                              data.source.title,
-                            )
-                          : `/p/${data.source.id}`
-                      }
-                      className={classes.bannerLink}
-                      onClick={() => handleOpenChange(false)}
-                    />
-                  ),
-                }}
-              />
-            </div>
-          </div>
-        )}
-
-        {isLoading ? (
-          <div className={classes.loading}>
-            <Loader size="xs" />
-          </div>
-        ) : allPages.length === 0 ? (
-          <div className={classes.empty}>{t("No pages")}</div>
-        ) : (
-          <div className={classes.section}>
-            <div className={classes.sectionLabel}>{t("Synced to")}</div>
-            <ul className={classes.list}>
-              {allPages.map(({ page, isOriginal }) => {
-                const isCurrent = page.id === currentPageId;
-                const href = page.spaceSlug
-                  ? buildPageUrl(page.spaceSlug, page.slugId, page.title)
-                  : `/p/${page.id}`;
-                const title = page.title?.length ? page.title : t("Untitled");
-                return (
-                  <li key={page.id}>
-                    <Link
-                      to={href}
-                      className={classes.row}
-                      onClick={() => handleOpenChange(false)}
-                    >
-                      {page.icon ? (
-                        <span className={classes.rowEmoji}>{page.icon}</span>
-                      ) : (
-                        <span className={classes.rowIcon}>
-                          <IconFile size={16} stroke={1.6} />
-                        </span>
-                      )}
-                      <span className={classes.rowTitle} title={title}>
-                        {title}
-                      </span>
-                      {isCurrent ? (
-                        <span
-                          className={`${classes.badge} ${classes.badgeAccent}`}
-                        >
-                          {t("THIS PAGE")}
-                        </span>
-                      ) : isOriginal ? (
-                        <span className={classes.badge}>{t("ORIGINAL")}</span>
-                      ) : null}
-                    </Link>
-                  </li>
-                );
-              })}
-            </ul>
-          </div>
-        )}
-      </Popover.Dropdown>
-    </Popover>
-  );
-}

apps/client/src/features/transclusion/queries/transclusion-query.ts

@@ -1,32 +0,0 @@
-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),
-  });
-}

apps/client/src/features/transclusion/services/transclusion-api.ts

@@ -1,37 +0,0 @@
-import api from "@/lib/api-client";
-import type {
-  ReferencingPagesResponse,
-  TransclusionLookup,
-} from "../types/transclusion.types";
-
-export async function lookupTransclusion(params: {
-  references: Array<{ sourcePageId: string; transclusionId: string }>;
-}): Promise<{ items: TransclusionLookup[] }> {
-  const r = await api.post("/pages/transclusion/lookup", params);
-  return r.data;
-}
-
-export async function lookupTransclusionForShare(params: {
-  shareId: string;
-  references: Array<{ sourcePageId: string; transclusionId: string }>;
-}): Promise<{ items: TransclusionLookup[] }> {
-  const r = await api.post("/shares/transclusion/lookup", params);
-  return r.data;
-}
-
-export async function listReferences(params: {
-  sourcePageId: string;
-  transclusionId: string;
-}): Promise<ReferencingPagesResponse> {
-  const r = await api.post("/pages/transclusion/references", params);
-  return r.data;
-}
-
-export async function unsyncReference(params: {
-  referencePageId: string;
-  sourcePageId: string;
-  transclusionId: string;
-}): Promise<{ content: unknown }> {
-  const r = await api.post("/pages/transclusion/unsync-reference", params);
-  return r.data;
-}

apps/client/src/features/transclusion/types/transclusion.types.ts

@@ -1,23 +0,0 @@
-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[];
-};

apps/client/src/features/user/components/fixed-toolbar-pref.tsx

@@ -1,57 +0,0 @@
-import { userAtom } from "@/features/user/atoms/current-user-atom";
-import { updateUser } from "@/features/user/services/user-service";
-import { Badge, Group, Switch, Text } from "@mantine/core";
-import { useAtom } from "jotai";
-import React, { useState } from "react";
-import { useTranslation } from "react-i18next";
-import {
-  ResponsiveSettingsRow,
-  ResponsiveSettingsContent,
-  ResponsiveSettingsControl,
-} from "@/components/ui/responsive-settings-row";
-
-export default function FixedToolbarPref() {
-  const { t } = useTranslation();
-  const [user, setUser] = useAtom(userAtom);
-  const [checked, setChecked] = useState(
-    user.settings?.preferences?.editorToolbar ?? false,
-  );
-
-  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = event.currentTarget.checked;
-    setChecked(value);
-    try {
-      const updatedUser = await updateUser({ editorToolbar: value });
-      setUser(updatedUser);
-    } catch {
-      setChecked(!value);
-    }
-  };
-
-  return (
-    <ResponsiveSettingsRow>
-      <ResponsiveSettingsContent>
-        <Group gap="xs">
-          <Text size="md">{t("Fixed editor toolbar")}</Text>
-          <Badge size="xs" color="gray" variant="light">
-            {t("Experimental")}
-          </Badge>
-        </Group>
-        <Text size="sm" c="dimmed">
-          {t(
-            "Show a formatting toolbar above the editor with quick access to common actions.",
-          )}
-        </Text>
-      </ResponsiveSettingsContent>
-
-      <ResponsiveSettingsControl>
-        <Switch
-          labelPosition="left"
-          defaultChecked={checked}
-          onChange={handleChange}
-          aria-label={t("Toggle fixed editor toolbar")}
-        />
-      </ResponsiveSettingsControl>
-    </ResponsiveSettingsRow>
-  );
-}

apps/client/src/features/user/types/user.types.ts

@@ -20,7 +20,6 @@ export interface IUser {
   deletedAt: Date;
   fullPageWidth: boolean; // used for update
   pageEditMode: string; // used for update
-  editorToolbar: boolean; // used for update
   notificationPageUpdates: boolean; // used for update
   notificationPageUserMention: boolean; // used for update
   notificationCommentUserMention: boolean; // used for update
@@ -38,7 +37,6 @@ export interface IUserSettings {
   preferences: {
     fullPageWidth: boolean;
     pageEditMode: string;
-    editorToolbar: boolean;
   };
   notifications?: {
     "page.updated"?: boolean;

apps/client/src/features/user/user-provider.tsx

@@ -60,10 +60,6 @@ export function UserProvider({ children }: React.PropsWithChildren) {
     }
   }, [data, isLoading]);
 
-  useEffect(() => {
-    document.documentElement.lang = i18n.resolvedLanguage || i18n.language || "en-US";
-  }, [i18n.language, i18n.resolvedLanguage]);
-
   useEffect(() => {
     if (entitlements) {
       setEntitlements(entitlements);

apps/client/src/pages/settings/account/account-preferences.tsx

@@ -3,7 +3,6 @@ import AccountLanguage from "@/features/user/components/account-language.tsx";
 import AccountTheme from "@/features/user/components/account-theme.tsx";
 import PageWidthPref from "@/features/user/components/page-width-pref.tsx";
 import PageEditPref from "@/features/user/components/page-state-pref";
-import FixedToolbarPref from "@/features/user/components/fixed-toolbar-pref";
 import NotificationPref from "@/features/user/components/notification-pref";
 import { getAppName } from "@/lib/config.ts";
 import { Divider } from "@mantine/core";
@@ -38,10 +37,6 @@ export default function AccountPreferences() {
 
       <Divider my={"md"} />
 
-      <FixedToolbarPref />
-
-      <Divider my={"md"} />
-
       <NotificationPref />
     </>
   );

apps/client/src/pages/share/shared-page.tsx

@@ -65,7 +65,6 @@ export default function SharedPage() {
           title={data.page.title}
           content={data.page.content}
           pageId={data.page.id}
-          shareId={data.share.id}
         />
       </Container>
 

apps/server/package.json

@@ -163,11 +163,10 @@
     "rootDir": "src",
     "testRegex": ".*\\.spec\\.ts$",
     "transform": {
-      "happy-dom.+\\.js$": ["babel-jest", { "presets": [["@babel/preset-env", { "targets": { "node": "current" } }]] }],
       "^.+\\.(t|j)s$": "ts-jest"
     },
     "transformIgnorePatterns": [
-      "/node_modules/(?!(\\.pnpm/)?(nanoid|uuid|image-dimensions|marked|happy-dom)(@|/))"
+      "/node_modules/(?!(\\.pnpm/)?(nanoid|uuid|image-dimensions|marked)(@|/))"
     ],
     "collectCoverageFrom": [
       "**/*.(t|j)s"

apps/server/src/collaboration/collaboration.module.ts

@@ -1,4 +1,10 @@
-import { Logger, Module, OnModuleDestroy, OnModuleInit } from '@nestjs/common';
+import {
+  Global,
+  Logger,
+  Module,
+  OnModuleDestroy,
+  OnModuleInit,
+} from '@nestjs/common';
 import { AuthenticationExtension } from './extensions/authentication.extension';
 import { PersistenceExtension } from './extensions/persistence.extension';
 import { CollaborationGateway } from './collaboration.gateway';
@@ -12,10 +18,6 @@ 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';
-import { TransclusionModule } from '../core/page/transclusion/transclusion.module';
-import { StorageModule } from '../integrations/storage/storage.module';
-import { EnvironmentModule } from '../integrations/environment/environment.module';
 
 @Module({
   providers: [
@@ -26,17 +28,9 @@ import { EnvironmentModule } from '../integrations/environment/environment.modul
     HistoryProcessor,
     CollabHistoryService,
     CollaborationHandler,
-    TransclusionService,
   ],
   exports: [CollaborationGateway],
-  imports: [
+  imports: [TokenModule, WatcherModule],
-    TokenModule,
-    WatcherModule,
-    StorageModule.forRootAsync({
-      imports: [EnvironmentModule],
-    }),
-    TransclusionModule,
-  ],
 })
 export class CollaborationModule implements OnModuleInit, OnModuleDestroy {
   private readonly logger = new Logger(CollaborationModule.name);

apps/server/src/collaboration/collaboration.util.ts

@@ -34,15 +34,12 @@ import {
   Mention,
   Subpages,
   Highlight,
-  Indent,
   UniqueID,
   Columns,
   Column,
   Status,
   addUniqueIdsToDoc,
   htmlToMarkdown,
-  TransclusionSource,
-  TransclusionReference,
 } from '@docmost/editor-ext';
 import { generateText, getSchema, JSONContent } from '@tiptap/core';
 import { generateHTML, generateJSON } from '../common/helpers/prosemirror/html';
@@ -63,11 +60,10 @@ export const tiptapExtensions = [
   }),
   Heading,
   UniqueID.configure({
-    types: ['heading', 'paragraph', 'transclusionSource'],
+    types: ['heading', 'paragraph'],
   }),
   Comment,
   TextAlign.configure({ types: ['heading', 'paragraph'] }),
-  Indent,
   TaskList,
   TaskItem.configure({
     nested: true,
@@ -105,8 +101,6 @@ export const tiptapExtensions = [
   Columns,
   Column,
   Status,
-  TransclusionSource,
-  TransclusionReference,
 ] as any;
 
 export function jsonToHtml(tiptapJson: any) {

apps/server/src/collaboration/extensions/persistence.extension.ts

@@ -32,7 +32,6 @@ import {
   HISTORY_FAST_THRESHOLD,
   HISTORY_INTERVAL,
 } from '../constants';
-import { TransclusionService } from '../../core/page/transclusion/transclusion.service';
 
 @Injectable()
 export class PersistenceExtension implements Extension {
@@ -46,7 +45,6 @@ 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) {
@@ -136,11 +134,7 @@ export class PersistenceExtension implements Extension {
         try {
           const existingContributors = page.contributorIds || [];
           contributorIds = Array.from(
-            new Set([
+            new Set([...existingContributors, ...editingUserIds, page.creatorId]),
-              ...existingContributors,
-              ...editingUserIds,
-              page.creatorId,
-            ]),
           );
         } catch (err) {
           //this.logger.debug('Contributors error:' + err?.['message']);
@@ -164,10 +158,6 @@ export class PersistenceExtension implements Extension {
       this.logger.error(`Failed to update page ${pageId}`, err);
     }
 
-    if (page) {
-      await this.syncTransclusion(pageId, page.workspaceId, tiptapJson);
-    }
-
     if (page) {
       await this.collabHistory.addContributors(pageId, editingUserIds);
 
@@ -175,9 +165,7 @@ export class PersistenceExtension implements Extension {
 
       const userMentions = extractUserMentions(mentions);
       const oldMentions = page.content ? extractMentions(page.content) : [];
-      const oldMentionedUserIds = extractUserMentions(oldMentions).map(
+      const oldMentionedUserIds = extractUserMentions(oldMentions).map((m) => m.entityId);
-        (m) => m.entityId,
-      );
 
       if (userMentions.length > 0) {
         await this.notificationQueue.add(QueueJob.PAGE_MENTION_NOTIFICATION, {
@@ -241,41 +229,4 @@ 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,
-    workspaceId: string,
-    tiptapJson: unknown,
-  ): Promise<void> {
-    try {
-      await this.transclusionService.syncPageTransclusions(
-        pageId,
-        workspaceId,
-        tiptapJson,
-      );
-    } catch (err) {
-      this.logger.error(
-        { err, pageId },
-        'Failed to sync transclusions for page',
-      );
-    }
-    try {
-      await this.transclusionService.syncPageReferences(
-        pageId,
-        workspaceId,
-        tiptapJson,
-      );
-    } catch (err) {
-      this.logger.error(
-        { err, pageId },
-        'Failed to sync transclusion references for page',
-      );
-    }
-  }
 }

apps/server/src/common/helpers/prosemirror/attachment-node-types.ts

@@ -1,13 +0,0 @@
-const ATTACHMENT_NODE_TYPES = [
-  'attachment',
-  'image',
-  'video',
-  'audio',
-  'pdf',
-  'excalidraw',
-  'drawio',
-];
-
-export function isAttachmentNode(nodeType: string): boolean {
-  return ATTACHMENT_NODE_TYPES.includes(nodeType);
-}

apps/server/src/common/helpers/prosemirror/html/index.ts

@@ -1,2 +1,2 @@
-export * from './generateHTML';
+export * from './generateHTML.js';
-export * from './generateJSON';
+export * from './generateJSON.js';

apps/server/src/common/helpers/prosemirror/indent-schema.spec.ts

@@ -1,63 +0,0 @@
-import { htmlToJson, jsonToHtml } from '../../../collaboration/collaboration.util';
-
-const findFirstChild = (
-  json: any,
-  type: string,
-): any | undefined => {
-  if (!json || typeof json !== 'object') return undefined;
-  if (json.type === type) return json;
-  if (Array.isArray(json.content)) {
-    for (const child of json.content) {
-      const found = findFirstChild(child, type);
-      if (found) return found;
-    }
-  }
-  return undefined;
-};
-
-describe('indent attribute round-trip', () => {
-  it('parses data-indent on a paragraph into the indent attribute', () => {
-    const html = '<p data-indent="3">Hello</p>';
-    const json = htmlToJson(html);
-    const paragraph = findFirstChild(json, 'paragraph');
-    expect(paragraph).toBeDefined();
-    expect(paragraph.attrs.indent).toBe(3);
-  });
-
-  it('parses data-indent on a heading into the indent attribute', () => {
-    const html = '<h2 data-indent="2">Heading</h2>';
-    const json = htmlToJson(html);
-    const heading = findFirstChild(json, 'heading');
-    expect(heading).toBeDefined();
-    expect(heading.attrs.indent).toBe(2);
-    expect(heading.attrs.level).toBe(2);
-  });
-
-  it('clamps out-of-range data-indent values', () => {
-    const html = '<p data-indent="42">Too deep</p>';
-    const json = htmlToJson(html);
-    const paragraph = findFirstChild(json, 'paragraph');
-    expect(paragraph.attrs.indent).toBe(8);
-  });
-
-  it('renders nonzero indent back to data-indent on HTML serialization', () => {
-    const html = '<p data-indent="4">Round-trip</p>';
-    const json = htmlToJson(html);
-    const out = jsonToHtml(json);
-    expect(out).toContain('data-indent="4"');
-  });
-
-  it('omits data-indent for indent zero', () => {
-    const html = '<p>No indent</p>';
-    const json = htmlToJson(html);
-    const out = jsonToHtml(json);
-    expect(out).not.toContain('data-indent');
-  });
-
-  it('preserves indent through HTML → JSON → HTML', () => {
-    const original = '<p data-indent="5">Five deep</p>';
-    const json = htmlToJson(original);
-    const final = jsonToHtml(json);
-    expect(final).toContain('data-indent="5"');
-  });
-});

apps/server/src/common/helpers/prosemirror/utils.ts

@@ -11,7 +11,6 @@ import {
   INTERNAL_LINK_REGEX,
   extractPageSlugId,
 } from '../../../integrations/export/utils';
-import { isAttachmentNode } from './attachment-node-types';
 
 export interface MentionNode {
   id: string;
@@ -123,7 +122,18 @@ export function getProsemirrorContent(content: any) {
   );
 }
 
-export { isAttachmentNode };
+export function isAttachmentNode(nodeType: string) {
+  const attachmentNodeTypes = [
+    'attachment',
+    'image',
+    'video',
+    'audio',
+    'pdf',
+    'excalidraw',
+    'drawio',
+  ];
+  return attachmentNodeTypes.includes(nodeType);
+}
 
 export function getAttachmentIds(prosemirrorJson: any) {
   const doc = jsonToNode(prosemirrorJson);

apps/server/src/core/page/page.module.ts

@@ -6,12 +6,11 @@ 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, TransclusionModule],
+  imports: [StorageModule, CollaborationModule, WatcherModule],
 })
 export class PageModule {}

apps/server/src/core/page/services/page.service.ts

@@ -54,7 +54,6 @@ 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 {
@@ -72,7 +71,6 @@ export class PageService {
     private eventEmitter: EventEmitter2,
     private collaborationGateway: CollaborationGateway,
     private readonly watcherService: WatcherService,
-    private readonly transclusionService: TransclusionService,
   ) {}
 
   async findById(
@@ -602,17 +600,6 @@ 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 (
@@ -672,39 +659,6 @@ 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,
-          workspaceId: p.workspaceId,
-          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,
-          workspaceId: p.workspaceId,
-          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,

apps/server/src/core/page/transclusion/dto/lookup.dto.ts

@@ -1,26 +0,0 @@
-import { Type } from 'class-transformer';
-import {
-  ArrayMaxSize,
-  IsArray,
-  IsString,
-  IsUUID,
-  MaxLength,
-  ValidateNested,
-} from 'class-validator';
-
-export class LookupReferenceDto {
-  @IsUUID()
-  sourcePageId!: string;
-
-  @IsString()
-  @MaxLength(36)
-  transclusionId!: string;
-}
-
-export class LookupDto {
-  @IsArray()
-  @ArrayMaxSize(50)
-  @ValidateNested({ each: true })
-  @Type(() => LookupReferenceDto)
-  references!: LookupReferenceDto[];
-}

apps/server/src/core/page/transclusion/dto/references.dto.ts

@@ -1,9 +0,0 @@
-import { IsString, IsUUID } from 'class-validator';
-
-export class ReferencesDto {
-  @IsUUID()
-  sourcePageId!: string;
-
-  @IsString()
-  transclusionId!: string;
-}

apps/server/src/core/page/transclusion/dto/unsync-reference.dto.ts

@@ -1,12 +0,0 @@
-import { IsString, IsUUID } from 'class-validator';
-
-export class UnsyncReferenceDto {
-  @IsUUID()
-  referencePageId!: string;
-
-  @IsUUID()
-  sourcePageId!: string;
-
-  @IsString()
-  transclusionId!: string;
-}

apps/server/src/core/page/transclusion/spec/transclusion-prosemirror.util.spec.ts

@@ -1,240 +0,0 @@
-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 and content', () => {
-    const doc = {
-      type: 'doc',
-      content: [
-        {
-          type: 'transclusionSource',
-          attrs: { id: 'abc123' },
-          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].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: 'transclusionSource', attrs: {}, content: [{ type: 'paragraph' }] },
-      ],
-    };
-    expect(collectTransclusionsFromPmJson(doc)).toEqual([]);
-  });
-
-  it('returns multiple top-level transclusions', () => {
-    const doc = {
-      type: 'doc',
-      content: [
-        { type: 'transclusionSource', attrs: { id: 'a' }, content: [{ type: 'paragraph' }] },
-        { type: 'transclusionSource', attrs: { id: 'b' }, 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: 'transclusionSource',
-          attrs: { id: 'outer' },
-          content: [
-            {
-              type: 'transclusionSource',
-              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: 'transclusionSource', 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: 'transclusionSource',
-          attrs: { id: 'dup' },
-          content: [{ type: 'paragraph', content: [{ type: 'text', text: 'first' }] }],
-        },
-        {
-          type: 'transclusionSource',
-          attrs: { id: 'dup' },
-          content: [{ type: 'paragraph', content: [{ type: 'text', text: 'second' }] }],
-        },
-      ],
-    };
-    const got = collectTransclusionsFromPmJson(doc);
-    expect(got).toHaveLength(1);
-    expect(got[0].content).toEqual({
-      type: 'doc',
-      content: [{ type: 'paragraph', content: [{ type: 'text', text: '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([
-      { 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([
-      { sourcePageId: 'p1', transclusionId: 'e1' },
-      { sourcePageId: 'p2', transclusionId: 'e2' },
-    ]);
-  });
-
-  it('does not recurse into a transclusion source (schema forbids references inside)', () => {
-    const doc = {
-      type: 'doc',
-      content: [
-        {
-          type: 'transclusionSource',
-          attrs: { id: 'src1' },
-          content: [
-            {
-              type: 'transclusionReference',
-              attrs: { sourcePageId: 'p1', transclusionId: 'e1' },
-            },
-          ],
-        },
-      ],
-    };
-    expect(collectReferencesFromPmJson(doc)).toEqual([]);
-  });
-
-  it('dedupes identical (sourcePageId, transclusionId) pairs', () => {
-    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([
-      { sourcePageId: 'p1', transclusionId: 'e1' },
-      { sourcePageId: 'p2', transclusionId: 'e2' },
-    ]);
-  });
-});

apps/server/src/core/page/transclusion/spec/transclusion-unsync.util.spec.ts

@@ -1,161 +0,0 @@
-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`);
-  });
-});

apps/server/src/core/page/transclusion/spec/transclusion.controller.spec.ts

@@ -1,48 +0,0 @@
-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<TransclusionService>;
-
-  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', workspaceId: 'w1' } as any;
-  const ref = { sourcePageId: 'p1', transclusionId: 'e1' };
-
-  it('passes the references, viewer id and workspace id through to the service and returns its result', 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', 'w1');
-  });
-});

apps/server/src/core/page/transclusion/spec/transclusion.service.spec.ts

@@ -1,320 +0,0 @@
-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-transclusions/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 { PageAccessService } from '../../page-access/page-access.service';
-
-describe('TransclusionService.syncPageTransclusions', () => {
-  let service: TransclusionService;
-  let repo: jest.Mocked<PageTransclusionsRepo>;
-
-  beforeEach(async () => {
-    const mockRepo: jest.Mocked<Partial<PageTransclusionsRepo>> = {
-      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: {} },
-        { provide: PageAccessService, useValue: {} },
-      ],
-    }).compile();
-    service = module.get(TransclusionService);
-    repo = module.get(PageTransclusionsRepo);
-  });
-
-  const pageId = '00000000-0000-0000-0000-000000000001';
-  const workspaceId = '00000000-0000-0000-0000-000000000099';
-
-  it('inserts new transclusions that did not exist before', async () => {
-    repo.findByPageId.mockResolvedValue([]);
-    const pm = {
-      type: 'doc',
-      content: [
-        {
-          type: 'transclusionSource',
-          attrs: { id: 'a' },
-          content: [{ type: 'paragraph' }],
-        },
-      ],
-    };
-
-    const result = await service.syncPageTransclusions(pageId, workspaceId, pm);
-
-    expect(result).toEqual({ inserted: 1, updated: 0, deleted: 0 });
-    expect(repo.insert).toHaveBeenCalledTimes(1);
-    expect(repo.insert).toHaveBeenCalledWith(
-      expect.objectContaining({
-        pageId,
-        transclusionId: 'a',
-      }),
-      undefined,
-    );
-    expect(repo.update).not.toHaveBeenCalled();
-    expect(repo.deleteByPageAndTransclusionIds).not.toHaveBeenCalled();
-  });
-
-  it('updates transclusions whose content changed', async () => {
-    repo.findByPageId.mockResolvedValue([
-      {
-        id: 'row1',
-        pageId,
-        transclusionId: 'a',
-        content: { type: 'doc', content: [{ type: 'paragraph' }] },
-        createdAt: new Date(),
-        updatedAt: new Date(),
-      } as any,
-    ]);
-    const newContent = {
-      type: 'doc',
-      content: [
-        { type: 'paragraph', content: [{ type: 'text', text: 'X' }] },
-      ],
-    };
-    const pm = {
-      type: 'doc',
-      content: [
-        {
-          type: 'transclusionSource',
-          attrs: { id: 'a' },
-          content: newContent.content,
-        },
-      ],
-    };
-
-    const result = await service.syncPageTransclusions(pageId, workspaceId, pm);
-
-    expect(result).toEqual({ inserted: 0, updated: 1, deleted: 0 });
-    expect(repo.update).toHaveBeenCalledWith(
-      pageId,
-      'a',
-      expect.objectContaining({ content: newContent }),
-      undefined,
-    );
-  });
-
-  it('skips update when content is unchanged', async () => {
-    const sameContent = {
-      type: 'doc',
-      content: [{ type: 'paragraph' }],
-    };
-    repo.findByPageId.mockResolvedValue([
-      {
-        id: 'row1',
-        pageId,
-        transclusionId: 'a',
-        content: sameContent,
-        createdAt: new Date(),
-        updatedAt: new Date(),
-      } as any,
-    ]);
-    const pm = {
-      type: 'doc',
-      content: [
-        {
-          type: 'transclusionSource',
-          attrs: { id: 'a' },
-          content: sameContent.content,
-        },
-      ],
-    };
-
-    const result = await service.syncPageTransclusions(pageId, workspaceId, 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',
-        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, workspaceId, 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, workspaceId, 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();
-  });
-});
-
-describe('TransclusionService.syncPageReferences', () => {
-  let service: TransclusionService;
-  let refRepo: jest.Mocked<PageTransclusionReferencesRepo>;
-
-  beforeEach(async () => {
-    const mockTransclusionsRepo: Partial<PageTransclusionsRepo> = {};
-    const mockRefRepo: jest.Mocked<Partial<PageTransclusionReferencesRepo>> = {
-      findByReferencePageId: jest.fn(),
-      insertMany: jest.fn(),
-      deleteByReferenceAndKeys: 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: {} },
-        { provide: PageAccessService, useValue: {} },
-      ],
-    }).compile();
-    service = module.get(TransclusionService);
-    refRepo = module.get(PageTransclusionReferencesRepo);
-  });
-
-  const referencePageId = '00000000-0000-0000-0000-000000000001';
-  const workspaceId = '00000000-0000-0000-0000-000000000099';
-
-  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, workspaceId, pm);
-
-    expect(result).toEqual({ inserted: 2, deleted: 0 });
-    expect(refRepo.insertMany).toHaveBeenCalledWith(
-      [
-        {
-          workspaceId,
-          referencePageId,
-          sourcePageId: 'p1',
-          transclusionId: 'e1',
-        },
-        {
-          workspaceId,
-          referencePageId,
-          sourcePageId: 'p2',
-          transclusionId: 'e2',
-        },
-      ],
-      undefined,
-    );
-    expect(refRepo.deleteByReferenceAndKeys).not.toHaveBeenCalled();
-  });
-
-  it('ignores references nested inside a source (schema-forbidden)', async () => {
-    refRepo.findByReferencePageId.mockResolvedValue([]);
-    const pm = {
-      type: 'doc',
-      content: [
-        {
-          type: 'transclusionSource',
-          attrs: { id: 's1' },
-          content: [
-            {
-              type: 'transclusionReference',
-              attrs: { sourcePageId: 'p2', transclusionId: 'e2' },
-            },
-          ],
-        },
-      ],
-    };
-
-    const result = await service.syncPageReferences(referencePageId, workspaceId, pm);
-
-    expect(result).toEqual({ inserted: 0, deleted: 0 });
-    expect(refRepo.insertMany).not.toHaveBeenCalled();
-  });
-
-  it('deletes references that no longer appear', async () => {
-    refRepo.findByReferencePageId.mockResolvedValue([
-      {
-        id: 'r1',
-        referencePageId,
-        sourcePageId: 'p1',
-        transclusionId: 'e1',
-        createdAt: new Date(),
-      } as any,
-    ]);
-    const pm = { type: 'doc', content: [{ type: 'paragraph' }] };
-
-    const result = await service.syncPageReferences(referencePageId, workspaceId, pm);
-
-    expect(result).toEqual({ inserted: 0, deleted: 1 });
-    expect(refRepo.deleteByReferenceAndKeys).toHaveBeenCalledWith(
-      referencePageId,
-      [
-        {
-          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,
-        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, workspaceId, pm);
-
-    expect(result).toEqual({ inserted: 0, deleted: 0 });
-    expect(refRepo.insertMany).not.toHaveBeenCalled();
-    expect(refRepo.deleteByReferenceAndKeys).not.toHaveBeenCalled();
-  });
-});

apps/server/src/core/page/transclusion/transclusion.controller.ts

@@ -1,59 +0,0 @@
-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,
-      user.workspaceId,
-    );
-  }
-
-  @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,
-      workspaceId: user.workspaceId,
-    });
-  }
-
-  @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,
-    );
-  }
-}

apps/server/src/core/page/transclusion/transclusion.module.ts

@@ -1,10 +0,0 @@
-import { Module } from '@nestjs/common';
-import { TransclusionController } from './transclusion.controller';
-import { TransclusionService } from './transclusion.service';
-
-@Module({
-  controllers: [TransclusionController],
-  providers: [TransclusionService],
-  exports: [TransclusionService],
-})
-export class TransclusionModule {}

apps/server/src/core/page/transclusion/transclusion.service.ts

@@ -1,478 +0,0 @@
-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-transclusions/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, User } from '@docmost/db/types/entity.types';
-import { PageAccessService } from '../page-access/page-access.service';
-
-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,
-    private readonly pageAccessService: PageAccessService,
-  ) {}
-
-  async syncPageTransclusions(
-    pageId: string,
-    workspaceId: 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(
-          {
-            workspaceId,
-            pageId,
-            transclusionId: d.transclusionId,
-            content: d.content as any,
-          },
-          trx,
-        );
-        inserted += 1;
-        continue;
-      }
-
-      const contentChanged = !isDeepStrictEqual(prev.content, d.content);
-      if (contentChanged) {
-        await this.pageTransclusionsRepo.update(
-          pageId,
-          d.transclusionId,
-          { 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,
-    workspaceId: string,
-    pmJson: unknown,
-    trx?: KyselyTransaction,
-  ): Promise<{ inserted: number; deleted: number }> {
-    const desired = collectReferencesFromPmJson(pmJson);
-    const keyOf = (s: {
-      sourcePageId: string;
-      transclusionId: string;
-    }) => `${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) => ({
-        workspaceId,
-        referencePageId,
-        sourcePageId: d.sourcePageId,
-        transclusionId: d.transclusionId,
-      }));
-
-    const toDelete = existing
-      .filter((e) => !desiredKeys.has(keyOf(e)))
-      .map((e) => ({
-        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,
-      );
-    }
-
-    return {
-      inserted: toInsert.length,
-      deleted: toDelete.length,
-    };
-  }
-
-  /**
-   * 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; workspaceId: string; content: unknown }>,
-    trx?: KyselyTransaction,
-  ): Promise<{ inserted: number }> {
-    const rows: Parameters<PageTransclusionsRepo['insertMany']>[0] = [];
-    for (const page of pages) {
-      const snapshots = collectTransclusionsFromPmJson(page.content);
-      for (const s of snapshots) {
-        rows.push({
-          workspaceId: page.workspaceId,
-          pageId: page.id,
-          transclusionId: s.transclusionId,
-          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 `(referencePage, source, target)`. For brand-new pages
-   * (duplication, import) where there is nothing to diff against.
-   */
-  async insertReferencesForPages(
-    pages: Array<{ id: string; workspaceId: string; content: unknown }>,
-    trx?: KyselyTransaction,
-  ): Promise<{ inserted: number }> {
-    const rows: Array<{
-      workspaceId: string;
-      referencePageId: string;
-      sourcePageId: string;
-      transclusionId: string;
-    }> = [];
-    for (const page of pages) {
-      const refs = collectReferencesFromPmJson(page.content);
-      for (const r of refs) {
-        rows.push({
-          workspaceId: page.workspaceId,
-          referencePageId: page.id,
-          sourcePageId: r.sourcePageId,
-          transclusionId: r.transclusionId,
-        });
-      }
-    }
-    if (rows.length === 0) return { inserted: 0 };
-    await this.pageTransclusionReferencesRepo.insertMany(rows, trx);
-    return { inserted: rows.length };
-  }
-
-  async lookup(
-    references: Array<{ sourcePageId: string; transclusionId: string }>,
-    viewerUserId: string,
-    workspaceId: string,
-  ): Promise<{ items: TransclusionLookup[] }> {
-    if (references.length === 0) return { items: [] };
-
-    const candidatePageIds = Array.from(
-      new Set(references.map((r) => r.sourcePageId)),
-    );
-    const accessibleSet = new Set(
-      await this.pagePermissionRepo.filterAccessiblePageIds({
-        pageIds: candidatePageIds,
-        userId: viewerUserId,
-      }),
-    );
-
-    return this.lookupWithAccessSet(references, accessibleSet, workspaceId);
-  }
-
-  /**
-   * Resolve transclusion content for the given references using a caller-supplied
-   * `accessibleSet` of source page ids. Source pages absent from the set return
-   * `no_access`. Used by the share-scoped lookup path, where access is gated by
-   * the share graph rather than the viewer's personal permissions.
-   */
-  async lookupWithAccessSet(
-    references: Array<{ sourcePageId: string; transclusionId: string }>,
-    accessibleSet: Set<string>,
-    workspaceId: string,
-  ): Promise<{ items: TransclusionLookup[] }> {
-    if (references.length === 0) return { items: [] };
-
-    const items: TransclusionLookup[] = new Array(references.length).fill(null);
-    const pendingIdx = references.map((_, i) => i);
-
-    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,
-      })),
-      workspaceId,
-    );
-    const rowKey = (r: { pageId: string; transclusionId: string }) =>
-      `${r.pageId}::${r.transclusionId}`;
-    const rowMap = new Map(rows.map((r) => [rowKey(r), r]));
-
-    const accessiblePageIds = Array.from(
-      new Set(accessiblePending.map((i) => references[i].sourcePageId)),
-    );
-    const pages = await this.pageRepo.findManyByIds(accessiblePageIds, {
-      workspaceId,
-    });
-    const pageMeta = new Map<string, Date>();
-    for (const p of pages) {
-      pageMeta.set(p.id, p.updatedAt);
-    }
-
-    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;
-    workspaceId: string;
-  }): Promise<{
-    source: ReferencingPageInfo | null;
-    references: ReferencingPageInfo[];
-  }> {
-    const { sourcePageId, transclusionId, viewerUserId, workspaceId } = opts;
-
-    const referencePageIds =
-      await this.pageTransclusionReferencesRepo.findReferencePageIdsByTransclusion(
-        sourcePageId,
-        transclusionId,
-        workspaceId,
-      );
-
-    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<string, ReferencingPageInfo>();
-    for (const p of rows) {
-      if (!p || p.deletedAt || p.workspaceId !== workspaceId) 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,
-    user: User,
-  ): 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');
-    }
-
-    if (
-      referencePage.workspaceId !== user.workspaceId ||
-      sourcePage.workspaceId !== user.workspaceId
-    ) {
-      throw new ForbiddenException();
-    }
-
-    await this.pageAccessService.validateCanEdit(referencePage, user);
-    await this.pageAccessService.validateCanView(sourcePage, user);
-
-    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.findByIds(oldIds);
-      const byOldId = new Map(
-        oldRows
-          .filter((a) => 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: user.id,
-          workspaceId: referencePage.workspaceId,
-          pageId: referencePageId,
-          spaceId: referencePage.spaceId,
-        });
-      }
-    }
-
-    await this.pageTransclusionReferencesRepo.deleteOne(
-      referencePageId,
-      sourcePageId,
-      transclusionId,
-    );
-
-    return { content };
-  }
-}

apps/server/src/core/page/transclusion/transclusion.types.ts

@@ -1,14 +0,0 @@
-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;
-  content: unknown;
-};

apps/server/src/core/page/transclusion/utils/transclusion-prosemirror.util.ts

@@ -1,95 +0,0 @@
-import { TransclusionNodeSnapshot } from '../transclusion.types';
-
-const TRANSCLUSION_TYPE = 'transclusionSource';
-const REFERENCE_TYPE = 'transclusionReference';
-
-export type TransclusionReferenceSnapshot = {
-  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<string, TransclusionNodeSnapshot>();
-
-  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) {
-        byId.set(id, {
-          transclusionId: id,
-          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
- * `(sourcePageId, transclusionId)` pair found on `transclusionReference`
- * nodes. The schema forbids references inside a `transclusionSource` so this
- * walk stops at source boundaries — references can only appear at page level.
- * Order preserved by first-seen.
- */
-export function collectReferencesFromPmJson(
-  doc: unknown,
-): TransclusionReferenceSnapshot[] {
-  if (!doc || typeof doc !== 'object') return [];
-
-  const seen = new Set<string>();
-  const out: TransclusionReferenceSnapshot[] = [];
-
-  const visit = (node: any): 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 = `${sourcePageId}::${transclusionId}`;
-        if (!seen.has(key)) {
-          seen.add(key);
-          out.push({ sourcePageId, transclusionId });
-        }
-      }
-      return; // atom node - no children
-    }
-
-    // References cannot live inside a source (schema-enforced); skip recursing
-    // so a malformed inbound doc can't sneak in a nested reference here.
-    if (node.type === TRANSCLUSION_TYPE) return;
-
-    if (Array.isArray(node.content)) {
-      for (const child of node.content) visit(child);
-    }
-  };
-
-  visit(doc);
-  return out;
-}

apps/server/src/core/page/transclusion/utils/transclusion-unsync.util.ts

@@ -1,65 +0,0 @@
-import { isAttachmentNode } from '../../../../common/helpers/prosemirror/attachment-node-types';
-
-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<string, string>();
-
-  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 };
-}

apps/server/src/core/share/dto/share-transclusion-lookup.dto.ts

@@ -1,8 +0,0 @@
-import { IsNotEmpty, IsString } from 'class-validator';
-import { LookupDto } from '../../page/transclusion/dto/lookup.dto';
-
-export class ShareTransclusionLookupDto extends LookupDto {
-  @IsString()
-  @IsNotEmpty()
-  shareId!: string;
-}

apps/server/src/core/share/share.controller.ts

@@ -21,7 +21,6 @@ import {
   SharePageIdDto,
   UpdateShareDto,
 } from './dto/share.dto';
-import { ShareTransclusionLookupDto } from './dto/share-transclusion-lookup.dto';
 import { PageRepo } from '@docmost/db/repos/page/page.repo';
 import { PagePermissionRepo } from '@docmost/db/repos/page/page-permission.repo';
 import { PageAccessService } from '../page/page-access/page-access.service';
@@ -111,20 +110,6 @@ export class ShareController {
     return share;
   }
 
-  @Public()
-  @HttpCode(HttpStatus.OK)
-  @Post('/transclusion/lookup')
-  async transclusionLookup(
-    @Body() dto: ShareTransclusionLookupDto,
-    @AuthWorkspace() workspace: Workspace,
-  ) {
-    return this.shareService.lookupTransclusionForShare(
-      dto.shareId,
-      dto.references,
-      workspace.id,
-    );
-  }
-
   @HttpCode(HttpStatus.OK)
   @Post('/for-page')
   async getShareForPage(

apps/server/src/core/share/share.module.ts

@@ -3,10 +3,9 @@ import { ShareController } from './share.controller';
 import { ShareService } from './share.service';
 import { TokenModule } from '../auth/token.module';
 import { ShareSeoController } from './share-seo.controller';
-import { TransclusionModule } from '../page/transclusion/transclusion.module';
 
 @Module({
-  imports: [TokenModule, TransclusionModule],
+  imports: [TokenModule],
   controllers: [ShareController, ShareSeoController],
   providers: [ShareService],
   exports: [ShareService],

apps/server/src/core/share/share.service.ts

@@ -24,8 +24,6 @@ import { updateAttachmentAttr } from './share.util';
 import { Page } from '@docmost/db/types/entity.types';
 import { validate as isValidUUID } from 'uuid';
 import { sql } from 'kysely';
-import { TransclusionService } from '../page/transclusion/transclusion.service';
-import { TransclusionLookup } from '../page/transclusion/transclusion.types';
 
 @Injectable()
 export class ShareService {
@@ -37,7 +35,6 @@ export class ShareService {
     private readonly pagePermissionRepo: PagePermissionRepo,
     @InjectKysely() private readonly db: KyselyDB,
     private readonly tokenService: TokenService,
-    private readonly transclusionService: TransclusionService,
   ) {}
 
   async getShareTree(shareId: string, workspaceId: string) {
@@ -284,113 +281,6 @@ export class ShareService {
     return ancestor;
   }
 
-  /**
-   * Resolve transclusion content for a public share viewer. Each requested
-   * source page must itself be reachable via the share graph (its own share
-   * or a shared ancestor with `includeSubPages`), in the same workspace as
-   * the requesting share, with sharing allowed and no restricted ancestors.
-   * Sources that don't qualify come back as `no_access` so the editor renders
-   * the existing placeholder. The viewer's personal permissions are
-   * intentionally ignored — share-served content is gated only by the share
-   * graph.
-   */
-  async lookupTransclusionForShare(
-    shareId: string,
-    references: Array<{ sourcePageId: string; transclusionId: string }>,
-    workspaceId: string,
-  ): Promise<{ items: TransclusionLookup[] }> {
-    const share = await this.shareRepo.findById(shareId);
-    if (!share || share.workspaceId !== workspaceId) {
-      throw new NotFoundException('Share not found');
-    }
-    const sharingAllowed = await this.isSharingAllowed(
-      workspaceId,
-      share.spaceId,
-    );
-    if (!sharingAllowed) {
-      throw new NotFoundException('Share not found');
-    }
-
-    const candidatePageIds = Array.from(
-      new Set(references.map((r) => r.sourcePageId)),
-    );
-
-    // TODO: Reduce DB round trips at scale by replacing the per-page chain
-    // with bulk repo methods that take all candidate pageIds at once:
-    //   - shareRepo.getSharesForPages(pageIds, workspaceId): Map<pageId, share>
-    //   - pagePermissionRepo.filterRestrictedPageIds(pageIds): Set<pageId>
-    //   - isSharingAllowed for the distinct spaceIds in one query
-    // Brings per-request trip count from ~2N+1 (parallel) to 3 (constant)
-    // for N unique candidate pages. Worth doing if profiling ever flags it.
-
-    // Most candidates will share the host share's space, so cache by spaceId
-    // and seed with the host space we just verified. Stores in-flight
-    // promises so concurrent chains de-dupe at the request boundary.
-    const sharingAllowedCache = new Map<string, Promise<boolean>>();
-    sharingAllowedCache.set(share.spaceId, Promise.resolve(true));
-    const isSharingAllowedFor = (spaceId: string) => {
-      const cached = sharingAllowedCache.get(spaceId);
-      if (cached) return cached;
-      const p = this.isSharingAllowed(workspaceId, spaceId);
-      sharingAllowedCache.set(spaceId, p);
-      return p;
-    };
-
-    // Per-page chains run in parallel; wall time is the slowest chain, not
-    // the sum. Each chain still does its 2–3 queries sequentially because
-    // each step gates the next.
-    const accessibleResults = await Promise.all(
-      candidatePageIds.map(async (pageId) => {
-        const sourceShare = await this.getShareForPage(pageId, workspaceId);
-        if (!sourceShare) return null;
-        if (!(await isSharingAllowedFor(sourceShare.spaceId))) return null;
-        const restricted =
-          await this.pagePermissionRepo.hasRestrictedAncestor(pageId);
-        if (restricted) return null;
-        return pageId;
-      }),
-    );
-    const accessibleSet = new Set<string>(
-      accessibleResults.filter((id): id is string => id !== null),
-    );
-
-    const { items } = await this.transclusionService.lookupWithAccessSet(
-      references,
-      accessibleSet,
-      workspaceId,
-    );
-
-    // Sanitize each item's content for public delivery
-    // generate per-attachment tokens scoped to the source page
-    // and strip comment marks.
-    const tokenized = await Promise.all(
-      items.map(async (item) => {
-        if ('status' in item) return item;
-        const doc = await this.prepareContentForShare(
-          item.content,
-          item.sourcePageId,
-          workspaceId,
-        );
-        return { ...item, content: doc?.toJSON() ?? item.content };
-      }),
-    );
-
-    // Collapse `not_found` to `no_access` for share viewers so the response
-    // can't be used to tell "page is shared but transclusion id doesn't
-    // match" from "page isn't shared at all".
-    const sanitized = tokenized.map((item) =>
-      'status' in item && item.status === 'not_found'
-        ? {
-            sourcePageId: item.sourcePageId,
-            transclusionId: item.transclusionId,
-            status: 'no_access' as const,
-          }
-        : item,
-    );
-
-    return { items: sanitized };
-  }
-
   async isSharingAllowed(
     workspaceId: string,
     spaceId: string,
@@ -417,64 +307,35 @@ export class ShareService {
   }
 
   async updatePublicAttachments(page: Page): Promise<any> {
-    const doc = await this.prepareContentForShare(
+    const prosemirrorJson = getProsemirrorContent(page.content);
-      page.content,
+    const attachmentIds = getAttachmentIds(prosemirrorJson);
-      page.id,
+    const attachmentMap = new Map<string, string>();
-      page.workspaceId,
-    );
-    return doc?.toJSON() ?? page.content;
-  }
 
-  /**
-   * Prepare a ProseMirror JSON doc for delivery to a public share viewer.
-   * Performs the two transforms required by the share threat model:
-   *
-   * 1. Mint a per-attachment public token scoped to `attachmentOwnerPageId`
-   *    and rewrite each attachment node's `src`/`url` to the public form
-   *    (`/files/public/...?jwt=`). The receiver enforces
-   *    `attachment.pageId === token.pageId`, which is why the owner page id
-   *    has to be passed in explicitly: the host page for direct shared
-   *    content, the source page for transcluded source-block content
-   *    (attachments in a sync block were uploaded onto the source page).
-   *
-   * 2. Strip `comment` marks. Comments are internal-team metadata and must
-   *    not leak structure (existence, location, count, resolved state, or
-   *    comment ids) to public viewers.
-   *
-   * Both share-content paths — the host page (`updatePublicAttachments`) and
-   * the share-scoped transclusion lookup (`lookupTransclusionForShare`) —
-   * call into this single helper so the two paths can never drift on
-   * sanitization rules.
-   */
-  private async prepareContentForShare(
-    content: unknown,
-    attachmentOwnerPageId: string,
-    workspaceId: string,
-  ): Promise<Node | null> {
-    const pmJson = getProsemirrorContent(content);
-    const attachmentIds = getAttachmentIds(pmJson);
-
-    const tokenMap = new Map<string, string>();
     await Promise.all(
       attachmentIds.map(async (attachmentId: string) => {
         const token = await this.tokenService.generateAttachmentToken({
           attachmentId,
-          pageId: attachmentOwnerPageId,
+          pageId: page.id,
-          workspaceId,
+          workspaceId: page.workspaceId,
         });
-        tokenMap.set(attachmentId, token);
+        attachmentMap.set(attachmentId, token);
       }),
     );
 
-    const doc = jsonToNode(pmJson);
+    const doc = jsonToNode(prosemirrorJson);
+
     doc?.descendants((node: Node) => {
       if (!isAttachmentNode(node.type.name)) return;
-      const token = tokenMap.get(node.attrs.attachmentId);
+
+      const attachmentId = node.attrs.attachmentId;
+      const token = attachmentMap.get(attachmentId);
       if (!token) return;
+
       updateAttachmentAttr(node, 'src', token);
       updateAttachmentAttr(node, 'url', token);
     });
 
-    return doc ? removeMarkTypeFromDoc(doc, 'comment') : null;
+    const removeCommentMarks = removeMarkTypeFromDoc(doc, 'comment');
+    return removeCommentMarks.toJSON();
   }
 }

apps/server/src/core/user/dto/update-user.dto.ts

@@ -22,10 +22,6 @@ export class UpdateUserDto extends PartialType(
   @IsIn(['read', 'edit'])
   pageEditMode: string;
 
-  @IsOptional()
-  @IsBoolean()
-  editorToolbar: boolean;
-
   @IsOptional()
   @IsString()
   locale: string;

apps/server/src/core/user/user.service.ts

@@ -61,14 +61,6 @@ export class UserService {
       );
     }
 
-    if (typeof updateUserDto.editorToolbar !== 'undefined') {
-      return this.userRepo.updatePreference(
-        userId,
-        'editorToolbar',
-        updateUserDto.editorToolbar,
-      );
-    }
-
     const notificationSettings: Record<string, NotificationSettingKey> = {
       notificationPageUpdates: 'page.updated',
       notificationPageUserMention: 'page.userMention',

apps/server/src/database/database.module.ts

@@ -11,8 +11,6 @@ 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-transclusions/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';
@@ -77,8 +75,6 @@ import { normalizePostgresUrl } from '../common/helpers';
     SpaceMemberRepo,
     PageRepo,
     PagePermissionRepo,
-    PageTransclusionsRepo,
-    PageTransclusionReferencesRepo,
     PageHistoryRepo,
     CommentRepo,
     FavoriteRepo,
@@ -101,8 +97,6 @@ import { normalizePostgresUrl } from '../common/helpers';
     SpaceMemberRepo,
     PageRepo,
     PagePermissionRepo,
-    PageTransclusionsRepo,
-    PageTransclusionReferencesRepo,
     PageHistoryRepo,
     CommentRepo,
     FavoriteRepo,

apps/server/src/database/migrations/20260501T202258-page-transclusions.ts

@@ -1,76 +0,0 @@
-import { type Kysely, sql } from 'kysely';
-
-export async function up(db: Kysely<any>): Promise<void> {
-  await db.schema
-    .createTable('page_transclusions')
-    .addColumn('id', 'uuid', (col) =>
-      col.primaryKey().defaultTo(sql`gen_uuid_v7()`),
-    )
-    .addColumn('workspace_id', 'uuid', (col) =>
-      col.notNull().references('workspaces.id').onDelete('cascade'),
-    )
-    .addColumn('page_id', 'uuid', (col) =>
-      col.notNull().references('pages.id').onDelete('cascade'),
-    )
-    .addColumn('transclusion_id', 'varchar', (col) => col.notNull())
-    .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_workspace')
-    .on('page_transclusions')
-    .column('workspace_id')
-    .execute();
-
-  await db.schema
-    .createTable('page_transclusion_references')
-    .addColumn('id', 'uuid', (col) =>
-      col.primaryKey().defaultTo(sql`gen_uuid_v7()`),
-    )
-    .addColumn('workspace_id', 'uuid', (col) =>
-      col.notNull().references('workspaces.id').onDelete('cascade'),
-    )
-    .addColumn('reference_page_id', 'uuid', (col) =>
-      col.notNull().references('pages.id').onDelete('cascade'),
-    )
-    .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',
-      'source_page_id',
-      'transclusion_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_workspace')
-    .on('page_transclusion_references')
-    .column('workspace_id')
-    .execute();
-}
-
-export async function down(db: Kysely<any>): Promise<void> {
-  await db.schema.dropTable('page_transclusion_references').execute();
-  await db.schema.dropTable('page_transclusions').execute();
-}

apps/server/src/database/repos/attachment/attachment.repo.ts

@@ -89,22 +89,6 @@ export class AttachmentRepo {
       .execute();
   }
 
-  async findByIds(
-    ids: string[],
-    opts?: {
-      trx?: KyselyTransaction;
-    },
-  ): Promise<Attachment[]> {
-    if (ids.length === 0) return [];
-    const db = dbOrTx(this.db, opts?.trx);
-
-    return db
-      .selectFrom('attachments')
-      .select(this.baseFields)
-      .where('id', 'in', ids)
-      .execute();
-  }
-
   async findByAiChatId(
     aiChatId: string,
     opts?: {

apps/server/src/database/repos/page-transclusions/page-transclusion-references.repo.ts

@@ -1,98 +0,0 @@
-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 {
-  InsertablePageTransclusionReference,
-  PageTransclusionReference,
-} from '@docmost/db/types/entity.types';
-
-export type TransclusionReferenceKey = {
-  sourcePageId: string;
-  transclusionId: string;
-};
-
-@Injectable()
-export class PageTransclusionReferencesRepo {
-  constructor(@InjectKysely() private readonly db: KyselyDB) {}
-
-  async findByReferencePageId(
-    referencePageId: string,
-    trx?: KyselyTransaction,
-  ): Promise<PageTransclusionReference[]> {
-    return dbOrTx(this.db, trx)
-      .selectFrom('pageTransclusionReferences')
-      .selectAll()
-      .where('referencePageId', '=', referencePageId)
-      .execute();
-  }
-
-  async findReferencePageIdsByTransclusion(
-    sourcePageId: string,
-    transclusionId: string,
-    workspaceId: string,
-    trx?: KyselyTransaction,
-  ): Promise<string[]> {
-    const rows = await dbOrTx(this.db, trx)
-      .selectFrom('pageTransclusionReferences')
-      .select('referencePageId')
-      .distinct()
-      .where('workspaceId', '=', workspaceId)
-      .where('sourcePageId', '=', sourcePageId)
-      .where('transclusionId', '=', transclusionId)
-      .execute();
-    return rows.map((r) => r.referencePageId);
-  }
-
-  async insertMany(
-    rows: InsertablePageTransclusionReference[],
-    trx?: KyselyTransaction,
-  ): Promise<void> {
-    if (rows.length === 0) return;
-    await dbOrTx(this.db, trx)
-      .insertInto('pageTransclusionReferences')
-      .values(rows)
-      .onConflict((oc) =>
-        oc
-          .columns(['referencePageId', 'sourcePageId', 'transclusionId'])
-          .doNothing(),
-      )
-      .execute();
-  }
-
-  async deleteByReferenceAndKeys(
-    referencePageId: string,
-    keys: TransclusionReferenceKey[],
-    trx?: KyselyTransaction,
-  ): Promise<void> {
-    if (keys.length === 0) return;
-    await dbOrTx(this.db, trx)
-      .deleteFrom('pageTransclusionReferences')
-      .where('referencePageId', '=', referencePageId)
-      .where((eb) =>
-        eb.or(
-          keys.map((k) =>
-            eb.and([
-              eb('sourcePageId', '=', k.sourcePageId),
-              eb('transclusionId', '=', k.transclusionId),
-            ]),
-          ),
-        ),
-      )
-      .execute();
-  }
-
-  async deleteOne(
-    referencePageId: string,
-    sourcePageId: string,
-    transclusionId: string,
-    trx?: KyselyTransaction,
-  ): Promise<void> {
-    await dbOrTx(this.db, trx)
-      .deleteFrom('pageTransclusionReferences')
-      .where('referencePageId', '=', referencePageId)
-      .where('sourcePageId', '=', sourcePageId)
-      .where('transclusionId', '=', transclusionId)
-      .execute();
-  }
-}

apps/server/src/database/repos/page-transclusions/page-transclusions.repo.ts

@@ -1,112 +0,0 @@
-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';
-
-@Injectable()
-export class PageTransclusionsRepo {
-  constructor(@InjectKysely() private readonly db: KyselyDB) {}
-
-  async findByPageId(
-    pageId: string,
-    trx?: KyselyTransaction,
-  ): Promise<PageTransclusion[]> {
-    return dbOrTx(this.db, trx)
-      .selectFrom('pageTransclusions')
-      .selectAll()
-      .where('pageId', '=', pageId)
-      .orderBy('createdAt', 'asc')
-      .execute();
-  }
-
-  async findByPageAndTransclusion(
-    pageId: string,
-    transclusionId: string,
-    trx?: KyselyTransaction,
-  ): Promise<PageTransclusion | undefined> {
-    return dbOrTx(this.db, trx)
-      .selectFrom('pageTransclusions')
-      .selectAll()
-      .where('pageId', '=', pageId)
-      .where('transclusionId', '=', transclusionId)
-      .executeTakeFirst();
-  }
-
-  async findManyByPageAndTransclusion(
-    keys: Array<{ pageId: string; transclusionId: string }>,
-    workspaceId: string,
-    trx?: KyselyTransaction,
-  ): Promise<PageTransclusion[]> {
-    if (keys.length === 0) return [];
-    return dbOrTx(this.db, trx)
-      .selectFrom('pageTransclusions')
-      .selectAll()
-      .where('workspaceId', '=', workspaceId)
-      .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<PageTransclusion> {
-    return dbOrTx(this.db, trx)
-      .insertInto('pageTransclusions')
-      .values(data)
-      .returningAll()
-      .executeTakeFirstOrThrow();
-  }
-
-  async insertMany(
-    data: InsertablePageTransclusion[],
-    trx?: KyselyTransaction,
-  ): Promise<void> {
-    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<void> {
-    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<void> {
-    if (transclusionIds.length === 0) return;
-    await dbOrTx(this.db, trx)
-      .deleteFrom('pageTransclusions')
-      .where('pageId', '=', pageId)
-      .where('transclusionId', 'in', transclusionIds)
-      .execute();
-  }
-
-}