blob: 73a4cc1297d9f0ee0646150e7a6f0dbac4305c4c [file] [log] [blame]
import '@material/web/button/outlined-button.js';
import {msg, str} from '@lit/localize';
import {css, html} from 'lit';
import {I18nLitElement} from '../../../../common/litI18nUtils.js';
import {SHARED_MD3_STYLES} from '../../../../common/styles/md3.js';
import {openReplyEditor} from '../../utils/common.js';
import {getExtraInfoNodes} from '../flattenThreads.js';
export default class TwptFlattenThreadReplyButton extends I18nLitElement {
static properties = {
extraInfo: {type: Object},
};
static styles = [
SHARED_MD3_STYLES,
css`
md-outlined-button {
--md-outlined-button-container-shape: 0.25rem;
--md-outlined-button-container-height: 38px;
}
`,
];
constructor() {
super();
this.extraInfo = {};
this.addEventListener('twpt-click', this.openReplyEditor);
}
render() {
return html`
<md-outlined-button
@click=${this.openReplyEditor}>
${msg('Reply', {
desc: 'Button which is used to open the reply box.',
})}
</md-outlined-button>
`;
}
#defaultReply(messagePayload) {
const quoteHeader = document.createElement('div');
const italics = document.createElement('i');
const authorName = this.extraInfo?.authorName;
italics.textContent = msg(str`${authorName} said:`);
quoteHeader.append(italics);
const quote = document.createElement('blockquote');
quote.innerHTML = messagePayload;
getExtraInfoNodes(quote)?.forEach?.(node => {
node.parentNode.removeChild(node);
});
const br1 = document.createElement('br');
const br2 = document.createElement('br');
return [quoteHeader, quote, br1, br2];
}
openReplyEditor() {
const messageId = this.extraInfo?.id;
const messagePayload = document.querySelector(
'[data-twpt-message-id="' + messageId +
'"] .scTailwindThreadPostcontentroot html-blob');
if (!messagePayload) {
console.error('[flattenThreads] Payload not found.');
return;
}
const parentId = this.extraInfo?.parentId ?? this.extraInfo?.id;
openReplyEditor(parentId).then(editor => {
const payload =
editor?.querySelector('.scTailwindSharedRichtexteditoreditor');
payload.prepend(...this.#defaultReply(messagePayload.innerHTML));
payload.scrollTop = payload.scrollHeight;
});
}
}
window.customElements.define(
'twpt-flatten-thread-reply-button', TwptFlattenThreadReplyButton);