Add document creation logic

frontend/src/components/editor/Preview.tsx

@@ -5,25 +5,28 @@ import { selectEditor } from "../../store/editorSlice";
 import { CircularProgress } from "@mui/material";
 import { useEffect, useState } from "react";
 import "./editor.css";
+import { useParams } from "react-router-dom";
 
 function Preview() {
+	const params = useParams();
 	const currentTheme = useCurrentTheme();
 	const editorStore = useSelector(selectEditor);
 	const [content, setContent] = useState("");
 
 	useEffect(() => {
-		if (!editorStore.doc) return;
+		if (!editorStore.doc || !params.documentId) return;
 
-		setContent(editorStore.doc?.getRoot().content.toString());
+		setContent(editorStore.doc?.getRoot().content?.toString() || "");
 
 		const unsubsribe = editorStore.doc.subscribe("$.content", () => {
 			setContent(editorStore.doc?.getRoot().content.toString() as string);
 		});
 
 		return () => {
 			unsubsribe();
+			setContent("");
 		};
-	}, [editorStore.doc]);
+	}, [editorStore.doc, params.documentId]);
 
 	if (!editorStore?.doc) return <CircularProgress sx={{ marginX: "auto", mt: 4 }} />;
 

frontend/src/components/headers/EditorHeader.tsx

@@ -15,15 +15,22 @@ import AddIcon from "@mui/icons-material/Add";
 import { useDispatch, useSelector } from "react-redux";
 import { EditorModeType, selectEditor, setMode } from "../../store/editorSlice";
 import ThemeButton from "../common/ThemeButton";
+import { createDocumentKey } from "../../utils/document";
+import { useNavigate } from "react-router-dom";
 
 function EditorHeader() {
 	const dispatch = useDispatch();
 	const editorState = useSelector(selectEditor);
+	const navigate = useNavigate();
 
 	const handleChangeMode = (newMode: EditorModeType) => {
 		dispatch(setMode(newMode));
 	};
 
+	const handleCreateNewDocument = () => {
+		navigate(`/${createDocumentKey()}`);
+	};
+
 	return (
 		<AppBar position="static" sx={{ zIndex: 100 }}>
 			<Toolbar>
@@ -54,7 +61,7 @@ function EditorHeader() {
 							</ToggleButtonGroup>
 						</Paper>
 						<Tooltip title="Create New Note">
-							<IconButton color="inherit">
+							<IconButton color="inherit" onClick={handleCreateNewDocument}>
 								<AddIcon />
 							</IconButton>
 						</Tooltip>

frontend/src/pages/editor/Index.tsx

@@ -13,23 +13,27 @@ import { Box, Paper } from "@mui/material";
 import Resizable from "react-resizable-layout";
 import { useWindowWidth } from "@react-hook/window-size";
 import Preview from "../../components/editor/Preview";
+import { useParams } from "react-router-dom";
 
 function EditorIndex() {
 	const dispatch = useDispatch();
 	const windowWidth = useWindowWidth();
 	const editorStore = useSelector(selectEditor);
+	const params = useParams();
 
 	useEffect(() => {
 		let client: yorkie.Client;
 		let doc: yorkie.Document<YorkieCodeMirrorDocType, YorkieCodeMirrorPresenceType>;
 
+		if (!params.documentId) return;
+
 		const initializeYorkie = async () => {
 			client = new yorkie.Client(import.meta.env.VITE_YORKIE_API_ADDR, {
 				apiKey: import.meta.env.VITE_YORKIE_API_KEY,
 			});
 			await client.activate();
 
-			doc = new yorkie.Document("my-first-document");
+			doc = new yorkie.Document(params.documentId as string);
 
 			await client.attach(doc, {
 				initialPresence: {
@@ -52,7 +56,7 @@ function EditorIndex() {
 
 			cleanUp();
 		};
-	}, [dispatch]);
+	}, [dispatch, params.documentId]);
 
 	return (
 		<Box height="calc(100% - 64px)">

frontend/src/utils/document.ts

@@ -0,0 +1,3 @@
+export function createDocumentKey() {
+	return Math.random().toString(36).substring(7);
+}

frontend/src/utils/yorkie/remoteSelection.ts

@@ -222,7 +222,7 @@ export class YorkieRemoteSelectionsPluginValue {
 			const hasFocus = update.view.hasFocus && update.view.dom.ownerDocument.hasFocus();
 			const sel = hasFocus ? update.state.selection.main : null;
 
-			if (sel) {
+			if (sel && root.content) {
 				const selection = root.content.indexRangeToPosRange([sel.anchor, sel.head]);
 				presence.set({
 					selection,