Add view / edit mode

yorkie-team · Jan 12, 2024 · 59f61a0 · 59f61a0
1 parent a01bc3c
commit 59f61a0
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 50 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -11,7 +11,9 @@
 		"prettier": "prettier . --check"
 	},
 	"dependencies": {
+		"@codemirror/commands": "^6.3.3",
 		"@codemirror/lang-markdown": "^6.2.3",
+		"@codemirror/view": "^6.23.0",
 		"@emotion/react": "^11.11.3",
 		"@emotion/styled": "^11.11.0",
 		"@fontsource/roboto": "^5.0.8",

diff --git a/frontend/src/components/editor/Editor.tsx b/frontend/src/components/editor/Editor.tsx
@@ -8,6 +8,8 @@ import { yorkieCodeMirror } from "../../utils/yorkie";
 import toolbar, { markdownItems } from "codemirror-toolbar";
 import { xcodeLight, xcodeDark } from "@uiw/codemirror-theme-xcode";
 import { useCurrentTheme } from "../../hooks/useCurrentTheme";
+import { keymap } from "@codemirror/view";
+import { indentWithTab } from "@codemirror/commands";
 
 function Editor() {
 	const themeMode = useCurrentTheme();
@@ -39,6 +41,7 @@ function Editor() {
 					"&": { width: "100%" },
 				}),
 				EditorView.lineWrapping,
+				keymap.of([indentWithTab]),
 			],
 		});
 

diff --git a/frontend/src/components/editor/Preview.tsx b/frontend/src/components/editor/Preview.tsx
@@ -25,7 +25,7 @@ function Preview() {
 		};
 	}, [editorStore.doc]);
 
-	if (!editorStore?.doc) return <CircularProgress sx={{ marginX: "auto" }} />;
+	if (!editorStore?.doc) return <CircularProgress sx={{ marginX: "auto", mt: 4 }} />;
 
 	return (
 		<MarkdownPreview

diff --git a/frontend/src/components/headers/EditorHeader.tsx b/frontend/src/components/headers/EditorHeader.tsx
@@ -46,8 +46,8 @@ function EditorHeader() {
 										<VerticalSplitIcon />
 									</Tooltip>
 								</ToggleButton>
-								<ToggleButton value="view" aria-label="view">
-									<Tooltip title="View Mode">
+								<ToggleButton value="read" aria-label="read">
+									<Tooltip title="Read Mode">
 										<VisibilityIcon />
 									</Tooltip>
 								</ToggleButton>

diff --git a/frontend/src/pages/editor/Index.tsx b/frontend/src/pages/editor/Index.tsx
@@ -1,8 +1,8 @@
 import { useEffect } from "react";
 import Editor from "../../components/editor/Editor";
 import * as yorkie from "yorkie-js-sdk";
-import { setClient, setDoc } from "../../store/editorSlice";
-import { useDispatch } from "react-redux";
+import { selectEditor, setClient, setDoc } from "../../store/editorSlice";
+import { useDispatch, useSelector } from "react-redux";
 import {
 	YorkieCodeMirrorDocType,
 	YorkieCodeMirrorPresenceType,
@@ -17,6 +17,7 @@ import Preview from "../../components/editor/Preview";
 function EditorIndex() {
 	const dispatch = useDispatch();
 	const windowWidth = useWindowWidth();
+	const editorStore = useSelector(selectEditor);
 
 	useEffect(() => {
 		let client: yorkie.Client;
@@ -55,42 +56,51 @@ function EditorIndex() {
 
 	return (
 		<Box height="calc(100% - 64px)">
-			<Resizable axis={"x"} initial={windowWidth / 2} min={400}>
-				{({ position: width, separatorProps }) => (
-					<div
-						id="wrapper"
-						style={{
-							display: "flex",
-							height: "100%",
-							overflow: "hidden",
-						}}
-					>
-						<div id="left-block" style={{ width }}>
-							<Editor />
-						</div>
-						<Paper
-							id="splitter"
-							{...separatorProps}
-							sx={{
+			{/* For Markdown Preview Theme */}
+			<div className="wmde-markdown-var" />
+			{editorStore.mode === "both" && (
+				<Resizable axis={"x"} initial={windowWidth / 2} min={400}>
+					{({ position: width, separatorProps }) => (
+						<div
+							id="wrapper"
+							style={{
+								display: "flex",
 								height: "100%",
-								width: 8,
-								borderRadius: 0,
-								cursor: "col-resize",
-								zIndex: 100,
+								overflow: "hidden",
 							}}
-						/>
-						<div
-							className="right-block"
-							style={{ width: `calc(100% - ${width}px)`, overflow: "auto" }}
 						>
-							<div className="wmde-markdown-var" />
-							<Box sx={{ p: 4 }} height="100%">
-								<Preview />
-							</Box>
+							<div id="left-block" style={{ width }}>
+								<Editor />
+							</div>
+							<Paper
+								id="splitter"
+								{...separatorProps}
+								sx={{
+									height: "100%",
+									width: 8,
+									borderRadius: 0,
+									cursor: "col-resize",
+									zIndex: 100,
+								}}
+							/>
+							<div
+								className="right-block"
+								style={{ width: `calc(100% - ${width}px)`, overflow: "auto" }}
+							>
+								<Box sx={{ p: 4 }} height="100%">
+									<Preview />
+								</Box>
+							</div>
 						</div>
-					</div>
-				)}
-			</Resizable>
+					)}
+				</Resizable>
+			)}
+			{editorStore.mode === "read" && (
+				<Box sx={{ p: 4, overflow: "auto" }} height="100%">
+					<Preview />
+				</Box>
+			)}
+			{editorStore.mode === "edit" && <Editor />}
 		</Box>
 	);
 }

diff --git a/frontend/src/store/editorSlice.ts b/frontend/src/store/editorSlice.ts
@@ -4,7 +4,7 @@ import { RootState } from "./store";
 import * as yorkie from "yorkie-js-sdk";
 import { YorkieCodeMirrorDocType, YorkieCodeMirrorPresenceType } from "../utils/yorkie/yorkieSync";
 
-export type EditorModeType = "view" | "both" | "read";
+export type EditorModeType = "edit" | "both" | "read";
 export type CodePairDocType = yorkie.Document<
 	YorkieCodeMirrorDocType,
 	YorkieCodeMirrorPresenceType