Problem leveraging commitStyle hooks

[brianravi]

Running Jodit v4.0.6

I am looking to leverage the "afterToggleAttributes" hook on commitStyle, but am running into some issues.

My need for this is that when applying class attribute using this function, it adds the appropriate class the the class list, instead of setting it as the only one. I am looking for a way to replace the class attribute on thee element i am running this method on with the appropriate class as shown below. I have also added the list of options for some insight into the possible key values in the exec property.

When I trigger that commitStyle function, an error is thrown that I need an event handler for the hook. Where do I go about defining one, in the hook object?

the documentation is not very clear to me:
https://xdsoft.net/jodit/docs/interfaces/types.IStyleOptions.html#hooks

list: {
   p: 'Normal',
   p_primary_text: 'Normal Primary Text',
   p_secondary_text: 'Normal Secondary Text',
   p_primary: 'Normal Primary',
   p_secondary: 'Normal Secondary',
   h1: 'Heading 1',
   h1_primary_text: 'Heading 1 Primary Text',
   h1_secondary_text: 'Heading 1 Secondary Text',
   h1_primary: 'Heading 1 Primary',
   h1_secondary: 'Heading 1 Secondary',
   h2: 'Heading 2',
   h2_primary_text: 'Heading 2 Primary Text',
   h2_secondary_text: 'Heading 2 Secondary Text',
   h2_primary: 'Heading 2 Primary',
   h2_secondary: 'Heading 2 Secondary',
   h3: 'Heading 3',
   h4: 'Heading 4',
   blockquote: 'Quote',
},
exec: (editor, control, $btn) => {
   let key = $btn.control.name;
   let elTag = key;
   if (key.indexOf("_") !== -1) {
       const element= key.split('_');
       elTag = heading[0];
       
       editor.s.commitStyle({
           element: elTag ,
           attributes: {
               class: !key.includes("text") ? `${heading[1]}-bg` : `${heading[1]}-text`
           },
           defaultTag: elTag,
           hooks: {
               afterToggleAttribute: {
                   mode: "replace",
                   elm: elTag,
                   key: "class"
               }
           }
       });
   } else {
       editor.s.commitStyle({
           element: elTag,
           attributes: {
               style: {
                   backgroundColor: 'transparent',
                   color: ''
               },
               class: ''
           },
           defaultTag: elTag
       });
   }
   editor.setEditorValue();
},

[xdan]

Can you share your exact commitStyle config plus the hook code you've got? A class-based commitStyle toggles the class (adds/removes it), so it appends rather than replacing — that's the behavior you're hitting.

If what you want is "set this one class and drop the others in its group", that's usually cleaner done by applying the class directly (a small custom command that sets className) than by leaning on the afterToggleAttributes hook. But I'd need to see your snippet to point at the right spot.

[brianravi]

The project we were using this on is dead. thanks for your response. Will keep this in mind for future efforts.