[META] Real-time preview: supporting back-end infrastructure (#3453690) · Issues · project / canvas

[META] Real-time preview: supporting back-end infrastructure

>>> [!note] Migrated issue   Reported by: [jessebaker](https://www.drupal.org/user/3546546) >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> We want to replace the mocked call to render a realtime preview with a real endpoint that renders the page and returns the markup to be displayed. In this first step, performance is a low priority goal. At this early stage it is more important to have this foundation in place on which to build and optimise in the future. <h3 id="summary-proposed-resolution">Proposed resolution</h3> <ol> <li>✅ PRECURSOR to Real-time preview of rendered components WITHOUT in-place editing (i.e. sidebar prop editing only): use the exact same mechanism the UI is currently using, meaning it won't need to change at all: <a href="https://www.drupal.org/project/experience_builder/issues/3455898" title="Status: Closed (fixed)">#3455898: Connect client & server, with zero changes to client (UI): rough working endpoints that mimic the UI's mocks</a> </li> <li> <ul> <li>✅A <a href="https://www.drupal.org/project/experience_builder/issues/3462441" title="Status: Closed (fixed)">#3462441: Contextual form values need to be integrated with Redux: start with single-property field types</a> Real-time preview of rendered components WITHOUT in-place editing (i.e. sidebar prop editing only): ONLY able to click a component and have a form for it appear in the right sidebar, NO ability to in-place edit e.g. the title of a hero component. </li><li>❌ B Convert the above to use HTML comments instead of a wrapping <code><div></code> like <code>\Drupal\experience_builder\Controller\SdcController::wrapComponentsForPreview()</code> is currently doing: <pre><div class="sortable-item" data-xb-uuid="%s" data-xb-type="%s">    </div></pre>There are relatively few annotation comments required from the backend to enable hooking up the hover/select/drag and drop. The following mocked up markup + some throwaway code were used to verify this can work: <div class="codeblock"> <pre><?php     <body>                     <div>         <h1>Hello world.</h1>       </div>                     <h1>Another component.</h1>       <p>Ooo 2 elements with no wrapper! Other components should not be able to get inserted above this P and below the H1 ^</p>                     <img src="https://placehold.co/600x400" alt="A placceholder image" width="600" height="400" />                     <div class="row"  style="display: flex;">           <div class="column" style="width: 60%; background: #c0ffee;">                                       <div>               <h1>In a slot!</h1>             </div>                        </div>           <div class="column"  style="width: 60%; background: #decade;">                        </div>       </div>            </body> ?></pre></div> <ol> <li><code></code> used directly inside a slot to indicate that the parent element is a drop target for sorting. The very top level should be xb-slot-root other instances should be a UUID e.g. <code></code></li> <li><code></code> should be immediately before the first element of a component.</li> <li><code></code> should be immediately after the last element of a component.</li> </ol> <img src="https://www.drupal.org/files/issues/2024-06-10/image%20%282%29.png" alt=""> </li></ul> </li> <li>🛑 Real-time preview of rendered components WITH AFFORDANCES for in-place editing: ONLY able to click a component and have a form for it appear in the right sidebar, with PARTIAL ability to in-place edit: upon hovering component markup marked up for in-place editing we'd be able to highlight in the right sidebar which part of the form corresponds to it. Proposal by @jessebaker: <a href="https://www.drupal.org#comment-15635301">#4</a>. </li> <li>🛑 Real-time preview of rendered components WITH ACTUAL in-place editing: on top of the above, we'd need to use some input widgets, presumably only text initially (think <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable"><code>contenteditable</code></a> but with restrictions). Proposal by @jessebaker: <a href="https://www.drupal.org#comment-15635301">#4</a>. </li> </ol> ⚠️ Steps 2–4 would be a lot simpler/more productive if we could leverage @larowlan's AST work (see <a href="https://www.drupal.org#comment-15637840">#13</a>). We're waiting on @larowlan for an update on that front before proceeding further here. > Related issue: [Issue #3452497](https://www.drupal.org/node/3452497) > Related issue: [Issue #3445566](https://www.drupal.org/node/3445566) > Related issue: [Issue #3448927](https://www.drupal.org/node/3448927) > Related issue: [Issue #3455898](https://www.drupal.org/node/3455898) > Related issue: [Issue #3462441](https://www.drupal.org/node/3462441) > Related issue: [Issue #3450586](https://www.drupal.org/node/3450586)

issue