Added doc preview

frontend/src/components/BackstoryTextField.tsx

@@ -13,7 +13,8 @@ interface BackstoryTextFieldProps {
   value?: string;
   disabled?: boolean;
   placeholder: string;
-  onEnter: (value: string) => void;
+  onEnter?: (value: string) => void;
+  onChange?: (value: string) => void;
   style?: CSSProperties;
 }
 
@@ -23,6 +24,7 @@ const BackstoryTextField = React.forwardRef<BackstoryTextFieldRef, BackstoryText
     disabled = false,
     placeholder,
     onEnter,
+    onChange,
     style,
   } = props;
   const theme = useTheme();
@@ -82,7 +84,7 @@ const BackstoryTextField = React.forwardRef<BackstoryTextFieldRef, BackstoryText
   const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
     if (event.key === 'Enter' && !event.shiftKey) {
       event.preventDefault(); // Prevent newline
-      onEnter(editValue);
+      onEnter && onEnter(editValue);
       setEditValue(''); // Clear textarea
     }
   };
@@ -95,7 +97,7 @@ const BackstoryTextField = React.forwardRef<BackstoryTextFieldRef, BackstoryText
     resize: 'none',
     overflow: 'hidden',
     boxSizing: 'border-box',
-    minHeight: 'calc(1.5rem + 28px)', // lineHeight + padding
+    // minHeight: 'calc(1.5rem + 28px)', // lineHeight + padding
     lineHeight: '1.5',
     borderRadius: '4px',
     fontSize: '16px',
@@ -112,7 +114,7 @@ const BackstoryTextField = React.forwardRef<BackstoryTextFieldRef, BackstoryText
         value={editValue}
         disabled={disabled}
         placeholder={placeholder}
-        onChange={(e) => setEditValue(e.target.value)}
+        onChange={(e) => { setEditValue(e.target.value); onChange && onChange(e.target.value); }}
         onKeyDown={handleKeyDown}
         style={fullStyle}
       />

frontend/src/components/ui/ResumeInfo.tsx

@@ -23,7 +23,9 @@ import {
   Dialog,
   DialogTitle,
   DialogContent,
-  DialogActions
+    DialogActions,
+    Tabs,
+    Tab
 } from '@mui/material';
 import {
   Delete as DeleteIcon,
@@ -37,10 +39,13 @@ import {
   Visibility as VisibilityIcon,
   VisibilityOff as VisibilityOffIcon
 } from '@mui/icons-material';
+import PreviewIcon from '@mui/icons-material/Preview';
+import EditDocumentIcon from '@mui/icons-material/EditDocument';
 import { useAuth } from 'hooks/AuthContext';
 import { useAppState } from 'hooks/GlobalContext';
 import { StyledMarkdown } from 'components/StyledMarkdown';
 import { Resume } from 'types/types';
+import { BackstoryTextField } from 'components/BackstoryTextField';
 
 interface ResumeInfoProps {
   resume: Resume;
@@ -71,6 +76,7 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
   const [editContent, setEditContent] = useState<string>('');
   const [saving, setSaving] = useState<boolean>(false);
   const contentRef = useRef<HTMLDivElement>(null);
+    const [tabValue, setTabValue] = useState("markdown");
 
   useEffect(() => {
     if (resume && resume.id !== activeResume?.id) {
@@ -137,6 +143,10 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
     }).format(date);
   };
 
+    const handleTabChange = (event: React.SyntheticEvent, newValue: string) => {
+        setTabValue(newValue);
+    };
+
   return (
     <Box
       sx={{ 
@@ -334,7 +344,7 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
         onClose={() => setEditDialogOpen(false)}
         maxWidth="lg"
         fullWidth
-        fullScreen={isMobile}
+              fullScreen={true}
       >
         <DialogTitle>
           Edit Resume Content
@@ -342,23 +352,61 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
             Resume for {activeResume.candidate?.fullName || activeResume.candidateId}
           </Typography>
         </DialogTitle>
-        <DialogContent>
+              <DialogContent sx={{ position: "relative", display: "flex", flexDirection: "column", height: "100%" }}>
-          <TextField
+                  <Tabs value={tabValue} onChange={handleTabChange} centered>
-            multiline
+                      <Tab value="markdown" icon={<EditDocumentIcon />} label="Markdown" />
-            fullWidth
+                      <Tab value="preview" icon={<PreviewIcon />} label="Preview" />
-            rows={20}
+                  </Tabs>
-            value={editContent}
+                  <Box sx={{
-            onChange={(e) => setEditContent(e.target.value)}
+                      display: "flex", flexDirection: "column",
-            variant="outlined"
+                      height: "100%", /* Restrict to main-container's height */
-            sx={{ 
+                      width: "100%",
-              mt: 1,
+                      minHeight: 0,/* Prevent flex overflow */
-              '& .MuiInputBase-input': {
+                      //maxHeight: "min-content",
-                fontFamily: 'monospace',
+                      "& > *:not(.Scrollable)": {
-                fontSize: '0.875rem'
+                          flexShrink: 0, /* Prevent shrinking */
-              }
+                      },
-            }}
+                      position: "relative",
-            placeholder="Enter resume content..."
+                      border: "2px solid purple",
-          />
+                  }}>
+
+                      {tabValue === "markdown" &&
+                          <BackstoryTextField
+                              value={editContent}
+                          onChange={(value) => setEditContent(value)}
+                          style={{
+                              position: "relative",
+                              //   maxHeight: "100%",
+                              height: "100%",
+                              width: "100%",
+                              display: "flex",
+                              minHeight: "100%",
+
+                              flexGrow: 1,
+                              flex: 1, /* Take remaining space in some-container */
+                              overflowY: "auto", /* Scroll if content overflows */
+                          }}
+                          placeholder="Enter resume content..."
+                      />
+                      }
+                      {tabValue === "preview" && <>
+                          <StyledMarkdown
+                              sx={{
+                                  p: 2,
+                                  position: "relative",
+                                  maxHeight: "100%",
+                                  width: "100%",
+                                  display: "flex",
+                                  flexGrow: 1,
+                                  flex: 1, /* Take remaining space in some-container */
+                                  overflowY: "auto", /* Scroll if content overflows */
+                              }}
+
+                              content={editContent} />
+                          <Box sx={{ pb: 2 }}></Box></>
+                      }
+                  </Box>
+
         </DialogContent>
         <DialogActions>
           <Button onClick={() => setEditDialogOpen(false)}>