Neue E-Mail Sending Seite

frontend/components/email/EmailTiptapEditor.vue

@@ -0,0 +1,247 @@
+<template>
+  <div class="email-editor">
+    <div v-if="editor" class="toolbar">
+      <div class="toolbar-group">
+        <button
+          class="toolbar-btn"
+          :class="{ 'is-active': editor.isActive('bold') }"
+          type="button"
+          title="Fett"
+          @click="editor.chain().focus().toggleBold().run()"
+        >
+          B
+        </button>
+        <button
+          class="toolbar-btn italic"
+          :class="{ 'is-active': editor.isActive('italic') }"
+          type="button"
+          title="Kursiv"
+          @click="editor.chain().focus().toggleItalic().run()"
+        >
+          I
+        </button>
+        <button
+          class="toolbar-btn line-through"
+          :class="{ 'is-active': editor.isActive('strike') }"
+          type="button"
+          title="Durchgestrichen"
+          @click="editor.chain().focus().toggleStrike().run()"
+        >
+          S
+        </button>
+      </div>
+
+      <div class="toolbar-group">
+        <button
+          class="toolbar-btn"
+          :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
+          type="button"
+          title="Überschrift"
+          @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
+        >
+          H2
+        </button>
+        <button
+          class="toolbar-btn"
+          :class="{ 'is-active': editor.isActive('bulletList') }"
+          type="button"
+          title="Liste"
+          @click="editor.chain().focus().toggleBulletList().run()"
+        >
+          •
+        </button>
+        <button
+          class="toolbar-btn"
+          :class="{ 'is-active': editor.isActive('orderedList') }"
+          type="button"
+          title="Nummerierte Liste"
+          @click="editor.chain().focus().toggleOrderedList().run()"
+        >
+          1.
+        </button>
+      </div>
+
+      <div class="toolbar-group">
+        <button
+          class="toolbar-btn"
+          :class="{ 'is-active': editor.isActive('link') }"
+          type="button"
+          title="Link"
+          @click="setLink"
+        >
+          Link
+        </button>
+        <button
+          class="toolbar-btn"
+          type="button"
+          title="Link entfernen"
+          @click="unsetLink"
+        >
+          Unlink
+        </button>
+      </div>
+    </div>
+
+    <EditorContent :editor="editor" class="editor-content" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, watch } from 'vue'
+import { EditorContent, useEditor } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import Placeholder from '@tiptap/extension-placeholder'
+import Link from '@tiptap/extension-link'
+
+const props = withDefaults(defineProps<{
+  preloadedContent?: string
+}>(), {
+  preloadedContent: '',
+})
+
+const emit = defineEmits<{
+  updateContent: [payload: { json: Record<string, any>; html: string; text: string }]
+}>()
+
+const emitContent = () => {
+  if (!editor.value) return
+  emit('updateContent', {
+    json: editor.value.getJSON(),
+    html: editor.value.getHTML(),
+    text: editor.value.getText(),
+  })
+}
+
+const editor = useEditor({
+  content: props.preloadedContent,
+  extensions: [
+    StarterKit,
+    Placeholder.configure({ placeholder: 'E-Mail Inhalt eingeben...' }),
+    Link.configure({ openOnClick: false, autolink: true }),
+  ],
+  editorProps: {
+    attributes: {
+      class: 'prosemirror-email',
+    },
+  },
+  onCreate: emitContent,
+  onUpdate: emitContent,
+})
+
+watch(
+  () => props.preloadedContent,
+  (value) => {
+    if (!editor.value) return
+    if (value === editor.value.getHTML()) return
+    editor.value.commands.setContent(value || '', false)
+  }
+)
+
+const setLink = () => {
+  if (!editor.value) return
+  const previousUrl = editor.value.getAttributes('link').href
+  const url = window.prompt('URL eingeben:', previousUrl)
+  if (url === null) return
+  if (!url.trim()) {
+    editor.value.chain().focus().extendMarkRange('link').unsetLink().run()
+    return
+  }
+  editor.value.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
+}
+
+const unsetLink = () => {
+  if (!editor.value) return
+  editor.value.chain().focus().extendMarkRange('link').unsetLink().run()
+}
+
+onBeforeUnmount(() => {
+  editor.value?.destroy()
+})
+</script>
+
+<style scoped>
+.email-editor {
+  border: 1px solid #69c350;
+  border-radius: 10px;
+  background: #fff;
+}
+
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.toolbar-group {
+  display: flex;
+  gap: 0.25rem;
+  padding-right: 0.5rem;
+  margin-right: 0.25rem;
+  border-right: 1px solid #e5e7eb;
+}
+
+.toolbar-group:last-child {
+  border-right: 0;
+  margin-right: 0;
+  padding-right: 0;
+}
+
+.toolbar-btn {
+  min-width: 2rem;
+  height: 2rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  background: #fff;
+  color: #374151;
+  padding: 0 0.5rem;
+  font-size: 0.875rem;
+}
+
+.toolbar-btn:hover {
+  background: #f3f4f6;
+}
+
+.toolbar-btn.is-active {
+  background: #dcfce7;
+  border-color: #69c350;
+  color: #14532d;
+}
+
+.editor-content {
+  min-height: 320px;
+  padding: 1rem;
+}
+
+:deep(.prosemirror-email) {
+  outline: none;
+  min-height: 280px;
+}
+
+:deep(.prosemirror-email p) {
+  margin: 0.3rem 0;
+}
+
+:deep(.prosemirror-email ul) {
+  list-style-type: disc;
+  padding-left: 1.5rem;
+  margin: 0.4rem 0;
+}
+
+:deep(.prosemirror-email ol) {
+  list-style-type: decimal;
+  padding-left: 1.5rem;
+  margin: 0.4rem 0;
+}
+
+:deep(.prosemirror-email li) {
+  display: list-item;
+  margin: 0.2rem 0;
+}
+
+:deep(.prosemirror-email a) {
+  color: #2563eb;
+  text-decoration: underline;
+}
+</style>

frontend/pages/email/new.vue

@@ -1,5 +1,4 @@
 <script setup>
-//TODO: BACKENDCHANGE EMAIL SENDING
 const dataStore = useDataStore()
 const profileStore = useProfileStore()
 const route = useRoute()
@@ -38,7 +37,7 @@ const setupPage = async () => {
     if(route.query.to) emailData.value.to = route.query.to
     if(route.query.cc) emailData.value.cc = route.query.cc
     if(route.query.bcc) emailData.value.bcc = route.query.bcc
-    if(route.query.subject) emailData.value.to = route.query.subject
+    if(route.query.subject) emailData.value.subject = route.query.subject
 
 
     if(route.query.loadDocuments) {
@@ -285,7 +284,7 @@ const sendEmail = async () => {
 
         </div>
 
-        <Tiptap
+        <EmailTiptapEditor
             class="mt-3"
             @updateContent="contentChanged"
             :preloadedContent="preloadedContent"