Expand html elements that work with the editor.

I had a similar issue with one of my (non-sdc) components -- it turned out I had some faulty html missing a closing div tag. Worked great in editor, but once saved, back into view mode, back into edit mode things would be missing.

Oh, great tip, I'll take a look again.

Ok I've had a chance to dig in, there is something strange going on.

If I output the SDC and the paragraph in the same template the component then everything works as expected on edit and view (It's duplicated though)

If I output only the SDC then it works on view, but not edit.

I am including attributes, I also edited the example to include base paragraph template classes too.

I'm not sure what is going on.
When I check the console I see a lot of errors such as:

6 inline-editor.js:59:42
Uncaught TypeError: $(...).once is not a function

and

Uncaught TypeError: Drupal.editors is undefined

I'm running into something like this, too -- in my case, no SDC, but I do have very customized paragraph entity templates, sometimes very stripped-down. A bit of a variation in my case: If I have the standard div wrapper in the paragraph template, i.e.

<div{{ attributes.addClass(classes) }}>
  {% block content %}
    {{ content }}
  {% endblock %}
</div>

Mercury Editor works fine. If I don't, if I have more bare-bones paragraph templates (i.e. without this standard div wrapper), Mercury Editor doesn't work -- I get vanishing (and sometimes duplicating?) content, and no floating "edit" panel when I mouse over the content.

(So, I'm not saying it's necessarily the identical issue, but the buggy behavior is very similar, so I'm chiming in anyway!)

@nicxvan For me, it was important to also check my layout/section paragraph type and its template, not just the paragraph types that I place inside the section, if that makes sense -- or, just for the sake of testing, allow placing "card" paragraph entities without layout/section parent paragraphs (i.e. on your node "form display" settings > paragraphs field > uncheck this box: Require paragraphs to be added inside a layout, aka "require_layouts" config).

I'll try that second tip, I do have the attributes on the wrapping element. It's not always a div though.

So, while doing more digging, I uninstalled Mercury Editor, and tried the layout paragraphs experimental "builder" tool (you can enable it on "manage display" rather than "manage form display", for your content type that has paragraphs field) -- and I ran into **similar** though not identical issues -- mainly that there was no floating "edit" panel for paragraph entities that didn't have div.attributes on/around them.

So then I looked at #3223483: Using Twig field value removes lpb-controls and "Choose component" + icon →

And I think my issue isn't like yours after all, sorry! -- doing this has solved my issue (and I tried it with "article" and "container" instead of "div", just to be sure):

{% if elements['#layout_paragraphs_component'] %}
  <div{{ attributes }}>
{% endif %}

The rest of my custom template stuff goes here... then...

{% if elements['#layout_paragraphs_component'] %}
  </div>
{% endif %}

-------
Honestly, I don't think it's super clear that Layout Paragraphs requires the attributes to be "on" an element, it's not enough to just "render" the attributes object, buuuut that's at least partially because I'm frustrated I didn't know :) That said, I'll continue to watch this issue, I hope you find a solution soon!

For Layout Paragraphs to work correctly, you need to render {{ attributes }} in the root level HTML node for the paragraph. Make sure you are not inadvertently pass those attributes to nested elements / SDC components, which is easy to do by mistake.

I will double check but you mentioned that on the show so I was careful to ensure I was passing that into the sdc and printing out at the root.

Ok I have tested again and there is still some strangeness. I took the NWCs out of the equation and just used SDCs

It works better but some key things are still broken.

I cannot edit the components once I have added them.

I have confirmed by switch back to olivero and editing / adding new components.

In the custom theme I can add new components, but I cannot edit them, the ui is missing.
I have extensive reproduction steps in the issue summary.

It renders properly on the front end:

<details data-component-id="mercury_theme:accordion">
  <summary>
            <div class="field field--name-field-title field--type-string field--label-hidden field__item">Test accordion 2</div>
   </summary>
            <div class="clearfix text-formatted field field--name-field-content field--type-text-long field--label-hidden field__item"><p><strong>Content</strong> 2</p></div>
</details>

However this is how it renders in the edit side:

<details data-uuid="3315e5dc-9a09-47f5-a39f-e9b33ccc25af" data-type="accordion" data-lpb-ui-id="3315e5dc-9a09-47f5-a39f-e9b33ccc25af" class="js-lpb-component is-mercury-edit-mode" data-has-js-ui-element="" data-component-id="mercury_theme:accordion" data-once="lpb-ui-elements me-prevent-focus" tabindex="-1"><a class="lpb-btn--add before use-postmessage js-lpb-ui" data-dialog-type="dialog" data-dialog-options="{&quot;target&quot;:&quot;lpb-dialog-48449700d5b1ad618feac1cc7dfd19d9&quot;,&quot;width&quot;:&quot;fit-content&quot;,&quot;height&quot;:&quot;fit-content&quot;,&quot;drupalAutoButtons&quot;:false,&quot;dialogClass&quot;:&quot;lpb-dialog&quot;,&quot;resizable&quot;:true}" href="/mercury-editor/48449700d5b1ad618feac1cc7dfd19d9/choose-component?sibling_uuid=3315e5dc-9a09-47f5-a39f-e9b33ccc25af&amp;parent_uuid=adf03d4c-4094-4d87-9ba7-1d0baa0eb9d0&amp;region=content&amp;placement=before" data-once="me-msg-broadcaster me-stop-iframed-links me-prevent-focus" target="_parent"><span class="visually-hidden">Choose component</span></a><div class="lpb-controls js-lpb-ui" style="null">
    <a href="#move" class="lpb-drag lpb-tooltip--hover lpb-tooltip--focus" aria-describedy="lpb-controls--2--tip" data-once="me-stop-iframed-links me-prevent-focus">Drag</a><span class="lpb-tooltiptext" id="lpb-controls--2--tip">Drag or click and use arrow keys to move. <br>Press Return or Tab when finished.</span>
<span class="lpb-controls-label">Accordion</span>
<a href="#move-up" class="lpb-up" title="Move up" tabindex="-1" data-once="me-stop-iframed-links me-prevent-focus">Move up</a><a href="#move-down" class="lpb-down" title="Move down" tabindex="-1" data-once="me-stop-iframed-links me-prevent-focus">Move down</a><a href="/mercury-editor/48449700d5b1ad618feac1cc7dfd19d9/edit/3315e5dc-9a09-47f5-a39f-e9b33ccc25af" class="lpb-edit use-postmessage" data-dialog-type="dialog" data-dialog-options="{&quot;width&quot;:&quot;fit-content&quot;,&quot;height&quot;:&quot;fit-content&quot;,&quot;drupalAutoButtons&quot;:false,&quot;dialogClass&quot;:&quot;lpb-dialog&quot;,&quot;resizable&quot;:true,&quot;target&quot;:&quot;lpb-dialog-48449700d5b1ad618feac1cc7dfd19d9&quot;}" title="Edit Accordion" data-once="me-msg-broadcaster me-stop-iframed-links me-prevent-focus">Edit</a><a href="/layout-paragraphs-builder/48449700d5b1ad618feac1cc7dfd19d9/duplicate/3315e5dc-9a09-47f5-a39f-e9b33ccc25af" class="lpb-duplicate use-ajax" title="Duplicate" data-once="ajax me-stop-iframed-links me-prevent-focus">Duplicate</a><a href="/mercury-editor/48449700d5b1ad618feac1cc7dfd19d9/delete/3315e5dc-9a09-47f5-a39f-e9b33ccc25af" class="lpb-delete use-postmessage" data-dialog-type="dialog" data-dialog-options="{&quot;width&quot;:&quot;fit-content&quot;,&quot;height&quot;:&quot;fit-content&quot;,&quot;drupalAutoButtons&quot;:false,&quot;dialogClass&quot;:&quot;lpb-dialog&quot;,&quot;resizable&quot;:true,&quot;target&quot;:&quot;lpb-dialog-48449700d5b1ad618feac1cc7dfd19d9&quot;}" title="Delete Accordion" data-once="me-msg-broadcaster me-stop-iframed-links me-prevent-focus">Delete</a>
  </div>
  <summary>
            <div data-sync-changes="paragraph/3315e5dc-9a09-47f5-a39f-e9b33ccc25af/field_title" class="field field--name-field-title field--type-string field--label-hidden field__item">testt</div>
      </summary>
  
            <div data-sync-changes="paragraph/3315e5dc-9a09-47f5-a39f-e9b33ccc25af/field_content" class="clearfix text-formatted field field--name-field-content field--type-text-long field--label-hidden field__item"><p>tst</p></div>
      
<a class="lpb-btn--add after use-postmessage js-lpb-ui" data-dialog-type="dialog" data-dialog-options="{&quot;target&quot;:&quot;lpb-dialog-48449700d5b1ad618feac1cc7dfd19d9&quot;,&quot;width&quot;:&quot;fit-content&quot;,&quot;height&quot;:&quot;fit-content&quot;,&quot;drupalAutoButtons&quot;:false,&quot;dialogClass&quot;:&quot;lpb-dialog&quot;,&quot;resizable&quot;:true}" href="/mercury-editor/48449700d5b1ad618feac1cc7dfd19d9/choose-component?sibling_uuid=3315e5dc-9a09-47f5-a39f-e9b33ccc25af&amp;parent_uuid=adf03d4c-4094-4d87-9ba7-1d0baa0eb9d0&amp;region=content&amp;placement=after" data-once="me-msg-broadcaster me-stop-iframed-links me-prevent-focus" target="_parent"><span class="visually-hidden">Choose component</span></a></details>

I changed the SDC from details to a div and the SDC worked, I suspect this is the reason that the native web components don't work either. I suspect the library looking for the attributes is expecting them on a specific element and if it's not the correct element the JS cannot place the toolbar for the edit.

I tried

and those work.

I tried a couple more and they seem to work like <table>

That seems to confirm, details and custom html elements do not interact properly.