diff --git a/features/admin/page/inserting_content_elements_on_page.feature b/features/admin/page/inserting_content_elements_on_page.feature new file mode 100644 index 00000000..3154617d --- /dev/null +++ b/features/admin/page/inserting_content_elements_on_page.feature @@ -0,0 +1,35 @@ +@managing_pages +Feature: Inserting content elements between existing elements on a page + In order to manage the structure of content on a page + As an Administrator + I want to be able to insert content elements between existing ones + + Background: + Given I am logged in as an administrator + And the store operates on a single channel in "United States" + + @ui @javascript + Scenario: Inserting a content element between two existing elements + When I go to the create page page + And I fill the code with "insert-test-page" + And I fill the name with "Insert Test Page" + And I fill the slug with "insert-test-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 + When I insert a textarea content element after the 1st content element + Then the 1st content element should be a "Heading" element + And the 2nd content element should be a "Textarea" element + And the 3rd content element should be a "Textarea" element + + @ui @javascript + Scenario: Inserting a content element before the first element + When I go to the create page page + And I fill the code with "insert-test-page" + And I fill the name with "Insert Test Page" + And I fill the slug with "insert-test-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 + When I insert a textarea content element before the 1st content element + Then the 1st content element should be a "Textarea" element + And the 2nd content element should be a "Heading" element + And the 3rd content element should be a "Textarea" element diff --git a/features/admin/page/sorting_content_elements_on_page.feature b/features/admin/page/sorting_content_elements_on_page.feature index aaac0dfb..b971d4c9 100644 --- a/features/admin/page/sorting_content_elements_on_page.feature +++ b/features/admin/page/sorting_content_elements_on_page.feature @@ -51,3 +51,35 @@ 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" + + @ui @javascript @quill + Scenario: Moving a content element down keeps its content with the Quill editor + 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 @quill + Scenario: Moving a content element up keeps its content with the Quill editor + 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" diff --git a/src/Twig/Component/Trait/ContentElementsCollectionFormComponentTrait.php b/src/Twig/Component/Trait/ContentElementsCollectionFormComponentTrait.php index 5b189e56..8bba9eeb 100644 --- a/src/Twig/Component/Trait/ContentElementsCollectionFormComponentTrait.php +++ b/src/Twig/Component/Trait/ContentElementsCollectionFormComponentTrait.php @@ -70,10 +70,28 @@ 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]]; + + // Give fresh keys to the two moved rows only, while keeping the visual (insertion) + // order. New keys mean new DOM ids, so the Live Component re-creates exactly those + // two rows instead of patching them in place. This keeps stateful WYSIWYG widgets + // correct regardless of their morphing strategy: Trix opts out of morphing via + // "data-live-ignore", while Quill builds its own DOM the server never renders - in + // both cases an in-place patch would leave stale or corrupted content. Re-creating + // the row triggers the editor's disconnect()/connect() cycle, which is the path it + // is built to support. Untouched rows keep their keys (and initialized editors). + $keys = array_keys($data); + $freshIndex = $this->provideNewCollectionItemIndex($data); + $keys[$currentPos] = $freshIndex; + $keys[$swapPos] = $freshIndex + 1; + + $reordered = []; + foreach ($items as $position => $item) { + $reordered[$keys[$position]] = $item; + } - $propertyAccessor->setValue($this->formValues, $propertyPath, $data); + $propertyAccessor->setValue($this->formValues, $propertyPath, $reordered); } #[LiveAction] @@ -88,6 +106,43 @@ public function applyContentTemplate(#[LiveArg] string $localeCode): void $this->populateElements($localeCode, $template); } + #[LiveAction] + public function insertCollectionItem( + PropertyAccessorInterface $propertyAccessor, + #[LiveArg] + string $name, + #[LiveArg] + ?string $type = null, + #[LiveArg] + ?int $insertAfterIndex = null, + ): void { + $propertyPath = $this->fieldNameToPropertyPath($name, $this->formName ?? ''); + $data = $propertyAccessor->getValue($this->formValues, $propertyPath); + + if (!\is_array($data)) { + $data = []; + } + + // Do not sort by key here: the collection is rendered in insertion order, not key + // order, and moveCollectionItem() intentionally produces non-monotonic keys. Sorting + // would scramble the visual order after a move. array_values() preserves it. + $values = array_values($data); + $newItem = null === $type ? [] : ['type' => $type]; + + if (null === $insertAfterIndex) { + $values[] = $newItem; + } elseif ($insertAfterIndex < 0) { + array_unshift($values, $newItem); + } else { + $keys = array_keys($data); + $pos = array_search($insertAfterIndex, $keys, true); + $insertPosition = false !== $pos ? $pos + 1 : count($values); + array_splice($values, $insertPosition, 0, [$newItem]); + } + + $propertyAccessor->setValue($this->formValues, $propertyPath, $values); + } + /** @param TemplateRepositoryInterface $templateRepository */ protected function initializeTemplateRepository(TemplateRepositoryInterface $templateRepository): void { diff --git a/templates/admin/macros/insert_element_divider.html.twig b/templates/admin/macros/insert_element_divider.html.twig new file mode 100644 index 00000000..2e84df50 --- /dev/null +++ b/templates/admin/macros/insert_element_divider.html.twig @@ -0,0 +1,21 @@ +{% macro insert_element_divider(collection_types, collection_name, insert_after_index) %} +
+
+
+ +
    + {%- for type, typeLabel in collection_types -%} +
  • + +
    • + {%- endfor -%} +
+
+
+
+{% endmacro %} diff --git a/templates/admin/shared/component_elements/form_theme.html.twig b/templates/admin/shared/component_elements/form_theme.html.twig index 1be47c66..87a28c89 100644 --- a/templates/admin/shared/component_elements/form_theme.html.twig +++ b/templates/admin/shared/component_elements/form_theme.html.twig @@ -1,7 +1,24 @@ {% extends '@SyliusAdmin/shared/form_theme.html.twig' %} {%- block live_collection_widget -%} - {{ block('form_widget') }} + {%- import '@SyliusCmsPlugin/admin/macros/insert_element_divider.html.twig' as InsertElementButton -%} + + {%- set collection_types = button_add is defined ? button_add.vars.types : {} -%} + {%- set collection_name = button_add is defined ? button_add.vars.attr['data-live-name-param'] : '' -%} + +
+ {%- for child in form -%} + {%- if loop.first and collection_types is not empty -%} + {{ InsertElementButton.insert_element_divider(collection_types, collection_name, -1) }} + {%- endif -%} + + {{ form_row(child) }} + + {%- if not loop.last and collection_types is not empty -%} + {{ InsertElementButton.insert_element_divider(collection_types, collection_name, child.vars.name) }} + {%- endif -%} + {%- endfor -%} +
{%- endblock live_collection_widget -%} {%- block live_collection_entry_row -%} @@ -57,12 +74,17 @@ {% block add_button_row %} {% if types is not empty %} -
- +
+
    {% for type, label in types %}
  • -
    • diff --git a/tests/Behat/Context/Setup/PageContext.php b/tests/Behat/Context/Setup/PageContext.php index f3d0d813..44632ba0 100755 --- a/tests/Behat/Context/Setup/PageContext.php +++ b/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 */ diff --git a/tests/Behat/Context/Ui/Admin/ContentCollectionContext.php b/tests/Behat/Context/Ui/Admin/ContentCollectionContext.php index 58f200de..b89c0fad 100644 --- a/tests/Behat/Context/Ui/Admin/ContentCollectionContext.php +++ b/tests/Behat/Context/Ui/Admin/ContentCollectionContext.php @@ -206,22 +206,6 @@ public function iShouldNotSeeContentElementInTheContentElementsSection(string $c Assert::false($this->contentElementsCollectionElement->hasContentElement($contentElement)); } - /** - * @When I move the :ordinal content element up - */ - public function iMoveTheContentElementUp(string $ordinal): void - { - $this->contentElementsCollectionElement->moveContentElementUp($this->parseOrdinal($ordinal)); - } - - /** - * @When I move the :ordinal content element down - */ - public function iMoveTheContentElementDown(string $ordinal): void - { - $this->contentElementsCollectionElement->moveContentElementDown($this->parseOrdinal($ordinal)); - } - /** * @Then the :ordinal content element should be a :type element */ @@ -233,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 */ @@ -253,6 +248,44 @@ public function theMoveDownButtonOfTheContentElementShouldBeDisabled(string $ord ); } + /** + * @When I insert a textarea content element after the :ordinal content element + */ + public function iInsertATextareaContentElementAfterTheContentElement(string $ordinal): void + { + $this->contentElementsCollectionElement->insertContentElementAfterPosition( + TextareaContentElementType::TYPE, + $this->parseOrdinal($ordinal), + ); + } + + /** + * @When I insert a textarea content element before the :ordinal content element + */ + public function iInsertATextareaContentElementBeforeTheContentElement(string $ordinal): void + { + $this->contentElementsCollectionElement->insertContentElementBeforePosition( + TextareaContentElementType::TYPE, + $this->parseOrdinal($ordinal), + ); + } + + /** + * @When I move the :ordinal content element up + */ + public function iMoveTheContentElementUp(string $ordinal): void + { + $this->contentElementsCollectionElement->moveContentElementUp($this->parseOrdinal($ordinal)); + } + + /** + * @When I move the :ordinal content element down + */ + public function iMoveTheContentElementDown(string $ordinal): void + { + $this->contentElementsCollectionElement->moveContentElementDown($this->parseOrdinal($ordinal)); + } + private function parseOrdinal(string $ordinal): int { return (int) preg_replace('/\D/', '', $ordinal); diff --git a/tests/Behat/Element/Admin/ContentElementsCollectionElement.php b/tests/Behat/Element/Admin/ContentElementsCollectionElement.php index 20f72132..70fd446c 100644 --- a/tests/Behat/Element/Admin/ContentElementsCollectionElement.php +++ b/tests/Behat/Element/Admin/ContentElementsCollectionElement.php @@ -161,12 +161,8 @@ public function moveContentElementUp(int $position): void { $button = $this->getSortButton($position, 'up'); $button->click(); - } - public function moveContentElementDown(int $position): void - { - $button = $this->getSortButton($position, 'down'); - $button->click(); + $this->waitForFormUpdate(); } public function getContentElementTypeAtPosition(int $position): string @@ -180,6 +176,39 @@ 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. Both supported + // editors render the content into their own element: Trix into , Quill + // into ".ql-editor". + $element = $elements[$position - 1]; + $editor = $element->find('css', 'trix-editor') ?? $element->find('css', '.ql-editor'); + + return $editor instanceof NodeElement ? $editor->getText() : $element->getText(); + } + + public function insertContentElementAfterPosition(string $type, int $afterPosition): void + { + $this->insertContentElementAtDividerIndex($type, $afterPosition); + } + + public function insertContentElementBeforePosition(string $type, int $beforePosition): void + { + $this->insertContentElementAtDividerIndex($type, $beforePosition - 1); + } + + public function moveContentElementDown(int $position): void + { + $button = $this->getSortButton($position, 'down'); + $button->click(); + + $this->waitForFormUpdate(); + } + public function isContentElementMoveUpButtonDisabled(int $position): bool { return $this->getSortButton($position, 'up')->hasAttribute('disabled'); @@ -190,6 +219,24 @@ public function isContentElementMoveDownButtonDisabled(int $position): bool return $this->getSortButton($position, 'down')->hasAttribute('disabled'); } + private function insertContentElementAtDividerIndex(string $type, int $dividerIndex): void + { + $container = $this->getElement('elements_container', ['%locale%' => $this->defaultLocaleCode]); + $dividers = $container->findAll('css', '[data-test-insert-element-divider]'); + + Assert::keyExists($dividers, $dividerIndex, sprintf('No insert element divider at index %d.', $dividerIndex)); + + $toggleButton = $dividers[$dividerIndex]->find('css', '[data-bs-toggle="dropdown"]'); + Assert::isInstanceOf($toggleButton, NodeElement::class, 'Dropdown toggle not found in insert element divider.'); + $toggleButton->click(); + + $insertButton = $dividers[$dividerIndex]->find('css', sprintf('[data-test-insert-%s]', $type)); + Assert::isInstanceOf($insertButton, NodeElement::class, sprintf('Insert button for type "%s" not found in divider.', $type)); + $insertButton->click(); + + $this->waitForFormUpdate(); + } + private function getSortButton(int $position, string $direction): NodeElement { $elements = $this->getContentElements(); diff --git a/tests/Behat/Element/Admin/ContentElementsCollectionElementInterface.php b/tests/Behat/Element/Admin/ContentElementsCollectionElementInterface.php index cb035781..bf81a399 100644 --- a/tests/Behat/Element/Admin/ContentElementsCollectionElementInterface.php +++ b/tests/Behat/Element/Admin/ContentElementsCollectionElementInterface.php @@ -34,12 +34,18 @@ public function addContentElementOfTypeWithContent(string $type, array|string $c public function removeContentElement(string $type): void; + public function insertContentElementAfterPosition(string $type, int $afterPosition): void; + + public function insertContentElementBeforePosition(string $type, int $beforePosition): void; + public function moveContentElementUp(int $position): void; 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;