engineering/uncloseai.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add HTML preview with iframe rendering for translations

Browse source
This commit is contained in:
Russell Ballestrini 2025-07-01 16:39:57 -04:00
parent 5d0f299b39
commit fad29c828b
1 changed files with 24 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/ui.js
View file

@ -1710,7 +1710,30 @@ export function openTranslateModal() {
}
resultLabel.textContent = `Translation (${targetLanguageName}):`;
resultArea.textContent = translatedText;
// Check if the translated content looks like HTML
const isHTML = translatedText.includes('<') && translatedText.includes('>') &&
(translatedText.includes('<h') || translatedText.includes('<p') ||
translatedText.includes('<div') || translatedText.includes('<section'));
if (isHTML) {
// Create HTML preview with toggle
resultArea.innerHTML = `
<div style="margin-bottom: 15px;">
<button onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent.includes('Raw') ? 'Show Raw HTML' : 'Hide Raw HTML'" style="padding: 6px 12px; background: #666; color: white; border: none; border-radius: 4px; cursor: pointer;">Show Raw HTML</button>
<div style="display: none; margin: 10px 0; padding: 15px; background: #f0f0f0; border-radius: 4px; white-space: pre-wrap; font-family: monospace; font-size: 0.85em; max-height: 200px; overflow-y: auto; border: 1px solid #ddd;">${translatedText.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</div>
</div>
<div style="border: 2px solid #4CAF50; border-radius: 8px; background: white; overflow: hidden;">
<div style="background: #4CAF50; color: white; padding: 10px; font-weight: bold; margin: 0;">📄 Rendered Preview</div>
<iframe srcdoc="${translatedText.replace(/"/g, '&quot;').replace(/'/g, '&#39;')}" style="width: 100%; height: 500px; border: none; display: block;" sandbox="allow-same-origin"></iframe>
</div>
`;
resultArea.style.whiteSpace = 'normal';
} else {
resultArea.textContent = translatedText;
resultArea.style.whiteSpace = 'pre-wrap';
}
resultContainer.style.display = 'block';
// Scroll to result