Skip to content

Commit 0fa14b6

Browse files
agrawal-dagrawal-d
committed
webview: Set up pipeline to render edit history.
Creates `editHistoryHtml.js` and adds styles to `base.css` to generate markup that can be used to show message edit history, in a webview.
1 parent 88125c3 commit 0fa14b6

File tree

2 files changed

+129
-0
lines changed

2 files changed

+129
-0
lines changed

‎src/webview/html/editHistoryHtml.js‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
/* @flow strict-local */
2+
import template from './template';
3+
import type { ThemeName, MessageSnapshot, UserOrBot, Auth } from '../../types';
4+
import { shortTime, humanDate } from '../../utils/date';
5+
import css from '../css/css';
6+
import script from '../js/script';
7+
8+
const TOPIC_EDITED = 'TOPIC_EDITED';
9+
const CONTENT_EDITED = 'CONTENT_EDITED';
10+
const BOTH_EDITED = 'BOTH_EDITED';
11+
const NOT_EDITED = 'NOT_EDITED';
12+
13+
const renderSnapshot = (snapshot: MessageSnapshot, usersById: Map<number, UserOrBot>): string => {
14+
const user = usersById.get(snapshot.user_id);
15+
const date = new Date(snapshot.timestamp * 1000);
16+
const editedTime = `${humanDate(date)} ${shortTime(date)}`;
17+
let displayedContent: string = '';
18+
let tag: string = '';
19+
let edit_flag;
20+
21+
if (snapshot.prev_topic === undefined && snapshot.prev_content === undefined) {
22+
edit_flag = NOT_EDITED;
23+
} else if (snapshot.prev_content !== undefined && snapshot.prev_topic === undefined) {
24+
edit_flag = CONTENT_EDITED;
25+
} else if (snapshot.prev_content === undefined && snapshot.prev_topic !== undefined) {
26+
edit_flag = TOPIC_EDITED;
27+
} else {
28+
edit_flag = BOTH_EDITED;
29+
}
30+
31+
switch (edit_flag) {
32+
case NOT_EDITED: {
33+
tag += template`<span class="message-tag">Original message</span>`;
34+
displayedContent = snapshot.content;
35+
break;
36+
}
37+
38+
case TOPIC_EDITED: {
39+
tag += template`<span class="message-tag">Topic edited by ${
40+
user ? user.full_name : 'unknown user'
41+
}</span>`;
42+
43+
// prev_topic is always present for this case. $FlowFixMe.
44+
displayedContent = template`Topic:
45+
<span class="highlight_text_inserted">${snapshot.topic}</span>
46+
<span class="highlight_text_deleted">${snapshot.prev_topic}</span>`;
47+
break;
48+
}
49+
50+
case CONTENT_EDITED: {
51+
tag += template`<span class="message-tag">Edited by ${
52+
user ? user.full_name : 'unknown user'
53+
}</span>`;
54+
55+
// If prev_content is present, then so is content_html_diff. $FlowFixMe.
56+
displayedContent += snapshot.content_html_diff;
57+
break;
58+
}
59+
60+
case BOTH_EDITED: {
61+
tag += template`<span class="message-tag">Edited by ${
62+
user ? user.full_name : 'unknown user'
63+
}</span>`;
64+
65+
// If prev_content is present, then so is content_html_diff. $FlowFixMe.
66+
displayedContent += `Topic: ${snapshot.topic}<br/>${snapshot.content_html_diff}`;
67+
break;
68+
}
69+
70+
default:
71+
// eslint-disable-next-line no-console
72+
console.error('Invalid edit_flag');
73+
break;
74+
}
75+
76+
return template`
77+
<div class="edit-history-block">
78+
<div class="static-timestamp">${editedTime}</div>
79+
<span class="edit-history-content">$!${displayedContent}</span>
80+
<div class="message-tags">$!${tag}</div>
81+
</div>`;
82+
};
83+
84+
export default (
85+
editHistory: MessageSnapshot[],
86+
theme: ThemeName,
87+
usersById: Map<number, UserOrBot>,
88+
auth: Auth,
89+
): string => {
90+
let html: string = '';
91+
for (const snapshot of editHistory) {
92+
html += renderSnapshot(snapshot, usersById);
93+
}
94+
95+
return template`
96+
$!${script(null, auth)}
97+
$!${css(theme)}
98+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
99+
<body style="overflow-x: hidden;">
100+
$!${html}
101+
</body>`;
102+
};

‎src/webview/static/base.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -475,3 +475,30 @@ blockquote {
475475
height: 32px;
476476
fill: hsla(0, 0%, 100%, 0.75);
477477
}
478+
.edit-history-block{
479+
padding:8px;
480+
border-bottom:1px solid hsla(0, 0%, 50%, 0.25);
481+
}
482+
.edit-history-block .static-timestamp{
483+
margin-top: 8px;
484+
text-align: right;
485+
}
486+
.edit-history-content{
487+
-webkit-user-select: text; /* Safari 3.1+ */
488+
-moz-user-select: text; /* Firefox 2+ */
489+
-ms-user-select: text; /* IE 10+ */
490+
user-select: text; /* Standard syntax */
491+
-khtml-user-select: text;
492+
-webkit-touch-callout: text;
493+
word-wrap: break-word;
494+
}
495+
.highlight_text_inserted {
496+
color: #9effa1;
497+
background-color: hsla(120,64%,95%,.3);
498+
}
499+
.highlight_text_deleted {
500+
color: red;
501+
background-color: #fcdcd8;
502+
text-decoration: line-through;
503+
word-break: break-all;
504+
}

0 commit comments

Comments
 (0)