Implement newsletter preview copy functionality and UI enhancements

- Add a new preview banner to indicate the live newsletter display.
- Introduce `copyFromPreviewFrame` function to enable copying the newsletter preview directly.
- Update copy status messages for clarity and improved user guidance.
- Revise button labels in the dashboard for better usability.
- Modify CSS for the newsletter preview frame and add styles for the new preview banner.

app/static/js/newsletter.js

@@ -181,6 +181,39 @@ function showCopyDialog(text, title) {
     document.addEventListener("keydown", copyDialogKeyHandler);
 }
 
+function copyFromPreviewFrame() {
+    const frame = document.getElementById("newsletter-preview-frame");
+    const doc = frame?.contentDocument;
+    const win = frame?.contentWindow;
+    if (!doc?.body || !win || !doc.body.innerHTML.trim()) {
+        return false;
+    }
+
+    const range = doc.createRange();
+    range.selectNodeContents(doc.body);
+    const selection = win.getSelection();
+    selection.removeAllRanges();
+    selection.addRange(range);
+
+    let ok = false;
+    try {
+        ok = doc.execCommand("copy");
+    } catch (err) {
+        console.warn("Copy from preview frame failed.", err);
+    } finally {
+        selection.removeAllRanges();
+    }
+    return ok;
+}
+
+function loadPreviewFrame() {
+    const frame = document.getElementById("newsletter-preview-frame");
+    const html = getNewsletterOutlookHtml();
+    if (frame && html) {
+        frame.srcdoc = html;
+    }
+}
+
 function copyViaIframe(html) {
     const iframe = document.createElement("iframe");
     iframe.setAttribute("aria-hidden", "true");
@@ -247,8 +280,13 @@ async function copyForOutlook() {
         return;
     }
 
-    if (copyHtmlWithFallback(html)) {
-        setCopyStatus("Newsletter kopiert. In Outlook: Strg+V, dann ggf. Rechtsklick → „Format beibehalten“.");
+    if (copyFromPreviewFrame()) {
+        setCopyStatus("Vorschau kopiert – in Outlook mit Strg+V einfügen (Rechtsklick → „Format beibehalten“).");
+        return;
+    }
+
+    if (copyViaIframe(html)) {
+        setCopyStatus("Newsletter kopiert – in Outlook mit Strg+V einfügen (Rechtsklick → „Format beibehalten“).");
         return;
     }
 
@@ -261,14 +299,14 @@ async function copyForOutlook() {
                     "text/plain": new Blob([plain], { type: "text/plain" }),
                 }),
             ]);
-            setCopyStatus("Newsletter kopiert. In Outlook: Strg+V, dann ggf. Rechtsklick → „Format beibehalten“.");
+            setCopyStatus("Newsletter kopiert – in Outlook mit Strg+V einfügen.");
             return;
         } catch (err) {
             console.warn("Clipboard API HTML copy failed.", err);
         }
     }
 
-    setCopyStatus("Bitte „Im Browser öffnen“ nutzen und dort Strg+A → Strg+C.", true);
+    setCopyStatus("Kopieren fehlgeschlagen. Bitte „Im Browser öffnen“ nutzen.", true);
 }
 
 function copyHtmlSource() {
@@ -332,17 +370,11 @@ function openOutlookInBrowser() {
     popup.document.write(html);
     popup.document.close();
     popup.document.title = "Wiki-Newsletter – zum Kopieren";
-    setCopyStatus("Newsletter im Browser geöffnet: Strg+A → Strg+C, dann in Outlook einfügen.");
+    setCopyStatus("Im neuen Tab: Alles markieren (Strg+A) → kopieren (Strg+C) → in Outlook einfügen.");
 }
 
 document.addEventListener("DOMContentLoaded", () => {
-    const outlookSource = document.getElementById("newsletter-outlook-source");
-    const htmlSource = document.getElementById("newsletter-html-source");
-    const frame = document.getElementById("newsletter-preview-frame");
-    const previewHtml = outlookSource?.value.trim() || htmlSource?.value.trim() || "";
-    if (frame && previewHtml) {
-        frame.srcdoc = previewHtml;
-    }
+    loadPreviewFrame();
 
     const htmlDisplay = document.getElementById("newsletter-html-display");
     htmlDisplay?.addEventListener("focus", () => selectTextarea(htmlDisplay));