refactor: improve so moving logic

Author: crydotsnake

features/admin/page/sorting_content_elements_on_page.feature

@@ -51,3 +51,19 @@ Feature: Sorting content elements on a page
         And I add a heading content element with type "h1" and "My Title" content
         And I add a textarea content element with "My body text" content
         Then the move down button of the 2nd content element should be disabled
+
+    @ui @javascript
+    Scenario: Moving a content element down keeps its content when editing an existing page
+        Given there is a page in the store with a textarea content element with "First content" content and a textarea content element with "Second content" content
+        When I want to edit this page
+        And I move the 1st content element down
+        Then the 1st content element should contain "Second content"
+        And the 2nd content element should contain "First content"
+
+    @ui @javascript
+    Scenario: Moving a content element up keeps its content when editing an existing page
+        Given there is a page in the store with a textarea content element with "First content" content and a textarea content element with "Second content" content
+        When I want to edit this page
+        And I move the 2nd content element up
+        Then the 1st content element should contain "Second content"
+        And the 2nd content element should contain "First content"

src/Twig/Component/Trait/ContentElementsCollectionFormComponentTrait.php

@@ -70,10 +70,21 @@ public function moveCollectionItem(
             return;
         }
 
-        $swapKey = $keys[$swapPos];
-        [$data[$index], $data[$swapKey]] = [$data[$swapKey], $data[$index]];
+        $items = array_values($data);
+        [$items[$currentPos], $items[$swapPos]] = [$items[$swapPos], $items[$currentPos]];
+
+        // Re-key the whole collection with fresh, monotonically increasing indices so the
+        // moved rows are rendered with new DOM ids. This forces the Live Component to
+        // re-create them instead of patching them in place, which is required because
+        // stateful widgets (e.g. the WYSIWYG editor) opt out of morphing via
+        // "data-live-ignore" and would otherwise keep their stale content after a move.
+        $nextIndex = $this->provideNewCollectionItemIndex($data);
+        $reordered = [];
+        foreach ($items as $item) {
+            $reordered[$nextIndex++] = $item;
+        }
 
-        $propertyAccessor->setValue($this->formValues, $propertyPath, $data);
+        $propertyAccessor->setValue($this->formValues, $propertyPath, $reordered);
     }
 
     #[LiveAction]

tests/Behat/Context/Setup/PageContext.php

@@ -78,6 +78,27 @@ public function thereIsAPageInTheStoreWithContentElements(string $contentElement
         $this->savePage($page);
     }
 
+    /**
+     * @Given there is a page in the store with a textarea content element with :firstContent content and a textarea content element with :secondContent content
+     */
+    public function thereIsAPageInTheStoreWithTwoTextareaContentElements(string $firstContent, string $secondContent): void
+    {
+        $page = $this->createPage();
+
+        foreach ([$firstContent, $secondContent] as $content) {
+            /** @var ContentConfigurationInterface $contentConfiguration */
+            $contentConfiguration = new ContentConfiguration();
+            $contentConfiguration->setType('textarea');
+            $contentConfiguration->setLocale('en_US');
+            $contentConfiguration->setConfiguration(['textarea' => $content]);
+            $contentConfiguration->setPage($page);
+
+            $page->addContentElement($contentConfiguration);
+        }
+
+        $this->savePage($page);
+    }
+
     /**
      * @Given there is an existing page with :name name
      */

tests/Behat/Context/Ui/Admin/ContentCollectionContext.php

@@ -217,6 +217,17 @@ public function theContentElementAtPositionShouldBeOfType(string $ordinal, strin
         );
     }
 
+    /**
+     * @Then the :ordinal content element should contain :content
+     */
+    public function theContentElementAtPositionShouldContain(string $ordinal, string $content): void
+    {
+        Assert::contains(
+            $this->contentElementsCollectionElement->getContentElementContentAtPosition($this->parseOrdinal($ordinal)),
+            $content,
+        );
+    }
+
     /**
      * @Then the move up button of the :ordinal content element should be disabled
      */

tests/Behat/Element/Admin/ContentElementsCollectionElement.php

@@ -174,6 +174,18 @@ public function getContentElementTypeAtPosition(int $position): string
         return $selectedOption->getText();
     }
 
+    public function getContentElementContentAtPosition(int $position): string
+    {
+        $elements = $this->getContentElements();
+        Assert::keyExists($elements, $position - 1, sprintf('No content element at position %d.', $position));
+
+        // Read the visible WYSIWYG editor content instead of the (morphed) hidden input,
+        // so the assertion reflects what the user actually sees after a move.
+        $editor = $elements[$position - 1]->find('css', 'trix-editor');
+
+        return $editor instanceof NodeElement ? $editor->getText() : $elements[$position - 1]->getText();
+    }
+
     public function insertContentElementAfterPosition(string $type, int $afterPosition): void
     {
         $this->insertContentElementAtDividerIndex($type, $afterPosition);
@@ -223,7 +235,7 @@ private function getSortButton(int $position, string $direction): NodeElement
         $elements = $this->getContentElements();
         Assert::keyExists($elements, $position - 1, sprintf('No content element at position %d.', $position));
 
-        $button = $elements[$position - 1]->find('css', sprintf('[data-sort-direction="%s"]', $direction));
+        $button = $elements[$position - 1]->find('css', sprintf('[data-live-direction-param="%s"]', $direction));
         Assert::notNull($button, sprintf('Sort %s button not found at position %d.', $direction, $position));
 
         return $button;

tests/Behat/Element/Admin/ContentElementsCollectionElementInterface.php

@@ -44,6 +44,8 @@ public function moveContentElementDown(int $position): void;
 
     public function getContentElementTypeAtPosition(int $position): string;
 
+    public function getContentElementContentAtPosition(int $position): string;
+
     public function isContentElementMoveUpButtonDisabled(int $position): bool;
 
     public function isContentElementMoveDownButtonDisabled(int $position): bool;