How to prevent P tags from wrapping Bootstrap 5 Dropdown Element?

[matbk49751]

In source editing mode. I added a Bootstrap 5 Dropdown Element. Ckeditor5 automatically wraps the button with p tags. I understand that it's trying to identify it as a block element, although because it applies those tags around the button element, now the dropdown menu won't work. Is there a workaround solution?

Before inserting into Ckeditor5:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

After Ckeditor5 converts it inside the view:

<div class="dropdown">
    <p>
        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                    Dropdown button
                  </button>
    </p>
    <ul class="dropdown-menu">
        <li>
            <a class="dropdown-item" href="#">Action</a>
        </li>
        <li>
            <a class="dropdown-item" href="#">Another action</a>
        </li>
        <li>
            <a class="dropdown-item" href="#">Something else here</a>
        </li>
    </ul>
</div>

Browser: Chrome OS: Windows 10 CKEditor version: 35.1.0

[Reinmar]

If you want to embed a piece of HTML that's not a rich-text content, but a piece of interface, I'd recommend using: https://ckeditor.com/docs/ckeditor5/latest/features/html/html-embed.html

[matbk49751]

If you want to embed a piece of HTML that's not a rich-text content, but a piece of interface, I'd recommend using: https://ckeditor.com/docs/ckeditor5/latest/features/html/html-embed.html

Hey Reinmar! This should work. Thank you for the quick response. Have a great rest of your week.