chore: add prop to rte to only select one variable

Author: kevinkim-ogp

packages/backend/src/apps/tiles/actions/update-row/index.ts

@@ -48,6 +48,7 @@ const action: IRawAction = {
         op: 'is_empty',
       },
       variableTypes: ['tile_row_id'],
+      singleVariableSelection: true,
     },
     {
       label: 'Row data',

packages/backend/src/apps/toolbox/actions/for-each/index.ts

@@ -20,6 +20,7 @@ const action: IRawAction = {
       required: true,
       variables: true,
       variableTypes: ['array', 'table'],
+      singleVariableSelection: true,
     },
   ],
 

packages/backend/src/graphql/schema.graphql

@@ -196,6 +196,9 @@ type ActionSubstepArgument {
   addRowButtonText: String
   tooltipText: String
 
+  # Only for string and multiline
+  singleVariableSelection: Boolean
+
   # Only for dropdown
   addNewOption: DropdownAddNewOption
 

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

@@ -137,6 +137,7 @@ export default function InputCreator(props: InputCreatorProps): JSX.Element {
           variableTypes={schema.variableTypes}
           parentType={parentType}
           autoFocus={autoFocus}
+          singleVariableSelection={schema.singleVariableSelection}
         />
       )
     }

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

@@ -47,6 +47,7 @@ import {
   checkAutoFocus,
   genVariableInfoMap,
   getPopoverPlacement,
+  GLOBAL_VARIABLE_REGEX,
   singleLineEditorScroll,
   substituteOldTemplates,
 } from './utils'
@@ -96,6 +97,7 @@ interface EditorProps {
   variableTypes?: TDataOutMetadatumType[]
   parentType?: string
   autoFocus?: boolean
+  singleVariableSelection?: boolean
 }
 const Editor = ({
   onChange,
@@ -107,6 +109,7 @@ const Editor = ({
   isSingleLine,
   variableTypes,
   parentType,
+  singleVariableSelection,
   autoFocus = false,
 }: EditorProps) => {
   const { priorExecutionSteps } = useContext(StepExecutionsContext)
@@ -208,6 +211,12 @@ const Editor = ({
 
   const handleVariableClick = useCallback(
     (variable: Variable) => {
+      if (
+        singleVariableSelection &&
+        editor?.getText().match(GLOBAL_VARIABLE_REGEX)
+      ) {
+        return
+      }
       editor?.commands.insertContent({
         type: StepVariable.name,
         attrs: {
@@ -226,7 +235,7 @@ const Editor = ({
         })
       }
     },
-    [editor, isMulticol],
+    [editor, isMulticol, singleVariableSelection],
   )
 
   const {
@@ -275,7 +284,15 @@ const Editor = ({
                 editable={editable ?? false}
               />
             )}
-            <EditorContent className="editor__content" editor={editor} />
+            <EditorContent
+              className="editor__content"
+              editor={editor}
+              onKeyDown={(e) => {
+                if (singleVariableSelection) {
+                  e.preventDefault()
+                }
+              }}
+            />
             <Portal>
               <PopoverContent
                 w={isMobile ? '100%' : isMulticol ? '55vw' : '100%'}
@@ -318,6 +335,7 @@ interface RichTextEditorProps {
   variableTypes?: TDataOutMetadatumType[]
   parentType?: string
   autoFocus?: boolean
+  singleVariableSelection?: boolean
 }
 const RichTextEditor = ({
   required,
@@ -333,6 +351,7 @@ const RichTextEditor = ({
   variableTypes,
   parentType,
   autoFocus,
+  singleVariableSelection,
 }: RichTextEditorProps) => {
   const { readOnly } = useContext(EditorContext)
   const { control, getValues } = useFormContext()
@@ -379,6 +398,7 @@ const RichTextEditor = ({
             variableTypes={variableTypes}
             parentType={parentType}
             autoFocus={shouldAutoFocus}
+            singleVariableSelection={singleVariableSelection}
           />
         )}
       />

packages/frontend/src/graphql/queries/get-apps.ts

@@ -215,6 +215,7 @@ export const GET_APPS = gql`
               label
               type
             }
+            singleVariableSelection
             # Only for multi-row
             subFields {
               label
@@ -253,6 +254,7 @@ export const GET_APPS = gql`
                   value
                 }
               }
+              singleVariableSelection
             }
           }
         }

packages/types/index.d.ts

@@ -349,6 +349,9 @@ export interface IFieldText extends IBaseField {
 
   // Not applicable if field has variables.
   autoComplete?: AutoCompleteValue
+
+  // To only allow selection of one variable
+  singleVariableSelection?: boolean
 }
 
 export interface IFieldAttachment extends IBaseField {
@@ -364,6 +367,9 @@ export interface IFieldMultiline extends IBaseField {
 
   // Not applicable if field has variables.
   autoComplete?: AutoCompleteValue
+
+  // To only allow selection of one variable
+  singleVariableSelection?: boolean
 }
 
 export interface IFieldMultiSelect extends IBaseField {