text files edit

src/workspaces/officerdev/src/apps/FileBrowser/FileBrowserApp/useFileBrowserApp.ts

@@ -154,8 +154,10 @@ export const useFileBrowserApp = (basePath: string, rootOverride?: string, initi
   // Keyboard shortcuts
   useEffect(() => {
     const handler = (ev: KeyboardEvent) => {
-      const tag = (ev.target as HTMLElement).tagName;
+      const target = ev.target as HTMLElement;
+      const tag = target.tagName;
       if (tag === 'INPUT' || tag === 'TEXTAREA') return;
+      if (target.closest('.monaco-editor')) return;
 
       if (ev.key === 'Escape') {
         if (viewPath) return;

src/workspaces/officerdev/src/apps/FileViewer/FileViewerBody.tsx

@@ -10,9 +10,10 @@ import { CodeRenderer } from './renderers/CodeRenderer';
 import { MarkdownRenderer } from './renderers/MarkdownRenderer';
 import { TextRenderer } from './renderers/TextRenderer';
 import { ScrollToTopButton } from './renderers/ScrollToTopButton';
+import { EditorRenderer } from './renderers/EditorRenderer';
 
 export const FileViewerBody = () => {
-  const { filePath, fileName, root, fileType, content, loading, error, autoPlay } = useFileViewer();
+  const { filePath, fileName, root, fileType, content, loading, error, autoPlay, editing, setContent } = useFileViewer();
   const scrollRef = useRef<HTMLDivElement>(null);
 
   const videoSrc =
@@ -42,6 +43,8 @@ export const FileViewerBody = () => {
         <VideoRenderer src={videoSrc} fileName={fileName} />
       ) : fileType === 'audio' ? (
         <AudioRenderer src={getRawUrl(filePath, root)} fileName={fileName} autoPlay={autoPlay} />
+      ) : content !== null && editing ? (
+        <EditorRenderer content={content} fileName={fileName} filePath={filePath} root={root} onSave={setContent} />
       ) : content !== null ? (
         fileType === 'code' ? (
           <div>

src/workspaces/officerdev/src/apps/FileViewer/FileViewerContext.tsx

@@ -16,6 +16,9 @@ export type FileViewerContextValue = {
   extractAudioLoading: boolean;
   extractLoading: boolean;
   autoPlay: boolean;
+  editing: boolean;
+  setEditing: (editing: boolean) => void;
+  setContent: (content: string) => void;
   handleReadAloud: () => void;
   handleOcr: () => void;
   handleTranscribe: () => void;

src/workspaces/officerdev/src/apps/FileViewer/FileViewerHeader.tsx

@@ -1,4 +1,4 @@
-import { Download, Loader2, Music, Film, Image, FileType2, Volume2, ScanText, FileText, AudioLines, FolderArchive, Save } from 'lucide-react';
+import { Download, Loader2, Music, Film, Image, FileType2, Volume2, ScanText, FileText, AudioLines, FolderArchive, Save, Pencil, Eye } from 'lucide-react';
 import { getIcon } from 'material-file-icons';
 import { getLang } from './file-types';
 import { useFileViewer } from './FileViewerContext';
@@ -22,6 +22,8 @@ export const FileViewerHeader = () => {
     handleDownload,
     handleSaveResult,
     saveResultLoading,
+    editing,
+    setEditing,
   } = useFileViewer();
 
   const headerIcon =
@@ -46,6 +48,15 @@ export const FileViewerHeader = () => {
       <span className="text-[10px] font-mono uppercase tracking-wider shrink-0 opacity-60">
         {fileType === 'code' ? getLang(fileName) : fileType}
       </span>
+      {(fileType === 'markdown' || fileType === 'code' || fileType === 'text') && content && (
+        <button
+          onClick={() => setEditing(!editing)}
+          className="p-1 rounded hover:bg-current/10 transition-colors cursor-pointer"
+          title={editing ? 'View' : 'Edit'}
+        >
+          {editing ? <Eye className="h-3.5 w-3.5" /> : <Pencil className="h-3.5 w-3.5" />}
+        </button>
+      )}
       {(fileType === 'markdown' || fileType === 'code' || fileType === 'text') && content && (
         <button
           onClick={handleReadAloud}

src/workspaces/officerdev/src/apps/FileViewer/FileViewerProvider.tsx

@@ -33,6 +33,7 @@ export const FileViewerProvider = ({
   const [extractAudioLoading, setExtractAudioLoading] = useState(false);
   const [extractLoading, setExtractLoading] = useState(false);
   const [saveResultLoading, setSaveResultLoading] = useState(false);
+  const [editing, setEditing] = useState(false);
   const files = useFilesAPI(root);
   const fileType = getFileType(fileName);
 
@@ -161,6 +162,9 @@ export const FileViewerProvider = ({
         extractAudioLoading,
         extractLoading,
         autoPlay,
+        editing,
+        setEditing,
+        setContent,
         handleReadAloud,
         handleOcr,
         handleTranscribe,

src/workspaces/officerdev/src/apps/FileViewer/renderers/EditorRenderer.tsx

@@ -0,0 +1,72 @@
+import { useCallback, useEffect, useRef } from 'react';
+import Editor, { type OnMount } from '@monaco-editor/react';
+import type { editor as MonacoEditor } from 'monaco-editor';
+import { toast } from 'sonner';
+import { getLanguage } from '../../CodeEditor/language-map';
+import { useFilesAPI } from '../../../hooks/useFilesAPI';
+
+type EditorRendererProps = {
+  content: string;
+  fileName: string;
+  filePath: string;
+  root: string;
+  onSave?: (content: string) => void;
+};
+
+export const EditorRenderer = ({ content, fileName, filePath, root, onSave }: EditorRendererProps) => {
+  const editorRef = useRef<MonacoEditor.IStandaloneCodeEditor | null>(null);
+  const { writeFile } = useFilesAPI(root);
+
+  const handleSave = useCallback(async () => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    const newContent = editor.getValue();
+    try {
+      await writeFile(filePath, newContent);
+      onSave?.(newContent);
+      toast.success('File saved');
+    } catch {
+      toast.error('Failed to save file');
+    }
+  }, [filePath, writeFile, onSave]);
+
+  const handleMount: OnMount = (editor, monaco) => {
+    editorRef.current = editor;
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
+      handleSave();
+    });
+    editor.focus();
+  };
+
+  useEffect(() => {
+    const handler = (ev: KeyboardEvent) => {
+      if ((ev.ctrlKey || ev.metaKey) && ev.key === 's') {
+        ev.preventDefault();
+      }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, []);
+
+  return (
+    <Editor
+      theme="vs-dark"
+      language={getLanguage(fileName)}
+      defaultValue={content}
+      onMount={handleMount}
+      options={{
+        automaticLayout: true,
+        minimap: { enabled: false },
+        fontSize: 14,
+        tabSize: 2,
+        wordWrap: 'on',
+        scrollBeyondLastLine: false,
+        renderWhitespace: 'selection',
+        smoothScrolling: true,
+        cursorBlinking: 'smooth',
+        cursorSmoothCaretAnimation: 'on',
+        padding: { top: 8 },
+      }}
+    />
+  );
+};