Release 2.21.6: sort editor regions by name

src/web/public/js/slides/slide-animation-editor.js

@@ -223,7 +223,9 @@ export function createSlideAnimationEditor(options) {
   openButton.addEventListener('click', function () {
     if (!allRegions().length || !window.pulseModal) return;
     regionSelect.replaceChildren();
-    regions().forEach(function (region) {
+    window.templateDesignerUtils.sortByName(regions(), function (region) {
+      return region.label || region.region_key;
+    }).forEach(function (region) {
       var option = document.createElement('option');
       option.value = region.region_key;
       option.textContent = region.label || region.region_key;

src/web/public/js/slides/slide-form.js

@@ -951,7 +951,11 @@ import { createSlideAnimationEditor } from '/assets/js/slides/slide-animation-ed
       return;
     }
 
-    var editableRegions = template.regions.filter(function (region) { return !(region.read_only === true || Number(region.read_only) === 1); });
+    var editableRegions = window.templateDesignerUtils.sortByName(template.regions.filter(function (region) {
+      return !(region.read_only === true || Number(region.read_only) === 1);
+    }), function (region) {
+      return region.label || region.region_key;
+    });
     templateFields.innerHTML = editableRegions.length ? editableRegions.map(function (region) {
       return getRegionEditorCardHtml(region) || '<div class="muted">Region editor unavailable.</div>';
     }).join('') : '<div class="muted">This template has no editable regions.</div>';

src/web/public/js/slides/slide-layout-editor.js

@@ -150,7 +150,10 @@ export function createSlideLayoutEditor(options) {
     openButton.disabled = active || !regions().length;
     animationButton.disabled = active || !allRegions().length;
     if (!active || sharedSaving) return;
-    if (!selected()) selectedKey = regions().length ? regions()[0].region_key : '';
+    var orderedRegions = window.templateDesignerUtils.sortByName(regions(), function (region) {
+      return region.label || region.region_key;
+    });
+    if (!selected()) selectedKey = orderedRegions.length ? orderedRegions[0].region_key : '';
     var region = selected();
     var box = region && effective(region);
     Object.keys(fields).forEach(function (field) {
@@ -216,7 +219,9 @@ export function createSlideLayoutEditor(options) {
     home = stage.parentNode;
     nextSibling = stage.nextSibling;
     regionSelect.replaceChildren();
-    regions().forEach(function (region) {
+    window.templateDesignerUtils.sortByName(regions(), function (region) {
+      return region.label || region.region_key;
+    }).forEach(function (region) {
       var option = document.createElement('option');
       option.value = region.region_key;
       option.textContent = region.label || region.region_key;

src/web/public/js/templates/template-designer-utils.js

@@ -84,6 +84,16 @@
     return String(card.querySelector('[name="region_name[]"]').value || '').trim();
   }
 
+  function sortByName(items, getName) {
+    return Array.prototype.map.call(items || [], function (item, index) {
+      return { item: item, index: index, name: String(getName(item) || '').trim() };
+    }).sort(function (left, right) {
+      return left.name.localeCompare(right.name, undefined, { sensitivity: 'base' }) || left.index - right.index;
+    }).map(function (entry) {
+      return entry.item;
+    });
+  }
+
   function getAnimationConfig(card) {
     var hiddenAnimationInput = card.querySelector('[name="region_animation_json[]"]');
     var animationConfig = normalizeAnimationConfig(hiddenAnimationInput ? hiddenAnimationInput.value || '{}' : '{}');
@@ -354,6 +364,7 @@
     valueOrDefault: valueOrDefault,
     clamp: clamp,
     getRegionName: getRegionName,
+    sortByName: sortByName,
     syncRegionIdentity: syncRegionIdentity,
     readCard: readCard,
     writeCard: writeCard,

src/web/public/js/templates/template-designer.js

@@ -1237,8 +1237,11 @@
     if (title) {
       title.textContent = label;
     }
-    if (index >= 0 && regionSelect.options[index]) {
-      regionSelect.options[index].textContent = label;
+    var option = Array.prototype.find.call(regionSelect.options, function (item) {
+      return item.value === String(index);
+    });
+    if (option) {
+      option.textContent = label;
     }
   }
 
@@ -1351,11 +1354,13 @@
       updateCanvasSizeLock();
       return;
     }
+    var orderedCards = utils.sortByName(cards, getRegionName);
     regionSelect.disabled = false;
     if (selectedIndex < 0 || selectedIndex >= cards.length) {
-      selectedIndex = 0;
+      selectedIndex = cards.indexOf(orderedCards[0]);
     }
-    cards.forEach(function (card, index) {
+    orderedCards.forEach(function (card) {
+      var index = cards.indexOf(card);
       var option = document.createElement('option');
       option.value = String(index);
       option.textContent = getRegionName(card) || ('Region ' + (index + 1));