674 lines
24 KiB
JavaScript
674 lines
24 KiB
JavaScript
/*
|
|
* ThunderAI [https://micz.it/thunderbird-addon-thunderai/]
|
|
* Copyright (C) 2024 - 2026 Mic (m@micz.it)
|
|
|
|
* This program is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU General Public License as published by
|
|
* the Free Software Foundation, either version 3 of the License, or
|
|
* (at your option) any later version.
|
|
|
|
* This program is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU General Public License for more details.
|
|
|
|
* You should have received a copy of the GNU General Public License
|
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
*
|
|
*
|
|
* This file contains a modified version of the code from the project at https://github.com/boxabirds/chatgpt-frontend-nobuild
|
|
* The original code has been released under the Apache License, Version 2.0.
|
|
*/
|
|
|
|
import { prefs_default } from '../options/mzta-options-default.js';
|
|
const messagesAreaTemplate = document.createElement('template');
|
|
|
|
const messagesAreaStyle = document.createElement('style');
|
|
messagesAreaStyle.textContent = `
|
|
:host {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
#messages {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100%;
|
|
margin-left: var(--margin);
|
|
margin-right: var(--margin);
|
|
overflow-x: hidden;
|
|
overflow-y: scroll;
|
|
max-height: 100%;
|
|
}
|
|
.message {
|
|
margin: 0;
|
|
line-height: 1.3;
|
|
padding: 5px;
|
|
border-radius: 10px;
|
|
}
|
|
.message p{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.token {
|
|
display: inline;
|
|
opacity: 0;
|
|
animation: fadeIn 1000ms forwards;
|
|
}
|
|
.action-buttons {
|
|
line-height: 1.3;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.action-buttons button {
|
|
display: inline;
|
|
margin: 0 10px;
|
|
padding: 5px 10px;
|
|
cursor: pointer;
|
|
border: 1px outset buttonface;
|
|
}
|
|
.action-buttons button.close_btn, .action-buttons button.diffv_btn {
|
|
border-radius: 5px;
|
|
}
|
|
.action-buttons button.action_btn {
|
|
margin-right: 0;
|
|
border-top-left-radius: 5px;
|
|
border-bottom-left-radius: 5px;
|
|
}
|
|
.action_btn_info {
|
|
font-size: 0.6rem;
|
|
color: gray;
|
|
display: inline-block;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
h2 {
|
|
font-weight: bold;
|
|
font-size: 1rem;
|
|
margin-top: 20px;
|
|
}
|
|
hr {
|
|
width: 100%;
|
|
}
|
|
.error{
|
|
background: lightcoral;
|
|
color: white;
|
|
margin-bottom: var(--margin);
|
|
}
|
|
.info{
|
|
background: lightblue;
|
|
color: navy;
|
|
margin-bottom: var(--margin);
|
|
font-size: 0.8em;
|
|
}
|
|
.info_obj{
|
|
color:rgb(0, 71, 36);
|
|
}
|
|
.sel_info{
|
|
font-size: 0.7rem;
|
|
color: gray;
|
|
margin-top: 5px;
|
|
display: none;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
/* diff viewer */
|
|
.added {
|
|
background-color: #d4fcdc;
|
|
display: inline;
|
|
}
|
|
.removed {
|
|
background-color: #fddddd;
|
|
display: inline;
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
/* Split button styles */
|
|
.split-button {
|
|
display: inline-flex;
|
|
position: relative;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
.split-button button {
|
|
padding: 5px 0px 5px 10px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.split-button .dropdown-toggle {
|
|
border-left: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 38px;
|
|
margin-left:-1px;
|
|
border-top-right-radius: 5px;
|
|
border-bottom-right-radius: 5px;
|
|
padding:0;
|
|
}
|
|
|
|
.dropdown-toggle svg {
|
|
fill: #555;
|
|
margin-left: -4px;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
position: absolute;
|
|
top: 2.55rem;
|
|
right:0;
|
|
display: none;
|
|
flex-direction: column;
|
|
background-color: white;
|
|
border: 1px solid #ccc;
|
|
min-width: 160px;
|
|
z-index: 1000;
|
|
margin-top: 2px;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
border-radius: 5px;
|
|
text-align: right;
|
|
width: -moz-available;
|
|
}
|
|
|
|
.dropdown-menu button {
|
|
padding: 10px 14px;
|
|
border: none;
|
|
background-color: white;
|
|
text-align: right;
|
|
cursor: pointer;
|
|
font-size: 0.6rem;
|
|
color: gray;
|
|
}
|
|
|
|
.dropdown-menu button:hover {
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
.dropdown-menu.show {
|
|
display: flex;
|
|
}
|
|
|
|
/* Dark mode styles */
|
|
@media (prefers-color-scheme: dark) {
|
|
.added {
|
|
background-color:rgb(0, 94, 0);
|
|
}
|
|
.removed {
|
|
background-color:rgb(90, 0, 0);
|
|
}
|
|
}
|
|
`;
|
|
messagesAreaTemplate.content.appendChild(messagesAreaStyle);
|
|
|
|
const messagesDiv = document.createElement('div');
|
|
messagesDiv.id = 'messages';
|
|
messagesAreaTemplate.content.appendChild(messagesDiv);
|
|
|
|
class MessagesArea extends HTMLElement {
|
|
|
|
fullTextHTML = "";
|
|
llmName = "LLM";
|
|
|
|
constructor() {
|
|
super();
|
|
this.accumulatingMessageEl = null;
|
|
|
|
const shadowRoot = this.attachShadow({ mode: 'open' });
|
|
shadowRoot.appendChild(messagesAreaTemplate.content.cloneNode(true));
|
|
|
|
this.messages = shadowRoot.querySelector('#messages');
|
|
}
|
|
|
|
createNewAccumulatingMessage() {
|
|
const lastMessage = this.messages.lastElementChild;
|
|
const isLastMessageFromUser = lastMessage && lastMessage.classList.contains('user');
|
|
|
|
if (isLastMessageFromUser) {
|
|
const header = document.createElement('h2');
|
|
header.textContent = this.llmName;
|
|
this.messages.appendChild(header);
|
|
}
|
|
|
|
this.accumulatingMessageEl = document.createElement('div');
|
|
this.accumulatingMessageEl.classList.add('message', 'bot');
|
|
this.messages.appendChild(this.accumulatingMessageEl);
|
|
}
|
|
|
|
init(worker) {
|
|
this.worker = worker;
|
|
}
|
|
|
|
setLLMName(llmName) {
|
|
this.llmName = llmName;
|
|
}
|
|
|
|
async handleTokensDone(promptData = null) {
|
|
this.flushAccumulatingMessage();
|
|
await this.addActionButtons(promptData);
|
|
this.addDivider();
|
|
}
|
|
|
|
appendUserMessage(messageText, type="user") {
|
|
this.fullTextHTML = "";
|
|
// console.log("[ThunderAI] appendUserMessage: " + messageText);
|
|
const header = document.createElement('h2');
|
|
let source = browser.i18n.getMessage("apiwebchat_you");
|
|
switch (type) {
|
|
case "user":
|
|
source = browser.i18n.getMessage("apiwebchat_you");
|
|
break;
|
|
case "info":
|
|
source = browser.i18n.getMessage("apiwebchat_info");
|
|
break;
|
|
}
|
|
header.textContent = source;
|
|
this.messages.appendChild(header);
|
|
|
|
const messageElement = document.createElement('div');
|
|
messageElement.classList.add('message', type);
|
|
// Replace \n with <br> for correct HTML display
|
|
if (type === "info") {
|
|
messageElement.appendChild(htmlStringToFragment(messageText));
|
|
} else {
|
|
messageElement.appendChild(textWithBrToFragment(messageText));
|
|
}
|
|
// messageElement.textContent = messageText;
|
|
// // Replace \n with <br> elements for correct HTML display
|
|
// messageElement.innerHTML = '';
|
|
// messageText.split('\n').forEach((line, idx, arr) => {
|
|
// messageElement.appendChild(document.createTextNode(line));
|
|
// if (idx < arr.length - 1) {
|
|
// messageElement.appendChild(document.createElement('br'));
|
|
// }
|
|
// });
|
|
this.messages.appendChild(messageElement);
|
|
this.scrollToBottom();
|
|
}
|
|
|
|
appendBotMessage(messageText, type="bot") {
|
|
// console.log("[ThunderAI] appendBotMessage: " + messageText);
|
|
|
|
this.fullTextHTML = messageText;
|
|
|
|
const lastMessage = this.messages.lastElementChild;
|
|
const isLastMessageFromUser = lastMessage && lastMessage.classList.contains('user');
|
|
|
|
if (isLastMessageFromUser) {
|
|
const header = document.createElement('h2');
|
|
header.textContent = this.llmName + (type=='error' ? " - " + browser.i18n.getMessage("apiwebchat_error") : "");
|
|
this.messages.appendChild(header);
|
|
}
|
|
|
|
const messageElement = document.createElement('div');
|
|
messageElement.classList.add('message', type);
|
|
messageElement.textContent = messageText;
|
|
this.messages.appendChild(messageElement);
|
|
this.scrollToBottom();
|
|
}
|
|
|
|
handleNewToken(token) {
|
|
if (!this.accumulatingMessageEl) {
|
|
this.createNewAccumulatingMessage();
|
|
}
|
|
|
|
const newTokenElement = document.createElement('span');
|
|
newTokenElement.classList.add('token');
|
|
newTokenElement.textContent = token;
|
|
this.accumulatingMessageEl.appendChild(newTokenElement);
|
|
|
|
this.scrollToBottom();
|
|
|
|
if (token === '\n') {
|
|
this.flushAccumulatingMessage();
|
|
}
|
|
}
|
|
|
|
scrollToBottom() {
|
|
this.messages.scrollTop = this.messages.scrollHeight;
|
|
}
|
|
|
|
// Helper to create dropdown options
|
|
createOption(label, callback) {
|
|
const btn = document.createElement('button');
|
|
btn.textContent = label;
|
|
btn.onclick = callback;
|
|
return btn;
|
|
}
|
|
|
|
// click callcback for the "use this answer" button
|
|
handleUseThisAnswerButtonClick(promptData, replyType, fullTextHTMLAtAssignment){
|
|
return async () => {
|
|
if(promptData.mailMessageId == -1) { // we are using the reply from the compose window!
|
|
promptData.action = "2"; // replace text
|
|
}
|
|
let finalText = removeAloneBRs(fullTextHTMLAtAssignment);
|
|
const selectedHTML = this.getCurrentSelectionHTML();
|
|
if(selectedHTML != "") {
|
|
finalText = removeAloneBRs(selectedHTML);
|
|
}
|
|
|
|
switch(promptData.action) {
|
|
case "1": // do reply
|
|
// console.log("[ThunderAI] (do reply) fullTextHTMLAtAssignment: " + fullTextHTMLAtAssignment);
|
|
await browser.runtime.sendMessage({command: "chatgpt_replyMessage", text: finalText, tabId: promptData.tabId, mailMessageId: promptData.mailMessageId, replyType: replyType});
|
|
browser.runtime.sendMessage({command: "chatgpt_close", window_id: (await browser.windows.getCurrent()).id});
|
|
break;
|
|
case "2": // replace text
|
|
// console.log("[ThunderAI] (replace text) fullTextHTMLAtAssignment: " + fullTextHTMLAtAssignment);
|
|
await browser.runtime.sendMessage({command: "chatgpt_replaceSelectedText", text: finalText, tabId: promptData.tabId, mailMessageId: promptData.mailMessageId});
|
|
browser.runtime.sendMessage({command: "chatgpt_close", window_id: (await browser.windows.getCurrent()).id});
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
async addActionButtons(promptData = null) {
|
|
if(promptData == null) { return; }
|
|
const actionButtons = document.createElement('div');
|
|
actionButtons.classList.add('action-buttons');
|
|
// Create the main container for the "use this answer" button when replying
|
|
const splitButton = document.createElement('div');
|
|
splitButton.className = 'split-button';
|
|
// selection info
|
|
const selectionInfo = document.createElement('p');
|
|
selectionInfo.textContent = browser.i18n.getMessage("apiwebchat_selection_info");
|
|
selectionInfo.classList.add('sel_info');
|
|
// main button
|
|
const actionButton = document.createElement('button');
|
|
actionButton.className = 'action_btn';
|
|
const actionButton_line1 = document.createElement('span');
|
|
actionButton_line1.textContent = browser.i18n.getMessage("apiwebchat_use_this_answer");
|
|
actionButton.appendChild(actionButton_line1);
|
|
splitButton.appendChild(actionButton);
|
|
const fullTextHTMLAtAssignment = this.fullTextHTML.trim().replace(/^"|"$/g, '').replace(/^<p>"/, '<p>').replace(/"<\/p>$/, '</p>'); // strip quotation marks
|
|
//console.log(">>>>>>>>>>>> fullTextHTMLAtAssignment: " + fullTextHTMLAtAssignment);
|
|
let reply_type_pref = await browser.storage.sync.get({ reply_type: prefs_default.reply_type });
|
|
if((promptData.action == "1") && (promptData.mailMessageId != -1)) {
|
|
const actionButton_line2 = document.createElement('span');
|
|
actionButton_line2.classList.add('action_btn_info');
|
|
actionButton_line2.textContent = reply_type_pref.reply_type == 'reply_all' ? browser.i18n.getMessage("prefs_OptionText_reply_all") : browser.i18n.getMessage("prefs_OptionText_reply_sender");
|
|
actionButton.appendChild(document.createElement('br'));
|
|
actionButton.appendChild(actionButton_line2);
|
|
// Dropdown toggle button
|
|
const toggleBtn = document.createElement('button');
|
|
toggleBtn.className = 'dropdown-toggle';
|
|
toggleBtn.setAttribute('aria-label', 'Show options');
|
|
// SVG icon
|
|
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
svg.setAttribute('viewBox', '0 0 20 20');
|
|
svg.setAttribute('width', '16');
|
|
svg.setAttribute('height', '16');
|
|
svg.setAttribute('fill', 'currentColor');
|
|
svg.setAttribute('stroke-width', '2');
|
|
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
|
path.setAttribute('d', 'M19 9l-7 7-7-7');
|
|
svg.appendChild(path);
|
|
toggleBtn.appendChild(svg);
|
|
splitButton.appendChild(toggleBtn);
|
|
// Dropdown menu
|
|
const dropdown = document.createElement('div');
|
|
dropdown.className = 'dropdown-menu';
|
|
dropdown.id = 'dropdown';
|
|
// Add options
|
|
dropdown.appendChild(this.createOption(
|
|
reply_type_pref.reply_type == 'reply_all' ? browser.i18n.getMessage("prefs_OptionText_reply_sender") : browser.i18n.getMessage("prefs_OptionText_reply_all"),
|
|
this.handleUseThisAnswerButtonClick(promptData, reply_type_pref.reply_type == 'reply_all' ? 'reply_sender' : 'reply_all', fullTextHTMLAtAssignment))
|
|
);
|
|
splitButton.appendChild(dropdown);
|
|
let dropdownJustOpened = false;
|
|
// Toggle function
|
|
toggleBtn.onclick = () => {
|
|
dropdownJustOpened = true;
|
|
dropdown.classList.toggle('show');
|
|
};
|
|
// Close on outside click
|
|
window.addEventListener('click', (e) => {
|
|
// Delay the execution to allow other handlers (like toggle) to run first
|
|
if (dropdownJustOpened) {
|
|
dropdownJustOpened = false;
|
|
return; // Skip this click because it's the one that opened the menu
|
|
}
|
|
setTimeout(() => {
|
|
if (!splitButton.contains(e.target)) {
|
|
dropdown.classList.remove('show');
|
|
}
|
|
}, 0);
|
|
});
|
|
}else{
|
|
actionButton.style.paddingRight = "10px";
|
|
actionButton.style.borderTopRightRadius = "5px";
|
|
actionButton.style.borderBottomRightRadius = "5px";
|
|
actionButton.style.marginRight = "10px";
|
|
}
|
|
actionButton.addEventListener('click', this.handleUseThisAnswerButtonClick(promptData,reply_type_pref.reply_type, fullTextHTMLAtAssignment));
|
|
const closeButton = document.createElement('button');
|
|
closeButton.textContent = browser.i18n.getMessage("chatgpt_win_close");
|
|
closeButton.classList.add('close_btn');
|
|
closeButton.addEventListener('click', async () => {
|
|
browser.runtime.sendMessage({command: "chatgpt_close", window_id: (await browser.windows.getCurrent()).id}); // close window
|
|
});
|
|
if(promptData.action != 0) {
|
|
actionButtons.appendChild(splitButton);
|
|
selectionInfo.style.display = "block"; // show selection info
|
|
}
|
|
|
|
// Save as Summary button (only shown for summary webchat sessions)
|
|
if(promptData.prompt_info?.headerMessageId) {
|
|
const saveSummaryButton = document.createElement('button');
|
|
saveSummaryButton.textContent = browser.i18n.getMessage("webchat_save_as_summary");
|
|
saveSummaryButton.classList.add('action_btn');
|
|
saveSummaryButton.addEventListener('click', async () => {
|
|
let finalText = removeAloneBRs(fullTextHTMLAtAssignment);
|
|
const selectedHTML = this.getCurrentSelectionHTML();
|
|
if(selectedHTML != "") {
|
|
finalText = removeAloneBRs(selectedHTML);
|
|
}
|
|
await browser.runtime.sendMessage({
|
|
command: "chatgpt_saveSummary",
|
|
text: finalText,
|
|
headerMessageId: promptData.prompt_info.headerMessageId,
|
|
tabId: promptData.prompt_info.summaryTabId || promptData.tabId,
|
|
});
|
|
browser.runtime.sendMessage({command: "chatgpt_close", window_id: (await browser.windows.getCurrent()).id});
|
|
});
|
|
actionButtons.appendChild(saveSummaryButton);
|
|
selectionInfo.style.display = "block";
|
|
}
|
|
|
|
// diff viewer button
|
|
if(promptData.prompt_info?.use_diff_viewer == "1") {
|
|
const diffvButton = document.createElement('button');
|
|
diffvButton.textContent = browser.i18n.getMessage("btn_show_differences");
|
|
diffvButton.classList.add('diffv_btn');
|
|
diffvButton.addEventListener('click', async () => {
|
|
let strippedText = fullTextHTMLAtAssignment.replace(/<\/?[^>]+(>|$)/g, "");
|
|
let originalText = promptData.prompt_info?.selection_text;
|
|
if((originalText == null) || (originalText == "")) {
|
|
originalText = promptData.prompt_info?.body_text;
|
|
}
|
|
this.appendDiffViewer(originalText, strippedText);
|
|
diffvButton.disabled = true;
|
|
});
|
|
actionButtons.appendChild(diffvButton);
|
|
}
|
|
|
|
actionButtons.appendChild(closeButton);
|
|
this.messages.appendChild(actionButtons);
|
|
this.messages.appendChild(selectionInfo);
|
|
this.scrollToBottom();
|
|
}
|
|
|
|
addDivider() {
|
|
const divider = document.createElement('hr');
|
|
this.messages.appendChild(divider);
|
|
this.scrollToBottom();
|
|
}
|
|
|
|
appendDiffViewer(originalText, newText) {
|
|
const wordDiff = Diff.diffWords(originalText, newText);
|
|
|
|
const messageElement = document.createElement('div');
|
|
messageElement.classList.add('message', 'bot');
|
|
|
|
// Iterate over each part of the diff to create the HTML output
|
|
wordDiff.forEach(part => {
|
|
// Split part.value by <br> (handling <br>, <br/>, <br />)
|
|
const brRegex = /(<br\s*\/?>)/gi;
|
|
const segments = part.value.split(brRegex);
|
|
|
|
segments.forEach(segment => {
|
|
if (segment.match(brRegex)) {
|
|
// It's a <br>, add a real <br> element
|
|
messageElement.appendChild(document.createElement("br"));
|
|
} else if (segment.length > 0) {
|
|
const diffElement = document.createElement("span");
|
|
if (part.added) {
|
|
diffElement.className = "added";
|
|
diffElement.textContent = segment;
|
|
} else if (part.removed) {
|
|
diffElement.className = "removed";
|
|
diffElement.textContent = segment;
|
|
} else {
|
|
diffElement.textContent = segment;
|
|
}
|
|
messageElement.appendChild(diffElement);
|
|
}
|
|
});
|
|
});
|
|
|
|
const header = document.createElement('h2');
|
|
header.textContent = browser.i18n.getMessage("chatgpt_win_diff_title");
|
|
this.messages.appendChild(header);
|
|
|
|
this.messages.appendChild(messageElement);
|
|
this.addDivider();
|
|
this.scrollToBottom();
|
|
}
|
|
|
|
flushAccumulatingMessage() {
|
|
if (this.accumulatingMessageEl) {
|
|
// Collect all tokens in a full text
|
|
let fullText = '';
|
|
this.accumulatingMessageEl.querySelectorAll('.token').forEach(tokenEl => {
|
|
fullText += tokenEl.textContent;
|
|
});
|
|
|
|
// Convert Markdown to DOM nodes using the markdown-it library
|
|
const md = window.markdownit();
|
|
const html = md.render(fullText);
|
|
|
|
this.fullTextHTML += html;
|
|
|
|
// console.log(">>>>>>>>>>>>>>>> flushAccumulatingMessage this.fullTextHTML: " + this.fullTextHTML);
|
|
|
|
// Create a new DOM parser
|
|
const parser = new DOMParser();
|
|
const doc = parser.parseFromString(html, 'text/html');
|
|
convertTextNodeNewlinesToBr(doc.body);
|
|
|
|
// Remove existing tokens
|
|
while (this.accumulatingMessageEl.firstChild) {
|
|
this.accumulatingMessageEl.removeChild(this.accumulatingMessageEl.firstChild);
|
|
}
|
|
|
|
// Append new nodes
|
|
Array.from(doc.body.childNodes).forEach(node => {
|
|
this.accumulatingMessageEl.appendChild(node);
|
|
});
|
|
|
|
this.accumulatingMessageEl = null;
|
|
}
|
|
}
|
|
|
|
getCurrentSelectionHTML() {
|
|
const selection = window.getSelection();
|
|
// console.log(">>>>>>>>>>>>>>>> getCurrentSelectionHTML: " + JSON.stringify(selection.toString()));
|
|
if (selection.rangeCount > 0) {
|
|
const range = selection.getRangeAt(0);
|
|
const container = document.createElement('div');
|
|
container.appendChild(range.cloneContents());
|
|
return container.innerHTML;
|
|
}
|
|
return '';
|
|
}
|
|
|
|
}
|
|
|
|
customElements.define('messages-area', MessagesArea);
|
|
|
|
|
|
function textWithBrToFragment(text) {
|
|
const fragment = document.createDocumentFragment();
|
|
const segments = text.split(/<br\s*\/?>/gi);
|
|
segments.forEach((segment, idx) => {
|
|
if (segment.length > 0) {
|
|
fragment.appendChild(document.createTextNode(segment));
|
|
}
|
|
if (idx < segments.length - 1) {
|
|
fragment.appendChild(document.createElement('br'));
|
|
}
|
|
});
|
|
return fragment;
|
|
}
|
|
|
|
function htmlStringToFragment(htmlString) {
|
|
// console.log(">>>>>>>>>>>>>>>> htmlStringToFragment htmlString: " + htmlString);
|
|
const normalizedHtml = htmlString.replace(/\n/g, '<br>');
|
|
// console.log(">>>>>>>>>>>>>>>> htmlStringToFragment normalizedHtml: " + normalizedHtml);
|
|
const parser = new DOMParser();
|
|
const doc = parser.parseFromString(normalizedHtml, 'text/html');
|
|
const fragment = document.createDocumentFragment();
|
|
Array.from(doc.body.childNodes).forEach(node => fragment.appendChild(node));
|
|
return fragment;
|
|
}
|
|
|
|
function convertTextNodeNewlinesToBr(element) {
|
|
element.childNodes.forEach(node => {
|
|
if (node.nodeType === Node.TEXT_NODE) {
|
|
if (node.textContent.includes('\n') && node.textContent.trim() !== '') {
|
|
const fragment = document.createDocumentFragment();
|
|
node.textContent.split('\n').forEach((part, idx, arr) => {
|
|
fragment.appendChild(document.createTextNode(part));
|
|
if (idx < arr.length - 1) {
|
|
fragment.appendChild(document.createElement('br'));
|
|
}
|
|
});
|
|
node.parentNode.replaceChild(fragment, node);
|
|
}
|
|
} else if (node.nodeType === Node.ELEMENT_NODE) {
|
|
convertTextNodeNewlinesToBr(node);
|
|
}
|
|
});
|
|
}
|
|
|
|
function removeAloneBRs(htmlString) {
|
|
const parser = new DOMParser();
|
|
const doc = parser.parseFromString(htmlString, 'text/html');
|
|
|
|
const brElements = Array.from(doc.querySelectorAll('br'));
|
|
|
|
brElements.forEach(br => {
|
|
let current = br;
|
|
let isInsideP = false;
|
|
|
|
while (current.parentElement) {
|
|
if (current.parentElement.tagName.toLowerCase() === 'p') {
|
|
isInsideP = true;
|
|
break;
|
|
}
|
|
current = current.parentElement;
|
|
}
|
|
|
|
if (!isInsideP) {
|
|
br.remove();
|
|
}
|
|
});
|
|
|
|
return doc.body.innerHTML;
|
|
}
|