feat(stylesets): Profile-Gruppen, Kontextmenü, Vorschau-Beschreibung – Version 8.9.2

- Stylesets werden nach Profil und Styleset-Name gruppiert (Separator-Einträge)
- Stylesets im Kontextmenü automatisch eingebunden
- Profile-Assistent: Stylesets als wählbare Toolbar-Elemente
- Vorschau-Modal zeigt jetzt Beschreibung des Profils an
- Version auf 8.9.2 erhöht, Changelog ergänzt

Author: skerbis

CHANGELOG.md

@@ -1,6 +1,16 @@
 Changelog
 =========
 
+Version 8.9.2
+-------------------------------
+
+### Stylesets: Profil-Gruppierung und Kontext-Menü-Integration
+
+* **Hierarchische Stylesets-Struktur**: Styles werden jetzt nach Profil und Styleset-Zuweisung gruppiert mit visuellen Trennlinien angezeigt.
+* **Trennlinien mit Labels**: Separator-Items zeigen das Styleset-Name und zugehörige Profile (z.B. "─ UIkit3 (light) ─") für bessere Übersichtlichkeit.
+* **Kontext-Menü-Integration**: Stylesets werden automatisch ins Kontext-Menü hinzugefügt (rechtsklick), sofern aktive Stylesets vorhanden sind.
+* **Intelligente Gruppierung**: Formate werden nach ihrer Profil-Zuordnung sortiert und gruppiert, ohne die Filterung nach `selector`/`block`/`inline` zu beeinträchtigen.
+
 Version 8.9.1
 -------------------------------
 

assets/scripts/base.js

@@ -366,6 +366,68 @@ $(document).on('click', '[data-yform-be-relation-moveup], [data-yform-be-relatio
     }, 100);
 });
 
+/**
+ * Groups style formats by their profile assignments and styleset.
+ * Adds separators with profile+styleset labels between different groups.
+ *
+ * @param {Array} formatsWithProfiles - Array with {format: {...}, profiles: [...], styleset: "..."}
+ * @returns {Array} - Grouped formats with separators
+ */
+function groupFormatsByProfiles(formatsWithProfiles) {
+    if (!Array.isArray(formatsWithProfiles) || formatsWithProfiles.length === 0) {
+        return [];
+    }
+
+    // Group by profile string + styleset (empty profiles = all profiles)
+    let groupedByKey = {};
+    
+    formatsWithProfiles.forEach(function(item) {
+        if (!item.format) return;
+        
+        // Convert profiles array to a key (sort for consistent grouping)
+        let profileKey = '';
+        if (item.profiles && item.profiles.length > 0) {
+            profileKey = item.profiles.sort().join(', ');
+        }
+        
+        let styleset = item.styleset || 'Default';
+        let groupKey = styleset + '|' + profileKey;
+        
+        if (!groupedByKey[groupKey]) {
+            groupedByKey[groupKey] = {
+                profileKey: profileKey,
+                styleset: styleset,
+                formats: []
+            };
+        }
+        groupedByKey[groupKey].formats.push(item.format);
+    });
+
+    // Convert to ordered array with separators
+    let result = [];
+    let groupKeys = Object.keys(groupedByKey).sort();
+    
+    groupKeys.forEach(function(key, index) {
+        let group = groupedByKey[key];
+        
+        // Add separator with profile label (except for first group)
+        if (index > 0) {
+            let profileLabel = group.profileKey === '' ? 'All Profiles' : group.profileKey;
+            let label = group.styleset + ' (' + profileLabel + ')';
+            result.push({
+                title: '─ ' + label + ' ─',
+                isDisabled: true,
+                onSelect: function() { return false; }
+            });
+        }
+        
+        // Add formats from this group
+        result = result.concat(group.formats);
+    });
+
+    return result;
+}
+
 function tiny_init(container) {
     let profiles = {};
 
@@ -466,14 +528,79 @@ function tiny_init(container) {
         // This ensures style_formats are available when TinyMCE registers the 'styles' button
         if (typeof rex !== 'undefined' && rex.tinyGlobalOptions) {
             let globalOpts = rex.tinyGlobalOptions;
+            let profileNamesById = (typeof rex.tinyProfileNamesById === 'object' && rex.tinyProfileNamesById) ? rex.tinyProfileNamesById : {};
+
+            function normalizeProfileName(value) {
+                if (typeof value !== 'string') {
+                    return '';
+                }
+                return value.trim().toLowerCase();
+            }
+
+            function getNormalizedProfileCandidates(profileValue) {
+                let candidates = [];
+                let profileRaw = (profileValue === undefined || profileValue === null) ? '' : String(profileValue).trim();
+                let normalizedProfile = normalizeProfileName(profileRaw);
+                if (normalizedProfile !== '') {
+                    candidates.push(normalizedProfile);
+                }
+
+                if (profileRaw !== '' && Object.prototype.hasOwnProperty.call(profileNamesById, profileRaw)) {
+                    let mappedName = normalizeProfileName(String(profileNamesById[profileRaw]));
+                    if (mappedName !== '' && candidates.indexOf(mappedName) === -1) {
+                        candidates.push(mappedName);
+                    }
+                }
+
+                return candidates;
+            }
+
+            let profileCandidates = getNormalizedProfileCandidates(profile);
+
+            function normalizeStylesetsInToolbar(toolbarValue) {
+                if (typeof toolbarValue === 'string') {
+                    return toolbarValue.replace(/\bstyles\b/g, 'stylesets');
+                }
+
+                if (Array.isArray(toolbarValue)) {
+                    return toolbarValue.map(function(row) {
+                        if (typeof row !== 'string') {
+                            return row;
+                        }
+                        return row.replace(/\bstyles\b/g, 'stylesets');
+                    });
+                }
+
+                return toolbarValue;
+            }
 
             // Helper function to check if a Style-Set applies to this profile
             // Empty profiles array means it applies to ALL profiles
             function appliesToProfile(profilesList) {
                 if (!profilesList || profilesList.length === 0) {
                     return true; // Empty = applies to all profiles
                 }
-                return profilesList.indexOf(profile) !== -1;
+
+                for (let i = 0; i < profilesList.length; i++) {
+                    let profileEntry = String(profilesList[i] || '').trim();
+                    if (profileEntry === '') {
+                        continue;
+                    }
+
+                    let normalizedEntry = normalizeProfileName(profileEntry);
+                    if (profileCandidates.indexOf(normalizedEntry) !== -1) {
+                        return true;
+                    }
+
+                    if (Object.prototype.hasOwnProperty.call(profileNamesById, profileEntry)) {
+                        let mappedEntry = normalizeProfileName(String(profileNamesById[profileEntry]));
+                        if (profileCandidates.indexOf(mappedEntry) !== -1) {
+                            return true;
+                        }
+                    }
+                }
+
+                return false;
             }
 
             // Merge content_css (array) - filter by profile
@@ -514,39 +641,40 @@ function tiny_init(container) {
                 }
             }
 
-            // Merge style_formats - filter by profile
+            // Merge style_formats - filter by profile, group by profile with separators
             // New format: [{format: {...}, profiles: ["uikit"]}]
-            // Legacy format: [{title: "...", items: [...]}]
+            // Format can be a group: {title: "...", items: [...]}
             if (globalOpts.style_formats && globalOpts.style_formats.length > 0) {
-                let filteredFormats = [];
+                let formatsWithProfiles = [];
+                let legacyFormats = [];
+                
                 globalOpts.style_formats.forEach(function(item) {
                     if (item.format && appliesToProfile(item.profiles)) {
-                        // New format with profile filter
-                        filteredFormats.push(item.format);
+                        // New format with profile info - keep for grouping
+                        formatsWithProfiles.push(item);
                     } else if (item.title) {
                         // Legacy format (has title = is a format group) - always include
-                        filteredFormats.push(item);
+                        legacyFormats.push(item);
                     }
                 });
 
-                if (filteredFormats.length > 0) {
+                if (formatsWithProfiles.length > 0 || legacyFormats.length > 0) {
                     // Enable merging with default formats (Headings, Inline, Blocks, Align)
                     options.style_formats_merge = true;
 
                     if (!options.style_formats) {
                         options.style_formats = [];
                     }
-                    // Append filtered style formats to existing ones
-                    options.style_formats = options.style_formats.concat(filteredFormats);
 
-                    // Replace 'styles' with 'stylesets' in toolbar (our custom button)
-                    if (options.toolbar && typeof options.toolbar === 'string') {
-                        // Replace existing 'styles' with 'stylesets'
-                        options.toolbar = options.toolbar.replace(/\bstyles\b/g, 'stylesets');
-                        // If neither exists, add stylesets at the beginning
-                        if (options.toolbar.indexOf('stylesets') === -1) {
-                            options.toolbar = 'stylesets ' + options.toolbar;
-                        }
+                    // Group new formats by profile and add separators
+                    let groupedFormats = groupFormatsByProfiles(formatsWithProfiles);
+                    
+                    // Append grouped formats first, then legacy formats
+                    options.style_formats = options.style_formats.concat(groupedFormats).concat(legacyFormats);
+                    
+                    // Keep user-defined toolbar order; only normalize legacy 'styles' -> 'stylesets'.
+                    if (options.toolbar) {
+                        options.toolbar = normalizeStylesetsInToolbar(options.toolbar);
                     }
 
                     // Add stylesets to Format menu
@@ -558,6 +686,15 @@ function tiny_init(container) {
                         items: 'bold italic underline strikethrough superscript subscript codeformat | stylesets blocks fontfamily fontsize align lineheight | forecolor backcolor | removeformat'
                     };
 
+                    // Add stylesets to context menu if available
+                    if (!options.contextmenu) {
+                        options.contextmenu = 'link image table';
+                    }
+                    // Add stylesets to existing contextmenu if not already there
+                    if (typeof options.contextmenu === 'string' && options.contextmenu.indexOf('stylesets') === -1) {
+                        options.contextmenu = options.contextmenu + ' | stylesets';
+                    }
+                    
                 }
             }
         }

assets/scripts/profile_builder.js

@@ -49,7 +49,7 @@ function initTinyMceProfileAssistant() {
     const options = rex.tinymceProfileOptions || {};
     // Sort plugin and toolbar lists alphabetically for easier scanning in the assistant.
     const pluginsList = (options.plugins || []).slice().sort((a, b) => String(a).localeCompare(String(b)));
-    const toolbarButtons = (options.toolbar || []).slice().sort((a, b) => String(a).localeCompare(String(b)));
+    const toolbarButtons = Array.from(new Set((options.toolbar || []).concat(['stylesets']))).sort((a, b) => String(a).localeCompare(String(b)));
 
     // Plugins Section – FOR plugins are highlighted as FriendsOfREDAXO custom plugins.
     // Besides the `for_*` naming convention there are legacy custom plugins that predate
@@ -64,7 +64,12 @@ function initTinyMceProfileAssistant() {
     const isAddonPlugin = (name) => addonPluginSet.has(name);
     const isAddonToolbarBtn = (name) => addonToolbarSet.has(name);
     const isForPlugin = (name) => typeof name === 'string' && (name.indexOf('for_') === 0 || forPluginSet.has(name));
-    const isForToolbarBtn = (name) => typeof name === 'string' && (name.indexOf('for_') === 0 || forToolbarSet.has(name));
+    const isForToolbarBtn = (name) => {
+        if (typeof name !== 'string') {
+            return false;
+        }
+        return name === 'stylesets' || name.indexOf('for_') === 0 || forToolbarSet.has(name);
+    };
     let pluginsHtml = '<legend>' + (i18n.plugins || 'Plugins') + ' '
         + '<small class="for-plugin-legend-hint"><span class="for-plugin-badge-inline">FOR</span> ' + (i18n.for_plugins_hint || 'FriendsOfREDAXO custom plugins') + '</small> '
         + '<small class="for-plugin-legend-hint"><span class="for-plugin-badge-inline for-plugin-badge--addon">AddOn</span> ' + (i18n.addon_plugins_hint || 'Plugins aus externen AddOns') + '</small>'
@@ -2112,6 +2117,9 @@ function normalizeToolbarItemValue(value) {
     if (normalized === '|' || normalized.toLowerCase() === 'separator') {
         return '|';
     }
+    if (normalized.toLowerCase() === 'styles') {
+        return 'stylesets';
+    }
     return normalized;
 }
 

assets/scripts/profiles-list.js

@@ -119,11 +119,13 @@
     if (!url) return;
 
     var nameEl = document.getElementById('tinymcePreviewName');
+    var descriptionEl = document.getElementById('tinymcePreviewDescription');
     var jsonEl = document.getElementById('tinymcePreviewJson');
 
     var loadingText = findLoadingText();
 
     if (nameEl) nameEl.textContent = '';
+    if (descriptionEl) descriptionEl.textContent = '';
     if (jsonEl) jsonEl.textContent = loadingText;
 
     // show modal (bootstrap)
@@ -139,12 +141,15 @@
       })
       .then(function (data) {
         var profileName = data.name || 'full';
+        var profileDescription = data.description || '';
         var raw = data.extra || '';
 
         var modalBody = document.querySelector('#tinymcePreviewModal .modal-body');
         if (modalBody) {
           // create editor element using existing init system via data-profile
+          var descriptionHtml = profileDescription ? '<p style="margin:0 0 12px 0; color:#666;">' + escapeHtml(profileDescription) + '</p>' : '';
           modalBody.innerHTML = '<h4 style="margin-top:0">' + escapeHtml(profileName) + '</h4>'
+            + descriptionHtml
             + '<textarea id="tinymcePreviewEditor" class="tiny-editor" data-profile="' + escapeHtml(profileName) + '">The quick brown fox jumps over the lazy dog.</textarea>';
         }