From f0f1737d4d533e06f482a63ff995ae79cc1c89dc Mon Sep 17 00:00:00 2001 From: Kerwin Bryant Date: Tue, 4 Mar 2025 03:49:15 +0800 Subject: [PATCH 1/4] Refactor markup and pdf-viewer to use new init framework (#33772) 1. Add some "render-content" classes to "markup" elements when the content is rendered 2. Use correct "markup" wrapper for "preview" (but not set that class on the tab) 3. Remove incorrect "markup" class from LFS file view, because there is no markup content * "edit-diff" is also removed because it does nothing 5. Use "initPdfViewer" for PDF viewer 6. Remove incorrect "content" class from milestone markup 7. Init all ".markup" elements by new init framework --------- Co-authored-by: wxiaoguang --- templates/org/home.tmpl | 2 +- templates/projects/list.tmpl | 4 +- templates/repo/editor/edit.tmpl | 4 +- templates/repo/issue/fields/markdown.tmpl | 2 +- templates/repo/issue/milestone_issues.tmpl | 2 +- templates/repo/issue/milestones.tmpl | 4 +- templates/repo/release/list.tmpl | 2 +- templates/repo/settings/lfs_file.tmpl | 4 +- templates/repo/view_file.tmpl | 2 +- templates/repo/wiki/view.tmpl | 8 +- templates/shared/combomarkdowneditor.tmpl | 2 +- templates/user/dashboard/feeds.tmpl | 2 +- templates/user/dashboard/milestones.tmpl | 6 +- templates/user/profile.tmpl | 2 +- web_src/css/editor/fileeditor.css | 9 -- web_src/css/markup/content.css | 2 +- web_src/css/shared/milestone.css | 2 +- web_src/js/features/repo-editor.ts | 4 +- web_src/js/features/repo-issue-edit.ts | 3 - web_src/js/features/repo-wiki.ts | 4 +- web_src/js/index.ts | 3 +- web_src/js/markup/asciicast.ts | 18 ++- web_src/js/markup/codecopy.ts | 17 ++- web_src/js/markup/content.ts | 25 ++-- web_src/js/markup/math.ts | 42 ++++--- web_src/js/markup/mermaid.ts | 108 +++++++++--------- web_src/js/markup/tasklist.ts | 126 ++++++++++----------- web_src/js/modules/observer.ts | 3 + web_src/js/render/pdf.ts | 10 +- 29 files changed, 195 insertions(+), 227 deletions(-) diff --git a/templates/org/home.tmpl b/templates/org/home.tmpl index 826642db42..cffdfabfaa 100644 --- a/templates/org/home.tmpl +++ b/templates/org/home.tmpl @@ -6,7 +6,7 @@
{{if .ProfileReadmeContent}} -
{{.ProfileReadmeContent}}
+
{{.ProfileReadmeContent}}
{{end}} {{template "shared/repo_search" .}} {{template "explore/repo_list" .}} diff --git a/templates/projects/list.tmpl b/templates/projects/list.tmpl index 5d40653dc6..48083811e7 100644 --- a/templates/projects/list.tmpl +++ b/templates/projects/list.tmpl @@ -74,9 +74,7 @@ {{end}}
{{if .Description}} -
- {{.RenderedContent}} -
+
{{.RenderedContent}}
{{end}} {{end}} diff --git a/templates/repo/editor/edit.tmpl b/templates/repo/editor/edit.tmpl index 577a2be9ad..ae8a60c20c 100644 --- a/templates/repo/editor/edit.tmpl +++ b/templates/repo/editor/edit.tmpl @@ -45,10 +45,10 @@ data-line-wrap-extensions="{{.LineWrapExtensions}}">{{.FileContent}}
-
+
{{ctx.Locale.Tr "loading"}}
-
+
diff --git a/templates/repo/issue/fields/markdown.tmpl b/templates/repo/issue/fields/markdown.tmpl index da8f5e6bdf..dbf4b71ba8 100644 --- a/templates/repo/issue/fields/markdown.tmpl +++ b/templates/repo/issue/fields/markdown.tmpl @@ -1,3 +1,3 @@
-
{{ctx.RenderUtils.MarkdownToHtml .item.Attributes.value}}
+
{{ctx.RenderUtils.MarkdownToHtml .item.Attributes.value}}
diff --git a/templates/repo/issue/milestone_issues.tmpl b/templates/repo/issue/milestone_issues.tmpl index abb4e3290d..ac5d7f16dd 100644 --- a/templates/repo/issue/milestone_issues.tmpl +++ b/templates/repo/issue/milestone_issues.tmpl @@ -22,7 +22,7 @@ {{end}}
{{if .Milestone.RenderedContent}} -
+
{{.Milestone.RenderedContent}}
{{end}} diff --git a/templates/repo/issue/milestones.tmpl b/templates/repo/issue/milestones.tmpl index e7dfe08ee0..5701c1faa6 100644 --- a/templates/repo/issue/milestones.tmpl +++ b/templates/repo/issue/milestones.tmpl @@ -81,9 +81,7 @@ {{end}}
{{if .Content}} -
- {{.RenderedContent}} -
+
{{.RenderedContent}}
{{end}} {{end}} diff --git a/templates/repo/release/list.tmpl b/templates/repo/release/list.tmpl index 041890ca9c..88bd85ef4d 100644 --- a/templates/repo/release/list.tmpl +++ b/templates/repo/release/list.tmpl @@ -64,7 +64,7 @@ | {{ctx.Locale.Tr "repo.release.ahead.commits" $release.NumCommitsBehind}} {{ctx.Locale.Tr "repo.release.ahead.target" $release.TargetBehind}} {{end}}

-
+
{{$release.RenderedNote}}
diff --git a/templates/repo/settings/lfs_file.tmpl b/templates/repo/settings/lfs_file.tmpl index f6fac05b69..9f72d764ae 100644 --- a/templates/repo/settings/lfs_file.tmpl +++ b/templates/repo/settings/lfs_file.tmpl @@ -13,7 +13,7 @@
{{template "repo/unicode_escape_prompt" dict "EscapeStatus" .EscapeStatus "root" $}} -
+
{{if .IsFileTooLarge}} {{template "shared/filetoolarge" dict "RawFileLink" .RawFileLink}} {{else if not .FileSize}} @@ -31,7 +31,7 @@ {{ctx.Locale.Tr "repo.audio_not_supported_in_browser"}} {{else if .IsPDFFile}} -
+
{{else}} {{ctx.Locale.Tr "repo.file_view_raw"}} {{end}} diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl index 4907d87301..9f1b2a5e8f 100644 --- a/templates/repo/view_file.tmpl +++ b/templates/repo/view_file.tmpl @@ -108,7 +108,7 @@ {{ctx.Locale.Tr "repo.audio_not_supported_in_browser"}} {{else if .IsPDFFile}} -
+
{{else}} {{ctx.Locale.Tr "repo.file_view_raw"}} {{end}} diff --git a/templates/repo/wiki/view.tmpl b/templates/repo/wiki/view.tmpl index 843a977e3e..efb614280a 100644 --- a/templates/repo/wiki/view.tmpl +++ b/templates/repo/wiki/view.tmpl @@ -63,18 +63,18 @@
{{if .sidebarTocContent}} -
+
{{.sidebarTocContent | SafeHTML}}
{{end}} -
+
{{template "repo/unicode_escape_prompt" dict "EscapeStatus" .EscapeStatus "root" $}} {{.content | SafeHTML}}
{{if .sidebarPresent}} -
+
{{if and .CanWriteWiki (not .Repository.IsMirror)}} {{svg "octicon-pencil"}} {{end}} @@ -86,7 +86,7 @@
{{if .footerPresent}} -
+
{{if and .CanWriteWiki (not .Repository.IsMirror)}} {{svg "octicon-pencil"}} {{end}} diff --git a/templates/shared/combomarkdowneditor.tmpl b/templates/shared/combomarkdowneditor.tmpl index b1c3b29cf3..fa3e6c6ade 100644 --- a/templates/shared/combomarkdowneditor.tmpl +++ b/templates/shared/combomarkdowneditor.tmpl @@ -81,7 +81,7 @@ }
-
+
{{ctx.Locale.Tr "loading"}}
diff --git a/templates/user/dashboard/feeds.tmpl b/templates/user/dashboard/feeds.tmpl index 739be586b8..47686dd442 100644 --- a/templates/user/dashboard/feeds.tmpl +++ b/templates/user/dashboard/feeds.tmpl @@ -110,7 +110,7 @@ {{(.GetIssueTitle ctx) | ctx.RenderUtils.RenderIssueSimpleTitle}} {{$comment := index .GetIssueInfos 1}} {{if $comment}} -
{{ctx.RenderUtils.MarkdownToHtml $comment}}
+
{{ctx.RenderUtils.MarkdownToHtml $comment}}
{{end}} {{else if .GetOpType.InActions "merge_pull_request"}}
{{index .GetIssueInfos 1}}
diff --git a/templates/user/dashboard/milestones.tmpl b/templates/user/dashboard/milestones.tmpl index 7c1a69a6f5..d0fe0abbc9 100644 --- a/templates/user/dashboard/milestones.tmpl +++ b/templates/user/dashboard/milestones.tmpl @@ -33,7 +33,7 @@ {{end}}
-
+
@@ -140,9 +140,7 @@ {{end}}
{{if .Content}} -
- {{.RenderedContent}} -
+
{{.RenderedContent}}
{{end}} {{end}} diff --git a/templates/user/profile.tmpl b/templates/user/profile.tmpl index 345872b00d..e5c3412ddd 100644 --- a/templates/user/profile.tmpl +++ b/templates/user/profile.tmpl @@ -26,7 +26,7 @@ {{else if eq .TabName "followers"}} {{template "repo/user_cards" .}} {{else if eq .TabName "overview"}} -
{{.ProfileReadmeContent}}
+
{{.ProfileReadmeContent}}
{{else if eq .TabName "organizations"}} {{template "repo/user_cards" .}} {{else}} diff --git a/web_src/css/editor/fileeditor.css b/web_src/css/editor/fileeditor.css index 444ee8c7e7..698efffc99 100644 --- a/web_src/css/editor/fileeditor.css +++ b/web_src/css/editor/fileeditor.css @@ -74,12 +74,3 @@ padding: 1rem; text-align: center; } - -.edit-diff { - padding: 0 !important; -} - -.edit-diff > div > .ui.table { - border-top: none !important; - border-bottom: none !important; -} diff --git a/web_src/css/markup/content.css b/web_src/css/markup/content.css index d2dcf2ec6e..fabf5b3a8f 100644 --- a/web_src/css/markup/content.css +++ b/web_src/css/markup/content.css @@ -535,7 +535,7 @@ user-select: none; } -.markup-render { +.markup-content-iframe { display: block; border: none; width: 100%; diff --git a/web_src/css/shared/milestone.css b/web_src/css/shared/milestone.css index 91e6b5e387..47e822f8d3 100644 --- a/web_src/css/shared/milestone.css +++ b/web_src/css/shared/milestone.css @@ -12,7 +12,7 @@ border-top: 1px solid var(--color-secondary); } -.milestone-card .content { +.milestone-card .render-content { padding-top: 10px; } diff --git a/web_src/js/features/repo-editor.ts b/web_src/js/features/repo-editor.ts index 0f3fb7bbcf..0f77508f70 100644 --- a/web_src/js/features/repo-editor.ts +++ b/web_src/js/features/repo-editor.ts @@ -1,7 +1,6 @@ import {htmlEscape} from 'escape-goat'; import {createCodeEditor} from './codeeditor.ts'; import {hideElem, queryElems, showElem, createElementFromHTML} from '../utils/dom.ts'; -import {initMarkupContent} from '../markup/content.ts'; import {attachRefIssueContextPopup} from './contextpopup.ts'; import {POST} from '../modules/fetch.ts'; import {initDropzone} from './dropzone.ts'; @@ -199,7 +198,6 @@ export function initRepoEditor() { } export function renderPreviewPanelContent(previewPanel: Element, content: string) { - previewPanel.innerHTML = content; - initMarkupContent(); + previewPanel.innerHTML = `
${content}
`; attachRefIssueContextPopup(previewPanel.querySelectorAll('p .ref-issue')); } diff --git a/web_src/js/features/repo-issue-edit.ts b/web_src/js/features/repo-issue-edit.ts index f3e8a0beba..b3de91c3bd 100644 --- a/web_src/js/features/repo-issue-edit.ts +++ b/web_src/js/features/repo-issue-edit.ts @@ -4,7 +4,6 @@ import {POST} from '../modules/fetch.ts'; import {showErrorToast} from '../modules/toast.ts'; import {hideElem, querySingleVisibleElem, showElem, type DOMEvent} from '../utils/dom.ts'; import {attachRefIssueContextPopup} from './contextpopup.ts'; -import {initCommentContent, initMarkupContent} from '../markup/content.ts'; import {triggerUploadStateChanged} from './comp/EditorUpload.ts'; import {convertHtmlToMarkdown} from '../markup/html2markdown.ts'; import {applyAreYouSure, reinitializeAreYouSure} from '../vendor/jquery.are-you-sure.ts'; @@ -74,8 +73,6 @@ async function tryOnEditContent(e: DOMEvent) { content.querySelector('.dropzone-attachments').outerHTML = data.attachments; } comboMarkdownEditor.dropzoneSubmitReload(); - initMarkupContent(); - initCommentContent(); } catch (error) { showErrorToast(`Failed to save the content: ${error}`); console.error(error); diff --git a/web_src/js/features/repo-wiki.ts b/web_src/js/features/repo-wiki.ts index 9ffa8a3275..f94d3ef3d1 100644 --- a/web_src/js/features/repo-wiki.ts +++ b/web_src/js/features/repo-wiki.ts @@ -1,4 +1,3 @@ -import {initMarkupContent} from '../markup/content.ts'; import {validateTextareaNonEmpty, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.ts'; import {fomanticMobileScreen} from '../modules/fomantic.ts'; import {POST} from '../modules/fetch.ts'; @@ -31,8 +30,7 @@ async function initRepoWikiFormEditor() { const response = await POST(editor.previewUrl, {data: formData}); const data = await response.text(); lastContent = newContent; - previewTarget.innerHTML = `
${data}
`; - initMarkupContent(); + previewTarget.innerHTML = `
${data}
`; } catch (error) { console.error('Error rendering preview:', error); } finally { diff --git a/web_src/js/index.ts b/web_src/js/index.ts index f48074316e..c1ec78539d 100644 --- a/web_src/js/index.ts +++ b/web_src/js/index.ts @@ -18,7 +18,7 @@ import {initNotificationCount, initNotificationsTable} from './features/notifica import {initRepoIssueContentHistory} from './features/repo-issue-content.ts'; import {initStopwatch} from './features/stopwatch.ts'; import {initFindFileInRepo} from './features/repo-findfile.ts'; -import {initCommentContent, initMarkupContent} from './markup/content.ts'; +import {initMarkupContent} from './markup/content.ts'; import {initPdfViewer} from './render/pdf.ts'; import {initUserAuthOauth2, initUserCheckAppUrl} from './features/user-auth.ts'; @@ -102,7 +102,6 @@ onDomReady(() => { initHeadNavbarContentToggle, initFootLanguageMenu, - initCommentContent, initContextPopups, initHeatmap, initImageDiff, diff --git a/web_src/js/markup/asciicast.ts b/web_src/js/markup/asciicast.ts index 9baae6ba85..22dbff2d46 100644 --- a/web_src/js/markup/asciicast.ts +++ b/web_src/js/markup/asciicast.ts @@ -1,6 +1,6 @@ -export async function renderAsciicast() { - const els = document.querySelectorAll('.asciinema-player-container'); - if (!els.length) return; +export async function initMarkupRenderAsciicast(elMarkup: HTMLElement): Promise { + const el = elMarkup.querySelector('.asciinema-player-container'); + if (!el) return; const [player] = await Promise.all([ // @ts-expect-error: module exports no types @@ -8,11 +8,9 @@ export async function renderAsciicast() { import(/* webpackChunkName: "asciinema-player" */'asciinema-player/dist/bundle/asciinema-player.css'), ]); - for (const el of els) { - player.create(el.getAttribute('data-asciinema-player-src'), el, { - // poster (a preview frame) to display until the playback is started. - // Set it to 1 hour (also means the end if the video is shorter) to make the preview frame show more. - poster: 'npt:1:0:0', - }); - } + player.create(el.getAttribute('data-asciinema-player-src'), el, { + // poster (a preview frame) to display until the playback is started. + // Set it to 1 hour (also means the end if the video is shorter) to make the preview frame show more. + poster: 'npt:1:0:0', + }); } diff --git a/web_src/js/markup/codecopy.ts b/web_src/js/markup/codecopy.ts index f45b7a8e04..4430256848 100644 --- a/web_src/js/markup/codecopy.ts +++ b/web_src/js/markup/codecopy.ts @@ -7,15 +7,12 @@ export function makeCodeCopyButton(): HTMLButtonElement { return button; } -export function renderCodeCopy(): void { - const els = document.querySelectorAll('.markup .code-block code'); - if (!els.length) return; +export function initMarkupCodeCopy(elMarkup: HTMLElement): void { + const el = elMarkup.querySelector('.code-block code'); // .markup .code-block code + if (!el || !el.textContent) return; - for (const el of els) { - if (!el.textContent) continue; - const btn = makeCodeCopyButton(); - // remove final trailing newline introduced during HTML rendering - btn.setAttribute('data-clipboard-text', el.textContent.replace(/\r?\n$/, '')); - el.after(btn); - } + const btn = makeCodeCopyButton(); + // remove final trailing newline introduced during HTML rendering + btn.setAttribute('data-clipboard-text', el.textContent.replace(/\r?\n$/, '')); + el.after(btn); } diff --git a/web_src/js/markup/content.ts b/web_src/js/markup/content.ts index b9190b15ce..55db4aa810 100644 --- a/web_src/js/markup/content.ts +++ b/web_src/js/markup/content.ts @@ -1,18 +1,17 @@ -import {renderMermaid} from './mermaid.ts'; -import {renderMath} from './math.ts'; -import {renderCodeCopy} from './codecopy.ts'; -import {renderAsciicast} from './asciicast.ts'; +import {initMarkupCodeMermaid} from './mermaid.ts'; +import {initMarkupCodeMath} from './math.ts'; +import {initMarkupCodeCopy} from './codecopy.ts'; +import {initMarkupRenderAsciicast} from './asciicast.ts'; import {initMarkupTasklist} from './tasklist.ts'; +import {registerGlobalSelectorFunc} from '../modules/observer.ts'; // code that runs for all markup content export function initMarkupContent(): void { - renderMermaid(); - renderMath(); - renderCodeCopy(); - renderAsciicast(); -} - -// code that only runs for comments -export function initCommentContent(): void { - initMarkupTasklist(); + registerGlobalSelectorFunc('.markup', (el: HTMLElement) => { + initMarkupCodeCopy(el); + initMarkupTasklist(el); + initMarkupCodeMermaid(el); + initMarkupCodeMath(el); + initMarkupRenderAsciicast(el); + }); } diff --git a/web_src/js/markup/math.ts b/web_src/js/markup/math.ts index 4777805e3c..2a4468bf2e 100644 --- a/web_src/js/markup/math.ts +++ b/web_src/js/markup/math.ts @@ -11,9 +11,9 @@ function targetElement(el: Element): {target: Element, displayAsBlock: boolean} }; } -export async function renderMath(): Promise { - const els = document.querySelectorAll('.markup code.language-math'); - if (!els.length) return; +export async function initMarkupCodeMath(elMarkup: HTMLElement): Promise { + const el = elMarkup.querySelector('code.language-math'); // .markup code.language-math' + if (!el) return; const [{default: katex}] = await Promise.all([ import(/* webpackChunkName: "katex" */'katex'), @@ -24,25 +24,23 @@ export async function renderMath(): Promise { const MAX_SIZE = 25; const MAX_EXPAND = 1000; - for (const el of els) { - const {target, displayAsBlock} = targetElement(el); - if (target.hasAttribute('data-render-done')) continue; - const source = el.textContent; + const {target, displayAsBlock} = targetElement(el); + if (target.hasAttribute('data-render-done')) return; + const source = el.textContent; - if (source.length > MAX_CHARS) { - displayError(target, new Error(`Math source of ${source.length} characters exceeds the maximum allowed length of ${MAX_CHARS}.`)); - continue; - } - try { - const tempEl = document.createElement(displayAsBlock ? 'p' : 'span'); - katex.render(source, tempEl, { - maxSize: MAX_SIZE, - maxExpand: MAX_EXPAND, - displayMode: displayAsBlock, // katex: true for display (block) mode, false for inline mode - }); - target.replaceWith(tempEl); - } catch (error) { - displayError(target, error); - } + if (source.length > MAX_CHARS) { + displayError(target, new Error(`Math source of ${source.length} characters exceeds the maximum allowed length of ${MAX_CHARS}.`)); + return; + } + try { + const tempEl = document.createElement(displayAsBlock ? 'p' : 'span'); + katex.render(source, tempEl, { + maxSize: MAX_SIZE, + maxExpand: MAX_EXPAND, + displayMode: displayAsBlock, // katex: true for display (block) mode, false for inline mode + }); + target.replaceWith(tempEl); + } catch (error) { + displayError(target, error); } } diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts index 2dbed280c2..b4bf3153ea 100644 --- a/web_src/js/markup/mermaid.ts +++ b/web_src/js/markup/mermaid.ts @@ -10,9 +10,9 @@ body {margin: 0; padding: 0; overflow: hidden} #mermaid {display: block; margin: 0 auto} blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {margin: 0}`; -export async function renderMermaid(): Promise { - const els = document.querySelectorAll('.markup code.language-mermaid'); - if (!els.length) return; +export async function initMarkupCodeMermaid(elMarkup: HTMLElement): Promise { + const el = elMarkup.querySelector('code.language-mermaid'); // .markup code.language-mermaid + if (!el) return; const {default: mermaid} = await import(/* webpackChunkName: "mermaid" */'mermaid'); @@ -23,67 +23,65 @@ export async function renderMermaid(): Promise { suppressErrorRendering: true, }); - for (const el of els) { - const pre = el.closest('pre'); - if (pre.hasAttribute('data-render-done')) continue; + const pre = el.closest('pre'); + if (pre.hasAttribute('data-render-done')) return; - const source = el.textContent; - if (mermaidMaxSourceCharacters >= 0 && source.length > mermaidMaxSourceCharacters) { - displayError(pre, new Error(`Mermaid source of ${source.length} characters exceeds the maximum allowed length of ${mermaidMaxSourceCharacters}.`)); - continue; - } + const source = el.textContent; + if (mermaidMaxSourceCharacters >= 0 && source.length > mermaidMaxSourceCharacters) { + displayError(pre, new Error(`Mermaid source of ${source.length} characters exceeds the maximum allowed length of ${mermaidMaxSourceCharacters}.`)); + return; + } - try { - await mermaid.parse(source); - } catch (err) { - displayError(pre, err); - continue; - } + try { + await mermaid.parse(source); + } catch (err) { + displayError(pre, err); + return; + } - try { - // can't use bindFunctions here because we can't cross the iframe boundary. This - // means js-based interactions won't work but they aren't intended to work either - const {svg} = await mermaid.render('mermaid', source); + try { + // can't use bindFunctions here because we can't cross the iframe boundary. This + // means js-based interactions won't work but they aren't intended to work either + const {svg} = await mermaid.render('mermaid', source); - const iframe = document.createElement('iframe'); - iframe.classList.add('markup-render', 'tw-invisible'); - iframe.srcdoc = `${svg}`; + const iframe = document.createElement('iframe'); + iframe.classList.add('markup-content-iframe', 'tw-invisible'); + iframe.srcdoc = `${svg}`; - const mermaidBlock = document.createElement('div'); - mermaidBlock.classList.add('mermaid-block', 'is-loading', 'tw-hidden'); - mermaidBlock.append(iframe); + const mermaidBlock = document.createElement('div'); + mermaidBlock.classList.add('mermaid-block', 'is-loading', 'tw-hidden'); + mermaidBlock.append(iframe); - const btn = makeCodeCopyButton(); - btn.setAttribute('data-clipboard-text', source); - mermaidBlock.append(btn); + const btn = makeCodeCopyButton(); + btn.setAttribute('data-clipboard-text', source); + mermaidBlock.append(btn); - const updateIframeHeight = () => { - const body = iframe.contentWindow?.document?.body; - if (body) { - iframe.style.height = `${body.clientHeight}px`; - } - }; + const updateIframeHeight = () => { + const body = iframe.contentWindow?.document?.body; + if (body) { + iframe.style.height = `${body.clientHeight}px`; + } + }; - iframe.addEventListener('load', () => { - pre.replaceWith(mermaidBlock); - mermaidBlock.classList.remove('tw-hidden'); + iframe.addEventListener('load', () => { + pre.replaceWith(mermaidBlock); + mermaidBlock.classList.remove('tw-hidden'); + updateIframeHeight(); + setTimeout(() => { // avoid flash of iframe background + mermaidBlock.classList.remove('is-loading'); + iframe.classList.remove('tw-invisible'); + }, 0); + + // update height when element's visibility state changes, for example when the diagram is inside + // a
+ block and the
block becomes visible upon user interaction, it + // would initially set a incorrect height and the correct height is set during this callback. + (new IntersectionObserver(() => { updateIframeHeight(); - setTimeout(() => { // avoid flash of iframe background - mermaidBlock.classList.remove('is-loading'); - iframe.classList.remove('tw-invisible'); - }, 0); + }, {root: document.documentElement})).observe(iframe); + }); - // update height when element's visibility state changes, for example when the diagram is inside - // a
+ block and the
block becomes visible upon user interaction, it - // would initially set a incorrect height and the correct height is set during this callback. - (new IntersectionObserver(() => { - updateIframeHeight(); - }, {root: document.documentElement})).observe(iframe); - }); - - document.body.append(mermaidBlock); - } catch (err) { - displayError(pre, err); - } + document.body.append(mermaidBlock); + } catch (err) { + displayError(pre, err); } } diff --git a/web_src/js/markup/tasklist.ts b/web_src/js/markup/tasklist.ts index 95db7fc845..dc4bbd9519 100644 --- a/web_src/js/markup/tasklist.ts +++ b/web_src/js/markup/tasklist.ts @@ -7,80 +7,80 @@ const preventListener = (e: Event) => e.preventDefault(); * Attaches `input` handlers to markdown rendered tasklist checkboxes in comments. * * When a checkbox value changes, the corresponding [ ] or [x] in the markdown string - * is set accordingly and sent to the server. On success it updates the raw-content on + * is set accordingly and sent to the server. On success, it updates the raw-content on * error it resets the checkbox to its original value. */ -export function initMarkupTasklist(): void { - for (const el of document.querySelectorAll(`.markup[data-can-edit=true]`) || []) { - const container = el.parentNode; - const checkboxes = el.querySelectorAll(`.task-list-item input[type=checkbox]`); +export function initMarkupTasklist(elMarkup: HTMLElement): void { + if (!elMarkup.matches('[data-can-edit=true]')) return; - for (const checkbox of checkboxes) { - if (checkbox.hasAttribute('data-editable')) { + const container = elMarkup.parentNode; + const checkboxes = elMarkup.querySelectorAll(`.task-list-item input[type=checkbox]`); + + for (const checkbox of checkboxes) { + if (checkbox.hasAttribute('data-editable')) { + return; + } + + checkbox.setAttribute('data-editable', 'true'); + checkbox.addEventListener('input', async () => { + const checkboxCharacter = checkbox.checked ? 'x' : ' '; + const position = parseInt(checkbox.getAttribute('data-source-position')) + 1; + + const rawContent = container.querySelector('.raw-content'); + const oldContent = rawContent.textContent; + + const encoder = new TextEncoder(); + const buffer = encoder.encode(oldContent); + // Indexes may fall off the ends and return undefined. + if (buffer[position - 1] !== '['.codePointAt(0) || + buffer[position] !== ' '.codePointAt(0) && buffer[position] !== 'x'.codePointAt(0) || + buffer[position + 1] !== ']'.codePointAt(0)) { + // Position is probably wrong. Revert and don't allow change. + checkbox.checked = !checkbox.checked; + throw new Error(`Expected position to be space or x and surrounded by brackets, but it's not: position=${position}`); + } + buffer.set(encoder.encode(checkboxCharacter), position); + const newContent = new TextDecoder().decode(buffer); + + if (newContent === oldContent) { return; } - checkbox.setAttribute('data-editable', 'true'); - checkbox.addEventListener('input', async () => { - const checkboxCharacter = checkbox.checked ? 'x' : ' '; - const position = parseInt(checkbox.getAttribute('data-source-position')) + 1; + // Prevent further inputs until the request is done. This does not use the + // `disabled` attribute because it causes the border to flash on click. + for (const checkbox of checkboxes) { + checkbox.addEventListener('click', preventListener); + } - const rawContent = container.querySelector('.raw-content'); - const oldContent = rawContent.textContent; + try { + const editContentZone = container.querySelector('.edit-content-zone'); + const updateUrl = editContentZone.getAttribute('data-update-url'); + const context = editContentZone.getAttribute('data-context'); + const contentVersion = editContentZone.getAttribute('data-content-version'); - const encoder = new TextEncoder(); - const buffer = encoder.encode(oldContent); - // Indexes may fall off the ends and return undefined. - if (buffer[position - 1] !== '['.codePointAt(0) || - buffer[position] !== ' '.codePointAt(0) && buffer[position] !== 'x'.codePointAt(0) || - buffer[position + 1] !== ']'.codePointAt(0)) { - // Position is probably wrong. Revert and don't allow change. - checkbox.checked = !checkbox.checked; - throw new Error(`Expected position to be space or x and surrounded by brackets, but it's not: position=${position}`); - } - buffer.set(encoder.encode(checkboxCharacter), position); - const newContent = new TextDecoder().decode(buffer); - - if (newContent === oldContent) { + const requestBody = new FormData(); + requestBody.append('ignore_attachments', 'true'); + requestBody.append('content', newContent); + requestBody.append('context', context); + requestBody.append('content_version', contentVersion); + const response = await POST(updateUrl, {data: requestBody}); + const data = await response.json(); + if (response.status === 400) { + showErrorToast(data.errorMessage); return; } + editContentZone.setAttribute('data-content-version', data.contentVersion); + rawContent.textContent = newContent; + } catch (err) { + checkbox.checked = !checkbox.checked; + console.error(err); + } - // Prevent further inputs until the request is done. This does not use the - // `disabled` attribute because it causes the border to flash on click. - for (const checkbox of checkboxes) { - checkbox.addEventListener('click', preventListener); - } - - try { - const editContentZone = container.querySelector('.edit-content-zone'); - const updateUrl = editContentZone.getAttribute('data-update-url'); - const context = editContentZone.getAttribute('data-context'); - const contentVersion = editContentZone.getAttribute('data-content-version'); - - const requestBody = new FormData(); - requestBody.append('ignore_attachments', 'true'); - requestBody.append('content', newContent); - requestBody.append('context', context); - requestBody.append('content_version', contentVersion); - const response = await POST(updateUrl, {data: requestBody}); - const data = await response.json(); - if (response.status === 400) { - showErrorToast(data.errorMessage); - return; - } - editContentZone.setAttribute('data-content-version', data.contentVersion); - rawContent.textContent = newContent; - } catch (err) { - checkbox.checked = !checkbox.checked; - console.error(err); - } - - // Enable input on checkboxes again - for (const checkbox of checkboxes) { - checkbox.removeEventListener('click', preventListener); - } - }); - } + // Enable input on checkboxes again + for (const checkbox of checkboxes) { + checkbox.removeEventListener('click', preventListener); + } + }); // Enable the checkboxes as they are initially disabled by the markdown renderer for (const checkbox of checkboxes) { diff --git a/web_src/js/modules/observer.ts b/web_src/js/modules/observer.ts index f60c033cf2..06208d0507 100644 --- a/web_src/js/modules/observer.ts +++ b/web_src/js/modules/observer.ts @@ -20,6 +20,9 @@ export function registerGlobalEventFunc( // It handles the global init functions by a selector, for example: // > registerGlobalSelectorObserver('.ui.dropdown:not(.custom)', (el) => { initDropdown(el, ...) }); +// ATTENTION: For most cases, it's recommended to use registerGlobalInitFunc instead, +// Because this selector-based approach is less efficient and less maintainable. +// But if there are already a lot of elements on many pages, this selector-based approach is more convenient for exiting code. export function registerGlobalSelectorFunc(selector: string, handler: (el: HTMLElement) => void) { selectorHandlers.push({selector, handler}); // Then initAddedElementObserver will call this handler for all existing elements after all handlers are added. diff --git a/web_src/js/render/pdf.ts b/web_src/js/render/pdf.ts index f31f161e6e..283b4ed85c 100644 --- a/web_src/js/render/pdf.ts +++ b/web_src/js/render/pdf.ts @@ -1,12 +1,10 @@ import {htmlEscape} from 'escape-goat'; +import {registerGlobalInitFunc} from '../modules/observer.ts'; export async function initPdfViewer() { - const els = document.querySelectorAll('.pdf-content'); - if (!els.length) return; + registerGlobalInitFunc('initPdfViewer', async (el: HTMLInputElement) => { + const pdfobject = await import(/* webpackChunkName: "pdfobject" */'pdfobject'); - const pdfobject = await import(/* webpackChunkName: "pdfobject" */'pdfobject'); - - for (const el of els) { const src = el.getAttribute('data-src'); const fallbackText = el.getAttribute('data-fallback-button-text'); pdfobject.embed(src, el, { @@ -15,5 +13,5 @@ export async function initPdfViewer() { `, }); el.classList.remove('is-loading'); - } + }); } From ad204f9c5aa9659abb35aebca2aead296175a018 Mon Sep 17 00:00:00 2001 From: Kerwin Bryant Date: Tue, 4 Mar 2025 04:30:55 +0800 Subject: [PATCH 2/4] Refactor buttons to use new init framework (#33774) Make buttons to use new init framework * "js-toggle-commit-body" * "show-panel/hide-panel/show-modal" * "copy-content" --------- Co-authored-by: wxiaoguang --- templates/repo/commits_list.tmpl | 2 +- templates/repo/latest_commit.tmpl | 2 +- templates/repo/view_file.tmpl | 2 +- web_src/js/features/common-button.ts | 25 +++++++++++++++---------- web_src/js/features/copycontent.ts | 12 +++++------- web_src/js/features/repo-commit.ts | 15 +++++++-------- 6 files changed, 30 insertions(+), 28 deletions(-) diff --git a/templates/repo/commits_list.tmpl b/templates/repo/commits_list.tmpl index 329dc45149..c8405ca748 100644 --- a/templates/repo/commits_list.tmpl +++ b/templates/repo/commits_list.tmpl @@ -48,7 +48,7 @@ {{end}} {{if IsMultilineCommitMessage .Message}} - + {{end}} {{template "repo/commit_statuses" dict "Status" .Status "Statuses" .Statuses}} {{if IsMultilineCommitMessage .Message}} diff --git a/templates/repo/latest_commit.tmpl b/templates/repo/latest_commit.tmpl index c62efc8e88..0341d60eb2 100644 --- a/templates/repo/latest_commit.tmpl +++ b/templates/repo/latest_commit.tmpl @@ -23,7 +23,7 @@ {{$commitLink:= printf "%s/commit/%s" .RepoLink (PathEscape .LatestCommit.ID.String)}} {{ctx.RenderUtils.RenderCommitMessageLinkSubject .LatestCommit.Message $commitLink ($.Repository.ComposeMetas ctx)}} {{if IsMultilineCommitMessage .LatestCommit.Message}} - + 
{{ctx.RenderUtils.RenderCommitBody .LatestCommit.Message ($.Repository.ComposeMetas ctx)}}
{{end}} diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl index 9f1b2a5e8f..51a8f7d501 100644 --- a/templates/repo/view_file.tmpl +++ b/templates/repo/view_file.tmpl @@ -55,7 +55,7 @@ {{end}}
{{svg "octicon-download"}} - {{svg "octicon-copy"}} + {{svg "octicon-copy"}} {{if .EnableFeed}} {{svg "octicon-rss"}} diff --git a/web_src/js/features/common-button.ts b/web_src/js/features/common-button.ts index 7aebdd8dd5..003bfbce5d 100644 --- a/web_src/js/features/common-button.ts +++ b/web_src/js/features/common-button.ts @@ -1,5 +1,5 @@ import {POST} from '../modules/fetch.ts'; -import {addDelegatedEventListener, hideElem, queryElems, showElem, toggleElem} from '../utils/dom.ts'; +import {addDelegatedEventListener, hideElem, showElem, toggleElem} from '../utils/dom.ts'; import {fomanticQuery} from '../modules/fomantic/base.ts'; import {camelize} from 'vue'; @@ -74,10 +74,9 @@ export function initGlobalDeleteButton(): void { } } -function onShowPanelClick(e: MouseEvent) { +function onShowPanelClick(el: HTMLElement, e: MouseEvent) { // a '.show-panel' element can show a panel, by `data-panel="selector"` // if it has "toggle" class, it toggles the panel - const el = e.currentTarget as HTMLElement; e.preventDefault(); const sel = el.getAttribute('data-panel'); if (el.classList.contains('toggle')) { @@ -87,9 +86,8 @@ function onShowPanelClick(e: MouseEvent) { } } -function onHidePanelClick(e: MouseEvent) { +function onHidePanelClick(el: HTMLElement, e: MouseEvent) { // a `.hide-panel` element can hide a panel, by `data-panel="selector"` or `data-panel-closest="selector"` - const el = e.currentTarget as HTMLElement; e.preventDefault(); let sel = el.getAttribute('data-panel'); if (sel) { @@ -104,7 +102,7 @@ function onHidePanelClick(e: MouseEvent) { throw new Error('no panel to hide'); // should never happen, otherwise there is a bug in code } -function onShowModalClick(e: MouseEvent) { +function onShowModalClick(el: HTMLElement, e: MouseEvent) { // A ".show-modal" button will show a modal dialog defined by its "data-modal" attribute. // Each "data-modal-{target}" attribute will be filled to target element's value or text-content. // * First, try to query '#target' @@ -112,7 +110,6 @@ function onShowModalClick(e: MouseEvent) { // * Then, try to query '.target' // * Then, try to query 'target' as HTML tag // If there is a ".{attr}" part like "data-modal-form.action", then the form's "action" attribute will be set. - const el = e.currentTarget as HTMLElement; e.preventDefault(); const modalSelector = el.getAttribute('data-modal'); const elModal = document.querySelector(modalSelector); @@ -160,7 +157,15 @@ export function initGlobalButtons(): void { // There are a few cancel buttons in non-modal forms, and there are some dynamically created forms (eg: the "Edit Issue Content") addDelegatedEventListener(document, 'click', 'form button.ui.cancel.button', (_ /* el */, e) => e.preventDefault()); - queryElems(document, '.show-panel', (el) => el.addEventListener('click', onShowPanelClick)); - queryElems(document, '.hide-panel', (el) => el.addEventListener('click', onHidePanelClick)); - queryElems(document, '.show-modal', (el) => el.addEventListener('click', onShowModalClick)); + // Ideally these "button" events should be handled by registerGlobalEventFunc + // Refactoring would involve too many changes, so at the moment, just use the global event listener. + addDelegatedEventListener(document, 'click', '.show-panel, .hide-panel, .show-modal', (el, e: MouseEvent) => { + if (el.classList.contains('show-panel')) { + onShowPanelClick(el, e); + } else if (el.classList.contains('hide-panel')) { + onHidePanelClick(el, e); + } else if (el.classList.contains('show-modal')) { + onShowModalClick(el, e); + } + }); } diff --git a/web_src/js/features/copycontent.ts b/web_src/js/features/copycontent.ts index 4bc9281a35..3961a8d7ac 100644 --- a/web_src/js/features/copycontent.ts +++ b/web_src/js/features/copycontent.ts @@ -2,21 +2,19 @@ import {clippie} from 'clippie'; import {showTemporaryTooltip} from '../modules/tippy.ts'; import {convertImage} from '../utils.ts'; import {GET} from '../modules/fetch.ts'; +import {registerGlobalEventFunc} from '../modules/observer.ts'; const {i18n} = window.config; export function initCopyContent() { - const btn = document.querySelector('#copy-content'); - if (!btn || btn.classList.contains('disabled')) return; - - btn.addEventListener('click', async () => { - if (btn.classList.contains('is-loading')) return; + registerGlobalEventFunc('click', 'onCopyContentButtonClick', async (btn: HTMLInputElement) => { + if (btn.classList.contains('disabled') || btn.classList.contains('is-loading')) return; let content; let isRasterImage = false; const link = btn.getAttribute('data-link'); // when data-link is present, we perform a fetch. this is either because - // the text to copy is not in the DOM or it is an image which should be + // the text to copy is not in the DOM, or it is an image which should be // fetched to copy in full resolution if (link) { btn.classList.add('is-loading', 'loading-icon-2px'); @@ -40,7 +38,7 @@ export function initCopyContent() { content = Array.from(lineEls, (el) => el.textContent).join(''); } - // try copy original first, if that fails and it's an image, convert it to png + // try copy original first, if that fails, and it's an image, convert it to png const success = await clippie(content); if (success) { showTemporaryTooltip(btn, i18n.copy_success); diff --git a/web_src/js/features/repo-commit.ts b/web_src/js/features/repo-commit.ts index 8994a57f4a..e6d1112778 100644 --- a/web_src/js/features/repo-commit.ts +++ b/web_src/js/features/repo-commit.ts @@ -1,15 +1,14 @@ import {createTippy} from '../modules/tippy.ts'; import {toggleElem} from '../utils/dom.ts'; +import {registerGlobalEventFunc} from '../modules/observer.ts'; export function initRepoEllipsisButton() { - for (const button of document.querySelectorAll('.js-toggle-commit-body')) { - button.addEventListener('click', function (e) { - e.preventDefault(); - const expanded = this.getAttribute('aria-expanded') === 'true'; - toggleElem(this.parentElement.querySelector('.commit-body')); - this.setAttribute('aria-expanded', String(!expanded)); - }); - } + registerGlobalEventFunc('click', 'onRepoEllipsisButtonClick', async (el: HTMLInputElement, e: Event) => { + e.preventDefault(); + const expanded = el.getAttribute('aria-expanded') === 'true'; + toggleElem(el.parentElement.querySelector('.commit-body')); + el.setAttribute('aria-expanded', String(!expanded)); + }); } export function initCommitStatuses() { From 14be462646af7f8c4fd60b1212d27cc165c966dd Mon Sep 17 00:00:00 2001 From: Kerwin Bryant Date: Tue, 4 Mar 2025 04:58:19 +0800 Subject: [PATCH 3/4] Refactor initRepoBranchTagSelector to use new init framework (#33776) Make "initRepoBranchTagSelector" to use new init framework and fix the abused "js-branch-tag-selector" styles --------- Co-authored-by: wxiaoguang --- templates/repo/branch_dropdown.tmpl | 3 ++- templates/repo/release/list.tmpl | 1 + web_src/css/repo/release-tag.css | 2 +- web_src/js/features/repo-legacy.ts | 9 +++++---- 4 files changed, 9 insertions(+), 6 deletions(-) diff --git a/templates/repo/branch_dropdown.tmpl b/templates/repo/branch_dropdown.tmpl index 6efed3427f..f679b8744b 100644 --- a/templates/repo/branch_dropdown.tmpl +++ b/templates/repo/branch_dropdown.tmpl @@ -14,7 +14,8 @@ Search "repo/branch_dropdown" in the template directory to find all occurrences. */}} -
{ createApp(RepoBranchTagSelector, {elRoot}).mount(elRoot); - } + }); } export function initBranchSelectorTabs() { @@ -42,7 +43,7 @@ export function initRepository() { const pageContent = document.querySelector('.page-content.repository'); if (!pageContent) return; - initRepoBranchTagSelector('.js-branch-tag-selector'); + initRepoBranchTagSelector(); initRepoCommentFormAndSidebar(); // Labels From ffb276578fce488285eb01eea87237cda4c2b658 Mon Sep 17 00:00:00 2001 From: Denys Konovalov Date: Mon, 3 Mar 2025 22:23:42 +0100 Subject: [PATCH 4/4] Adjust appearence of commit status webhook (#33778) Some visual improvement for the commit status webhook message introduced by #33320 - use short commit SHA as already done in e. g. commit webhook - fix spacing, link text - do not set user link for internal gitea-actions user Before: ![grafik](https://github.com/user-attachments/assets/9c460846-c350-444c-89b5-8a0d5e26cb86) After: ![grafik](https://github.com/user-attachments/assets/05519cd8-6d8f-432b-bd9d-082de558a55a) --- services/webhook/general.go | 12 +++++++++--- services/webhook/matrix.go | 5 +++-- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/services/webhook/general.go b/services/webhook/general.go index 91bf68600f..c3e2ded204 100644 --- a/services/webhook/general.go +++ b/services/webhook/general.go @@ -9,7 +9,9 @@ import ( "net/url" "strings" + user_model "code.gitea.io/gitea/models/user" webhook_model "code.gitea.io/gitea/models/webhook" + "code.gitea.io/gitea/modules/base" "code.gitea.io/gitea/modules/setting" api "code.gitea.io/gitea/modules/structs" "code.gitea.io/gitea/modules/util" @@ -308,12 +310,16 @@ func getPackagePayloadInfo(p *api.PackagePayload, linkFormatter linkFormatter, w } func getStatusPayloadInfo(p *api.CommitStatusPayload, linkFormatter linkFormatter, withSender bool) (text string, color int) { - refLink := linkFormatter(p.TargetURL, p.Context+"["+p.SHA+"]:"+p.Description) + refLink := linkFormatter(p.TargetURL, fmt.Sprintf("%s [%s]", p.Context, base.ShortSha(p.SHA))) - text = fmt.Sprintf("Commit Status changed: %s", refLink) + text = fmt.Sprintf("Commit Status changed: %s - %s", refLink, p.Description) color = greenColor if withSender { - text += fmt.Sprintf(" by %s", linkFormatter(setting.AppURL+url.PathEscape(p.Sender.UserName), p.Sender.UserName)) + if user_model.IsGiteaActionsUserName(p.Sender.UserName) { + text += fmt.Sprintf(" by %s", p.Sender.FullName) + } else { + text += fmt.Sprintf(" by %s", linkFormatter(setting.AppURL+url.PathEscape(p.Sender.UserName), p.Sender.UserName)) + } } return text, color diff --git a/services/webhook/matrix.go b/services/webhook/matrix.go index fb602f3860..034c0caf96 100644 --- a/services/webhook/matrix.go +++ b/services/webhook/matrix.go @@ -15,6 +15,7 @@ import ( "strings" webhook_model "code.gitea.io/gitea/models/webhook" + "code.gitea.io/gitea/modules/base" "code.gitea.io/gitea/modules/git" "code.gitea.io/gitea/modules/json" "code.gitea.io/gitea/modules/log" @@ -245,8 +246,8 @@ func (m matrixConvertor) Package(p *api.PackagePayload) (MatrixPayload, error) { } func (m matrixConvertor) Status(p *api.CommitStatusPayload) (MatrixPayload, error) { - refLink := htmlLinkFormatter(p.TargetURL, p.Context+"["+p.SHA+"]:"+p.Description) - text := fmt.Sprintf("Commit Status changed: %s", refLink) + refLink := htmlLinkFormatter(p.TargetURL, fmt.Sprintf("%s [%s]", p.Context, base.ShortSha(p.SHA))) + text := fmt.Sprintf("Commit Status changed: %s - %s", refLink, p.Description) return m.newPayload(text) }