blob: 73a4cc1297d9f0ee0646150e7a6f0dbac4305c4c [file] [log] [blame]
Adrià Vilanova Martínez115e3d82023-01-10 21:50:06 +01001import '@material/web/button/outlined-button.js';
2
Adrià Vilanova Martínez5bde12d2023-03-12 00:57:55 +01003import {msg, str} from '@lit/localize';
Adrià Vilanova Martíneza03d03a2023-03-11 23:30:07 +01004import {css, html} from 'lit';
Adrià Vilanova Martínez115e3d82023-01-10 21:50:06 +01005
Adrià Vilanova Martíneza03d03a2023-03-11 23:30:07 +01006import {I18nLitElement} from '../../../../common/litI18nUtils.js';
Adrià Vilanova Martínez115e3d82023-01-10 21:50:06 +01007import {SHARED_MD3_STYLES} from '../../../../common/styles/md3.js';
Adrià Vilanova Martínez72a4ea42024-02-09 22:35:32 +01008import {openReplyEditor} from '../../utils/common.js';
Adrià Vilanova Martínez115e3d82023-01-10 21:50:06 +01009import {getExtraInfoNodes} from '../flattenThreads.js';
10
Adrià Vilanova Martíneza03d03a2023-03-11 23:30:07 +010011export default class TwptFlattenThreadReplyButton extends I18nLitElement {
Adrià Vilanova Martínez115e3d82023-01-10 21:50:06 +010012 static properties = {
13 extraInfo: {type: Object},
14 };
15
16 static styles = [
17 SHARED_MD3_STYLES,
18 css`
19 md-outlined-button {
20 --md-outlined-button-container-shape: 0.25rem;
21 --md-outlined-button-container-height: 38px;
22 }
23 `,
24 ];
25
26 constructor() {
27 super();
28 this.extraInfo = {};
Adrià Vilanova Martínez72a4ea42024-02-09 22:35:32 +010029 this.addEventListener('twpt-click', this.openReplyEditor);
Adrià Vilanova Martínez115e3d82023-01-10 21:50:06 +010030 }
31
32 render() {
33 return html`
34 <md-outlined-button
Adrià Vilanova Martínez115e3d82023-01-10 21:50:06 +010035 @click=${this.openReplyEditor}>
Renovate botaa5fb8e2024-02-25 18:10:09 +000036 ${msg('Reply', {
37 desc: 'Button which is used to open the reply box.',
38 })}
Adrià Vilanova Martínez115e3d82023-01-10 21:50:06 +010039 </md-outlined-button>
40 `;
41 }
42
43 #defaultReply(messagePayload) {
44 const quoteHeader = document.createElement('div');
45 const italics = document.createElement('i');
Adrià Vilanova Martínez5bde12d2023-03-12 00:57:55 +010046 const authorName = this.extraInfo?.authorName;
47 italics.textContent = msg(str`${authorName} said:`);
Adrià Vilanova Martínez115e3d82023-01-10 21:50:06 +010048 quoteHeader.append(italics);
49
50 const quote = document.createElement('blockquote');
51 quote.innerHTML = messagePayload;
52 getExtraInfoNodes(quote)?.forEach?.(node => {
53 node.parentNode.removeChild(node);
54 });
55
56 const br1 = document.createElement('br');
57 const br2 = document.createElement('br');
58
59 return [quoteHeader, quote, br1, br2];
60 }
61
62 openReplyEditor() {
63 const messageId = this.extraInfo?.id;
64 const messagePayload = document.querySelector(
65 '[data-twpt-message-id="' + messageId +
66 '"] .scTailwindThreadPostcontentroot html-blob');
67 if (!messagePayload) {
68 console.error('[flattenThreads] Payload not found.');
69 return;
70 }
71
72 const parentId = this.extraInfo?.parentId ?? this.extraInfo?.id;
Adrià Vilanova Martínez72a4ea42024-02-09 22:35:32 +010073 openReplyEditor(parentId).then(editor => {
Adrià Vilanova Martínez115e3d82023-01-10 21:50:06 +010074 const payload =
75 editor?.querySelector('.scTailwindSharedRichtexteditoreditor');
76
77 payload.prepend(...this.#defaultReply(messagePayload.innerHTML));
Adrià Vilanova Martínezdb38d7f2023-01-10 22:40:58 +010078 payload.scrollTop = payload.scrollHeight;
Adrià Vilanova Martínez115e3d82023-01-10 21:50:06 +010079 });
80 }
81}
82window.customElements.define(
83 'twpt-flatten-thread-reply-button', TwptFlattenThreadReplyButton);