Mautic Dynamic Web Content Class & Style Cleanup

enableTidyDWC.js

/* enableTidyDWC is a function to enable 
   a series of scripts that tidy up Mautic dynamic
   web content when a mutation is detected. 
   
   It performs three main functions:
     * strips all inline css if it finds the attribute
       data-param-slot-strip-inline="yes". Otherwise, it
       restores the inline css stripped by the buggy
       froala editor

     * It restores classnames stripped by the buggy
       froala editor in Mautic

     * It allows for inline script elements by using
       [script] bracket notation instead of <script>
       tags which are stripped from the forala editor
*/

function stripInline(dwcElement) {
  const restore = !(dwcElement.dataset.paramSlotStripInline && dwcElement.dataset.paramSlotStripInline == 'yes');
  const list = dwcElement.getElementsByTagName('*');
  for (let i = 0; i < list.length; i++) {
    const oldStyle = list[i].getAttribute('fr-original-style');
    // don't strip inline styles inside forms
    if (!list[i].closest('.mauticform_wrapper')) {
      list[i].removeAttribute('style');
      if (restore && oldStyle) {
        list[i].setAttribute('style', oldStyle);
      }
      list[i].removeAttribute('fr-original-style');
    }
  }
}

function restoreClassNames(dwcElement) {
  const list = dwcElement.getElementsByTagName('*');
  for (let i = 0; i < list.length; i++) {
    const oldClass = list[i].getAttribute('fr-original-class');
    if (oldClass) {
      oldClass.split(/\s+/).forEach(function (className) {
        className && list[i].classList.add(className);
      })
      list[i].removeAttribute('fr-original-class');
    }
  }
}

function unbracketScript(dwcElement) {
  const content = dwcElement.innerHTML;
  const matches = content.match(/\[script\]([^\[]+)\[\/script\]/);
  if (matches && matches[1]) {
    const scr = document.createElement("script");
    scr.innerText = matches[1];
    dwcElement.innerHTML = content.replace(
      /\[script\][^\[]+\[\/script\]/,
      ""
    );
    dwcElement.appendChild(scr);
  }
}

function tidyDWC(mutationList, observer) {
  for (let mutation of mutationList) {
    stripInline(mutation.target);
    restoreClassNames(mutation.target);
    unbracketScript(mutation.target);
  }
}

function enableTidyDWC() {
  var slotCol = document.querySelectorAll('[data-slot="dwc"]'),
    config = {
      attributes: false,
      childList: true,
      subtree: true
    };

  for (let slot of slotCol) {
    const obs = new MutationObserver(tidyDWC);
    obs.observe(slot, config);
  }

  return true;
};

Oké after some hours .... I found the solution or found out what i did "wrong".

1. I worked my template and created a landing pages within mautic.
   (I think if you work with third party site the script it works more intuitive)

2 - WRONG: I started working in data-slote="text" (is template element) and there I planned to include the {dwc=....}. This is working for DWC, but as we know the html attributes are replace by the forala) so the layout is not what it shout be.
The the javascript: it start first searching for div's with data-slote="dwc".... and I think it need to be list the data-slot=dwc blocks before the dwc itselfs is loaded and then afterwards when the content is loading the script will changes it and bring back the original markup. so this was not working. The forala editor didn't accept "

it found it nessasary to change it.... so script can't do its work....

2 - THIS WORKS/ add a HTML slot in the builder, (i think you can also add those in the template instead of data-slot="text"). Put this code inside a html slot:

(define a container with dynamic content, the script will search for this div) <script src=" the script.js"></script> (load the script from mr Robinson here above, i added enableTidyDWC(); at the end of the script to execute the script) {dwc=....} (include yourdynamic content)

(close the div)

Hopefully this helps someone facing the same problem... good luck