feat: copy page to different space (#1118)

* Add copy page to space endpoint
* copy storage function
* copy function
* feat: copy attachments too
* Copy page - WIP
* fix type
* sync
* cleanup

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

@@ -383,5 +383,8 @@
   "Publicly shared pages from spaces you are a member of will appear here": "Publicly shared pages from spaces you are a member of will appear here",
   "Share deleted successfully": "Share deleted successfully",
   "Share not found": "Share not found",
-  "Failed to share page": "Failed to share page"
+  "Failed to share page": "Failed to share page",
+  "Copy page":  "Copy page",
+  "Copy page to a different space.": "Copy page to a different space.",
+  "Page copied successfully": "Page copied successfully"
 }

apps/client/src/features/page/components/copy-page-modal.tsx

@@ -0,0 +1,105 @@
+import { Modal, Button, Group, Text } from "@mantine/core";
+import { copyPageToSpace } from "@/features/page/services/page-service.ts";
+import { useState } from "react";
+import { notifications } from "@mantine/notifications";
+import { useTranslation } from "react-i18next";
+import { ISpace } from "@/features/space/types/space.types.ts";
+import { queryClient } from "@/main.tsx";
+import { SpaceSelect } from "@/features/space/components/sidebar/space-select.tsx";
+import { useNavigate } from "react-router-dom";
+import { buildPageUrl } from "@/features/page/page.utils.ts";
+
+interface CopyPageModalProps {
+  pageId: string;
+  currentSpaceSlug: string;
+  open: boolean;
+  onClose: () => void;
+}
+
+export default function CopyPageModal({
+  pageId,
+  currentSpaceSlug,
+  open,
+  onClose,
+}: CopyPageModalProps) {
+  const { t } = useTranslation();
+  const [targetSpace, setTargetSpace] = useState<ISpace>(null);
+  const navigate = useNavigate();
+
+  const handleCopy = async () => {
+    if (!targetSpace) return;
+
+    try {
+      const copiedPage = await copyPageToSpace({
+        pageId,
+        spaceId: targetSpace.id,
+      });
+      queryClient.removeQueries({
+        predicate: (item) =>
+          ["pages", "sidebar-pages", "root-sidebar-pages"].includes(
+            item.queryKey[0] as string,
+          ),
+      });
+
+      const pageUrl = buildPageUrl(
+        copiedPage.space.slug,
+        copiedPage.slugId,
+        copiedPage.title,
+      );
+      navigate(pageUrl);
+      notifications.show({
+        message: t("Page copied successfully"),
+      });
+      onClose();
+      setTargetSpace(null);
+    } catch (err) {
+      notifications.show({
+        message: err.response?.data.message || "An error occurred",
+        color: "red",
+      });
+      console.log(err);
+    }
+  };
+
+  const handleChange = (space: ISpace) => {
+    setTargetSpace(space);
+  };
+
+  return (
+    <Modal.Root
+      opened={open}
+      onClose={onClose}
+      size={500}
+      padding="xl"
+      yOffset="10vh"
+      xOffset={0}
+      mah={400}
+      onClick={(e) => e.stopPropagation()}
+    >
+      <Modal.Overlay />
+      <Modal.Content style={{ overflow: "hidden" }}>
+        <Modal.Header py={0}>
+          <Modal.Title fw={500}>{t("Copy page")}</Modal.Title>
+          <Modal.CloseButton />
+        </Modal.Header>
+        <Modal.Body>
+          <Text mb="xs" c="dimmed" size="sm">
+            {t("Copy page to a different space.")}
+          </Text>
+
+          <SpaceSelect
+            value={currentSpaceSlug}
+            clearable={false}
+            onChange={handleChange}
+          />
+          <Group justify="end" mt="md">
+            <Button onClick={onClose} variant="default">
+              {t("Cancel")}
+            </Button>
+            <Button onClick={handleCopy}>{t("Copy")}</Button>
+          </Group>
+        </Modal.Body>
+      </Modal.Content>
+    </Modal.Root>
+  );
+}

apps/client/src/features/page/components/header/page-header-menu.tsx

@@ -12,7 +12,7 @@ import {
   IconTrash,
   IconWifiOff,
 } from "@tabler/icons-react";
-import React, { useEffect } from "react";
+import React from "react";
 import useToggleAside from "@/hooks/use-toggle-aside.tsx";
 import { useAtom } from "jotai";
 import { historyAtoms } from "@/features/page-history/atoms/history-atoms.ts";
@@ -35,7 +35,7 @@ import {
 import { formattedDate, timeAgo } from "@/lib/time.ts";
 import MovePageModal from "@/features/page/components/move-page-modal.tsx";
 import { useTimeAgo } from "@/hooks/use-time-ago.tsx";
-import ShareModal from '@/features/share/components/share-modal.tsx';
+import ShareModal from "@/features/share/components/share-modal.tsx";
 
 interface PageHeaderMenuProps {
   readOnly?: boolean;
@@ -106,7 +106,7 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
     { open: openMovePageModal, close: closeMoveSpaceModal },
   ] = useDisclosure(false);
   const [pageEditor] = useAtom(pageEditorAtom);
-  const pageUpdatedAt = useTimeAgo(page.updatedAt);
+  const pageUpdatedAt = useTimeAgo(page?.updatedAt);
 
   const handleCopyLink = () => {
     const pageUrl =

apps/client/src/features/page/components/move-page-modal.tsx

@@ -46,6 +46,7 @@ export default function MovePageModal({
         message: t("Page moved successfully"),
       });
       onClose();
+      setTargetSpace(null);
     } catch (err) {
       notifications.show({
         message: err.response?.data.message || "An error occurred",
@@ -53,7 +54,6 @@ export default function MovePageModal({
       });
       console.log(err);
     }
-    setTargetSpace(null);
   };
 
   const handleChange = (space: ISpace) => {
@@ -69,7 +69,7 @@ export default function MovePageModal({
       yOffset="10vh"
       xOffset={0}
       mah={400}
-      onClick={e => e.stopPropagation()}
+      onClick={(e) => e.stopPropagation()}
     >
       <Modal.Overlay />
       <Modal.Content style={{ overflow: "hidden" }}>
@@ -78,7 +78,9 @@ export default function MovePageModal({
           <Modal.CloseButton />
         </Modal.Header>
         <Modal.Body>
-          <Text mb="xs" c="dimmed" size="sm">{t("Move page to a different space.")}</Text>
+          <Text mb="xs" c="dimmed" size="sm">
+            {t("Move page to a different space.")}
+          </Text>
 
           <SpaceSelect
             value={currentSpaceSlug}

apps/client/src/features/page/services/page-service.ts

@@ -1,5 +1,6 @@
 import api from "@/lib/api-client";
 import {
+  ICopyPageToSpace,
   IExportPageParams,
   IMovePage,
   IMovePageToSpace,
@@ -39,6 +40,11 @@ export async function movePageToSpace(data: IMovePageToSpace): Promise<void> {
   await api.post<void>("/pages/move-to-space", data);
 }
 
+export async function copyPageToSpace(data: ICopyPageToSpace): Promise<IPage> {
+  const req = await api.post<IPage>("/pages/copy-to-space", data);
+  return req.data;
+}
+
 export async function getSidebarPages(
   params: SidebarPagesParams,
 ): Promise<IPagination<IPage>> {

apps/client/src/features/page/tree/components/space-tree.tsx

@@ -15,6 +15,7 @@ import {
   IconArrowRight,
   IconChevronDown,
   IconChevronRight,
+  IconCopy,
   IconDotsVertical,
   IconFileDescription,
   IconFileExport,
@@ -60,6 +61,7 @@ import ExportModal from "@/components/common/export-modal";
 import MovePageModal from "../../components/move-page-modal.tsx";
 import { mobileSidebarAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
 import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
+import CopyPageModal from "../../components/copy-page-modal.tsx";
 
 interface SpaceTreeProps {
   spaceId: string;
@@ -448,6 +450,10 @@ function NodeMenu({ node, treeApi }: NodeMenuProps) {
     movePageModalOpened,
     { open: openMovePageModal, close: closeMoveSpaceModal },
   ] = useDisclosure(false);
+  const [
+    copyPageModalOpened,
+    { open: openCopyPageModal, close: closeCopySpaceModal },
+  ] = useDisclosure(false);
 
   const handleCopyLink = () => {
     const pageUrl =
@@ -511,6 +517,17 @@ function NodeMenu({ node, treeApi }: NodeMenuProps) {
                 {t("Move")}
               </Menu.Item>
 
+              <Menu.Item
+                leftSection={<IconCopy size={16} />}
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  openCopyPageModal();
+                }}
+              >
+                {t("Copy")}
+              </Menu.Item>
+
               <Menu.Divider />
               <Menu.Item
                 c="red"
@@ -536,6 +553,13 @@ function NodeMenu({ node, treeApi }: NodeMenuProps) {
         open={movePageModalOpened}
       />
 
+      <CopyPageModal
+        pageId={node.id}
+        currentSpaceSlug={spaceSlug}
+        onClose={closeCopySpaceModal}
+        open={copyPageModalOpened}
+      />
+
       <ExportModal
         type="page"
         id={node.id}

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

@@ -12,7 +12,7 @@ export interface IPage {
   spaceId: string;
   workspaceId: string;
   isLocked: boolean;
-  lastUpdatedById: Date;
+  lastUpdatedById: string;
   createdAt: Date;
   updatedAt: Date;
   deletedAt: Date;
@@ -47,6 +47,11 @@ export interface IMovePageToSpace {
   spaceId: string;
 }
 
+export interface ICopyPageToSpace {
+  pageId: string;
+  spaceId: string;
+}
+
 export interface SidebarPagesParams {
   spaceId: string;
   pageId?: string;

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

@@ -1,7 +1,12 @@
 import { Node } from '@tiptap/pm/model';
-import { jsonToNode } from '../../../collaboration/collaboration.util';
+import {
+  jsonToNode,
+  tiptapExtensions,
+} from '../../../collaboration/collaboration.util';
 import { validate as isValidUUID } from 'uuid';
 import { Transform } from '@tiptap/pm/transform';
+import { TiptapTransformer } from '@hocuspocus/transformer';
+import * as Y from 'yjs';
 
 export interface MentionNode {
   id: string;
@@ -59,7 +64,6 @@ export function extractPageMentions(mentionList: MentionNode[]): MentionNode[] {
   return pageMentionList as MentionNode[];
 }
 
-
 export function getProsemirrorContent(content: any) {
   return (
     content ?? {
@@ -108,3 +112,18 @@ export function removeMarkTypeFromDoc(doc: Node, markName: string): Node {
   const tr = new Transform(doc).removeMark(0, doc.content.size, markType);
   return tr.doc;
 }
+
+export function createYdocFromJson(prosemirrorJson: any): Buffer | null {
+  if (prosemirrorJson) {
+    const ydoc = TiptapTransformer.toYdoc(
+      prosemirrorJson,
+      'default',
+      tiptapExtensions,
+    );
+
+    Y.encodeStateAsUpdate(ydoc);
+
+    return Buffer.from(Y.encodeStateAsUpdate(ydoc));
+  }
+  return null;
+}

apps/server/src/core/page/dto/copy-page.dto.ts

@@ -0,0 +1,24 @@
+import { IsString, IsNotEmpty } from 'class-validator';
+
+export class CopyPageToSpaceDto {
+  @IsNotEmpty()
+  @IsString()
+  pageId: string;
+
+  @IsNotEmpty()
+  @IsString()
+  spaceId: string;
+}
+
+export type CopyPageMapEntry = {
+  newPageId: string;
+  newSlugId: string;
+  oldSlugId: string;
+};
+
+export type ICopyPageAttachment = {
+  newPageId: string,
+  oldPageId: string,
+  oldAttachmentId: string,
+  newAttachmentId: string,
+};

apps/server/src/core/page/dto/move-page.dto.ts

@@ -1,4 +1,10 @@
-import { IsString, IsOptional, MinLength, MaxLength } from 'class-validator';
+import {
+  IsString,
+  IsOptional,
+  MinLength,
+  MaxLength,
+  IsNotEmpty,
+} from 'class-validator';
 
 export class MovePageDto {
   @IsString()
@@ -15,9 +21,11 @@ export class MovePageDto {
 }
 
 export class MovePageToSpaceDto {
+  @IsNotEmpty()
   @IsString()
   pageId: string;
 
+  @IsNotEmpty()
   @IsString()
   spaceId: string;
 }

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

@@ -28,6 +28,7 @@ import {
 import SpaceAbilityFactory from '../casl/abilities/space-ability.factory';
 import { PageRepo } from '@docmost/db/repos/page/page.repo';
 import { RecentPageDto } from './dto/recent-page.dto';
+import { CopyPageToSpaceDto } from './dto/copy-page.dto';
 
 @UseGuards(JwtAuthGuard)
 @Controller('pages')
@@ -237,6 +238,36 @@ export class PageController {
     return this.pageService.movePageToSpace(movedPage, dto.spaceId);
   }
 
+  @HttpCode(HttpStatus.OK)
+  @Post('copy-to-space')
+  async copyPageToSpace(
+    @Body() dto: CopyPageToSpaceDto,
+    @AuthUser() user: User,
+  ) {
+    const copiedPage = await this.pageRepo.findById(dto.pageId);
+    if (!copiedPage) {
+      throw new NotFoundException('Page to copy not found');
+    }
+    if (copiedPage.spaceId === dto.spaceId) {
+      throw new BadRequestException('Page is already in this space');
+    }
+
+    const abilities = await Promise.all([
+      this.spaceAbility.createForUser(user, copiedPage.spaceId),
+      this.spaceAbility.createForUser(user, dto.spaceId),
+    ]);
+
+    if (
+      abilities.some((ability) =>
+        ability.cannot(SpaceCaslAction.Edit, SpaceCaslSubject.Page),
+      )
+    ) {
+      throw new ForbiddenException();
+    }
+
+    return this.pageService.copyPageToSpace(copiedPage, dto.spaceId, user);
+  }
+
   @HttpCode(HttpStatus.OK)
   @Post('move')
   async movePage(@Body() dto: MovePageDto, @AuthUser() user: User) {

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

@@ -2,10 +2,12 @@ import { Module } from '@nestjs/common';
 import { PageService } from './services/page.service';
 import { PageController } from './page.controller';
 import { PageHistoryService } from './services/page-history.service';
+import { StorageModule } from '../../integrations/storage/storage.module';
 
 @Module({
   controllers: [PageController],
   providers: [PageService, PageHistoryService],
   exports: [PageService, PageHistoryService],
+  imports: [StorageModule]
 })
 export class PageModule {}

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

@@ -1,12 +1,13 @@
 import {
   BadRequestException,
   Injectable,
+  Logger,
   NotFoundException,
 } from '@nestjs/common';
 import { CreatePageDto } from '../dto/create-page.dto';
 import { UpdatePageDto } from '../dto/update-page.dto';
 import { PageRepo } from '@docmost/db/repos/page/page.repo';
-import { Page } from '@docmost/db/types/entity.types';
+import { InsertablePage, Page, User } from '@docmost/db/types/entity.types';
 import { PaginationOptions } from '@docmost/db/pagination/pagination-options';
 import {
   executeWithPagination,
@@ -21,13 +22,28 @@ import { DB } from '@docmost/db/types/db';
 import { generateSlugId } from '../../../common/helpers';
 import { executeTx } from '@docmost/db/utils';
 import { AttachmentRepo } from '@docmost/db/repos/attachment/attachment.repo';
+import { v7 as uuid7 } from 'uuid';
+import {
+  createYdocFromJson,
+  getAttachmentIds,
+  getProsemirrorContent,
+  isAttachmentNode,
+  removeMarkTypeFromDoc,
+} from '../../../common/helpers/prosemirror/utils';
+import { jsonToNode, jsonToText } from 'src/collaboration/collaboration.util';
+import { CopyPageMapEntry, ICopyPageAttachment } from '../dto/copy-page.dto';
+import { Node as PMNode } from '@tiptap/pm/model';
+import { StorageService } from '../../../integrations/storage/storage.service';
 
 @Injectable()
 export class PageService {
+  private readonly logger = new Logger(PageService.name);
+
   constructor(
     private pageRepo: PageRepo,
     private attachmentRepo: AttachmentRepo,
     @InjectKysely() private readonly db: KyselyDB,
+    private readonly storageService: StorageService,
   ) {}
 
   async findById(
@@ -242,6 +258,154 @@ export class PageService {
     });
   }
 
+  async copyPageToSpace(rootPage: Page, spaceId: string, authUser: User) {
+    //TODO:
+    // i. maintain internal links within copied pages
+
+    const nextPosition = await this.nextPagePosition(spaceId);
+
+    const pages = await this.pageRepo.getPageAndDescendants(rootPage.id, {
+      includeContent: true,
+    });
+
+    const pageMap = new Map<string, CopyPageMapEntry>();
+    pages.forEach((page) => {
+      pageMap.set(page.id, {
+        newPageId: uuid7(),
+        newSlugId: generateSlugId(),
+        oldSlugId: page.slugId,
+      });
+    });
+
+    const attachmentMap = new Map<string, ICopyPageAttachment>();
+
+    const insertablePages: InsertablePage[] = await Promise.all(
+      pages.map(async (page) => {
+        const pageContent = getProsemirrorContent(page.content);
+        const pageFromMap = pageMap.get(page.id);
+
+        const doc = jsonToNode(pageContent);
+        const prosemirrorDoc = removeMarkTypeFromDoc(doc, 'comment');
+
+        const attachmentIds = getAttachmentIds(prosemirrorDoc.toJSON());
+
+        if (attachmentIds.length > 0) {
+          attachmentIds.forEach((attachmentId: string) => {
+            const newPageId = pageFromMap.newPageId;
+            const newAttachmentId = uuid7();
+            attachmentMap.set(attachmentId, {
+              newPageId: newPageId,
+              oldPageId: page.id,
+              oldAttachmentId: attachmentId,
+              newAttachmentId: newAttachmentId,
+            });
+
+            prosemirrorDoc.descendants((node: PMNode) => {
+              if (isAttachmentNode(node.type.name)) {
+                if (node.attrs.attachmentId === attachmentId) {
+                  //@ts-ignore
+                  node.attrs.attachmentId = newAttachmentId;
+
+                  if (node.attrs.src) {
+                    //@ts-ignore
+                    node.attrs.src = node.attrs.src.replace(
+                      attachmentId,
+                      newAttachmentId,
+                    );
+                  }
+                  if (node.attrs.src) {
+                    //@ts-ignore
+                    node.attrs.src = node.attrs.src.replace(
+                      attachmentId,
+                      newAttachmentId,
+                    );
+                  }
+                }
+              }
+            });
+          });
+        }
+
+        const prosemirrorJson = prosemirrorDoc.toJSON();
+
+        return {
+          id: pageFromMap.newPageId,
+          slugId: pageFromMap.newSlugId,
+          title: page.title,
+          icon: page.icon,
+          content: prosemirrorJson,
+          textContent: jsonToText(prosemirrorJson),
+          ydoc: createYdocFromJson(prosemirrorJson),
+          position: page.id === rootPage.id ? nextPosition : page.position,
+          spaceId: spaceId,
+          workspaceId: page.workspaceId,
+          creatorId: authUser.id,
+          lastUpdatedById: authUser.id,
+          parentPageId: page.parentPageId
+            ? pageMap.get(page.parentPageId)?.newPageId
+            : null,
+        };
+      }),
+    );
+
+    await this.db.insertInto('pages').values(insertablePages).execute();
+
+    //TODO: best to handle this in a queue
+    const attachmentsIds = Array.from(attachmentMap.keys());
+    if (attachmentsIds.length > 0) {
+      const attachments = await this.db
+        .selectFrom('attachments')
+        .selectAll()
+        .where('id', 'in', attachmentsIds)
+        .where('workspaceId', '=', rootPage.workspaceId)
+        .execute();
+
+      for (const attachment of attachments) {
+        try {
+          const pageAttachment = attachmentMap.get(attachment.id);
+
+          // make sure the copied attachment belongs to the page it was copied from
+          if (attachment.pageId !== pageAttachment.oldPageId) {
+            continue;
+          }
+
+          const newAttachmentId = pageAttachment.newAttachmentId;
+
+          const newPageId = pageAttachment.newPageId;
+
+          const newPathFile = attachment.filePath.replace(
+            attachment.id,
+            newAttachmentId,
+          );
+          await this.storageService.copy(attachment.filePath, newPathFile);
+          await this.db
+            .insertInto('attachments')
+            .values({
+              id: newAttachmentId,
+              type: attachment.type,
+              filePath: newPathFile,
+              fileName: attachment.fileName,
+              fileSize: attachment.fileSize,
+              mimeType: attachment.mimeType,
+              fileExt: attachment.fileExt,
+              creatorId: attachment.creatorId,
+              workspaceId: attachment.workspaceId,
+              pageId: newPageId,
+              spaceId: spaceId,
+            })
+            .execute();
+        } catch (err) {
+          this.logger.log(err);
+        }
+      }
+    }
+
+    const newPageId = pageMap.get(rootPage.id).newPageId;
+    return await this.pageRepo.findById(newPageId, {
+      includeSpace: true,
+    });
+  }
+
   async movePage(dto: MovePageDto, movedPage: Page) {
     // validate position value by attempting to generate a key
     try {

apps/server/src/integrations/storage/drivers/local.driver.ts

@@ -25,6 +25,16 @@ export class LocalDriver implements StorageDriver {
     }
   }
 
+  async copy(fromFilePath: string, toFilePath: string): Promise<void> {
+    try {
+      if (await this.exists(fromFilePath)) {
+        await fs.copy(fromFilePath, toFilePath);
+      }
+    } catch (err) {
+      throw new Error(`Failed to copy file: ${(err as Error).message}`);
+    }
+  }
+
   async read(filePath: string): Promise<Buffer> {
     try {
       return await fs.readFile(this._fullPath(filePath));

apps/server/src/integrations/storage/drivers/s3.driver.ts

@@ -1,5 +1,6 @@
 import { S3StorageConfig, StorageDriver, StorageOption } from '../interfaces';
 import {
+  CopyObjectCommand,
   DeleteObjectCommand,
   GetObjectCommand,
   HeadObjectCommand,
@@ -39,6 +40,22 @@ export class S3Driver implements StorageDriver {
     }
   }
 
+  async copy(fromFilePath: string, toFilePath: string): Promise<void> {
+    try {
+      if (await this.exists(fromFilePath)) {
+        await this.s3Client.send(
+          new CopyObjectCommand({
+            Bucket: this.config.bucket,
+            CopySource: `${this.config.bucket}/${fromFilePath}`,
+            Key: toFilePath,
+          }),
+        );
+      }
+    } catch (err) {
+      throw new Error(`Failed to copy file: ${(err as Error).message}`);
+    }
+  }
+
   async read(filePath: string): Promise<Buffer> {
     try {
       const command = new GetObjectCommand({

apps/server/src/integrations/storage/interfaces/storage-driver.interface.ts

@@ -1,6 +1,8 @@
 export interface StorageDriver {
   upload(filePath: string, file: Buffer): Promise<void>;
 
+  copy(fromFilePath: string, toFilePath: string): Promise<void>;
+
   read(filePath: string): Promise<Buffer>;
 
   exists(filePath: string): Promise<boolean>;

apps/server/src/integrations/storage/storage.service.ts

@@ -14,6 +14,11 @@ export class StorageService {
     this.logger.debug(`File uploaded successfully. Path: ${filePath}`);
   }
 
+  async copy(fromFilePath: string, toFilePath: string) {
+    await this.storageDriver.copy(fromFilePath, toFilePath);
+    this.logger.debug(`File copied successfully. Path: ${toFilePath}`);
+  }
+
   async read(filePath: string): Promise<Buffer> {
     return this.storageDriver.read(filePath);
   }