Dropdown menus in toolbar not working with bootstrap 5

[hardik-kapadia]

The dropdowns in the toolbar of the the in place widget aren't working with Bootstrap 5. The issue is pretty straightforward, these buttons have an attribute called data-toggle which needs to be data-bs-toggle. Replacing it seems to be working.

Not working:

Working:

I have checked everything else, there's no double jquery import, the event listeners are being attached too. This is the only apparent problem

[iragm]

See https://github.com/summernote/summernote/pull/4604/

For now, add this code somewhere:

// Function to replace data-toggle with data-bs-toggle
function replaceDataToggle() {
    document.querySelectorAll('[data-toggle="dropdown"]').forEach(function(el) {
      el.setAttribute('data-bs-toggle', 'dropdown');
      el.removeAttribute('data-toggle');
    });
  }

  // Run on page load
  replaceDataToggle();

  // Observe for new elements added to the DOM
  const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (mutation.addedNodes.length > 0) {
        replaceDataToggle(); // Replace in newly added elements
      }
    });
  });

  // Observe the entire document body for changes
  observer.observe(document.body, { childList: true, subtree: true });

I ran collectstatic and then dumped it into the top of /static/summernote/summernote-bs5.min.js before all the minified js