blob: 0b490e4afb385c9f4d9fd3e9419ec88f65fdd819 [file] [log] [blame]
Adrià Vilanova Martínezf19ea432024-01-23 20:20:52 +01001// Copyright 2019 The Chromium Authors
Copybara854996b2021-09-07 19:36:02 +00002// Use of this source code is governed by a BSD-style license that can be
3// found in the LICENSE file.
4
5import {LitElement, html, css} from 'lit-element';
6import {ifDefined} from 'lit-html/directives/if-defined';
7import {autolink} from 'autolink.js';
8import {connectStore} from 'reducers/base.js';
9import * as issueV0 from 'reducers/issueV0.js';
10import * as projectV0 from 'reducers/projectV0.js';
11import * as userV0 from 'reducers/userV0.js';
12import {SHARED_STYLES, MD_STYLES} from 'shared/shared-styles.js';
13import {shouldRenderMarkdown, renderMarkdown} from 'shared/md-helper.js';
14import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
15
16/**
17 * `<mr-comment-content>`
18 *
19 * Displays text for a comment.
20 *
21 */
22export class MrCommentContent extends connectStore(LitElement) {
23 /** @override */
24 constructor() {
25 super();
26
27 this.content = '';
28 this.commentReferences = new Map();
29 this.isDeleted = false;
30 this.projectName = '';
31 this.author = '';
32 this.prefs = {};
33 }
34
35 /** @override */
36 static get properties() {
37 return {
38 content: {type: String},
39 commentReferences: {type: Object},
40 revisionUrlFormat: {type: String},
41 isDeleted: {
42 type: Boolean,
43 reflect: true,
44 },
45 projectName: {type: String},
46 author: {type: String},
47 prefs: {type: Object},
48 };
49 }
50
51 /** @override */
52 static get styles() {
53 return [
54 SHARED_STYLES,
55 MD_STYLES,
56 css`
57 :host {
58 word-break: break-word;
59 font-size: var(--chops-main-font-size);
60 line-height: 130%;
61 font-family: var(--mr-toggled-font-family);
62 }
63 :host([isDeleted]) {
64 color: #888;
65 font-style: italic;
66 }
67 .line {
68 white-space: pre-wrap;
69 }
70 .strike-through {
71 text-decoration: line-through;
72 }
73 `,
74 ];
75 }
76
77 /** @override */
78 render() {
79 if (shouldRenderMarkdown({project: this.projectName, author: this.author,
80 enabled: this._renderMarkdown})) {
81 return html`
82 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
83 <div class="markdown">
84 ${unsafeHTML(renderMarkdown(this.content))}
85 </div>
86 `;
87 }
88 const runs = autolink.markupAutolinks(
89 this.content, this.commentReferences, this.projectName,
90 this.revisionUrlFormat);
91 const templates = runs.map((run) => {
92 switch (run.tag) {
93 case 'b':
94 return html`<b class="line">${run.content}</b>`;
95 case 'br':
96 return html`<br>`;
97 case 'a':
98 return html`<a
99 class="line"
100 target="_blank"
101 href=${run.href}
102 class=${run.css}
103 title=${ifDefined(run.title)}
104 >${run.content}</a>`;
105 default:
106 return html`<span class="line">${run.content}</span>`;
107 }
108 });
109 return html`${templates}`;
110 }
111
112 /**
113 * Helper to get state of Markdown rendering.
114 * @return {boolean} Whether to render Markdown.
115 */
116 get _renderMarkdown() {
117 const {prefs} = this;
118 if (!prefs) return true;
119 return prefs.get('render_markdown');
120 }
121
122 /** @override */
123 stateChanged(state) {
124 this.commentReferences = issueV0.commentReferences(state);
125 this.projectName = issueV0.viewedIssueRef(state).projectName;
126 this.revisionUrlFormat =
127 projectV0.viewedPresentationConfig(state).revisionUrlFormat;
128 this.prefs = userV0.prefs(state);
129 }
130}
131customElements.define('mr-comment-content', MrCommentContent);