Paragraphs on the page all collapse to nothing after an edit

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 <div> 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 <div> with the idbut 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.

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.

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?

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 think the magic lies withing the ptoc_preprocess_paragraph function in the ptoc.module code which alters the various paragraphs on the main page.

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.

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

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!