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

fix(translation): ensure CSS and JS work in preview

Browse source 
- The translation preview now includes the full HTML document, ensuring that stylesheets, scripts, and other resources are loaded correctly.
- A <base> tag is injected into the preview to handle relative resource paths.
- Removed a script flag that was incorrectly disabling JavaScript in the translated page, which fixes the issue with dialog boxes not appearing.
This commit is contained in:
Russell Ballestrini 2025-07-01 17:49:33 -04:00
parent 7aeba010d6
commit c3b5c94497
2 changed files with 10 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/translation.js
View file

@ -229,32 +229,8 @@ ${preservedText}`;
// Extract page content for translation
export function extractPageContent() {
// Try to get main content from common selectors
const contentSelectors = [
'main',
'article',
'.content',
'.post-content',
'.entry-content',
'#content',
'body'
];
let content = '';
for (const selector of contentSelectors) {
const element = document.querySelector(selector);
if (element) {
// Get HTML content to preserve structure for translation
content = element.innerHTML;
break;
}
}
// Clean up excessive whitespace
content = content.replace(/\n\s*\n\s*\n/g, '\n\n').trim();
return content;
// Return the entire HTML of the document to preserve head, styles, and scripts
return document.documentElement.outerHTML;
}
// Translate current page content

8
src/ui.js
View file

@ -1723,6 +1723,11 @@ export function openTranslateModal() {
// Inject base URL for relative resources to work
const baseUrl = window.location.origin + window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/') + 1);
// The translatedText is a full HTML document. We just need to inject the base tag.
const htmlWithBase = translatedText.replace(/<head[^>]*>/i, `if (previewWindow) {
// Inject base URL for relative resources to work
const baseUrl = window.location.origin + window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/') + 1);
let htmlWithBase;
const scriptTag = `
<script>
@ -1743,6 +1748,9 @@ export function openTranslateModal() {
htmlWithBase = `<!DOCTYPE html>\n<html><head><base href="${baseUrl}">${scriptTag}</head><body>${translatedText}</body></html>`;
}
previewWindow.document.write(htmlWithBase);
previewWindow.document.close();<base href="${baseUrl}">`);
previewWindow.document.write(htmlWithBase);
previewWindow.document.close();
previewWindow.document.title = `Translation Preview (${targetLanguageName}) - AI Enabled`;