fix(rich-text-widget): match most specific style when tags overlap

.changeset/rich-text-style-selection-bug.md

@@ -0,0 +1,5 @@
+---
+"apostrophe": patch
+---
+
+Fixed the rich text style picker marking the wrong style as active when multiple styles share the same tag. Styles are now matched in descending order of specificity (number of classes), so a `<p class="small">` correctly shows "Small" as the active style instead of the plain "Paragraph".

packages/apostrophe/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapStyles.vue

@@ -118,11 +118,24 @@ export default {
           if (activeEls[0].name === 'defaultNode') {
             return 1;
           } else {
-            const match = nodes.findIndex(node =>
+            // Match the most specific style first. When several styles
+            // share the same tag (e.g. a plain `<p>` and a `<p class="small">`)
+            // a `<p class="small">` would otherwise match the generic `<p>`
+            // style, marking the wrong option as active. We sort a copy of
+            // the nodes by descending class count and pick the first match,
+            // then resolve it back to its original index so the dropdown
+            // (which keeps the original order) highlights the correct option.
+            const sortedNodes = [ ...nodes ].sort((a, b) => {
+              const aCount = a.class ? a.class.trim().split(/\s+/).length : 0;
+              const bCount = b.class ? b.class.trim().split(/\s+/).length : 0;
+              return bCount - aCount;
+            });
+            const matchedNode = sortedNodes.find(node =>
               node.class === activeEls[0].class &&
               node.type === activeEls[0].name &&
               node.level === activeEls[0].level
             );
+            const match = nodes.indexOf(matchedNode);
             return match + 1;
           }
         }