fix: make tagClasses work better

fix #1504

Author: Alex-D

index.html

@@ -87,6 +87,14 @@
         thead {
             background: #FFFFFF;
         }
+
+        /* Custom tag classes test */
+        .container img.class-image {
+            max-width: 50%;
+        }
+        .container [class^="class-"] {
+            border-bottom: 3px solid #89ff4a;
+        }
     </style>
     <link rel="stylesheet" href="/dist/ui/trumbowyg.css">
     <link rel="stylesheet" href="/dist/plugins/colors/ui/trumbowyg.colors.css">
@@ -163,7 +171,7 @@ <h2>All buttons of Trumbowyg are here.</h2>
     </div>
 
     <div id="customized-buttonpane">
-        <h2>This is a demo of Trumbowyg with a customized button pane</h2>
+        <h2>This is a demo of Trumbowyg with a customized button pane & tagClasses</h2>
         <p>
             The text is derived from Cicero's De Finibus Bonorum et Malorum (On the Ends of Goods and Evils, or
             alternatively [About] The Purposes of Good and Evil ). The original passage began: Neque porro quisquam est
@@ -413,6 +421,14 @@ <h2 class="title">The dark side of Trumbowyg</h2>
         defaultLinkTarget: '_blank',
         plugins: {
             upload: uploadOptions
+        },
+        tagClasses: {
+            img: 'class-image',
+            p: 'class-paragraph',
+            b: 'class-bold',
+            i: 'class-italic',
+            s: 'class-strikethrough',
+            a: 'class-link',
         }
     };
     $('#customized-buttonpane')

src/trumbowyg.js

@@ -583,6 +583,7 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
             }
 
             t.semanticCode();
+            t.applyTagClasses();
 
             if (t.o.autogrowOnEnter) {
                 t.$ed.addClass(prefix + 'autogrow-on-enter');
@@ -1475,6 +1476,13 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
             t.$c.trigger('tbw' + (isFullscreen ? 'open' : 'close') + 'fullscreen');
         },
 
+        applyTagClasses: function () {
+            var t = this;
+            for (const tag of Object.keys(t.o.tagClasses)) {
+                $(tag, t.$ed).addClass(t.o.tagClasses[tag]);
+            }
+            t.syncCode();
+        },
 
         /*
          * Call method of trumbowyg if exist
@@ -1514,26 +1522,18 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
 
                     t.syncCode();
                     t.semanticCode(false, true);
-                    try {
-                        var listId = window.getSelection().focusNode;
-                        if (!$(window.getSelection().focusNode.parentNode).hasClass('trumbowyg-editor')) {
-                            listId = window.getSelection().focusNode.parentNode;
-                        }
-                        var classes = t.o.tagClasses[param];
-                        if (classes) {
-                            $(listId).addClass(classes);
-                        }
-                    } catch (e) {
-
-                    }
-
                 }
 
                 if (cmd !== 'dropdown') {
                     t.updateButtonPaneStatus();
                     t.$c.trigger('tbwchange');
                 }
             }
+
+            try {
+                t.applyTagClasses();
+            } catch (e) {
+            }
         },