Project import generated by Copybara.
GitOrigin-RevId: d9e9e3fb4e31372ec1fb43b178994ca78fa8fe70
diff --git a/static_src/elements/framework/mr-comment-content/mr-comment-content.js b/static_src/elements/framework/mr-comment-content/mr-comment-content.js
new file mode 100644
index 0000000..c2bf3e8
--- /dev/null
+++ b/static_src/elements/framework/mr-comment-content/mr-comment-content.js
@@ -0,0 +1,131 @@
+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {LitElement, html, css} from 'lit-element';
+import {ifDefined} from 'lit-html/directives/if-defined';
+import {autolink} from 'autolink.js';
+import {connectStore} from 'reducers/base.js';
+import * as issueV0 from 'reducers/issueV0.js';
+import * as projectV0 from 'reducers/projectV0.js';
+import * as userV0 from 'reducers/userV0.js';
+import {SHARED_STYLES, MD_STYLES} from 'shared/shared-styles.js';
+import {shouldRenderMarkdown, renderMarkdown} from 'shared/md-helper.js';
+import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
+
+/**
+ * `<mr-comment-content>`
+ *
+ * Displays text for a comment.
+ *
+ */
+export class MrCommentContent extends connectStore(LitElement) {
+ /** @override */
+ constructor() {
+ super();
+
+ this.content = '';
+ this.commentReferences = new Map();
+ this.isDeleted = false;
+ this.projectName = '';
+ this.author = '';
+ this.prefs = {};
+ }
+
+ /** @override */
+ static get properties() {
+ return {
+ content: {type: String},
+ commentReferences: {type: Object},
+ revisionUrlFormat: {type: String},
+ isDeleted: {
+ type: Boolean,
+ reflect: true,
+ },
+ projectName: {type: String},
+ author: {type: String},
+ prefs: {type: Object},
+ };
+ }
+
+ /** @override */
+ static get styles() {
+ return [
+ SHARED_STYLES,
+ MD_STYLES,
+ css`
+ :host {
+ word-break: break-word;
+ font-size: var(--chops-main-font-size);
+ line-height: 130%;
+ font-family: var(--mr-toggled-font-family);
+ }
+ :host([isDeleted]) {
+ color: #888;
+ font-style: italic;
+ }
+ .line {
+ white-space: pre-wrap;
+ }
+ .strike-through {
+ text-decoration: line-through;
+ }
+ `,
+ ];
+ }
+
+ /** @override */
+ render() {
+ if (shouldRenderMarkdown({project: this.projectName, author: this.author,
+ enabled: this._renderMarkdown})) {
+ return html`
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+ <div class="markdown">
+ ${unsafeHTML(renderMarkdown(this.content))}
+ </div>
+ `;
+ }
+ const runs = autolink.markupAutolinks(
+ this.content, this.commentReferences, this.projectName,
+ this.revisionUrlFormat);
+ const templates = runs.map((run) => {
+ switch (run.tag) {
+ case 'b':
+ return html`<b class="line">${run.content}</b>`;
+ case 'br':
+ return html`<br>`;
+ case 'a':
+ return html`<a
+ class="line"
+ target="_blank"
+ href=${run.href}
+ class=${run.css}
+ title=${ifDefined(run.title)}
+ >${run.content}</a>`;
+ default:
+ return html`<span class="line">${run.content}</span>`;
+ }
+ });
+ return html`${templates}`;
+ }
+
+ /**
+ * Helper to get state of Markdown rendering.
+ * @return {boolean} Whether to render Markdown.
+ */
+ get _renderMarkdown() {
+ const {prefs} = this;
+ if (!prefs) return true;
+ return prefs.get('render_markdown');
+ }
+
+ /** @override */
+ stateChanged(state) {
+ this.commentReferences = issueV0.commentReferences(state);
+ this.projectName = issueV0.viewedIssueRef(state).projectName;
+ this.revisionUrlFormat =
+ projectV0.viewedPresentationConfig(state).revisionUrlFormat;
+ this.prefs = userV0.prefs(state);
+ }
+}
+customElements.define('mr-comment-content', MrCommentContent);