feat(editor): add markdown preview toggle

web/src/components/MemoEditor/components/EditorToolbar.tsx

@@ -1,3 +1,4 @@
+import { Eye, EyeOff } from "lucide-react";
 import type { FC } from "react";
 import { Button } from "@/components/ui/button";
 import { validationService } from "../services";
@@ -11,6 +12,7 @@ export const EditorToolbar: FC<EditorToolbarProps> = ({ onSave, onCancel, memoNa
   const { valid } = validationService.canSave(state);
 
   const isSaving = state.ui.isLoading.saving;
+  const is_preview_mode = state.ui.isPreviewMode;
 
   const handleLocationChange = (location: typeof state.metadata.location) => {
     dispatch(actions.setMetadata({ location }));
@@ -20,20 +22,27 @@ export const EditorToolbar: FC<EditorToolbarProps> = ({ onSave, onCancel, memoNa
     dispatch(actions.toggleFocusMode());
   };
 
+  const handleTogglePreviewMode = () => {
+    dispatch(actions.togglePreviewMode());
+  };
+
   const handleVisibilityChange = (visibility: typeof state.metadata.visibility) => {
     dispatch(actions.setMetadata({ visibility }));
   };
 
   return (
     <div className="w-full flex flex-row justify-between items-center mb-2">
-      <div className="flex flex-row justify-start items-center">
+      <div className="flex flex-row justify-start items-center gap-1">
         <InsertMenu
           isUploading={state.ui.isLoading.uploading}
           location={state.metadata.location}
           onLocationChange={handleLocationChange}
           onToggleFocusMode={handleToggleFocusMode}
           memoName={memoName}
         />
+        <Button variant="ghost" size="sm" onClick={handleTogglePreviewMode} title={is_preview_mode ? "Edit" : "Preview"}>
+          {is_preview_mode ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+        </Button>
       </div>
 
       <div className="flex flex-row justify-end items-center gap-2">

web/src/components/MemoEditor/hooks/useKeyboard.ts

@@ -3,15 +3,22 @@ import type { EditorRefActions } from "../Editor";
 
 interface UseKeyboardOptions {
   onSave: () => void;
+  onTogglePreview?: () => void;
 }
 
 export const useKeyboard = (_editorRef: React.RefObject<EditorRefActions | null>, options: UseKeyboardOptions) => {
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
+      // Cmd/Ctrl + Enter to save
       if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
         event.preventDefault();
         options.onSave();
       }
+      // Cmd/Ctrl + Shift + P to toggle preview
+      if ((event.metaKey || event.ctrlKey) && event.shiftKey && event.key === "p") {
+        event.preventDefault();
+        options.onTogglePreview?.();
+      }
     };
 
     window.addEventListener("keydown", handleKeyDown);

web/src/components/MemoEditor/index.tsx

@@ -1,6 +1,8 @@
 import { useQueryClient } from "@tanstack/react-query";
 import { useRef } from "react";
 import { toast } from "react-hot-toast";
+import MemoContent from "@/components/MemoContent";
+import { MemoViewContext } from "@/components/MemoView/MemoViewContext";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import { memoKeys } from "@/hooks/useMemoQueries";
 import { userKeys } from "@/hooks/useUserQueries";
@@ -62,7 +64,11 @@ const MemoEditorImpl: React.FC<MemoEditorProps> = ({
     dispatch(actions.toggleFocusMode());
   };
 
-  useKeyboard(editorRef, { onSave: handleSave });
+  const handleTogglePreviewMode = () => {
+    dispatch(actions.togglePreviewMode());
+  };
+
+  useKeyboard(editorRef, { onSave: handleSave, onTogglePreview: handleTogglePreviewMode });
 
   async function handleSave() {
     // Validate before saving
@@ -136,7 +142,26 @@ const MemoEditorImpl: React.FC<MemoEditorProps> = ({
         <FocusModeExitButton isActive={state.ui.isFocusMode} onToggle={handleToggleFocusMode} title={t("editor.exit-focus-mode")} />
 
         {/* Editor content grows to fill available space in focus mode */}
-        <EditorContent ref={editorRef} placeholder={placeholder} autoFocus={autoFocus} />
+        {state.ui.isPreviewMode ? (
+          <div className="w-full flex-1 overflow-auto py-2">
+            <MemoViewContext.Provider
+              value={{
+                memo: { relations: [] } as never,
+                creator: undefined,
+                currentUser: undefined,
+                parentPage: "",
+                isArchived: false,
+                readonly: true,
+                showNSFWContent: false,
+                nsfw: false,
+              }}
+            >
+              <MemoContent content={state.content} />
+            </MemoViewContext.Provider>
+          </div>
+        ) : (
+          <EditorContent ref={editorRef} placeholder={placeholder} autoFocus={autoFocus} />
+        )}
 
         {/* Metadata and toolbar grouped together at bottom */}
         <div className="w-full flex flex-col gap-2">

web/src/components/MemoEditor/services/memoService.ts

@@ -135,6 +135,7 @@ export const memoService = {
       },
       ui: {
         isFocusMode: false,
+        isPreviewMode: false,
         isLoading: {
           saving: false,
           uploading: false,

web/src/components/MemoEditor/state/actions.ts

@@ -57,6 +57,10 @@ export const editorActions = {
     type: "TOGGLE_FOCUS_MODE",
   }),
 
+  togglePreviewMode: (): EditorAction => ({
+    type: "TOGGLE_PREVIEW_MODE",
+  }),
+
   setLoading: (key: LoadingKey, value: boolean): EditorAction => ({
     type: "SET_LOADING",
     payload: { key, value },

web/src/components/MemoEditor/state/reducer.ts

@@ -89,6 +89,15 @@ export function editorReducer(state: EditorState, action: EditorAction): EditorS
         },
       };
 
+    case "TOGGLE_PREVIEW_MODE":
+      return {
+        ...state,
+        ui: {
+          ...state.ui,
+          isPreviewMode: !state.ui.isPreviewMode,
+        },
+      };
+
     case "SET_LOADING":
       return {
         ...state,

web/src/components/MemoEditor/state/types.ts

@@ -15,6 +15,7 @@ export interface EditorState {
   };
   ui: {
     isFocusMode: boolean;
+    isPreviewMode: boolean;
     isLoading: {
       saving: boolean;
       uploading: boolean;
@@ -42,6 +43,7 @@ export type EditorAction =
   | { type: "REMOVE_LOCAL_FILE"; payload: string }
   | { type: "CLEAR_LOCAL_FILES" }
   | { type: "TOGGLE_FOCUS_MODE" }
+  | { type: "TOGGLE_PREVIEW_MODE" }
   | { type: "SET_LOADING"; payload: { key: LoadingKey; value: boolean } }
   | { type: "SET_DRAGGING"; payload: boolean }
   | { type: "SET_COMPOSING"; payload: boolean }
@@ -57,6 +59,7 @@ export const initialState: EditorState = {
   },
   ui: {
     isFocusMode: false,
+    isPreviewMode: false,
     isLoading: {
       saving: false,
       uploading: false,