Paragraphs on the page all collapse to nothing after an edit

Are you using web-components in those nested paragraphs that are rendered with Javascript? Is there any html markup at all for the collapsed paragraphs? Could you please send the screenshot of the developer console ("Inspect") from the browser for this collapsed paragraphs?

I'm not entirely sure what you mean in this context in relation to web-components - the embedded Paragraphs are really just Entity references to internal nodes that are rendered in a particular view mode that makes them look right when embedded.

Here is the screenshot again after the off-canvas editing but this time using v1.60 of the module so cosmetically a little different...

You are quire right, there is some other JavaScript at play here - the excellent Paragraphs Table of Contents (ptoc) module ( https://www.drupal.org/project/ptoc → ) which creates a separate block containing anchors to each Paragraphs on the page and then wraps' each paragraph in a %lt;div%gt; with an ID right above where each Paragraph normally lives on the page.

This might be a bit long-winded but let me first show you the actual markup taken from the browser inspector and at the bottom you can see where the actual Paragraph should have been rendered but it has disappeared.

You can see the Paragraphs Table of Contents module doing it's job at LINE 6 by wrapping the affair in a <div> with a id='para...'....

<div class="frontend-editing paragraph paragraph--type--text paragraph--view-mode--default" id="paragraph-6013">

the actual inspector output

<div data-frontend-editing="paragraph--6012--field_content" class="frontend-editing-field-wrapper">
      <div
            class="field field--name-field-content field--type-entity-reference-revisions field--label-hidden field__items">
            <div class="field__item">
                  <div class="frontend-editing paragraph paragraph--type--text paragraph--view-mode--default"
                        id="paragraph-6013">
                        <div
                              class="is-a-group-title- field field--name-field-title field--type-string field--label-hidden field__item">
                              <h2 id="introduction">Introduction<a class="auto-anchor" title="Permalink to this item"
                                          href="#introduction">#</a></h2>
                        </div>
                        <div class="frontend-editing-actions" data-entity-type="paragraph"
                              data-once="frontend-editing-processed">
                              <div class="common-actions-container">
                                    <div class="title-edit-container"><span class="action-title">Title and descriptive
                                                text</span><a href="/frontend-editing/form/paragraph/6013" title="Edit"
                                                class="frontend-editing-open-sidebar frontend-editing__action frontend-editing__action--edit">Edit</a>
                                    </div>
                                    <div class="move-paragraphs icons-container"><a
                                                href="/frontend-editing/paragraphs/6013/down" title="Move down"
                                                class="use-ajax frontend-editing__action frontend-editing__action--down"
                                                data-once="ajax">Move down</a></div>
                              </div>
                              <div class="add-paragraphs icons-container"><a
                                          href="/frontend-editing/paragraphs/add/paragraph/6012/field_content/6013/1?view_mode_id=default"
                                          title="Add before"
                                          class="frontend-editing-open-sidebar frontend-editing__action frontend-editing__action--before">Add
                                          before</a><a
                                          href="/frontend-editing/paragraphs/add/paragraph/6012/field_content/6013/0?view_mode_id=default"
                                          title="Add after"
                                          class="frontend-editing-open-sidebar frontend-editing__action frontend-editing__action--after">Add
                                          after</a></div>
                        </div>
                        <div>
                         *** ... the actual paragraph's rendered content would normally be here ... ***
                        </div>
                  </div>
            </div>
      </div>
</div>

The ptoc module 'knows' where Paragraphs should be an correctly inserts the anchored with an but the actual Paragraph is a gonna! and all that exists in the Front End Editing wrapper :-( ...

The markup of the entire embedded Paragraphs is omitted.

Try to exclude that field from being wrapped with frontend editing, there is a setting here `/admin/config/frontend-editing/ui-settings` "Do not modify the following fields for ajax content update:". You will need to add something like this `paragraph.
.field_content`.

I think this TOC module relies on some structure of the markup that is now broken with frontend editing, and it is also only for editors.

I notice that the guidance says to use the pattern...

entity_type.bundle.field_name

Not the sort of JQuery-esque pattern I'm used to using in situations like these?

So I have gone for various different attempts like these - the first for the outmost (enclosing) Paragraph and the second for the first of the (enclosed) inner ones ...

paragraph.paragraph--type--sections.field__item
paragraph.paragraph--type--text.field__item

But nothing seems to make any difference.

Bundle is not paragraph--type--sections, it is just sections, so you need to add to that setting paragraph.sections.<field_name_here>. From your markup it seems that your machine name of the field is field_content, so try paragraph.sections.field_content

Ah, I see now!
The . doesn't mean 'class'.

Might I make the suggestion to use a pipe (|) instead to avoid the confusion?

I've been able to make the editing of the page work now by adding the following exemptions...

paragraph.sections.field_content
paragraph.text.field_content
paragraph.interaction.field_content
paragraph.exam-question.field_content

However, as you can see, I have ended up having to include every type of paragraph on the page which essentially takes me back to same behaviour as when disabling the whole AJAX feature.

Plus, we have 50 different Paragraphs in our build, many of which work alongside the Paragraphs Table of Content module.

I suppose this begs the question, what should I look into next here in order to try to uncover quite what is that might be causing difficulty for the Paragraphs Table of Contents module?

paragraph.sections.field_content this is the machine name of the field config, how it is stored in Drupal. So I think this is more common than a pipe.

It seems that the Paragraphs Table of Contents module is very sensitive to markup. So if it is possible, please write down what module are you using for that and what version, so that it is possible to reproduce this. Maybe there will be need to change your theme templates, so that the markup fits both frontend editing and table of contents module.

Sure.
I am using the latest version of the 'ptoc' module...

# Information added by Drupal.org packaging script on 2023-01-06
version: '8.x-1.2'
project: 'ptoc'
datestamp: 1673045812

As far as I can see, templates supplied as part of module only have a part to play in the shaping of the actual ToC block whihc is not where the problem lies.

I've got to be honest, I've never really understood quite how this module does what it does but I thin the magic lies withing the ptoc_preprocess_paragraph function in the ptoc.module code which alters the various paragraphs on the main page.

Is this issue now fixed? Taking into account that this issue is fixed now https://www.drupal.org/project/frontend_editing/issues/3428005 💬 Hiding the Front End Editing containers on particular blocks in v1.60x Fixed ?

I am testing 1.63 today and I don't see this is 'fixed' as per the release note.

The behaviour is different for sure but certainly not fixed ;-)

Here is a step-by-step illustration...

1) I edit the Paragraph via the FEE link...

2) I save in the FEE off-canvas popup...

3) The RESULT
The result of the AJAX re-draw is to re-draw each of the paragraphs using the ptoc Display mode which is not correct...

The ptoc Display mode is the one responsible for fashioning the ToC (in my case in the sidebar) not the main page paragraphs.

Ok, it seems that it happens, because you have the same paragraphs rendered on the same page in 2 different view modes.

This was not part of 1.6.3 and was not mentioned in release notes. I will check this again.

My apologies @a.dmitriiev you are quite correct, it was not mentioned in the release notes, I was ahead of myself!

I have checked this issue again. Before the view mode of the field was not taken into account. Now everywhere where content is updated automatically the view mode is respected. So, if like in your case, there is the same paragraph on the same page rendered in different view modes, the update will replace the paragraph with the view mode that was edited or moved up/down.

Please check MR

I have installed the DEV module but it has made no difference at all; I am still seeing the wrong (the .ptoc view mode on the main page.

I can confirm that the MR completely fixes the remaining problems with the Paragraphs Table of Contents module.

The net result of all this back and forth dialogue is a vastly improved content editor experience; a subtlety-presented yet fast and extremely powerful addition to our not-for-profit educational project...

A very good experience collaborating with the 1xINTERNET team!

Automatically closed - issue fixed for 2 weeks with no activity.