refactor markup init

wxiaoguang · wxiaoguang · commit c5fe61cd26f3 · 2025-03-03T17:09:41.000+08:00
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/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}}
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/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/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';
@@ -200,6 +199,5 @@ export function initRepoEditor() {
 
 export function renderPreviewPanelContent(previewPanel: Element, content: string) {
   previewPanel.innerHTML = content;
-  initMarkupContent();
   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);
+  });
 }
diff --git 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<void> {
-  const els = document.querySelectorAll('.markup code.language-math');
-  if (!els.length) return;
+export async function initMarkupCodeMath(elMarkup: HTMLElement): Promise<void> {
+  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<void> {
   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
diff --git a/web_src/js/markup/tasklist.ts b/web_src/js/markup/tasklist.ts
