Skip to content

Commit f0f1737

Browse files
kerwin612wxiaoguang
kerwin612
and
wxiaoguang
authored
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 <[email protected]>
1 parent 43c8d85 commit f0f1737

29 files changed

+203
-235
lines changed

‎templates/org/home.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<div class="ui mobile reversed stackable grid">
77
<div class="ui {{if .ShowMemberAndTeamTab}}eleven wide{{end}} column">
88
{{if .ProfileReadmeContent}}
9-
<div id="readme_profile" class="markup" data-profile-view-as-member="{{.IsViewingOrgAsMember}}">{{.ProfileReadmeContent}}</div>
9+
<div id="readme_profile" class="render-content markup" data-profile-view-as-member="{{.IsViewingOrgAsMember}}">{{.ProfileReadmeContent}}</div>
1010
{{end}}
1111
{{template "shared/repo_search" .}}
1212
{{template "explore/repo_list" .}}

‎templates/projects/list.tmpl

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,9 +74,7 @@
7474
{{end}}
7575
</div>
7676
{{if .Description}}
77-
<div class="content">
78-
{{.RenderedContent}}
79-
</div>
77+
<div class="render-content markup">{{.RenderedContent}}</div>
8078
{{end}}
8179
</li>
8280
{{end}}

‎templates/repo/editor/edit.tmpl

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,10 +45,10 @@
4545
data-line-wrap-extensions="{{.LineWrapExtensions}}">{{.FileContent}}</textarea>
4646
<div class="editor-loading is-loading"></div>
4747
</div>
48-
<div class="ui tab markup tw-px-4 tw-py-3" data-tab="preview">
48+
<div class="ui tab tw-px-4 tw-py-3" data-tab="preview">
4949
{{ctx.Locale.Tr "loading"}}
5050
</div>
51-
<div class="ui tab diff edit-diff" data-tab="diff">
51+
<div class="ui tab" data-tab="diff">
5252
<div class="tw-p-16"></div>
5353
</div>
5454
</div>

‎templates/repo/issue/fields/markdown.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
<div class="field {{if not .item.VisibleOnForm}}tw-hidden{{end}}">
2-
<div class="markup">{{ctx.RenderUtils.MarkdownToHtml .item.Attributes.value}}</div>
2+
<div class="render-content markup">{{ctx.RenderUtils.MarkdownToHtml .item.Attributes.value}}</div>
33
</div>

‎templates/repo/issue/milestone_issues.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
{{end}}
2323
</div>
2424
{{if .Milestone.RenderedContent}}
25-
<div class="markup content tw-mb-4">
25+
<div class="render-content markup tw-mb-4">
2626
{{.Milestone.RenderedContent}}
2727
</div>
2828
{{end}}

‎templates/repo/issue/milestones.tmpl

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -81,9 +81,7 @@
8181
{{end}}
8282
</div>
8383
{{if .Content}}
84-
<div class="markup content">
85-
{{.RenderedContent}}
86-
</div>
84+
<div class="render-content markup">{{.RenderedContent}}</div>
8785
{{end}}
8886
</li>
8987
{{end}}

‎templates/repo/release/list.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464
| <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>
6565
{{end}}
6666
</p>
67-
<div class="markup desc">
67+
<div class="render-content markup">
6868
{{$release.RenderedNote}}
6969
</div>
7070
<div class="divider"></div>

‎templates/repo/settings/lfs_file.tmpl

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
</h4>
1414
<div class="ui bottom attached table unstackable segment">
1515
{{template "repo/unicode_escape_prompt" dict "EscapeStatus" .EscapeStatus "root" $}}
16-
<div class="file-view{{if .IsMarkup}} markup {{.MarkupType}}{{else if .IsPlainText}} plain-text{{else if .IsTextFile}} code-view{{end}}">
16+
<div class="file-view {{if .IsPlainText}}plain-text{{else if .IsTextFile}}code-view{{end}}">
1717
{{if .IsFileTooLarge}}
1818
{{template "shared/filetoolarge" dict "RawFileLink" .RawFileLink}}
1919
{{else if not .FileSize}}
@@ -31,7 +31,7 @@
3131
<strong>{{ctx.Locale.Tr "repo.audio_not_supported_in_browser"}}</strong>
3232
</audio>
3333
{{else if .IsPDFFile}}
34-
<div class="pdf-content is-loading" data-src="{{$.RawFileLink}}" data-fallback-button-text="{{ctx.Locale.Tr "diff.view_file"}}"></div>
34+
<div class="pdf-content is-loading" data-global-init="initPdfViewer" data-src="{{$.RawFileLink}}" data-fallback-button-text="{{ctx.Locale.Tr "diff.view_file"}}"></div>
3535
{{else}}
3636
<a href="{{$.RawFileLink}}" rel="nofollow" class="tw-p-4">{{ctx.Locale.Tr "repo.file_view_raw"}}</a>
3737
{{end}}

‎templates/repo/view_file.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@
108108
<strong>{{ctx.Locale.Tr "repo.audio_not_supported_in_browser"}}</strong>
109109
</audio>
110110
{{else if .IsPDFFile}}
111-
<div class="pdf-content is-loading" data-src="{{$.RawFileLink}}" data-fallback-button-text="{{ctx.Locale.Tr "repo.diff.view_file"}}"></div>
111+
<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>
112112
{{else}}
113113
<a href="{{$.RawFileLink}}" rel="nofollow" class="tw-p-4">{{ctx.Locale.Tr "repo.file_view_raw"}}</a>
114114
{{end}}

‎templates/repo/wiki/view.tmpl

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,18 +63,18 @@
6363

6464
<div class="wiki-content-parts">
6565
{{if .sidebarTocContent}}
66-
<div class="markup wiki-content-sidebar wiki-content-toc">
66+
<div class="render-content markup wiki-content-sidebar wiki-content-toc">
6767
{{.sidebarTocContent | SafeHTML}}
6868
</div>
6969
{{end}}
7070

71-
<div class="markup wiki-content-main {{if or .sidebarTocContent .sidebarPresent}}with-sidebar{{end}}">
71+
<div class="render-content markup wiki-content-main {{if or .sidebarTocContent .sidebarPresent}}with-sidebar{{end}}">
7272
{{template "repo/unicode_escape_prompt" dict "EscapeStatus" .EscapeStatus "root" $}}
7373
{{.content | SafeHTML}}
7474
</div>
7575

7676
{{if .sidebarPresent}}
77-
<div class="markup wiki-content-sidebar">
77+
<div class="render-content markup wiki-content-sidebar">
7878
{{if and .CanWriteWiki (not .Repository.IsMirror)}}
7979
<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>
8080
{{end}}
@@ -86,7 +86,7 @@
8686
<div class="tw-clear-both"></div>
8787

8888
{{if .footerPresent}}
89-
<div class="markup wiki-content-footer">
89+
<div class="render-content markup wiki-content-footer">
9090
{{if and .CanWriteWiki (not .Repository.IsMirror)}}
9191
<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>
9292
{{end}}

‎templates/shared/combomarkdowneditor.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@
8181
}
8282
</script>
8383
</div>
84-
<div class="ui tab markup" data-tab-panel="markdown-previewer">
84+
<div class="ui tab" data-tab-panel="markdown-previewer">
8585
{{ctx.Locale.Tr "loading"}}
8686
</div>
8787
<div class="markdown-add-table-panel tippy-target">

‎templates/user/dashboard/feeds.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@
110110
<a href="{{.GetCommentLink ctx}}" class="text truncate issue title">{{(.GetIssueTitle ctx) | ctx.RenderUtils.RenderIssueSimpleTitle}}</a>
111111
{{$comment := index .GetIssueInfos 1}}
112112
{{if $comment}}
113-
<div class="markup tw-text-14">{{ctx.RenderUtils.MarkdownToHtml $comment}}</div>
113+
<div class="render-content markup tw-text-14">{{ctx.RenderUtils.MarkdownToHtml $comment}}</div>
114114
{{end}}
115115
{{else if .GetOpType.InActions "merge_pull_request"}}
116116
<div class="flex-item-body text black">{{index .GetIssueInfos 1}}</div>

‎templates/user/dashboard/milestones.tmpl

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
{{end}}
3434
</div>
3535
</div>
36-
<div class="flex-container-main content">
36+
<div class="flex-container-main">
3737
<div class="list-header">
3838
<div class="small-menu-items ui compact tiny menu list-header-toggle">
3939
<a class="item{{if not .IsShowClosed}} active{{end}}" href="?repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=open&q={{$.Keyword}}">
@@ -140,9 +140,7 @@
140140
{{end}}
141141
</div>
142142
{{if .Content}}
143-
<div class="markup content">
144-
{{.RenderedContent}}
145-
</div>
143+
<div class="render-content markup">{{.RenderedContent}}</div>
146144
{{end}}
147145
</li>
148146
{{end}}

‎templates/user/profile.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
{{else if eq .TabName "followers"}}
2727
{{template "repo/user_cards" .}}
2828
{{else if eq .TabName "overview"}}
29-
<div id="readme_profile" class="markup">{{.ProfileReadmeContent}}</div>
29+
<div id="readme_profile" class="render-content markup">{{.ProfileReadmeContent}}</div>
3030
{{else if eq .TabName "organizations"}}
3131
{{template "repo/user_cards" .}}
3232
{{else}}

‎web_src/css/editor/fileeditor.css

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -74,12 +74,3 @@
7474
padding: 1rem;
7575
text-align: center;
7676
}
77-
78-
.edit-diff {
79-
padding: 0 !important;
80-
}
81-
82-
.edit-diff > div > .ui.table {
83-
border-top: none !important;
84-
border-bottom: none !important;
85-
}

‎web_src/css/markup/content.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -535,7 +535,7 @@
535535
user-select: none;
536536
}
537537

538-
.markup-render {
538+
.markup-content-iframe {
539539
display: block;
540540
border: none;
541541
width: 100%;

‎web_src/css/shared/milestone.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
border-top: 1px solid var(--color-secondary);
1313
}
1414

15-
.milestone-card .content {
15+
.milestone-card .render-content {
1616
padding-top: 10px;
1717
}
1818

‎web_src/js/features/repo-editor.ts

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import {htmlEscape} from 'escape-goat';
22
import {createCodeEditor} from './codeeditor.ts';
33
import {hideElem, queryElems, showElem, createElementFromHTML} from '../utils/dom.ts';
4-
import {initMarkupContent} from '../markup/content.ts';
54
import {attachRefIssueContextPopup} from './contextpopup.ts';
65
import {POST} from '../modules/fetch.ts';
76
import {initDropzone} from './dropzone.ts';
@@ -199,7 +198,6 @@ export function initRepoEditor() {
199198
}
200199

201200
export function renderPreviewPanelContent(previewPanel: Element, content: string) {
202-
previewPanel.innerHTML = content;
203-
initMarkupContent();
201+
previewPanel.innerHTML = `<div class="render-content markup">${content}</div>`;
204202
attachRefIssueContextPopup(previewPanel.querySelectorAll('p .ref-issue'));
205203
}

‎web_src/js/features/repo-issue-edit.ts

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import {POST} from '../modules/fetch.ts';
44
import {showErrorToast} from '../modules/toast.ts';
55
import {hideElem, querySingleVisibleElem, showElem, type DOMEvent} from '../utils/dom.ts';
66
import {attachRefIssueContextPopup} from './contextpopup.ts';
7-
import {initCommentContent, initMarkupContent} from '../markup/content.ts';
87
import {triggerUploadStateChanged} from './comp/EditorUpload.ts';
98
import {convertHtmlToMarkdown} from '../markup/html2markdown.ts';
109
import {applyAreYouSure, reinitializeAreYouSure} from '../vendor/jquery.are-you-sure.ts';
@@ -74,8 +73,6 @@ async function tryOnEditContent(e: DOMEvent<MouseEvent>) {
7473
content.querySelector('.dropzone-attachments').outerHTML = data.attachments;
7574
}
7675
comboMarkdownEditor.dropzoneSubmitReload();
77-
initMarkupContent();
78-
initCommentContent();
7976
} catch (error) {
8077
showErrorToast(`Failed to save the content: ${error}`);
8178
console.error(error);

‎web_src/js/features/repo-wiki.ts

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import {initMarkupContent} from '../markup/content.ts';
21
import {validateTextareaNonEmpty, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.ts';
32
import {fomanticMobileScreen} from '../modules/fomantic.ts';
43
import {POST} from '../modules/fetch.ts';
@@ -31,8 +30,7 @@ async function initRepoWikiFormEditor() {
3130
const response = await POST(editor.previewUrl, {data: formData});
3231
const data = await response.text();
3332
lastContent = newContent;
34-
previewTarget.innerHTML = `<div class="markup ui segment">${data}</div>`;
35-
initMarkupContent();
33+
previewTarget.innerHTML = `<div class="render-content markup ui segment">${data}</div>`;
3634
} catch (error) {
3735
console.error('Error rendering preview:', error);
3836
} finally {

‎web_src/js/index.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {initNotificationCount, initNotificationsTable} from './features/notifica
1818
import {initRepoIssueContentHistory} from './features/repo-issue-content.ts';
1919
import {initStopwatch} from './features/stopwatch.ts';
2020
import {initFindFileInRepo} from './features/repo-findfile.ts';
21-
import {initCommentContent, initMarkupContent} from './markup/content.ts';
21+
import {initMarkupContent} from './markup/content.ts';
2222
import {initPdfViewer} from './render/pdf.ts';
2323

2424
import {initUserAuthOauth2, initUserCheckAppUrl} from './features/user-auth.ts';
@@ -102,7 +102,6 @@ onDomReady(() => {
102102
initHeadNavbarContentToggle,
103103
initFootLanguageMenu,
104104

105-
initCommentContent,
106105
initContextPopups,
107106
initHeatmap,
108107
initImageDiff,

‎web_src/js/markup/asciicast.ts

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
1-
export async function renderAsciicast() {
2-
const els = document.querySelectorAll('.asciinema-player-container');
3-
if (!els.length) return;
1+
export async function initMarkupRenderAsciicast(elMarkup: HTMLElement): Promise<void> {
2+
const el = elMarkup.querySelector('.asciinema-player-container');
3+
if (!el) return;
44

55
const [player] = await Promise.all([
66
// @ts-expect-error: module exports no types
77
import(/* webpackChunkName: "asciinema-player" */'asciinema-player'),
88
import(/* webpackChunkName: "asciinema-player" */'asciinema-player/dist/bundle/asciinema-player.css'),
99
]);
1010

11-
for (const el of els) {
12-
player.create(el.getAttribute('data-asciinema-player-src'), el, {
13-
// poster (a preview frame) to display until the playback is started.
14-
// Set it to 1 hour (also means the end if the video is shorter) to make the preview frame show more.
15-
poster: 'npt:1:0:0',
16-
});
17-
}
11+
player.create(el.getAttribute('data-asciinema-player-src'), el, {
12+
// poster (a preview frame) to display until the playback is started.
13+
// Set it to 1 hour (also means the end if the video is shorter) to make the preview frame show more.
14+
poster: 'npt:1:0:0',
15+
});
1816
}

‎web_src/js/markup/codecopy.ts

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,12 @@ export function makeCodeCopyButton(): HTMLButtonElement {
77
return button;
88
}
99

10-
export function renderCodeCopy(): void {
11-
const els = document.querySelectorAll('.markup .code-block code');
12-
if (!els.length) return;
10+
export function initMarkupCodeCopy(elMarkup: HTMLElement): void {
11+
const el = elMarkup.querySelector('.code-block code'); // .markup .code-block code
12+
if (!el || !el.textContent) return;
1313

14-
for (const el of els) {
15-
if (!el.textContent) continue;
16-
const btn = makeCodeCopyButton();
17-
// remove final trailing newline introduced during HTML rendering
18-
btn.setAttribute('data-clipboard-text', el.textContent.replace(/\r?\n$/, ''));
19-
el.after(btn);
20-
}
14+
const btn = makeCodeCopyButton();
15+
// remove final trailing newline introduced during HTML rendering
16+
btn.setAttribute('data-clipboard-text', el.textContent.replace(/\r?\n$/, ''));
17+
el.after(btn);
2118
}

‎web_src/js/markup/content.ts

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
1-
import {renderMermaid} from './mermaid.ts';
2-
import {renderMath} from './math.ts';
3-
import {renderCodeCopy} from './codecopy.ts';
4-
import {renderAsciicast} from './asciicast.ts';
1+
import {initMarkupCodeMermaid} from './mermaid.ts';
2+
import {initMarkupCodeMath} from './math.ts';
3+
import {initMarkupCodeCopy} from './codecopy.ts';
4+
import {initMarkupRenderAsciicast} from './asciicast.ts';
55
import {initMarkupTasklist} from './tasklist.ts';
6+
import {registerGlobalSelectorFunc} from '../modules/observer.ts';
67

78
// code that runs for all markup content
89
export function initMarkupContent(): void {
9-
renderMermaid();
10-
renderMath();
11-
renderCodeCopy();
12-
renderAsciicast();
13-
}
14-
15-
// code that only runs for comments
16-
export function initCommentContent(): void {
17-
initMarkupTasklist();
10+
registerGlobalSelectorFunc('.markup', (el: HTMLElement) => {
11+
initMarkupCodeCopy(el);
12+
initMarkupTasklist(el);
13+
initMarkupCodeMermaid(el);
14+
initMarkupCodeMath(el);
15+
initMarkupRenderAsciicast(el);
16+
});
1817
}

0 commit comments

Comments
 (0)