chore: handle variables from steps that were reordered (#1207)

## TL;DR
Fix UI issues when reordering steps:
* Ensure variables are shown properly in the RTE when steps are reordered
* Show the `Update this step with the latest data` warning when variable no longer exists after steps are reordered

## How to test?
Use variables in a step, reorder the step
- [ ] Shows `Update this step with the latest data` if the variable the step is from is now after the step it was used in
- [ ] RTE should show the empty variable pill
Revert the ordering of the steps
- [ ] Should no longer show `Update this step with the latest data`
- [ ] RTE should show the valid variable pill

## Screenshot

[Screen Recording 2025-09-12 at 5.04.06 PM.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.dev/user-attachments/thumbnails/5317a820-6d92-49b6-b4a0-961559ffc611.mov" />](https://app.graphite.dev/user-attachments/video/5317a820-6d92-49b6-b4a0-961559ffc611.mov)

Author: kevinkim-ogp

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

@@ -153,12 +153,7 @@ export default function FlowStep(
   const shouldShowDragHandle =
     !readOnly && !isTrigger && !isMobile && !isIfThenStep && allowReorder
 
-  const headerWidth = getFlowStepHeaderWidth(
-    isDrawerOpen,
-    isMobile,
-    isNested,
-    shouldShowDragHandle,
-  )
+  const headerWidth = getFlowStepHeaderWidth(isDrawerOpen, isMobile, isNested)
 
   // generate help message only if template config exists
   const stepAppEventKey = `${step?.appKey}_${step?.key}`

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

@@ -217,6 +217,25 @@ const Editor = ({
     editor?.setOptions({ editable })
   }, [editable, editor])
 
+  // NOTE: we force a re-render editor content when variable info changes (e.g., after step reorder)
+  // to ensure that the variable shown in the RTE is updated
+  useEffect(() => {
+    if (!editor || !content) {
+      return
+    }
+
+    // Get current editor content
+    const currentContent = editor.getHTML()
+
+    // Re-substitute templates with updated variable info
+    const updatedContent = substituteOldTemplates(content, varInfo)
+
+    // Only update if content has actually changed
+    if (currentContent !== updatedContent) {
+      editor.commands.setContent(updatedContent)
+    }
+  }, [editor, content, varInfo])
+
   const handleVariableClick = useCallback(
     (variable: Variable) => {
       // if the selection is a node, means the user clicked on a variable

packages/frontend/src/helpers/editor.ts

@@ -19,7 +19,6 @@ export const getFlowStepHeaderWidth = (
   isDrawerOpen: boolean,
   isMobile?: boolean,
   isNested?: boolean,
-  shouldShowDragHandle?: boolean,
 ) => {
   if (isDrawerOpen) {
     if (isMobile) {
@@ -33,9 +32,7 @@ export const getFlowStepHeaderWidth = (
   }
 
   return isNested
-    ? shouldShowDragHandle
-      ? 'full'
-      : 'calc(100% - 16px)' // 16px is the width of the drag handle
+    ? 'calc(100% - 16px)' // 16px is the width of the drag handle
     : '600px'
 }
 

packages/frontend/src/helpers/validateStepParams.ts

@@ -67,7 +67,11 @@ export const validateStepParams = (
 
   const shouldTestStepAgain = hasMissingStepReference(
     filteredParams,
-    new Set(testExecutionSteps.map((ts) => ts.stepId)),
+    new Set(
+      testExecutionSteps
+        .filter((ts) => ts.step.position < step.position)
+        .map((ts) => ts.stepId),
+    ),
   )
 
   return {