paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-15 11:22:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

postprocess: Move list-processing to the top.

Browse Source 
This is the most simple loop, so sticking it at the top
keeps it from getting lost among the more complex
processing that follows.
This commit is contained in:
Karl Stolley
2025-09-24 12:23:34 -04:00
committed by Tim Abbott
parent e217340b23
commit 716333c6be
2 changed files with 21 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
web/src/postprocess_content.ts
View File

@@ -12,6 +12,20 @@ export function postprocess_content(html: string): string {
const template = inertDocument.createElement("template"); const template = inertDocument.createElement("template");
template.innerHTML = html; template.innerHTML = html;
for (const ol of template.content.querySelectorAll("ol")) {
const list_start = Number(ol.getAttribute("start") ?? 1);
// We don't count the first item in the list, as it
// will be identical to the start value
const list_length = ol.children.length - 1;
const max_list_counter = list_start + list_length;
// We count the characters in the longest list counter,
// and use that to offset the list accordingly in CSS
const max_list_counter_string_length = max_list_counter.toString().length;
ol.classList.add(`counter-length-${max_list_counter_string_length}`);
// We subtract 1 from list_start, as `count 0` displays 1.
ol.style.setProperty("counter-reset", `count ${list_start - 1}`);
}
for (const elt of template.content.querySelectorAll("a")) { for (const elt of template.content.querySelectorAll("a")) {
// Ensure that all external links have target="_blank" // Ensure that all external links have target="_blank"
// rel="opener noreferrer". This ensures that external links // rel="opener noreferrer". This ensures that external links
@@ -211,20 +225,6 @@ export function postprocess_content(html: string): string {
} }
} }
for (const ol of template.content.querySelectorAll("ol")) {
const list_start = Number(ol.getAttribute("start") ?? 1);
// We don't count the first item in the list, as it
// will be identical to the start value
const list_length = ol.children.length - 1;
const max_list_counter = list_start + list_length;
// We count the characters in the longest list counter,
// and use that to offset the list accordingly in CSS
const max_list_counter_string_length = max_list_counter.toString().length;
ol.classList.add(`counter-length-${max_list_counter_string_length}`);
// We subtract 1 from list_start, as `count 0` displays 1.
ol.style.setProperty("counter-reset", `count ${list_start - 1}`);
}
for (const inline_img of template.content.querySelectorAll<HTMLImageElement>( for (const inline_img of template.content.querySelectorAll<HTMLImageElement>(
".message-media-preview-image img", ".message-media-preview-image img",
)) { )) {

14
web/tests/postprocess_content.test.cjs
View File

@@ -13,6 +13,13 @@ const {initialize_user_settings} = zrequire("user_settings");
const user_settings = {web_font_size_px: 16}; const user_settings = {web_font_size_px: 16};
initialize_user_settings({user_settings}); initialize_user_settings({user_settings});
run_test("ordered_lists", () => {
assert.equal(
postprocess_content('<ol start="9"><li>Nine</li><li>Ten</li></ol>'),
'<ol start="9" class="counter-length-2" style="counter-reset: count 8;"><li>Nine</li><li>Ten</li></ol>',
);
});
// Care should be taken to present real-world cases here and // Care should be taken to present real-world cases here and
// throughout, rather than contrived examples that serve // throughout, rather than contrived examples that serve
// only to satisfy 100% test coverage. // only to satisfy 100% test coverage.
@@ -82,13 +89,6 @@ run_test("postprocess_media_and_embeds", () => {
); );
}); });
run_test("ordered_lists", () => {
assert.equal(
postprocess_content('<ol start="9"><li>Nine</li><li>Ten</li></ol>'),
'<ol start="9" class="counter-length-2" style="counter-reset: count 8;"><li>Nine</li><li>Ten</li></ol>',
);
});
run_test("inline_image_galleries", ({override}) => { run_test("inline_image_galleries", ({override}) => {
const thumbnail_formats = [ const thumbnail_formats = [
{ {