Manual mails can be sent

app/Views/Components/FullScreenModal.vue

@@ -40,26 +40,29 @@ function close() {
 
 // ESC-Key & Focus-Trap
 function handleKeyDown(e) {
-  if (e.key === 'Escape') {
-    close()
-  }
-  if (e.key === 'Tab' && modalRef.value) {
-    const focusable = modalRef.value.querySelectorAll(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-    )
-    if (focusable.length === 0) return
-
-    const first = focusable[0]
-    const last = focusable[focusable.length - 1]
-
-    if (e.shiftKey && document.activeElement === first) {
-      e.preventDefault()
-      last.focus()
-    } else if (!e.shiftKey && document.activeElement === last) {
-      e.preventDefault()
-      first.focus()
+    if (e.key === 'Escape') {
+        close()
+    }
+    if (e.key === 'Tab' && modalRef.value) {
+        // Wenn der Fokus in einem iframe (z.B. TinyMCE) liegt, nicht eingreifen
+        if (document.activeElement?.tagName === 'IFRAME') return
+
+        const focusable = modalRef.value.querySelectorAll(
+            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), iframe'
+        )
+        if (focusable.length === 0) return
+
+        const first = focusable[0]
+        const last = focusable[focusable.length - 1]
+
+        if (e.shiftKey && document.activeElement === first) {
+            e.preventDefault()
+            last.focus()
+        } else if (!e.shiftKey && document.activeElement === last) {
+            e.preventDefault()
+            first.focus()
+        }
     }
-  }
 }
 
 // Body-Scroll sperren
@@ -87,27 +90,27 @@ onUnmounted(() => {
 
 <style scoped>
 .full-screen-modal-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 9999;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .full-screen-modal-content {
-  background: white;
-  border-radius: 12px;
-  position: absolute;
-  top: 30px;
-  bottom: 30px;
-  left: 30px;
-  right: 30px;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-  outline: none;
-  display: flex;
-  flex-direction: column;
+    background: white;
+    border-radius: 12px;
+    position: absolute;
+    top: 30px;
+    bottom: 30px;
+    left: 30px;
+    right: 30px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+    outline: none;
+    display: flex;
+    flex-direction: column;
 }
 
 .full-screen-modal-body {

app/Views/Components/TextEditor.vue

@@ -0,0 +1,31 @@
+<script setup>
+import Editor from '@tinymce/tinymce-vue';
+
+const model = defineModel()
+</script>
+
+<template>
+    <Editor
+        v-model="model"
+        tinymce-script-src="/tinymce/tinymce.min.js"
+        license-key="gpl"
+        :init="{
+            license_key: 'gpl',
+            base_url: '/tinymce',
+            suffix: '.min',
+            menubar: true,
+            plugins: 'link code table lists',
+            toolbar: 'undo redo | blocks bold italic underline | bullist numlist | link | table',
+            language: 'de',
+            language_url: '/tinymce/langs/de.js',
+            ui_mode: 'split',
+
+        }"
+    />
+</template>
+
+<style scoped>
+.tox .tox-promotion {
+    display: none !important;
+}
+</style>