mirror of
https://github.com/go-gitea/gitea.git
synced 2026-02-10 13:58:55 +00:00
fix(diff): reprocess htmx content after loading more files (#36568)
The "Show more files" button replaces `#diff-incomplete` with newly loaded diff file boxes. The inserted HTML may contain htmx attributes, but they are not processed after insertion. ### Solution Wrap the incomplete diff placeholder with a temporary wrapper so we can call `htmx.process()` on the newly inserted content. After processing, unwrap the wrapper to keep the DOM structure unchanged. ### Testing - Open a large PR diff page where `Diff.IsIncomplete` is true - Click "Show more files" - Verify newly loaded file boxes behave correctly (htmx-related features work as expected) <img width="927" height="278" alt="image" src="https://github.com/user-attachments/assets/54f2b4f2-c0e1-483c-9e26-79a2838e98ee" /> --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
@@ -170,7 +170,9 @@ async function loadMoreFiles(btn: Element): Promise<boolean> {
|
||||
const respFileBoxes = respDoc.querySelector('#diff-file-boxes')!;
|
||||
// the response is a full HTML page, we need to extract the relevant contents:
|
||||
// * append the newly loaded file list items to the existing list
|
||||
document.querySelector('#diff-incomplete')!.replaceWith(...Array.from(respFileBoxes.children));
|
||||
const respFileBoxesChildren = Array.from(respFileBoxes.children); // "children:HTMLCollection" will be empty after replaceWith
|
||||
document.querySelector('#diff-incomplete')!.replaceWith(...respFileBoxesChildren);
|
||||
for (const el of respFileBoxesChildren) window.htmx.process(el);
|
||||
onShowMoreFiles();
|
||||
return true;
|
||||
} catch (error) {
|
||||
@@ -200,7 +202,7 @@ function initRepoDiffShowMore() {
|
||||
const resp = await response.text();
|
||||
const respDoc = parseDom(resp, 'text/html');
|
||||
const respFileBody = respDoc.querySelector('#diff-file-boxes .diff-file-body .file-body')!;
|
||||
const respFileBodyChildren = Array.from(respFileBody.children); // respFileBody.children will be empty after replaceWith
|
||||
const respFileBodyChildren = Array.from(respFileBody.children); // "children:HTMLCollection" will be empty after replaceWith
|
||||
el.parentElement!.replaceWith(...respFileBodyChildren);
|
||||
for (const el of respFileBodyChildren) window.htmx.process(el);
|
||||
// FIXME: calling onShowMoreFiles is not quite right here.
|
||||
|
||||
Reference in New Issue
Block a user