go-gitea · lunny · Mar 3, 2025 · Mar 3, 2025 · Mar 3, 2025 · Mar 3, 2025
diff --git a/templates/org/home.tmpl b/templates/org/home.tmpl
@@ -6,7 +6,7 @@
 		<div class="ui mobile reversed stackable grid">
 			<div class="ui {{if .ShowMemberAndTeamTab}}eleven wide{{end}} column">
 				{{if .ProfileReadmeContent}}
-					<div id="readme_profile" class="markup" data-profile-view-as-member="{{.IsViewingOrgAsMember}}">{{.ProfileReadmeContent}}</div>
+					<div id="readme_profile" class="render-content markup" data-profile-view-as-member="{{.IsViewingOrgAsMember}}">{{.ProfileReadmeContent}}</div>
 				{{end}}
 				{{template "shared/repo_search" .}}
 				{{template "explore/repo_list" .}}

diff --git a/templates/projects/list.tmpl b/templates/projects/list.tmpl
@@ -74,9 +74,7 @@
 				{{end}}
 			</div>
 			{{if .Description}}
-			<div class="content">
-				{{.RenderedContent}}
-			</div>
+				<div class="render-content markup">{{.RenderedContent}}</div>
 			{{end}}
 		</li>
 	{{end}}

diff --git a/templates/repo/editor/edit.tmpl b/templates/repo/editor/edit.tmpl
@@ -45,10 +45,10 @@
 							data-line-wrap-extensions="{{.LineWrapExtensions}}">{{.FileContent}}</textarea>
 						<div class="editor-loading is-loading"></div>
 					</div>
-					<div class="ui tab markup tw-px-4 tw-py-3" data-tab="preview">
+					<div class="ui tab tw-px-4 tw-py-3" data-tab="preview">
 						{{ctx.Locale.Tr "loading"}}
 					</div>
-					<div class="ui tab diff edit-diff" data-tab="diff">
+					<div class="ui tab" data-tab="diff">
 						<div class="tw-p-16"></div>
 					</div>
 				</div>

diff --git a/templates/repo/issue/fields/markdown.tmpl b/templates/repo/issue/fields/markdown.tmpl
@@ -1,3 +1,3 @@
 <div class="field {{if not .item.VisibleOnForm}}tw-hidden{{end}}">
-	<div class="markup">{{ctx.RenderUtils.MarkdownToHtml .item.Attributes.value}}</div>
+	<div class="render-content markup">{{ctx.RenderUtils.MarkdownToHtml .item.Attributes.value}}</div>
 </div>
diff --git a/templates/repo/issue/milestone_issues.tmpl b/templates/repo/issue/milestone_issues.tmpl
@@ -22,7 +22,7 @@
 			{{end}}
 		</div>
 		{{if .Milestone.RenderedContent}}
-		<div class="markup content tw-mb-4">
+		<div class="render-content markup tw-mb-4">
 				{{.Milestone.RenderedContent}}
 		</div>
 		{{end}}

diff --git a/templates/repo/issue/milestones.tmpl b/templates/repo/issue/milestones.tmpl
@@ -81,9 +81,7 @@
 						{{end}}
 					</div>
 					{{if .Content}}
-						<div class="markup content">
-							{{.RenderedContent}}
-						</div>
+						<div class="render-content markup">{{.RenderedContent}}</div>
 					{{end}}
 				</li>
 			{{end}}

diff --git a/templates/repo/release/list.tmpl b/templates/repo/release/list.tmpl
@@ -64,7 +64,7 @@
 								| <span class="ahead"><a href="{{$.RepoLink}}/compare/{{$release.TagName | PathEscapeSegments}}...{{$release.TargetBehind | PathEscapeSegments}}">{{ctx.Locale.Tr "repo.release.ahead.commits" $release.NumCommitsBehind}}</a> {{ctx.Locale.Tr "repo.release.ahead.target" $release.TargetBehind}}</span>
 							{{end}}
 						</p>
-						<div class="markup desc">
+						<div class="render-content markup">
 							{{$release.RenderedNote}}
 						</div>
 						<div class="divider"></div>

diff --git a/templates/repo/settings/lfs_file.tmpl b/templates/repo/settings/lfs_file.tmpl
@@ -13,7 +13,7 @@
 			</h4>
 			<div class="ui bottom attached table unstackable segment">
 				{{template "repo/unicode_escape_prompt" dict "EscapeStatus" .EscapeStatus "root" $}}
-				<div class="file-view{{if .IsMarkup}} markup {{.MarkupType}}{{else if .IsPlainText}} plain-text{{else if .IsTextFile}} code-view{{end}}">
+				<div class="file-view {{if .IsPlainText}}plain-text{{else if .IsTextFile}}code-view{{end}}">
 					{{if .IsFileTooLarge}}
 						{{template "shared/filetoolarge" dict "RawFileLink" .RawFileLink}}
 					{{else if not .FileSize}}
@@ -31,7 +31,7 @@
 									<strong>{{ctx.Locale.Tr "repo.audio_not_supported_in_browser"}}</strong>
 								</audio>
 							{{else if .IsPDFFile}}
-								<div class="pdf-content is-loading" data-src="{{$.RawFileLink}}" data-fallback-button-text="{{ctx.Locale.Tr "diff.view_file"}}"></div>
+								<div class="pdf-content is-loading" data-global-init="initPdfViewer" data-src="{{$.RawFileLink}}" data-fallback-button-text="{{ctx.Locale.Tr "diff.view_file"}}"></div>
 							{{else}}
 								<a href="{{$.RawFileLink}}" rel="nofollow" class="tw-p-4">{{ctx.Locale.Tr "repo.file_view_raw"}}</a>
 							{{end}}

diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl
@@ -108,7 +108,7 @@
 							<strong>{{ctx.Locale.Tr "repo.audio_not_supported_in_browser"}}</strong>
 						</audio>
 					{{else if .IsPDFFile}}
-						<div class="pdf-content is-loading" data-src="{{$.RawFileLink}}" data-fallback-button-text="{{ctx.Locale.Tr "repo.diff.view_file"}}"></div>
+						<div class="pdf-content is-loading" data-global-init="initPdfViewer" data-src="{{$.RawFileLink}}" data-fallback-button-text="{{ctx.Locale.Tr "repo.diff.view_file"}}"></div>
 					{{else}}
 						<a href="{{$.RawFileLink}}" rel="nofollow" class="tw-p-4">{{ctx.Locale.Tr "repo.file_view_raw"}}</a>
 					{{end}}

diff --git a/templates/repo/wiki/view.tmpl b/templates/repo/wiki/view.tmpl
@@ -63,18 +63,18 @@
 
 		<div class="wiki-content-parts">
 			{{if .sidebarTocContent}}
-			<div class="markup wiki-content-sidebar wiki-content-toc">
+			<div class="render-content markup wiki-content-sidebar wiki-content-toc">
 				{{.sidebarTocContent | SafeHTML}}
 			</div>
 			{{end}}
 
-			<div class="markup wiki-content-main {{if or .sidebarTocContent .sidebarPresent}}with-sidebar{{end}}">
+			<div class="render-content markup wiki-content-main {{if or .sidebarTocContent .sidebarPresent}}with-sidebar{{end}}">
 				{{template "repo/unicode_escape_prompt" dict "EscapeStatus" .EscapeStatus "root" $}}
 				{{.content | SafeHTML}}
 			</div>
 
 			{{if .sidebarPresent}}
-			<div class="markup wiki-content-sidebar">
+			<div class="render-content markup wiki-content-sidebar">
 				{{if and .CanWriteWiki (not .Repository.IsMirror)}}
 					<a class="tw-float-right muted" href="{{.RepoLink}}/wiki/_Sidebar?action=_edit" aria-label="{{ctx.Locale.Tr "repo.wiki.edit_page_button"}}">{{svg "octicon-pencil"}}</a>
 				{{end}}
@@ -86,7 +86,7 @@
 			<div class="tw-clear-both"></div>
 
 			{{if .footerPresent}}
-			<div class="markup wiki-content-footer">
+			<div class="render-content markup wiki-content-footer">
 				{{if and .CanWriteWiki (not .Repository.IsMirror)}}
 					<a class="tw-float-right muted" href="{{.RepoLink}}/wiki/_Footer?action=_edit" aria-label="{{ctx.Locale.Tr "repo.wiki.edit_page_button"}}">{{svg "octicon-pencil"}}</a>
 				{{end}}

diff --git a/templates/shared/combomarkdowneditor.tmpl b/templates/shared/combomarkdowneditor.tmpl
@@ -81,7 +81,7 @@
 			}
 		</script>
 	</div>
-	<div class="ui tab markup" data-tab-panel="markdown-previewer">
+	<div class="ui tab" data-tab-panel="markdown-previewer">
 		{{ctx.Locale.Tr "loading"}}
 	</div>
 	<div class="markdown-add-table-panel tippy-target">

diff --git a/templates/user/dashboard/feeds.tmpl b/templates/user/dashboard/feeds.tmpl
@@ -110,7 +110,7 @@
 					<a href="{{.GetCommentLink ctx}}" class="text truncate issue title">{{(.GetIssueTitle ctx) | ctx.RenderUtils.RenderIssueSimpleTitle}}</a>
 					{{$comment := index .GetIssueInfos 1}}
 					{{if $comment}}
-						<div class="markup tw-text-14">{{ctx.RenderUtils.MarkdownToHtml $comment}}</div>
+						<div class="render-content markup tw-text-14">{{ctx.RenderUtils.MarkdownToHtml $comment}}</div>
 					{{end}}
 				{{else if .GetOpType.InActions "merge_pull_request"}}
 					<div class="flex-item-body text black">{{index .GetIssueInfos 1}}</div>

diff --git a/templates/user/dashboard/milestones.tmpl b/templates/user/dashboard/milestones.tmpl
@@ -33,7 +33,7 @@
 					{{end}}
 				</div>
 			</div>
-			<div class="flex-container-main content">
+			<div class="flex-container-main">
 				<div class="list-header">
 					<div class="small-menu-items ui compact tiny menu list-header-toggle">
 						<a class="item{{if not .IsShowClosed}} active{{end}}" href="?repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=open&q={{$.Keyword}}">
@@ -140,9 +140,7 @@
 								{{end}}
 							</div>
 							{{if .Content}}
-								<div class="markup content">
-									{{.RenderedContent}}
-								</div>
+								<div class="render-content markup">{{.RenderedContent}}</div>
 							{{end}}
 						</li>
 					{{end}}

diff --git 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"}}
-					<div id="readme_profile" class="markup">{{.ProfileReadmeContent}}</div>
+					<div id="readme_profile" class="render-content markup">{{.ProfileReadmeContent}}</div>
 				{{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
@@ -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
@@ -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
@@ -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
@@ -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 = `<div class="render-content markup">${content}</div>`;
   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
@@ -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<MouseEvent>) {
         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
@@ -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 = `<div class="markup ui segment">${data}</div>`;
-        initMarkupContent();
+        previewTarget.innerHTML = `<div class="render-content markup ui segment">${data}</div>`;
       } catch (error) {
         console.error('Error rendering preview:', error);
       } finally {

diff --git 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
@@ -1,18 +1,16 @@
-export async function renderAsciicast() {
-  const els = document.querySelectorAll('.asciinema-player-container');
-  if (!els.length) return;
+export async function initMarkupRenderAsciicast(elMarkup: HTMLElement): Promise<void> {
+  const el = elMarkup.querySelector('.asciinema-player-container');
+  if (!el) return;
 
   const [player] = await Promise.all([
     // @ts-expect-error: module exports no types
     import(/* webpackChunkName: "asciinema-player" */'asciinema-player'),
     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
@@ -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
@@ -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);
+  });
 }