yourpart3/frontend/src/views/social/ForumTopicView.vue

<template>
    <div class="forum-topic-view">
        <section class="forum-topic-hero surface-card">
            <div>
                <div class="forum-topic-back link" @click="openForum()">{{ $t('socialnetwork.forum.title') }} {{ forumName }}</div>
                <h2 v-if="forumTopic">{{ forumTopic }}</h2>
                <p>Diskussionen, Antworten und neue Beiträge in einer fokussierten Lesefläche.</p>
            </div>
        </section>

        <section class="forum-topic-messages">
            <ul class="messages">
                <li v-for="message in messages" :key="message.id" class="surface-card">
                    <div v-html="sanitizedMessage(message)"></div>
                    <div class="footer">
                        <span class="link" @click="openProfile(message.lastMessageUser.hashedId)">
                            {{ message.lastMessageUser.username }}
                        </span>
                        <span>{{ new Date(message.createdAt).toLocaleString() }}</span>
                    </div>
                </li>
            </ul>
        </section>

        <div class="editor-container surface-card">
            <EditorContent v-if="editor" :editor="editor" class="editor" />
        </div>
        <button @click="saveNewMessage">{{ $t('socialnetwork.forum.createNewMesssage') }}</button>
    </div>
</template>

<script>
import { Editor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import apiClient from '../../utils/axios'
import DOMPurify from 'dompurify'

export default {
    name: 'ForumTopicView',
    components: {
        EditorContent,
    },
    data() {
        return {
            forumTopicId: '',
            forumTopic: null,
            forumName: null,
            forumId: 0,
            messages: [],
            editor: null,
        }
    },
    mounted() {
        this.forumTopicId = this.$route.params.id;
        this.loadForumTopic();

        this.editor = new Editor({
            extensions: [StarterKit],
            content: '',
            editable: true,
            editorProps: { attributes: { class: 'pm-root' } },
        });
    },
    beforeUnmount() {
        if (this.editor) {
            this.editor.destroy();
        }
    },
    methods: {
        async loadForumTopic() {
            try {
                const response = await apiClient.get(`/api/forum/topic/${this.forumTopicId}`);
                this.setContent(response.data);
            } catch (error) {
                console.error(error);
            }
        },
        setContent(data) {
            this.forumTopic = data.title;
            this.forumName = data.forum.name;
            this.forumId = data.forum.id;
            this.messages = data.messages;
        },
        async openProfile(id) {
            this.$root.$refs.userProfileDialog.userId = id;
            this.$root.$refs.userProfileDialog.open();
        },
        async saveNewMessage() {
            const content = this.editor ? this.editor.getHTML() : '';
            if (!content.trim()) return;

            try {
                const url = `/api/forum/topic/${this.forumTopicId}/message`;
                const response = await apiClient.post(url, { content });
                this.editor.commands.clearContent();
                this.setContent(response.data);
            } catch (error) {
                console.error(error);
            }
        },
        openForum() {
            this.$router.push(`/socialnetwork/forum/${this.forumId}`);
        },
        sanitizedMessage(message) {
            return DOMPurify.sanitize(message.text);
        }
    }
}
</script>
<style lang="scss" scoped>
.forum-topic-view {
    max-width: 860px;
    margin: 0 auto;
    padding-bottom: 24px;
}

.forum-topic-hero {
    padding: 24px 26px;
    margin-bottom: 16px;
}

.forum-topic-back {
    margin-bottom: 10px;
    font-weight: 700;
}

.forum-topic-hero p {
    margin: 0;
    color: var(--color-text-secondary);
}

.messages {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.messages > li {
    margin-bottom: 0.75em;
    padding: 1rem 1.1rem;
}

.messages > li > .footer {
    color: var(--color-text-muted);
    font-size: 0.8em;
    margin-top: 0.5em;
    display: flex;
}

.messages > li > .footer > span:first-child {
    flex: 1;
}

.messages > li > .footer > span:last-child {
    text-align: right;
}

.editor-container {
    margin-top: 1rem;
    padding: 0;
    min-height: 260px;
    background-color: white;
    overflow: hidden;
}

.editor {
    min-height: 260px;
    outline: none;
    cursor: text;
}
.editor :deep(.ProseMirror) {
    min-height: 260px;
    outline: none;
    padding: 14px;
    box-sizing: border-box;
    width: 100%;
}
.editor :deep(.ProseMirror p) { margin: 0 0 .6rem; }
.editor :deep(.ProseMirror p:first-child) { margin-top: 0; }
.editor :deep(.ProseMirror-focused) { outline: 2px solid rgba(100,150,255,.35); }
</style>