Fix parent view mode on paragraph edit links
>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3537719. --> Reported by: [norman.lol](https://www.drupal.org/user/2482808) Related to !122 >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>Ajax content update enabled. Still, always a full page reload is triggered on paragraphs edit. While moving up and down and inserting new paragraphs works totally fine with Ajax.</p> <p>Turns out this happens when the view mode of the parent entity and the view mode of the paragraph don't match. For example node comes in <code>full</code> view mode and paragraph comes in <code>default</code> view mode.</p> <p>Article comes with hidden trigger link (note the selector <code>data-fe-update-content="node--1--field_content_paragraphs--full"</code>):</p> <pre>&lt;a href="/frontend-editing/update-content/node/1/field_content_paragraphs/full" title="Reload content for this field" class="use-ajax frontend-editing-update-content visually-hidden" data-fe-update-content="node--1--field_content_paragraphs--full" data-once="ajax"&gt;Reload content for this field&lt;/a&gt;</pre><p>And paragraph comes with <code>view_mode_id</code> URL query param in the edit link, used to build the selector later that is needed to click the hidden link (note <code>view_mode_id=default</code>):</p> <pre>&lt;a href="/frontend-editing/form/paragraph/19222?view_mode_id=default" title="Edit" class="frontend-editing-open-sidebar frontend-editing__action frontend-editing__action--edit"&gt;Edit&lt;/a&gt;</pre><p>This <code>view_mode_id</code> URL query param is later used to build the DOM selector to perform a hidden click on <code>data-fe-update-content="node--1--field_content_paragraphs--full"</code> for the Ajax update.</p> <p>But since <code>view_mode_id</code> on the paragraph edit link is <code>default</code>, it tries to click on <code>data-fe-update-content="node--1--field_content_paragraphs--default"</code> instead, which does not exist.</p> <p>Instead of doing a nice Ajax content update, it now reloads the whole window:</p> <pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; const element = document.querySelector(selector);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (element) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; element.click();<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } else {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; window.location.reload();<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }</pre><h4 id="summary-steps-reproduce">Steps to reproduce</h4> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <h3 id="summary-remaining-tasks">Remaining tasks</h3> <h3 id="summary-ui-changes">User interface changes</h3> <h3 id="summary-api-changes">API changes</h3> <h3 id="summary-data-model-changes">Data model changes</h3>
issue