Add Document Export Functionality

backend/package.json

@@ -35,7 +35,9 @@
 		"@prisma/client": "^5.8.1",
 		"class-transformer": "^0.5.1",
 		"class-validator": "^0.14.1",
+		"html-pdf-node": "^1.0.8",
 		"langchain": "^0.1.9",
+		"markdown-it": "^14.1.0",
 		"markdown-to-txt": "^2.0.1",
 		"moment": "^2.30.1",
 		"passport-github": "^1.1.0",

backend/src/files/files.controller.ts

@@ -1,9 +1,19 @@
-import { Body, Controller, Get, HttpRedirectResponse, Param, Post, Redirect } from "@nestjs/common";
+import {
+	Body,
+	Controller,
+	Get,
+	HttpRedirectResponse,
+	Param,
+	Post,
+	Redirect,
+	StreamableFile,
+} from "@nestjs/common";
+import { ApiBody, ApiOkResponse, ApiOperation, ApiResponse } from "@nestjs/swagger";
+import { Public } from "src/utils/decorators/auth.decorator";
+import { CreateUploadPresignedUrlDto } from "./dto/create-upload-url.dto";
 import { FilesService } from "./files.service";
-import { ApiResponse, ApiOperation, ApiBody } from "@nestjs/swagger";
 import { CreateUploadPresignedUrlResponse } from "./types/create-upload-url-response.type";
-import { CreateUploadPresignedUrlDto } from "./dto/create-upload-url.dto";
-import { Public } from "src/utils/decorators/auth.decorator";
+import { ExportFileRequestBody, ExportFileResponse } from "./types/export-file.type";
 
 @Controller("files")
 export class FilesController {
@@ -32,7 +42,7 @@ export class FilesController {
 	@Redirect()
 	@ApiOperation({
 		summary: "Create Presigned URL for Download",
-		description: "Create rresigned URL for download",
+		description: "Create Presigned URL for download",
 	})
 	async createDownloadPresignedUrl(
 		@Param("file_name") fileKey: string
@@ -42,4 +52,24 @@ export class FilesController {
 			statusCode: 302,
 		};
 	}
+
+	@Public()
+	@Post("export-markdown")
+	@ApiOperation({
+		summary: "Export Markdown",
+		description: "Export Markdown to various formats",
+	})
+	@ApiBody({ type: ExportFileRequestBody })
+	@ApiOkResponse({ type: ExportFileResponse })
+	async exportMarkdown(
+		@Body() exportFileRequestBody: ExportFileRequestBody
+	): Promise<StreamableFile> {
+		const { fileContent, mimeType, fileName } =
+			await this.filesService.exportMarkdown(exportFileRequestBody);
+
+		return new StreamableFile(fileContent, {
+			type: mimeType,
+			disposition: `attachment; filename="${fileName}"`,
+		});
+	}
 }

backend/src/files/files.service.ts

@@ -1,20 +1,25 @@
+import { GetObjectCommand, PutObjectCommand, S3Client } from "@aws-sdk/client-s3";
+import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
 import {
+	BadRequestException,
 	Injectable,
 	NotFoundException,
 	UnauthorizedException,
 	UnprocessableEntityException,
 } from "@nestjs/common";
-import { S3Client, GetObjectCommand, PutObjectCommand } from "@aws-sdk/client-s3";
-import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
 import { ConfigService } from "@nestjs/config";
-import { generateRandomKey } from "src/utils/functions/random-string";
-import { PrismaService } from "src/db/prisma.service";
 import { Workspace } from "@prisma/client";
+import * as htmlPdf from "html-pdf-node";
+import * as MarkdownIt from "markdown-it";
+import { PrismaService } from "src/db/prisma.service";
+import { generateRandomKey } from "src/utils/functions/random-string";
 import { CreateUploadPresignedUrlResponse } from "./types/create-upload-url-response.type";
+import { ExportFileRequestBody, ExportFileResponse } from "./types/export-file.type";
 
 @Injectable()
 export class FilesService {
 	private s3Client: S3Client;
+	private readonly markdown = new MarkdownIt();
 
 	constructor(
 		private configService: ConfigService,
@@ -68,4 +73,51 @@ export class FilesService {
 			throw new NotFoundException();
 		}
 	}
+
+	async exportMarkdown(
+		exportFileRequestBody: ExportFileRequestBody
+	): Promise<ExportFileResponse> {
+		const { exportType, content, fileName } = exportFileRequestBody;
+
+		switch (exportType) {
+			case "markdown":
+				return this.exportToMarkdown(content, fileName);
+			case "html":
+				return this.exportToHtml(content, fileName);
+			case "pdf":
+				return this.exportToPdf(content, fileName);
+			default:
+				throw new BadRequestException("Invalid export type");
+		}
+	}
+
+	private async exportToMarkdown(content: string, fileName: string): Promise<ExportFileResponse> {
+		return {
+			fileContent: Buffer.from(content),
+			mimeType: "text/markdown",
+			fileName: `${fileName}.md`,
+		};
+	}
+
+	private async exportToHtml(content: string, fileName: string): Promise<ExportFileResponse> {
+		const html = this.markdown.render(content);
+		return {
+			fileContent: Buffer.from(html),
+			mimeType: "text/html",
+			fileName: `${fileName}.html`,
+		};
+	}
+
+	private async exportToPdf(content: string, fileName: string): Promise<ExportFileResponse> {
+		const html = this.markdown.render(content);
+		const options = { format: "A4" };
+		const file = { content: html };
+
+		const pdfBuffer = await htmlPdf.generatePdf(file, options);
+		return {
+			fileContent: pdfBuffer,
+			mimeType: "application/pdf",
+			fileName: `${fileName}.pdf`,
+		};
+	}
 }

backend/src/files/types/export-file.type.ts

@@ -0,0 +1,25 @@
+import { ApiProperty } from "@nestjs/swagger";
+import { IsIn } from "class-validator";
+
+export class ExportFileRequestBody {
+	@ApiProperty({ type: String, description: "export file type" })
+	@IsIn(["pdf", "html", "markdown"])
+	exportType: string;
+
+	@ApiProperty({ type: String, description: "markdown string" })
+	content: string;
+
+	@ApiProperty({ type: String, description: "File name" })
+	fileName: string;
+}
+
+export class ExportFileResponse {
+	@ApiProperty({ type: Buffer, description: "File content" })
+	fileContent: Buffer;
+
+	@ApiProperty({ type: String, description: "File mime type" })
+	mimeType: string;
+
+	@ApiProperty({ type: String, description: "File name" })
+	fileName: string;
+}

frontend/src/components/cards/DocumentCard.tsx

@@ -1,8 +1,8 @@
-import moment from "moment";
-import { Card, CardActionArea, CardContent, Stack, Typography } from "@mui/material";
 import AccessTimeIcon from "@mui/icons-material/AccessTime";
-import { Document } from "../../hooks/api/types/document.d";
+import { Card, CardActionArea, CardContent, Stack, Typography } from "@mui/material";
+import moment from "moment";
 import { useNavigate, useParams } from "react-router-dom";
+import { Document } from "../../hooks/api/types/document.d";
 
 interface DocumentCardProps {
 	document: Document;

frontend/src/components/common/DownloadMenu.tsx

@@ -0,0 +1,39 @@
+import { SaveAlt as SaveAltIcon } from "@mui/icons-material";
+import { IconButton, Menu, MenuItem, Paper } from "@mui/material";
+import { MouseEvent, useState } from "react";
+import { useFileExport } from "../../hooks/useFileExport";
+
+function DownloadMenu() {
+	const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+
+	const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+		setAnchorEl(event.currentTarget);
+	};
+
+	const handleClose = () => {
+		setAnchorEl(null);
+	};
+
+	const { handleExportToPDF, handleExportToHTML, handleExportToMarkdown } = useFileExport();
+
+	return (
+		<Paper>
+			<IconButton aria-controls="download-menu" aria-haspopup="true" onClick={handleClick}>
+				<SaveAltIcon />
+			</IconButton>
+			<Menu
+				id="download-menu"
+				anchorEl={anchorEl}
+				keepMounted
+				open={Boolean(anchorEl)}
+				onClose={handleClose}
+			>
+				<MenuItem onClick={handleExportToPDF}>Download as PDF</MenuItem>
+				<MenuItem onClick={handleExportToHTML}>Download as HTML</MenuItem>
+				<MenuItem onClick={handleExportToMarkdown}>Download as Markdown</MenuItem>
+			</Menu>
+		</Paper>
+	);
+}
+
+export default DownloadMenu;

frontend/src/components/editor/Preview.tsx

@@ -1,17 +1,17 @@
-import MarkdownPreview from "@uiw/react-markdown-preview";
-import { useCurrentTheme } from "../../hooks/useCurrentTheme";
-import { useSelector } from "react-redux";
-import { selectEditor } from "../../store/editorSlice";
 import { CircularProgress, Stack } from "@mui/material";
-import { useEffect, useState } from "react";
-import "./editor.css";
-import { addSoftLineBreak } from "../../utils/document";
+import MarkdownPreview from "@uiw/react-markdown-preview";
 import katex from "katex";
+import "katex/dist/katex.min.css";
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import rehypeExternalLinks from "rehype-external-links";
+import rehypeKatex from "rehype-katex";
 import { getCodeString } from "rehype-rewrite";
 import remarkMath from "remark-math";
-import rehypeKatex from "rehype-katex";
-import rehypeExternalLinks from "rehype-external-links";
-import "katex/dist/katex.min.css";
+import { useCurrentTheme } from "../../hooks/useCurrentTheme";
+import { selectEditor } from "../../store/editorSlice";
+import { addSoftLineBreak } from "../../utils/document";
+import "./editor.css";
 
 function Preview() {
 	const currentTheme = useCurrentTheme();

frontend/src/components/headers/DocumentHeader.tsx

@@ -1,3 +1,7 @@
+import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
+import EditIcon from "@mui/icons-material/Edit";
+import VerticalSplitIcon from "@mui/icons-material/VerticalSplit";
+import VisibilityIcon from "@mui/icons-material/Visibility";
 import {
 	AppBar,
 	Avatar,
@@ -16,20 +20,17 @@ import {
 	ListItemAvatar,
 	ListItemText,
 } from "@mui/material";
-import EditIcon from "@mui/icons-material/Edit";
-import VerticalSplitIcon from "@mui/icons-material/VerticalSplit";
-import VisibilityIcon from "@mui/icons-material/Visibility";
-import { useDispatch, useSelector } from "react-redux";
-import { EditorModeType, selectEditor, setMode } from "../../store/editorSlice";
-import ThemeButton from "../common/ThemeButton";
-import ShareButton from "../common/ShareButton";
 import { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
 import { useList } from "react-use";
 import { ActorID } from "yorkie-js-sdk";
-import { YorkieCodeMirrorPresenceType } from "../../utils/yorkie/yorkieSync";
-import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
-import { useNavigate } from "react-router-dom";
+import { EditorModeType, selectEditor, setMode } from "../../store/editorSlice";
 import { selectWorkspace } from "../../store/workspaceSlice";
+import { YorkieCodeMirrorPresenceType } from "../../utils/yorkie/yorkieSync";
+import DownloadMenu from "../common/DownloadMenu";
+import ShareButton from "../common/ShareButton";
+import ThemeButton from "../common/ThemeButton";
 
 function DocumentHeader() {
 	const dispatch = useDispatch();
@@ -147,6 +148,7 @@ function DocumentHeader() {
 								</ToggleButtonGroup>
 							)}
 						</Paper>
+						<DownloadMenu />
 					</Stack>
 					<Stack direction="row" alignItems="center" gap={1}>
 						<AvatarGroup max={4} onClick={handleOpenPopover}>

frontend/src/hooks/api/file.ts

@@ -1,6 +1,11 @@
 import { useMutation } from "@tanstack/react-query";
 import axios from "axios";
-import { UploadFileRequest, CreateUploadUrlRequest, CreateUploadUrlResponse } from "./types/file";
+import {
+	CreateUploadUrlRequest,
+	CreateUploadUrlResponse,
+	ExportFileRequest,
+	UploadFileRequest,
+} from "./types/file";
 
 export const useCreateUploadUrlMutation = () => {
 	return useMutation({
@@ -24,3 +29,28 @@ export const useUploadFileMutation = () => {
 		},
 	});
 };
+
+export const useExportFileMutation = () => {
+	return useMutation({
+		mutationFn: async (data: ExportFileRequest) => {
+			const { exportType, content, fileName } = data;
+
+			const res = await axios.post(
+				"/files/export-markdown",
+				{
+					exportType,
+					content,
+					fileName,
+				},
+				{
+					responseType: "blob",
+					headers: {
+						Accept: "application/octet-stream",
+					},
+				}
+			);
+
+			return res;
+		},
+	});
+};

frontend/src/hooks/api/types/file.d.ts

@@ -13,3 +13,9 @@ export class UploadFileRequest {
 	url: string;
 	file: File;
 }
+
+export class ExportFileRequest {
+	exportType: string;
+	content: string;
+	fileName: string;
+}