Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

components: Generate properly escaped HTML. 

Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit is contained in:
Anders Kaseorg 2021-02-03 11:26:54 -08:00 committed by Tim Abbott
parent 64b78ad992
commit f8fbae4d8e
2 changed files with 46 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
frontend_tests/node_tests/components.js
View File

@ -118,7 +118,7 @@ run_test("basics", () => {
return self;
})();
set_global("$", (sel) => {
set_global("$", (sel, attributes) => {
if (sel.stub) {
// The component often redundantly re-wraps objects.
return sel;
@ -129,12 +129,45 @@ run_test("basics", () => {
return switcher;
case "<div class='tab-switcher stream_sorter_toggle'></div>":
return switcher;
case "<div class='ind-tab' data-tab-key='keyboard-shortcuts' data-tab-id='0' tabindex='0'>translated: Keyboard shortcuts</div>":
return make_tab(0);
case "<div class='ind-tab' data-tab-key='message-formatting' data-tab-id='1' tabindex='0'>translated: Message formatting</div>":
return make_tab(1);
case "<div class='ind-tab' data-tab-key='search-operators' data-tab-id='2' tabindex='0'>translated: Search operators</div>":
return make_tab(2);
case "<div>": {
const tab_id = attributes["data-tab-id"];
assert.deepEqual(
attributes,
[
{
class: "ind-tab",
"data-tab-key": "keyboard-shortcuts",
"data-tab-id": 0,
tabindex: 0,
},
{
class: "ind-tab",
"data-tab-key": "message-formatting",
"data-tab-id": 1,
tabindex: 0,
},
{
class: "ind-tab",
"data-tab-key": "search-operators",
"data-tab-id": 2,
tabindex: 0,
},
][tab_id],
);
return {
text: (text) => {
assert.equal(
text,
[
"translated: Keyboard shortcuts",
"translated: Message formatting",
"translated: Search operators",
][tab_id],
);
return make_tab(tab_id);
},
};
}
default:
throw new Error("unknown selector: " + sel);
}

15
static/js/components.js
View File

@ -23,15 +23,12 @@ exports.toggle = function (opts) {
for (const [i, value] of opts.values.entries()) {
// create a tab with a tab-id so they don't have to be referenced
// by text value which can be inconsistent.
const tab = $(
"<div class='ind-tab' data-tab-key='" +
value.key +
"' data-tab-id='" +
i +
"' tabindex='0'>" +
value.label +
"</div>",
);
const tab = $("<div>", {
class: "ind-tab",
"data-tab-key": value.key,
"data-tab-id": i,
tabindex: 0,
}).text(value.label);
// add proper classes for styling in CSS.
if (i === 0) {