test/gitea-mirror
1
0
Fork 0
mirror of https://gitea.com/gitea/gitea-mirror.git synced 2026-03-20 11:50:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(diff): reprocess htmx content after loading more files (#36568)

Browse Source 
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:
Tyrone Yeh
2026-02-10 09:20:20 +08:00
committed by GitHub
parent f73e45b4ba
commit 269bc1b112
1 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web_src/js/features/repo-diff.ts
View File

@@ -170,7 +170,9 @@ async function loadMoreFiles(btn: Element): Promise<boolean> {
const respFileBoxes = respDoc.querySelector('#diff-file-boxes')!; const respFileBoxes = respDoc.querySelector('#diff-file-boxes')!;
// the response is a full HTML page, we need to extract the relevant contents: // 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 // * 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(); onShowMoreFiles();
return true; return true;
} catch (error) { } catch (error) {
@@ -200,7 +202,7 @@ function initRepoDiffShowMore() {
const resp = await response.text(); const resp = await response.text();
const respDoc = parseDom(resp, 'text/html'); const respDoc = parseDom(resp, 'text/html');
const respFileBody = respDoc.querySelector('#diff-file-boxes .diff-file-body .file-body')!; 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); el.parentElement!.replaceWith(...respFileBodyChildren);
for (const el of respFileBodyChildren) window.htmx.process(el); for (const el of respFileBodyChildren) window.htmx.process(el);
// FIXME: calling onShowMoreFiles is not quite right here. // FIXME: calling onShowMoreFiles is not quite right here.