OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-06-26 18:26:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

enh: copy formatted option

Browse Source 
Co-Authored-By: Sebastian Whincop <123417897+macjedi42@users.noreply.github.com>
This commit is contained in:
Timothy Jaeryang Baek
2025-04-14 01:56:15 -07:00
parent 95fca7b700
commit aa8db40376
3 changed files with 150 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
src/lib/utils/index.ts
View File

@@ -15,6 +15,11 @@ dayjs.extend(localizedFormat);
import { WEBUI_BASE_URL } from '$lib/constants';
import { TTS_RESPONSE_SPLIT } from '$lib/types';
import { marked } from 'marked';
import markedExtension from '$lib/utils/marked/extension';
import markedKatexExtension from '$lib/utils/marked/katex-extension';
import hljs from 'highlight.js';
//////////////////////////
// Helper functions
//////////////////////////
@@ -309,46 +314,129 @@ export const formatDate = (inputDate) => {
}
};
export const copyToClipboard = async (text) => {
let result = false;
if (!navigator.clipboard) {
const textArea = document.createElement('textarea');
textArea.value = text;
export const copyToClipboard = async (text, formatted = false) => {
if (formatted) {
const options = {
throwOnError: false,
highlight: function (code, lang) {
const language = hljs.getLanguage(lang) ? lang : 'plaintext';
return hljs.highlight(code, { language }).value;
}
};
marked.use(markedKatexExtension(options));
marked.use(markedExtension(options));
// Avoid scrolling to bottom
textArea.style.top = '0';
textArea.style.left = '0';
textArea.style.position = 'fixed';
const htmlContent = marked.parse(text);
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
// Add basic styling to make the content look better when pasted
const styledHtml = `
<div>
<style>
pre {
background-color: #f6f8fa;
border-radius: 6px;
padding: 16px;
overflow: auto;
}
code {
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
font-size: 14px;
}
.hljs-keyword { color: #d73a49; }
.hljs-string { color: #032f62; }
.hljs-comment { color: #6a737d; }
.hljs-function { color: #6f42c1; }
.hljs-number { color: #005cc5; }
.hljs-operator { color: #d73a49; }
.hljs-class { color: #6f42c1; }
.hljs-title { color: #6f42c1; }
.hljs-params { color: #24292e; }
.hljs-built_in { color: #005cc5; }
blockquote {
border-left: 4px solid #dfe2e5;
padding-left: 16px;
color: #6a737d;
margin-left: 0;
margin-right: 0;
}
table {
border-collapse: collapse;
width: 100%;
margin-bottom: 16px;
}
table, th, td {
border: 1px solid #dfe2e5;
}
th, td {
padding: 8px 12px;
}
th {
background-color: #f6f8fa;
}
</style>
${htmlContent}
</div>
`;
// Create a blob with HTML content
const blob = new Blob([styledHtml], { type: 'text/html' });
try {
const successful = document.execCommand('copy');
const msg = successful ? 'successful' : 'unsuccessful';
console.log('Fallback: Copying text command was ' + msg);
result = true;
// Create a ClipboardItem with HTML content
const data = new ClipboardItem({
'text/html': blob,
'text/plain': new Blob([text], { type: 'text/plain' })
});
// Write to clipboard
await navigator.clipboard.write([data]);
return true;
} catch (err) {
console.error('Fallback: Oops, unable to copy', err);
console.error('Error copying formatted content:', err);
// Fallback to plain text
return await copyToClipboard(text);
}
} else {
let result = false;
if (!navigator.clipboard) {
const textArea = document.createElement('textarea');
textArea.value = text;
// Avoid scrolling to bottom
textArea.style.top = '0';
textArea.style.left = '0';
textArea.style.position = 'fixed';
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
const successful = document.execCommand('copy');
const msg = successful ? 'successful' : 'unsuccessful';
console.log('Fallback: Copying text command was ' + msg);
result = true;
} catch (err) {
console.error('Fallback: Oops, unable to copy', err);
}
document.body.removeChild(textArea);
return result;
}
document.body.removeChild(textArea);
result = await navigator.clipboard
.writeText(text)
.then(() => {
console.log('Async: Copying to clipboard was successful!');
return true;
})
.catch((error) => {
console.error('Async: Could not copy text: ', error);
return false;
});
return result;
}
result = await navigator.clipboard
.writeText(text)
.then(() => {
console.log('Async: Copying to clipboard was successful!');
return true;
})
.catch((error) => {
console.error('Async: Could not copy text: ', error);
return false;
});
return result;
};
export const compareVersion = (latest, current) => {