Add Prebuilt Components to Webflow Rich Text with Simple Syntax

<script>

document.addEventListener("DOMContentLoaded", function() {
  var richText = document.querySelector('.post-body_rich-text');
  var content = richText.innerHTML;

  // Find all elements with data-component attribute
  var components = document.querySelectorAll('[data-component]');

  components.forEach(function(component) {
    var placeholder = `[[${component.getAttribute('data-component')}]]`; // Match the placeholder format
    var componentHTML = component.outerHTML;

    // Replace all instances of the placeholder with the component's HTML
    while (content.includes(placeholder)) {
      content = content.replace(placeholder, componentHTML);
    }
  });

  // Update the rich text content with replaced components
  richText.innerHTML = content;
});
</script>