chore: focus on rte on multirow-multicol add row

Author: kevinkim-ogp

packages/frontend/src/components/InputCreator/index.tsx

@@ -18,6 +18,7 @@ export type InputCreatorProps = {
   stepId?: string
   disabled?: boolean
   parentType?: string
+  autoFocus?: boolean
 }
 
 type RawOption = {
@@ -29,7 +30,7 @@ const optionGenerator = (options: RawOption[]): IFieldDropdownOption[] =>
   options?.map(({ name, value }) => ({ label: name as string, value: value }))
 
 export default function InputCreator(props: InputCreatorProps): JSX.Element {
-  const { schema, namePrefix, stepId, disabled, parentType } = props
+  const { schema, namePrefix, stepId, disabled, parentType, autoFocus } = props
 
   const {
     key: name,
@@ -138,6 +139,7 @@ export default function InputCreator(props: InputCreatorProps): JSX.Element {
           tooltipText={tooltipText}
           variableTypes={schema.variableTypes}
           parentType={parentType}
+          autoFocus={autoFocus}
         />
       )
     }

packages/frontend/src/components/MultiCol.tsx/index.tsx

@@ -29,7 +29,8 @@ export default function MultiCol(props: MultiColProps) {
   const isMobile = useBreakpointValue({ base: true, sm: false })
   return (
     <Flex flexDir={isMobile ? 'column' : 'row'} gap={2} alignItems="center">
-      {subFields.map((subF) => {
+      {subFields.map((subF, subFIndex) => {
+        const { type, variables } = subF
         return (
           <div
             key={`${name}.${subF.key}`}
@@ -39,6 +40,7 @@ export default function MultiCol(props: MultiColProps) {
               schema={subF}
               namePrefix={name}
               parentType="multicol"
+              autoFocus={subFIndex === 0 && type === 'string' && variables}
               {...forwardedInputCreatorProps}
             />
           </div>

packages/frontend/src/components/MultiRow/index.tsx

@@ -63,8 +63,16 @@ function MultiRow(props: MultiRowProps): JSX.Element {
   })
 
   const handleAddRow = useCallback(() => {
-    append(newRowDefaultValue)
-  }, [append, newRowDefaultValue])
+    // NOTE: only need to use this flag to focus on the rte
+    // if the first column is a variable-enabled string field
+    const firstColIsRte =
+      subFields?.[0]?.type === 'string' && subFields?.[0]?.variables
+    if (firstColIsRte) {
+      append({ ...newRowDefaultValue, isNew: true })
+    } else {
+      append(newRowDefaultValue)
+    }
+  }, [append, newRowDefaultValue, subFields])
 
   return (
     // Use Controller's defaultValue to introduce 1 blank row by default. We

packages/frontend/src/components/RichTextEditor/index.tsx

@@ -43,6 +43,7 @@ import ImageResize from './ResizableImageExtension'
 import { StepVariable } from './StepVariablePlugin'
 import Suggestions from './Suggestions'
 import {
+  checkAutoFocus,
   genVariableInfoMap,
   getPopoverPlacement,
   substituteOldTemplates,
@@ -92,6 +93,7 @@ interface EditorProps {
   isSingleLine?: boolean
   variableTypes?: TDataOutMetadatumType[]
   parentType?: string
+  autoFocus?: boolean
 }
 const Editor = ({
   onChange,
@@ -103,6 +105,7 @@ const Editor = ({
   isSingleLine,
   variableTypes,
   parentType,
+  autoFocus = false,
 }: EditorProps) => {
   const { priorExecutionSteps } = useContext(StepExecutionsContext)
   const isMobile = useIsMobile()
@@ -171,6 +174,7 @@ const Editor = ({
   const editor = useEditor({
     extensions,
     content,
+    autofocus: autoFocus,
     onUpdate: ({ editor }) => {
       if (editor.isEmpty) {
         // this is when content of the editor is empty
@@ -292,6 +296,7 @@ interface RichTextEditorProps {
   tooltipText?: string
   variableTypes?: TDataOutMetadatumType[]
   parentType?: string
+  autoFocus?: boolean
 }
 const RichTextEditor = ({
   required,
@@ -307,8 +312,21 @@ const RichTextEditor = ({
   tooltipText,
   variableTypes,
   parentType,
+  autoFocus,
 }: RichTextEditorProps) => {
-  const { control } = useFormContext()
+  const { control, getValues } = useFormContext()
+  const { shouldAutoFocus, isNewRow, rowData } = checkAutoFocus(
+    name,
+    getValues,
+    autoFocus,
+  )
+
+  // Clear the isNew flag after focusing
+  useEffect(() => {
+    if (isNewRow && rowData) {
+      delete rowData.isNew
+    }
+  }, [isNewRow, rowData])
 
   return (
     <FormControl flex={1} data-test="text-input-group">
@@ -339,6 +357,7 @@ const RichTextEditor = ({
             isSingleLine={isSingleLine}
             variableTypes={variableTypes}
             parentType={parentType}
+            autoFocus={shouldAutoFocus}
           />
         )}
       />

packages/frontend/src/components/RichTextEditor/utils.ts

@@ -1,3 +1,4 @@
+import { FieldValues, UseFormGetValues } from 'react-hook-form'
 import { PlacementWithLogical } from '@chakra-ui/react'
 import { Editor } from '@tiptap/react'
 import { HTMLElement, Node, parse, TextNode } from 'node-html-parser'
@@ -150,3 +151,15 @@ export function getPopoverPlacement(
   // If there's more space above than below, show the popover above
   return spaceAbove > spaceBelow ? 'top-start' : 'bottom-start'
 }
+
+export const checkAutoFocus = (
+  name: string,
+  getValues: UseFormGetValues<FieldValues>,
+  autoFocusProp?: boolean,
+) => {
+  const pathParts = name.split('.')
+  const fieldParentPath = pathParts.slice(0, -1).join('.')
+  const rowData = getValues(fieldParentPath)
+  const isNewRow = rowData?.isNew
+  return { shouldAutoFocus: isNewRow && autoFocusProp, isNewRow, rowData }
+}