web/forgejo
10
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

feat(ui): add more emoji and code block rendering in issues

Browse source
This commit is contained in:
Bram Hagens 2024-07-17 01:37:20 +02:00
parent 60bcdc8bc3
commit 4a74113dee
No known key found for this signature in database
GPG key ID: CEF9728B2127ECDC
14 changed files with 322 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

9
web_src/js/features/repo-issue.js
View file

@ -8,6 +8,7 @@ import {toAbsoluteUrl} from '../utils.js';
import {initDropzone} from './common-global.js';
import {POST, GET} from '../modules/fetch.js';
import {showErrorToast} from '../modules/toast.js';
import {emojiHTML} from './emoji.js';
const {appSubUrl} = window.config;
@ -124,7 +125,7 @@ export function initRepoIssueSidebarList() {
return;
}
filteredResponse.results.push({
name: `#${issue.number} ${htmlEscape(issue.title)
name: `#${issue.number} ${issueTitleHTML(htmlEscape(issue.title))
}<div class="text small tw-break-anywhere">${htmlEscape(issue.repository.full_name)}</div>`,
value: issue.id,
});
@ -731,3 +732,9 @@ export function initArchivedLabelHandler() {
toggleElem(label, label.classList.contains('checked'));
}
}
// Render the issue's title. It converts emojis and code blocks syntax into their respective HTML equivalent.
export function issueTitleHTML(title) {
return title.replaceAll(/:[-+\w]+:/g, (emoji) => emojiHTML(emoji.substring(1, emoji.length - 1)))
.replaceAll(/`[^`]+`/g, (code) => `<code class="inline-code-block">${code.substring(1, code.length - 1)}</code>`);
}

24
web_src/js/features/repo-issue.test.js Normal file
View file

@ -0,0 +1,24 @@
import {vi} from 'vitest';
import {issueTitleHTML} from './repo-issue.js';
// monaco-editor does not have any exports fields, which trips up vitest
vi.mock('./comp/ComboMarkdownEditor.js', () => ({}));
// jQuery is missing
vi.mock('./common-global.js', () => ({}));
test('Convert issue title to html', () => {
expect(issueTitleHTML('')).toEqual('');
expect(issueTitleHTML('issue title')).toEqual('issue title');
const expected_thumbs_up = `<span class="emoji" title=":+1:">👍</span>`;
expect(issueTitleHTML(':+1:')).toEqual(expected_thumbs_up);
expect(issueTitleHTML(':invalid emoji:')).toEqual(':invalid emoji:');
const expected_code_block = `<code class="inline-code-block">code</code>`;
expect(issueTitleHTML('`code`')).toEqual(expected_code_block);
expect(issueTitleHTML('`invalid code')).toEqual('`invalid code');
expect(issueTitleHTML('invalid code`')).toEqual('invalid code`');
expect(issueTitleHTML('issue title :+1: `code`')).toEqual(`issue title ${expected_thumbs_up} ${expected_code_block}`);
});