FEAT: [Admin] 100 add order functionality for content elements

Author: crydotsnake

UPGRADE-1.2.md

@@ -50,3 +50,26 @@ The default remains `trix`, so no action is required to keep the previous behavi
 
 See the documentation for setup and configuration details:
 https://docs.sylius.com/cms-plugin/development/wysiwyg-editors
+
+### New Stimulus Controller: `ContentElementsOrderController`
+
+This controller allows ordering content elements.
+
+In your end application, run the following command to add a new dependency to `package.json` file:
+
+```bash
+yarn add @sylius-cms-plugin/admin@file:vendor/sylius/cms-plugin/assets/admin
+```
+
+And add the following to your `controllers.json` file:
+
+```json
+{
+   "@sylius-cms-plugin/admin": {
+      "content-elements-order": {
+         "enabled": true,
+         "fetch": "lazy"
+      }
+   }
+}
+```

assets/admin/controllers.json

@@ -6,6 +6,12 @@
                 "webpackMode": "lazy",
                 "fetch": "lazy",
                 "enabled": true
+            },
+            "content-elements-order": {
+                "main": "controllers/ContentElementsOrderController.js",
+                "webpackMode": "lazy",
+                "fetch": "lazy",
+                "enabled": true
             }
         },
         "@ehyiah/ux-quill": {

assets/admin/controllers/ContentElementsOrderController.js

@@ -0,0 +1,279 @@
+/*
+ * This file is part of the Sylius CMS Plugin package.
+ *
+ * (c) Sylius Sp. z o.o.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import { Controller } from '@hotwired/stimulus';
+
+/* stimulusFetch: 'lazy' */
+export default class extends Controller {
+    moveUp(event) {
+        this.move(event, 'up');
+    }
+
+    moveDown(event) {
+        this.move(event, 'down');
+    }
+
+    async move(event, direction) {
+        const button = event.currentTarget;
+
+        this.#hideTooltip(button);
+
+        const entry = button.closest('.sortable-item');
+        if (!entry) {
+            return;
+        }
+
+        const sibling = direction === 'up'
+            ? this.findPreviousSibling(entry)
+            : this.findNextSibling(entry);
+
+        if (!sibling) {
+            return;
+        }
+
+        const entryIndex = this.extractIndex(entry);
+        const siblingIndex = this.extractIndex(sibling);
+
+        if (entryIndex < 0 || siblingIndex < 0) {
+            return;
+        }
+
+        const parent = entry.parentElement;
+        if (!parent) {
+            return;
+        }
+
+        if (direction === 'up') {
+            parent.insertBefore(entry, sibling);
+        } else {
+            parent.insertBefore(sibling, entry);
+        }
+
+        this.swapEntryIndexes(entry, sibling, entryIndex, siblingIndex);
+
+        await this.#syncLiveComponentModel(entryIndex, siblingIndex);
+
+        this.updateButtonStates();
+    }
+
+    #hideTooltip(button) {
+        window.bootstrap?.Tooltip?.getInstance(button)?.hide();
+    }
+
+    async #syncLiveComponentModel(indexA, indexB) {
+        let root = this.element.parentElement;
+
+        while (root && !root.__component) {
+            root = root.parentElement;
+        }
+
+        if (!root?.__component) {
+            return;
+        }
+
+        const input = this.element.querySelector('[name*="[contentElements]"]');
+
+        if (!input) {
+            return;
+        }
+
+        const formName = input.name.split('[')[0];
+
+        if (!formName) {
+            return;
+        }
+
+        const segments = [];
+        const segmentRegex = /\[([^\]]*)]/g;
+
+        let match;
+
+        while ((match = segmentRegex.exec(input.name)) !== null) {
+            segments.push(match[1]);
+        }
+
+        let lastNumericPos = -1;
+
+        for (let i = segments.length - 1; i >= 0; i--) {
+            if (/^\d+$/.test(segments[i])) {
+                lastNumericPos = i;
+                break;
+            }
+        }
+
+        if (lastNumericPos < 0) {
+            return;
+        }
+
+        const pathToArray = segments.slice(0, lastNumericPos);
+
+        let currentFormValues;
+
+        try {
+            currentFormValues = root.__component.getData(formName);
+        } catch {
+            return;
+        }
+
+        let formValues;
+
+        try {
+            formValues = structuredClone(currentFormValues);
+        } catch {
+            return;
+        }
+
+        let collection = formValues;
+
+        for (const key of pathToArray) {
+            if (collection == null || typeof collection !== 'object') {
+                return;
+            }
+
+            collection = collection[key];
+        }
+
+        if (!Array.isArray(collection)) {
+            return;
+        }
+
+        if (
+            collection[indexA] === undefined ||
+            collection[indexB] === undefined
+        ) {
+            return;
+        }
+
+        [
+            collection[indexA],
+            collection[indexB],
+        ] = [
+            collection[indexB],
+            collection[indexA],
+        ];
+
+        const result = root.__component.set(formName, formValues, false);
+
+        if (result instanceof Promise) {
+            await result;
+        }
+    }
+
+    findPreviousSibling(entry) {
+        let element = entry.previousElementSibling;
+
+        while (element) {
+            if (element.classList.contains('sortable-item')) {
+                return element;
+            }
+
+            element = element.previousElementSibling;
+        }
+
+        return null;
+    }
+
+    findNextSibling(entry) {
+        let element = entry.nextElementSibling;
+
+        while (element) {
+            if (element.classList.contains('sortable-item')) {
+                return element;
+            }
+
+            element = element.nextElementSibling;
+        }
+
+        return null;
+    }
+
+    extractIndex(entry) {
+        const input = entry.querySelector('[name*="[contentElements]"]');
+
+        if (!input) {
+            return -1;
+        }
+
+        const match = input.name.match(/\[contentElements]\[(\d+)]/);
+
+        return match ? parseInt(match[1], 10) : -1;
+    }
+
+    swapEntryIndexes(entryA, entryB, indexA, indexB) {
+        const tempIndex = `__TEMP_${Date.now()}__`;
+
+        this.renameEntry(entryA, indexA, tempIndex);
+        this.renameEntry(entryB, indexB, indexA);
+        this.renameEntry(entryA, tempIndex, indexB);
+    }
+
+    renameEntry(entry, oldIndex, newIndex) {
+        if (entry.id) {
+            entry.id = this.replaceInId(entry.id, oldIndex, newIndex);
+        }
+
+        entry.querySelectorAll('[name]').forEach(element => {
+            element.name = element.name.replaceAll(
+                `[contentElements][${oldIndex}]`,
+                `[contentElements][${newIndex}]`,
+            );
+        });
+
+        entry.querySelectorAll('[id]').forEach(element => {
+            element.id = this.replaceInId(
+                element.id,
+                oldIndex,
+                newIndex,
+            );
+        });
+
+        entry.querySelectorAll('[for]').forEach(element => {
+            element.htmlFor = this.replaceInId(
+                element.htmlFor,
+                oldIndex,
+                newIndex,
+            );
+        });
+    }
+
+    replaceInId(value, oldIndex, newIndex) {
+        if (!value) {
+            return value;
+        }
+
+        return value.replace(
+            new RegExp(`_contentElements_${oldIndex}(?=_|$)`, 'g'),
+            `_contentElements_${newIndex}`,
+        );
+    }
+
+    updateButtonStates() {
+        const entries = [
+            ...this.element.querySelectorAll('.sortable-item'),
+        ];
+
+        entries.forEach((entry, index) => {
+            const upButton = entry.querySelector(
+                '[data-sort-direction="up"]',
+            );
+
+            const downButton = entry.querySelector(
+                '[data-sort-direction="down"]',
+            );
+
+            if (upButton) {
+                upButton.disabled = index === 0;
+            }
+
+            if (downButton) {
+                downButton.disabled = index === entries.length - 1;
+            }
+        });
+    }
+}

assets/admin/package.json

@@ -10,6 +10,12 @@
                 "webpackMode": "lazy",
                 "fetch": "lazy",
                 "enabled": true
+            },
+            "content-elements-order": {
+                "main": "controllers/ContentElementsOrderController.js",
+                "webpackMode": "lazy",
+                "fetch": "lazy",
+                "enabled": true
             }
         }
     },

features/admin/page/sorting_content_elements_on_page.feature

@@ -0,0 +1,53 @@
+@managing_pages
+Feature: Sorting content elements on a page
+    In order to manage the order of content on a page
+    As an Administrator
+    I want to be able to reorder content elements
+
+    Background:
+        Given I am logged in as an administrator
+        And the store operates on a single channel in "United States"
+
+    @ui @javascript
+    Scenario: Moving a content element down
+        When I go to the create page page
+        And I fill the code with "sort-test-page"
+        And I fill the name with "Sort Test Page"
+        And I fill the slug with "sort-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 move the 1st content element down
+        Then the 1st content element should be a "Textarea" element
+        And the 2nd content element should be a "Heading" element
+
+    @ui @javascript
+    Scenario: Moving a content element up
+        When I go to the create page page
+        And I fill the code with "sort-test-page"
+        And I fill the name with "Sort Test Page"
+        And I fill the slug with "sort-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 move the 2nd content element up
+        Then the 1st content element should be a "Textarea" element
+        And the 2nd content element should be a "Heading" element
+
+    @ui @javascript
+    Scenario: The first content element cannot be moved up
+        When I go to the create page page
+        And I fill the code with "sort-test-page"
+        And I fill the name with "Sort Test Page"
+        And I fill the slug with "sort-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
+        Then the move up button of the 1st content element should be disabled
+
+    @ui @javascript
+    Scenario: The last content element cannot be moved down
+        When I go to the create page page
+        And I fill the code with "sort-test-page"
+        And I fill the name with "Sort Test Page"
+        And I fill the slug with "sort-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
+        Then the move down button of the 2nd content element should be disabled