Fix missing divider when html collapsed (#2187)

* Use the index (as idx) optional argument to forEach to test position in the array.

* Renaming index to languageIndex and idx to visibleLanguagesIndex

Co-authored-by: Mat Brown <mat.a.brown@gmail.com>

Author: ianplunkett

src/components/EditorsColumn.jsx

@@ -39,52 +39,54 @@ export default function EditorsColumn({
 
   const editors = [];
 
-  visibleLanguages.forEach(({language, index}) => {
-    editors.push(
-      <EditorContainer
-        key={language}
-        language={language}
-        ref={resizableFlexRefs[index]}
-        source={currentProject.sources[language]}
-        style={{flexGrow: resizableFlexGrow.get(index)}}
-        onHide={partial(
-          onComponentHide,
-          currentProject.projectKey,
-          `editor.${language}`,
-        )}
-      >
-        <Editor
-          errors={errors[language].items}
+  visibleLanguages.forEach(
+    ({language, index: languageIndex}, visibleLanguagesIndex) => {
+      editors.push(
+        <EditorContainer
+          key={language}
           language={language}
-          percentageOfHeight={1 / visibleLanguages.length}
-          projectKey={currentProject.projectKey}
-          requestedFocusedLine={requestedFocusedLine}
+          ref={resizableFlexRefs[languageIndex]}
           source={currentProject.sources[language]}
-          textSizeIsLarge={isTextSizeLarge}
-          useCodeMirror={isExperimental}
-          onAutoFormat={onAutoFormat}
-          onInput={handleInputForLanguage(language)}
-          onReady={partial(onEditorReady, language)}
-          onRequestedLineFocused={onRequestedLineFocused}
-          onSave={onSave}
-        />
-      </EditorContainer>,
-    );
-    if (index < visibleLanguages.length - 1) {
-      editors.push(
-        <DraggableCore
-          key={`divider:${language}`}
-          onDrag={partial(onResizableFlexDividerDrag, index)}
+          style={{flexGrow: resizableFlexGrow.get(languageIndex)}}
+          onHide={partial(
+            onComponentHide,
+            currentProject.projectKey,
+            `editor.${language}`,
+          )}
         >
-          <div
-            className={classnames('editors__row-divider', {
-              'editors__row-divider_draggable': isFlexResizingSupported,
-            })}
+          <Editor
+            errors={errors[language].items}
+            language={language}
+            percentageOfHeight={1 / visibleLanguages.length}
+            projectKey={currentProject.projectKey}
+            requestedFocusedLine={requestedFocusedLine}
+            source={currentProject.sources[language]}
+            textSizeIsLarge={isTextSizeLarge}
+            useCodeMirror={isExperimental}
+            onAutoFormat={onAutoFormat}
+            onInput={handleInputForLanguage(language)}
+            onReady={partial(onEditorReady, language)}
+            onRequestedLineFocused={onRequestedLineFocused}
+            onSave={onSave}
           />
-        </DraggableCore>,
+        </EditorContainer>,
       );
-    }
-  });
+      if (visibleLanguagesIndex < visibleLanguages.length - 1) {
+        editors.push(
+          <DraggableCore
+            key={`divider:${language}`}
+            onDrag={partial(onResizableFlexDividerDrag, languageIndex)}
+          >
+            <div
+              className={classnames('editors__row-divider', {
+                'editors__row-divider_draggable': isFlexResizingSupported,
+              })}
+            />
+          </DraggableCore>,
+        );
+      }
+    },
+  );
 
   if (isEmpty(editors)) {
     return null;