-
- {Boolean(toolBarState.show) && (
-
- )}
+ <>
+
+
+
+
+ {Boolean(toolBarState.show) && (
+
+ )}
+
-
+
+
);
}
diff --git a/frontend/src/components/editor/EditorBottomBar.tsx b/frontend/src/components/editor/EditorBottomBar.tsx
new file mode 100644
index 00000000..b3e3d507
--- /dev/null
+++ b/frontend/src/components/editor/EditorBottomBar.tsx
@@ -0,0 +1,74 @@
+import { Button, Menu, MenuItem, Paper } from "@mui/material";
+import { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { CodeKeyType, selectConfig, setCodeKeyType } from "../../store/configSlice";
+
+export const BOTTOM_BAR_HEIGHT = 25;
+
+interface EditorBottomBarProps {
+ width: number | string;
+}
+
+function EditorBottomBar(props: EditorBottomBarProps) {
+ const { width } = props;
+ const dispatch = useDispatch();
+ const configStore = useSelector(selectConfig);
+ const [anchorEl, setAnchorEl] = useState
(null);
+ const open = Boolean(anchorEl);
+
+ const handleOpen = (event: React.MouseEvent) => {
+ setAnchorEl(event.currentTarget);
+ };
+
+ const handleClose = () => {
+ setAnchorEl(null);
+ };
+
+ const handleChangeCodeKey = (newKeyCode: CodeKeyType) => {
+ dispatch(setCodeKeyType(newKeyCode));
+ handleClose();
+ };
+
+ return (
+
+
+
+
+ );
+}
+
+export default EditorBottomBar;
diff --git a/frontend/src/components/editor/Preview.tsx b/frontend/src/components/editor/Preview.tsx
index 6e1d493b..c9d7a3bc 100644
--- a/frontend/src/components/editor/Preview.tsx
+++ b/frontend/src/components/editor/Preview.tsx
@@ -6,8 +6,8 @@ import { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import rehypeExternalLinks from "rehype-external-links";
import rehypeKatex from "rehype-katex";
-import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
import { getCodeString } from "rehype-rewrite";
+import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
import remarkMath from "remark-math";
import { useCurrentTheme } from "../../hooks/useCurrentTheme";
import { selectEditor } from "../../store/editorSlice";
diff --git a/frontend/src/components/headers/DocumentHeader.tsx b/frontend/src/components/headers/DocumentHeader.tsx
index 75f014b4..89e86769 100644
--- a/frontend/src/components/headers/DocumentHeader.tsx
+++ b/frontend/src/components/headers/DocumentHeader.tsx
@@ -18,6 +18,7 @@ import { useNavigate } from "react-router-dom";
import { useUserPresence } from "../../hooks/useUserPresence";
import { EditorModeType, selectEditor, setMode } from "../../store/editorSlice";
import { selectWorkspace } from "../../store/workspaceSlice";
+import { ShareRole } from "../../utils/share";
import DownloadMenu from "../common/DownloadMenu";
import ShareButton from "../common/ShareButton";
import ThemeButton from "../common/ThemeButton";
@@ -31,8 +32,8 @@ function DocumentHeader() {
const { presenceList } = useUserPresence(editorState.doc);
useEffect(() => {
- if (editorState.shareRole === "READ") {
- dispatch(setMode("read"));
+ if (editorState.shareRole === ShareRole.READ) {
+ dispatch(setMode(EditorModeType.READ));
}
}, [dispatch, editorState.shareRole]);
@@ -58,7 +59,7 @@ function DocumentHeader() {
)}
- {editorState.shareRole !== "READ" && (
+ {editorState.shareRole !== ShareRole.READ && (
{
- dispatch(setTheme(themeMode == "light" ? "dark" : "light"));
+ dispatch(setTheme(themeMode == ThemeType.LIGHT ? ThemeType.DARK : ThemeType.LIGHT));
};
return (
diff --git a/frontend/src/pages/workspace/document/share/Index.tsx b/frontend/src/pages/workspace/document/share/Index.tsx
index 365da099..17132416 100644
--- a/frontend/src/pages/workspace/document/share/Index.tsx
+++ b/frontend/src/pages/workspace/document/share/Index.tsx
@@ -5,8 +5,15 @@ import { Navigate, useLocation, useSearchParams } from "react-router-dom";
import DocumentView from "../../../../components/editor/DocumentView";
import { useGetDocumentBySharingTokenQuery } from "../../../../hooks/api/document";
import { useYorkieDocument } from "../../../../hooks/useYorkieDocument";
-import { setClient, setDoc, setMode, setShareRole } from "../../../../store/editorSlice";
+import {
+ EditorModeType,
+ setClient,
+ setDoc,
+ setMode,
+ setShareRole,
+} from "../../../../store/editorSlice";
import { selectUser } from "../../../../store/userSlice";
+import { ShareRole } from "../../../../utils/share";
function DocumentShareIndex() {
const dispatch = useDispatch();
@@ -25,8 +32,8 @@ function DocumentShareIndex() {
dispatch(setShareRole(sharedDocument.role));
- if (sharedDocument.role === "READ") {
- dispatch(setMode("read"));
+ if (sharedDocument.role === ShareRole.READ) {
+ dispatch(setMode(EditorModeType.READ));
}
}, [dispatch, sharedDocument?.role]);
diff --git a/frontend/src/store/configSlice.ts b/frontend/src/store/configSlice.ts
index a7eca082..f4f40a09 100644
--- a/frontend/src/store/configSlice.ts
+++ b/frontend/src/store/configSlice.ts
@@ -2,20 +2,31 @@ import { createSlice } from "@reduxjs/toolkit";
import type { PayloadAction } from "@reduxjs/toolkit";
import { RootState } from "./store";
-type ThemeType = "default" | "dark" | "light";
+export enum ThemeType {
+ DEFAULT = "default",
+ DARK = "dark",
+ LIGHT = "light",
+}
+
+export enum CodeKeyType {
+ SUBLIME = "sublime",
+ VIM = "vim",
+}
export interface ConfigState {
theme: ThemeType;
drawerOpen: boolean;
+ codeKey: CodeKeyType;
}
const initialState: ConfigState = {
- theme: "default",
+ theme: ThemeType.DEFAULT,
drawerOpen: true,
+ codeKey: CodeKeyType.SUBLIME,
};
export const configSlice = createSlice({
- name: "editor",
+ name: "config",
initialState,
reducers: {
setTheme: (state, action: PayloadAction) => {
@@ -24,10 +35,13 @@ export const configSlice = createSlice({
setDrawerOpen: (state, action: PayloadAction) => {
state.drawerOpen = action.payload;
},
+ setCodeKeyType: (state, action: PayloadAction) => {
+ state.codeKey = action.payload;
+ },
},
});
-export const { setTheme, setDrawerOpen } = configSlice.actions;
+export const { setTheme, setDrawerOpen, setCodeKeyType } = configSlice.actions;
export const selectConfig = (state: RootState) => state.config;
diff --git a/frontend/src/store/editorSlice.ts b/frontend/src/store/editorSlice.ts
index c6d7ee4f..b4652f32 100644
--- a/frontend/src/store/editorSlice.ts
+++ b/frontend/src/store/editorSlice.ts
@@ -1,12 +1,17 @@
-import { createSlice } from "@reduxjs/toolkit";
import type { PayloadAction } from "@reduxjs/toolkit";
-import { RootState } from "./store";
+import { createSlice } from "@reduxjs/toolkit";
+import { EditorView } from "codemirror";
import * as yorkie from "yorkie-js-sdk";
-import { YorkieCodeMirrorDocType, YorkieCodeMirrorPresenceType } from "../utils/yorkie/yorkieSync";
import { ShareRole } from "../utils/share";
-import { EditorView } from "codemirror";
+import { YorkieCodeMirrorDocType, YorkieCodeMirrorPresenceType } from "../utils/yorkie/yorkieSync";
+import { RootState } from "./store";
+
+export enum EditorModeType {
+ EDIT = "edit",
+ BOTH = "both",
+ READ = "read",
+}
-export type EditorModeType = "edit" | "both" | "read";
export type CodePairDocType = yorkie.Document<
YorkieCodeMirrorDocType,
YorkieCodeMirrorPresenceType
@@ -21,7 +26,7 @@ export interface EditorState {
}
const initialState: EditorState = {
- mode: "both",
+ mode: EditorModeType.BOTH,
shareRole: null,
doc: null,
client: null,
@@ -50,7 +55,7 @@ export const editorSlice = createSlice({
},
});
-export const { setMode, setDoc, setClient, setShareRole, setCmView } = editorSlice.actions;
+export const { setMode, setShareRole, setDoc, setClient, setCmView } = editorSlice.actions;
export const selectEditor = (state: RootState) => state.editor;