Add ability to modify document titles

backend/src/workspace-documents/dto/update-document-title.dto.ts

@@ -0,0 +1,13 @@
+import { ApiProperty } from "@nestjs/swagger";
+import { IsString, IsNotEmpty } from "class-validator";
+
+export class UpdateDocumentTitleDto {
+	@ApiProperty({
+		description: "The new title of the document",
+		example: "Updated Document Title",
+		type: String,
+	})
+	@IsString()
+	@IsNotEmpty()
+	title: string;
+}

backend/src/workspace-documents/workspace-documents.controller.ts

@@ -6,6 +6,7 @@ import {
 	Param,
 	ParseIntPipe,
 	Post,
+	Put,
 	Query,
 	Req,
 } from "@nestjs/common";
@@ -24,6 +25,7 @@ import {
 import { AuthroizedRequest } from "src/utils/types/req.type";
 import { CreateWorkspaceDocumentDto } from "./dto/create-workspace-document.dto";
 import { CreateWorkspaceDocumentResponse } from "./types/create-workspace-document-response.type";
+import { UpdateDocumentTitleDto } from "./dto/update-document-title.dto";
 import { HttpExceptionResponse } from "src/utils/types/http-exception-response.type";
 import { FindWorkspaceDocumentsResponse } from "./types/find-workspace-documents-response.type";
 import { CreateWorkspaceDocumentShareTokenResponse } from "./types/create-workspace-document-share-token-response.type";
@@ -36,6 +38,39 @@ import { FindWorkspaceDocumentResponse } from "./types/find-workspace-document-r
 export class WorkspaceDocumentsController {
 	constructor(private workspaceDocumentsService: WorkspaceDocumentsService) {}
 
+	// PUT endpoint for updating document title
+	@Put(":document_id/title")
+	@ApiOperation({
+		summary: "Update the title of a document in the workspace",
+		description: "If the user has the access permissions, update the document's title.",
+	})
+	@ApiOkResponse({
+		description: "Document title updated successfully",
+	})
+	@ApiNotFoundResponse({
+		type: HttpExceptionResponse,
+		description:
+			"The workspace or document does not exist, or the user lacks the appropriate permissions.",
+	})
+	@ApiBody({
+		description: "The new title of the document",
+		type: UpdateDocumentTitleDto,
+	})
+	async updateTitle(
+		@Param("workspace_id") workspaceId: string,
+		@Param("document_id") documentId: string,
+		@Body() updateDocumentTitleDto: UpdateDocumentTitleDto,
+		@Req() req: AuthroizedRequest
+	): Promise<void> {
+		await this.workspaceDocumentsService.updateTitle(
+			req.user.id,
+			workspaceId,
+			documentId,
+			updateDocumentTitleDto.title
+		);
+	}
+
+	// Get the list of documents in the workspace
 	@Get("")
 	@ApiOperation({
 		summary: "Retrieve the Documents in Workspace",
@@ -68,6 +103,7 @@ export class WorkspaceDocumentsController {
 		return this.workspaceDocumentsService.findMany(req.user.id, workspaceId, pageSize, cursor);
 	}
 
+	// Get a specific document by ID
 	@Get(":document_id")
 	@ApiOperation({
 		summary: "Retrieve a Document in the Workspace",
@@ -87,6 +123,7 @@ export class WorkspaceDocumentsController {
 		return this.workspaceDocumentsService.findOne(req.user.id, workspaceId, documentId);
 	}
 
+	// Create a new document in the workspace
 	@Post()
 	@ApiOperation({
 		summary: "Create a Document in a Workspace",
@@ -110,6 +147,7 @@ export class WorkspaceDocumentsController {
 		);
 	}
 
+	// Generate a share token for a document
 	@Post(":document_id/share-token")
 	@ApiOperation({
 		summary: "Retrieve a Share Token for the Document",

backend/src/workspace-documents/workspace-documents.service.ts

@@ -17,6 +17,30 @@ export class WorkspaceDocumentsService {
 		private configService: ConfigService
 	) {}
 
+	async updateTitle(
+		userId: string,
+		workspaceId: string,
+		documentId: string,
+		title: string
+	): Promise<void> {
+		const document = await this.prismaService.document.findFirst({
+			where: {
+				id: documentId,
+				workspaceId: workspaceId,
+			},
+		});
+
+		if (!document) {
+			throw new NotFoundException("Document not found");
+		}
+
+		// Update the document's title
+		await this.prismaService.document.update({
+			where: { id: documentId },
+			data: { title: title },
+		});
+	}
+
 	async create(userId: string, workspaceId: string, title: string) {
 		try {
 			await this.prismaService.userWorkspace.findFirstOrThrow({

frontend/src/components/editor/Editor.tsx

@@ -170,26 +170,31 @@ function Editor() {
 	]);
 
 	return (
-		<ScrollSyncPane>
-			<div
-				style={{
-					height: "100%",
-					overflow: "auto",
-				}}
-			>
+		<>
+			<ScrollSyncPane>
 				<div
-					ref={ref}
 					style={{
-						display: "flex",
-						alignItems: "stretch",
-						minHeight: "100%",
+						height: "100%",
+						overflow: "auto",
 					}}
-				/>
-				{Boolean(toolBarState.show) && (
-					<ToolBar toolBarState={toolBarState} onChangeToolBarState={setToolBarState} />
-				)}
-			</div>
-		</ScrollSyncPane>
+				>
+					<div
+						ref={ref}
+						style={{
+							display: "flex",
+							alignItems: "stretch",
+							minHeight: "100%",
+						}}
+					/>
+					{Boolean(toolBarState.show) && (
+						<ToolBar
+							toolBarState={toolBarState}
+							onChangeToolBarState={setToolBarState}
+						/>
+					)}
+				</div>
+			</ScrollSyncPane>
+		</>
 	);
 }
 

frontend/src/components/headers/DocumentHeader.tsx

@@ -11,24 +11,51 @@ import {
 	ToggleButtonGroup,
 	Toolbar,
 	Tooltip,
+	Button,
+	FormControl,
 } from "@mui/material";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import { useUserPresence } from "../../hooks/useUserPresence";
 import { EditorModeType, selectEditor, setMode } from "../../store/editorSlice";
 import { selectWorkspace } from "../../store/workspaceSlice";
 import DownloadMenu from "../common/DownloadMenu";
 import ShareButton from "../common/ShareButton";
 import ThemeButton from "../common/ThemeButton";
 import UserPresenceList from "./UserPresenceList";
+import { FormContainer, TextFieldElement } from "react-hook-form-mui";
+import { useGetWorkspaceQuery } from "../../hooks/api/workspace";
+
+import {
+	useUpdateDocumentTitleMutation,
+	useGetDocumentQuery,
+} from "../../hooks/api/workspaceDocument";
 
 function DocumentHeader() {
 	const dispatch = useDispatch();
 	const navigate = useNavigate();
 	const editorState = useSelector(selectEditor);
 	const workspaceState = useSelector(selectWorkspace);
 	const { presenceList } = useUserPresence(editorState.doc);
+	const [focused, setFocused] = useState(false);
+	const [documentTitle, setDocumentTitle] = useState("");
+	const params = useParams();
+	const { data: workspace } = useGetWorkspaceQuery(params.workspaceSlug);
+
+	const { data: documentData } = useGetDocumentQuery(
+		workspace?.id || "",
+		params.documentId || ""
+	);
+
+	const { mutateAsync: updateDocumentTitle } = useUpdateDocumentTitleMutation(
+		workspace?.id || "",
+		params.documentId || ""
+	);
+
+	const handleFocus = () => {
+		setFocused(true);
+	};
 
 	useEffect(() => {
 		if (editorState.shareRole === "READ") {
@@ -45,6 +72,23 @@ function DocumentHeader() {
 		navigate(`/${workspaceState.data?.slug}`);
 	};
 
+	const handleDocumentTitleChange = (
+		e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+	) => {
+		setDocumentTitle(e.target.value);
+	};
+
+	const handleUpdateDocumentTitle = async (data: { title: string }) => {
+		await updateDocumentTitle(data);
+		setFocused(false);
+	};
+
+	useEffect(() => {
+		if (documentData && documentData.title) {
+			setDocumentTitle(documentData.title);
+		}
+	}, [documentData]);
+
 	return (
 		<AppBar position="static" sx={{ zIndex: 100 }}>
 			<Toolbar>
@@ -84,7 +128,37 @@ function DocumentHeader() {
 							)}
 						</Paper>
 						<DownloadMenu />
+
+						<Stack alignItems="center">
+							<FormControl>
+								<FormContainer
+									defaultValues={{ title: documentTitle }}
+									onSuccess={handleUpdateDocumentTitle}
+								>
+									<Stack gap={4} alignItems="flex-end" flexDirection="row">
+										<TextFieldElement
+											variant="standard"
+											name="title"
+											label={documentTitle}
+											required
+											fullWidth
+											inputProps={{
+												maxLength: 255,
+											}}
+											onChange={handleDocumentTitleChange}
+											onFocus={handleFocus}
+										/>
+										{focused && (
+											<Button type="submit" variant="contained" size="large">
+												Update
+											</Button>
+										)}
+									</Stack>
+								</FormContainer>
+							</FormControl>
+						</Stack>
 					</Stack>
+
 					<Stack direction="row" alignItems="center" gap={1}>
 						<UserPresenceList presenceList={presenceList} />
 						{!editorState.shareRole && <ShareButton />}

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

@@ -13,3 +13,7 @@ export class Document {
 export class GetDocumentBySharingTokenResponse extends Document {
 	role: ShareRole;
 }
+
+export class UpdateDocumentRequest {
+	title: string;
+}

frontend/src/hooks/api/workspaceDocument.ts

@@ -8,9 +8,11 @@ import {
 	GetWorkspaceDocumentResponse,
 	GetWorkspaceDocumentListResponse,
 } from "./types/workspaceDocument";
-import { useDispatch } from "react-redux";
+
 import { useEffect } from "react";
 import { setDocumentData } from "../../store/documentSlice";
+import { UpdateDocumentRequest } from "./types/document";
+import { useDispatch } from "react-redux";
 
 export const generateGetWorkspaceDocumentListQueryKey = (workspaceId: string) => {
 	return ["workspaces", workspaceId, "documents"];
@@ -105,3 +107,23 @@ export const useCreateWorkspaceSharingTokenMutation = (workspaceId: string, docu
 		},
 	});
 };
+
+export const useUpdateDocumentTitleMutation = (workspaceId: string, documentId: string) => {
+	const queryClient = useQueryClient();
+
+	return useMutation({
+		mutationFn: async (data: UpdateDocumentRequest) => {
+			const res = await axios.put<void>(
+				`/workspaces/${workspaceId}/documents/${documentId}/title`,
+				data
+			);
+
+			return res.data;
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({
+				queryKey: generateGetDocumentQueryKey(workspaceId, documentId),
+			});
+		},
+	});
+};