Skip to content

Commit 300c7dd

Browse files
tyroneyehwxiaoguang
andcommitted
fix(diff): reprocess htmx content after loading more files (go-gitea#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. 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. - 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>
1 parent 9084339 commit 300c7dd

1 file changed

Lines changed: 6 additions & 4 deletions

File tree

web_src/js/features/repo-diff.ts

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,9 @@ async function loadMoreFiles(btn: Element): Promise<boolean> {
170170
const respFileBoxes = respDoc.querySelector('#diff-file-boxes');
171171
// the response is a full HTML page, we need to extract the relevant contents:
172172
// * append the newly loaded file list items to the existing list
173-
document.querySelector('#diff-incomplete').replaceWith(...Array.from(respFileBoxes.children));
173+
const respFileBoxesChildren = Array.from(respFileBoxes.children); // "children:HTMLCollection" will be empty after replaceWith
174+
document.querySelector('#diff-incomplete')!.replaceWith(...respFileBoxesChildren);
175+
for (const el of respFileBoxesChildren) window.htmx.process(el);
174176
onShowMoreFiles();
175177
return true;
176178
} catch (error) {
@@ -199,9 +201,9 @@ function initRepoDiffShowMore() {
199201
const response = await GET(url);
200202
const resp = await response.text();
201203
const respDoc = parseDom(resp, 'text/html');
202-
const respFileBody = respDoc.querySelector('#diff-file-boxes .diff-file-body .file-body');
203-
const respFileBodyChildren = Array.from(respFileBody.children); // respFileBody.children will be empty after replaceWith
204-
el.parentElement.replaceWith(...respFileBodyChildren);
204+
const respFileBody = respDoc.querySelector('#diff-file-boxes .diff-file-body .file-body')!;
205+
const respFileBodyChildren = Array.from(respFileBody.children); // "children:HTMLCollection" will be empty after replaceWith
206+
el.parentElement!.replaceWith(...respFileBodyChildren);
205207
for (const el of respFileBodyChildren) window.htmx.process(el);
206208
// FIXME: calling onShowMoreFiles is not quite right here.
207209
// But since onShowMoreFiles mixes "init diff box" and "init diff body" together,

0 commit comments

Comments
 (0)