added language to copy to clipboard/localize messages
This commit is contained in:
Gamosoft
parent
7c6bcf9ede
commit
62dd77d418
|
|
@ -3909,22 +3909,35 @@ function noteApp() {
|
|||
|
||||
// Add copy button to code block
|
||||
addCopyButtonToCodeBlock(preElement) {
|
||||
// Create copy button
|
||||
// Extract language from code element class (e.g., "language-toml" -> "TOML")
|
||||
const codeElement = preElement.querySelector('code');
|
||||
let language = '';
|
||||
if (codeElement && codeElement.className) {
|
||||
const match = codeElement.className.match(/language-(\w+)/);
|
||||
if (match) {
|
||||
const langMap = {
|
||||
'js': 'JavaScript', 'ts': 'TypeScript', 'py': 'Python',
|
||||
'rb': 'Ruby', 'cs': 'C#', 'cpp': 'C++', 'sh': 'Shell',
|
||||
'bash': 'Bash', 'zsh': 'Zsh', 'yml': 'YAML', 'md': 'Markdown'
|
||||
};
|
||||
const rawLang = match[1].toLowerCase();
|
||||
language = langMap[rawLang] || match[1].toUpperCase();
|
||||
}
|
||||
}
|
||||
|
||||
// Create copy button with language label
|
||||
const button = document.createElement('button');
|
||||
button.className = 'copy-code-button';
|
||||
button.innerHTML = `
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
||||
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
||||
</svg>
|
||||
`;
|
||||
button.title = 'Copy to clipboard';
|
||||
const displayText = language || this.t('common.copy_to_clipboard').split(' ')[0]; // Use first word as fallback
|
||||
button.innerHTML = `<span>${displayText}</span>`;
|
||||
button.dataset.originalText = displayText; // Store for restore after copy
|
||||
button.title = this.t('common.copy_to_clipboard');
|
||||
|
||||
// Style the button
|
||||
button.style.position = 'absolute';
|
||||
button.style.top = '8px';
|
||||
button.style.right = '8px';
|
||||
button.style.padding = '6px';
|
||||
button.style.padding = '4px 10px';
|
||||
button.style.backgroundColor = 'rgba(0, 0, 0, 0.6)';
|
||||
button.style.border = 'none';
|
||||
button.style.borderRadius = '4px';
|
||||
|
|
@ -3936,6 +3949,11 @@ function noteApp() {
|
|||
button.style.alignItems = 'center';
|
||||
button.style.justifyContent = 'center';
|
||||
button.style.zIndex = '10';
|
||||
button.style.fontSize = '11px';
|
||||
button.style.fontWeight = '600';
|
||||
button.style.fontFamily = 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace';
|
||||
button.style.textTransform = 'uppercase';
|
||||
button.style.letterSpacing = '0.5px';
|
||||
|
||||
// Style the pre element to be relative
|
||||
preElement.style.position = 'relative';
|
||||
|
|
@ -3959,28 +3977,23 @@ function noteApp() {
|
|||
|
||||
const code = codeElement.textContent;
|
||||
|
||||
const originalText = button.dataset.originalText;
|
||||
const copiedText = this.t('common.copied');
|
||||
const copyTitle = this.t('common.copy_to_clipboard');
|
||||
|
||||
try {
|
||||
await navigator.clipboard.writeText(code);
|
||||
|
||||
// Visual feedback - change icon to checkmark
|
||||
button.innerHTML = `
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="20 6 9 17 4 12"></polyline>
|
||||
</svg>
|
||||
`;
|
||||
// Visual feedback - show localized "Copied!"
|
||||
button.innerHTML = `<span>${copiedText}</span>`;
|
||||
button.style.backgroundColor = 'rgba(34, 197, 94, 0.8)';
|
||||
button.title = 'Copied!';
|
||||
button.title = copiedText;
|
||||
|
||||
// Reset after 2 seconds
|
||||
setTimeout(() => {
|
||||
button.innerHTML = `
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
||||
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
||||
</svg>
|
||||
`;
|
||||
button.innerHTML = `<span>${originalText}</span>`;
|
||||
button.style.backgroundColor = 'rgba(0, 0, 0, 0.6)';
|
||||
button.title = 'Copy to clipboard';
|
||||
button.title = copyTitle;
|
||||
}, 2000);
|
||||
} catch (err) {
|
||||
console.error('Failed to copy code:', err);
|
||||
|
|
@ -3995,19 +4008,10 @@ function noteApp() {
|
|||
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
button.innerHTML = `
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="20 6 9 17 4 12"></polyline>
|
||||
</svg>
|
||||
`;
|
||||
button.innerHTML = `<span>${copiedText}</span>`;
|
||||
button.style.backgroundColor = 'rgba(34, 197, 94, 0.8)';
|
||||
setTimeout(() => {
|
||||
button.innerHTML = `
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
||||
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
||||
</svg>
|
||||
`;
|
||||
button.innerHTML = `<span>${originalText}</span>`;
|
||||
button.style.backgroundColor = 'rgba(0, 0, 0, 0.6)';
|
||||
}, 2000);
|
||||
} catch (fallbackErr) {
|
||||
|
|
|
|||
|
|
@ -23,7 +23,8 @@
|
|||
"loading": "Laden...",
|
||||
"saved": "✓ Gespeichert",
|
||||
"saving": "Speichern...",
|
||||
"copied": "✓ Kopiert!",
|
||||
"copied": "Kopiert!",
|
||||
"copy_to_clipboard": "In Zwischenablage kopieren",
|
||||
"failed": "{{action}} fehlgeschlagen. Bitte versuche es erneut."
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,8 @@
|
|||
"loading": "Loading...",
|
||||
"saved": "✓ Saved",
|
||||
"saving": "Saving...",
|
||||
"copied": "✓ Copied!",
|
||||
"copied": "Copied!",
|
||||
"copy_to_clipboard": "Copy to clipboard",
|
||||
"failed": "Failed to {{action}}. Please try again."
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,8 @@
|
|||
"loading": "Loading...",
|
||||
"saved": "✓ Saved",
|
||||
"saving": "Saving...",
|
||||
"copied": "✓ Copied!",
|
||||
"copied": "Copied!",
|
||||
"copy_to_clipboard": "Copy to clipboard",
|
||||
"failed": "Failed to {{action}}. Please try again."
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,8 @@
|
|||
"loading": "Cargando...",
|
||||
"saved": "✓ Guardado",
|
||||
"saving": "Guardando...",
|
||||
"copied": "✓ ¡Copiado!",
|
||||
"copied": "¡Copiado!",
|
||||
"copy_to_clipboard": "Copiar al portapapeles",
|
||||
"failed": "Error al {{action}}. Por favor, inténtalo de nuevo."
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,8 @@
|
|||
"loading": "Chargement...",
|
||||
"saved": "✓ Enregistré",
|
||||
"saving": "Enregistrement...",
|
||||
"copied": "✓ Copié !",
|
||||
"copied": "Copié !",
|
||||
"copy_to_clipboard": "Copier dans le presse-papiers",
|
||||
"failed": "Échec de {{action}}. Veuillez réessayer."
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,8 @@
|
|||
"loading": "Nalaganje...",
|
||||
"saved": "✓ Shranjeno",
|
||||
"saving": "Shranjevanje...",
|
||||
"copied": "✓ Kopirano!",
|
||||
"copied": "Kopirano!",
|
||||
"copy_to_clipboard": "Kopiraj v odložišče",
|
||||
"failed": "Napaka pri {{action}}. Prosimo, poskusite znova."
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,8 @@
|
|||
"loading": "加载中...",
|
||||
"saved": "✓ 已保存",
|
||||
"saving": "保存中...",
|
||||
"copied": "✓ 已复制!",
|
||||
"copied": "已复制!",
|
||||
"copy_to_clipboard": "复制到剪贴板",
|
||||
"failed": "{{action}} 失败。请重试。"
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue