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 8976e563..ab69e14b 100644 --- a/features/admin/page/sorting_content_elements_on_page.feature +++ b/features/admin/page/sorting_content_elements_on_page.feature @@ -78,3 +78,72 @@ 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" + + @ui @javascript + Scenario: Moving a content element down moves it one position only + Given there is a page in the store with textarea content elements with "First content", "Second content" and "Third 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" + And the 3rd content element should contain "Third content" + + @ui @javascript + Scenario: Moving a content element up moves it one position only + Given there is a page in the store with textarea content elements with "First content", "Second content" and "Third content" content + When I want to edit this page + And I move the 3rd content element up + Then the 1st content element should contain "First content" + And the 2nd content element should contain "Third content" + And the 3rd content element should contain "Second content" + + @ui @javascript + Scenario: Moving the same content element down repeatedly + Given there is a page in the store with textarea content elements with "First content", "Second content" and "Third content" content + When I want to edit this page + And I move the 1st content element down + And I move the 2nd content element down + Then the 1st content element should contain "Second content" + And the 2nd content element should contain "Third content" + And the 3rd content element should contain "First content" + + @ui @javascript + Scenario: Moving a content element after inserting a new one in between + 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 insert a textarea content element after the 1st content element + And I move the 3rd content element up + Then the 1st content element should contain "First content" + And the 2nd content element should contain "Second content" diff --git a/src/Form/Strategy/Wysiwyg/QuillStrategy.php b/src/Form/Strategy/Wysiwyg/QuillStrategy.php index 966b0554..d6cf5242 100644 --- a/src/Form/Strategy/Wysiwyg/QuillStrategy.php +++ b/src/Form/Strategy/Wysiwyg/QuillStrategy.php @@ -16,6 +16,8 @@ use Ehyiah\QuillJsBundle\DTO\Modules\FullScreenModule; use Ehyiah\QuillJsBundle\DTO\QuillGroup; use Ehyiah\QuillJsBundle\Form\QuillType; +use Symfony\Component\Form\FormInterface; +use Symfony\Component\Form\FormView; use Symfony\Component\OptionsResolver\OptionsResolver; final class QuillStrategy extends AbstractWysiwygStrategy @@ -30,15 +32,22 @@ public function configureOptions(OptionsResolver $resolver): void parent::configureOptions($resolver); $resolver->setDefaults([ 'quill_options' => QuillGroup::buildWithAllFields(), - 'attr' => [ - 'data-model' => 'norender|*', - ], 'modules' => [ new FullScreenModule(), ], ]); } + public function buildView(FormView $view, FormInterface $form, array $options): void + { + parent::buildView($view, $form, $options); + // data-model="norender|*" doesn't work on individual elements — Live Component + // treats "*" as a literal model name instead of substituting the field's name + // attribute. Use the actual full_name so the Quill content is included in the + // component's formValues when a LiveAction (e.g. moveCollectionItem) fires. + $view->vars['attr']['data-model'] = 'norender|' . $view->vars['full_name']; + } + public function getBlockPrefix(): string { return 'sylius_cms_plugin_quill_strategy'; diff --git a/src/Twig/Component/Trait/ContentElementsCollectionFormComponentTrait.php b/src/Twig/Component/Trait/ContentElementsCollectionFormComponentTrait.php index 5b189e56..2ea3e165 100644 --- a/src/Twig/Component/Trait/ContentElementsCollectionFormComponentTrait.php +++ b/src/Twig/Component/Trait/ContentElementsCollectionFormComponentTrait.php @@ -70,6 +70,16 @@ public function moveCollectionItem( return; } + // Swap the two values while both rows keep their original keys. Handing a moved row + // a fresh key makes it look like a brand new element to Symfony's CollectionType, + // which only ever appends unknown keys at the end of its children (see the note in + // insertCollectionItem) - the row would jump to the bottom of the collection instead + // of moving one position, and every following move would work on an order that no + // longer matches what is rendered. Keeping the keys is safe for the stateful WYSIWYG + // widgets because ContentElementConfigurationType puts a signature of the element's + // content into the configuration container's DOM id: when the content at a position + // changes, so does that id, and the Live Component replaces the whole subtree instead + // of morphing the widget in place. $swapKey = $keys[$swapPos]; [$data[$index], $data[$swapKey]] = [$data[$swapKey], $data[$index]]; @@ -88,6 +98,62 @@ 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 { + if (null === $this->formName) { + return; + } + + $propertyPath = $this->fieldNameToPropertyPath($name, $this->formName); + $data = $propertyAccessor->getValue($this->formValues, $propertyPath); + + if (!\is_array($data)) { + $data = []; + } + + $newItem = null === $type ? [] : ['type' => $type]; + + $keys = array_keys($data); + $items = array_values($data); + + if (null === $insertAfterIndex) { + $insertPosition = \count($items); + } elseif ($insertAfterIndex < 0) { + $insertPosition = 0; + } else { + $pos = array_search($insertAfterIndex, $keys, true); + $insertPosition = false !== $pos ? $pos + 1 : \count($items); + } + + array_splice($items, $insertPosition, 0, [$newItem]); + + // Symfony's CollectionType (via ResizeFormListener) never reorders existing form + // children - it only appends keys it doesn't have yet, always at the end of its + // internal list, no matter where that key sits in the submitted array. Giving only + // the new row a fresh key therefore isn't enough to place it mid-collection: the + // form would still render it last. Every row from the insertion point onward must + // look "new" too, so Symfony drops and re-appends that whole tail in one pass, in + // the order we submit it - landing it right after the untouched prefix. Rows + // strictly before the insertion point keep their original key/DOM node untouched. + $freshKeysNeeded = \count($items) - $insertPosition; + $nextKey = $this->provideNewCollectionItemIndex($data); + + $keys = array_slice($keys, 0, $insertPosition); + for ($i = 0; $i < $freshKeysNeeded; ++$i) { + $keys[] = $nextKey + $i; + } + + $propertyAccessor->setValue($this->formValues, $propertyPath, array_combine($keys, $items)); + } + /** @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..8b553f0e --- /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 acc6b0ee..e046fecd 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..13a42ef0 100755 --- a/tests/Behat/Context/Setup/PageContext.php +++ b/tests/Behat/Context/Setup/PageContext.php @@ -78,6 +78,28 @@ 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 + * @Given there is a page in the store with textarea content elements with :firstContent, :secondContent and :thirdContent content + */ + public function thereIsAPageInTheStoreWithTextareaContentElements(string ...$contents): void + { + $page = $this->createPage(); + + foreach ($contents 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 5711b4de..de659cba 100644 --- a/tests/Behat/Context/Ui/Admin/ContentCollectionContext.php +++ b/tests/Behat/Context/Ui/Admin/ContentCollectionContext.php @@ -207,22 +207,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 */ @@ -264,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 1ed1e59d..00875783 100644 --- a/tests/Behat/Element/Admin/ContentElementsCollectionElement.php +++ b/tests/Behat/Element/Admin/ContentElementsCollectionElement.php @@ -157,16 +157,30 @@ public function removeContentElement(string $type): void $this->waitForFormUpdate(); } + 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 moveContentElementUp(int $position): void { $button = $this->getSortButton($position, 'up'); $button->click(); + + $this->waitForFormUpdate(); } public function moveContentElementDown(int $position): void { $button = $this->getSortButton($position, 'down'); $button->click(); + + $this->waitForFormUpdate(); } public function getContentElementTypeAtPosition(int $position): string @@ -210,6 +224,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 { $button = $this->getContentElementAtPosition($position)->find( diff --git a/tests/Behat/Element/Admin/ContentElementsCollectionElementInterface.php b/tests/Behat/Element/Admin/ContentElementsCollectionElementInterface.php index 72676b1f..bf81a399 100644 --- a/tests/Behat/Element/Admin/ContentElementsCollectionElementInterface.php +++ b/tests/Behat/Element/Admin/ContentElementsCollectionElementInterface.php @@ -34,6 +34,10 @@ 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; diff --git a/translations/messages.de.yml b/translations/messages.de.yml index d1769c17..e24f38f0 100755 --- a/translations/messages.de.yml +++ b/translations/messages.de.yml @@ -1,5 +1,6 @@ sylius_cms: ui: + add_element: Element hinzufügen blocks: Blöcke block: Block pages: Seiten