add text highlighting for draft section

microsoft · Jul 8, 2024 · 0fc4d9f · 0fc4d9f
1 parent 2b6da58
commit 0fc4d9f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 16 deletions.
diff --git a/frontend/src/components/DraftCards/SectionCard.tsx b/frontend/src/components/DraftCards/SectionCard.tsx
@@ -43,14 +43,6 @@ const useStyles = makeStyles({
         // margin top and bottom
         margin: '0.5rem 0',
         padding: '0.5rem',
-
-        // make text selectable
-        userSelect: 'text',
-
-        // highlight color
-        '&::selection': {
-            backgroundColor: '#FFD6A5',
-        }
     },
 
     popoverGenerateButton: {
@@ -80,10 +72,9 @@ const useStyles = makeStyles({
     sectionContentTextarea: {
         width: '100%', 
         height: '100%',
+        padding: '0.5rem',
 
-        // make text selectable
-        userSelect: 'text',
-
+        // selection
         '&::selection': {
             backgroundColor: '#FFD6A5',
         }
@@ -109,10 +100,10 @@ const SectionCard = ({ sectionIdx }: SectionCardProps) => {
     async function fetchSectionContent(sectionTitle: string, sectionDescription: string) {
         setIsLoading(true)
         const sectionGenerateRequest: SectionGenerateRequest = { sectionTitle, sectionDescription }
-        const response = await sectionGenerate(sectionGenerateRequest)
-
 
+        const response = await sectionGenerate(sectionGenerateRequest)
         const responseBody = await response.json()
+
         const updatedSection: Section = { title: sectionTitle, description: sectionDescription, content: responseBody.section_content }
         appStateContext?.dispatch({ type: 'UPDATE_SECTION', payload: { sectionIdx: sectionIdx, section: updatedSection } })
 
@@ -184,12 +175,14 @@ const SectionCard = ({ sectionIdx }: SectionCardProps) => {
                         appearance="outline"
                         size="large"
                         defaultValue={sectionContent}
+
                         onChange={(e, data) => {
                             const updatedSection: Section = { title: sectionTitle, description: sectionDescription, content: data.value || '' }
                             appStateContext?.dispatch({ type: 'UPDATE_SECTION', payload: { sectionIdx: sectionIdx, section: updatedSection } })
                         }}
 
-                        className={classes.sectionContentTextarea}
+                        textarea={{ className: classes.sectionContentTextarea }}
+                        style={{ width: '100%', height: '100%' }}
                     />
                 )
             }
@@ -198,4 +191,4 @@ const SectionCard = ({ sectionIdx }: SectionCardProps) => {
     )
 }
 
-export default SectionCard
+export default SectionCard
diff --git a/frontend/src/components/DraftCards/TitleCard.tsx b/frontend/src/components/DraftCards/TitleCard.tsx
@@ -16,4 +16,4 @@ const TitleCard = () => {
     )
 }
 
-export default TitleCard
+export default TitleCard
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,4 +16,4 @@ const TitleCard = () => { @@
         )
     }
-    export default TitleCard
+    export default TitleCard