Resolve "Forum: Falsche HTML-Semantik — WYSIWYG-Text (Zitat-Inhalt) darf nicht mit <a>-Tags umschlossen werden"

Closes #5894

Merge request studip/studip!4494

4 files changed, 17 insertions, 18 deletions

diff --git a/resources/vue/apps/forum/discussions/Show.vue b/resources/vue/apps/forum/discussions/Show.vue
index 7e52669..08edb6b 100644
--- a/resources/vue/apps/forum/discussions/Show.vue
+++ b/resources/vue/apps/forum/discussions/Show.vue
@@ -97,7 +97,6 @@ const fetchPostings = async () => {
             );
 
             const deserializedPosts = await deserializeJSONAPIResponse(response);
-
             forumPostStore.addPost(deserializedPosts);
 
             if (total === null) {
diff --git a/resources/vue/components/forum/posts/Post.vue b/resources/vue/components/forum/posts/Post.vue
index 16332fb..ff935e7 100644
--- a/resources/vue/components/forum/posts/Post.vue
+++ b/resources/vue/components/forum/posts/Post.vue
@@ -35,8 +35,8 @@ const props = defineProps({
     }
 });
 
-const postContent = useTemplateRef('postContent');
-const userAvatarContainer = useTemplateRef('userAvatarContainer');
+const postContentRef = useTemplateRef('postContent');
+const userAvatarContainerRef = useTemplateRef('userAvatarContainer');
 
 const selectedText = ref('');
 const showPostEditForm = ref(false);
@@ -48,7 +48,7 @@ const canDeletePost = computed(() => canEditPost.value);
 const copyToClipboard = () => {
     if (selectedText.value) {
         navigator.clipboard.writeText(selectedText.value);
-        postContent.value.removeSelection();
+        postContentRef.value.removeSelection();
         STUDIP.Report.info($gettext('Der markierte Text wurde in die Zwischenablage kopiert.'));
     }
 }
@@ -121,7 +121,7 @@ const removePostHighlight = id => {
 </script>
 
 <template>
-    <div :id="'post_'+post.id" class="post" @click="removePostHighlight('post_'+post.id)">
+    <div :id="`post_${post.id}`" class="post" @click="removePostHighlight(`post_${post.id}`)">
         <div v-if="!forumConfig.allowGuestAccess && isUnread" class="post__unread">
         </div>
         <div class="post__body">
@@ -132,8 +132,8 @@ const removePostHighlight = id => {
                         :user="post.author"
                         size="50px"
                         @update:modelValue="state => {
-                            if (state) userAvatarContainer.style.setProperty('z-index', 100);
-                            else userAvatarContainer.style.setProperty('z-index', 1);
+                            if (state) userAvatarContainerRef.style.setProperty('z-index', 100);
+                            else userAvatarContainerRef.style.setProperty('z-index', 1);
                         }"
                     />
                 </div>
@@ -188,13 +188,18 @@ const removePostHighlight = id => {
                 </template>
                 <template v-else>
                     <div class="post__text">
-                        <PostContent ref="postContent" v-model="selectedText" :content="post.content_html" class="forum-quote">
+                        <PostContent
+                            ref="postContent"
+                            v-model="selectedText"
+                            :content="post.content_html"
+                            class="forum-quote"
+                        >
                             <template #actions>
                                 <a
                                     :href="`#create_form_${post.id}`"
                                     class="ballon-action__button"
                                     v-if="!forumConfig.allowGuestAccess && !showPostCreateForm && !discussion.closed_at"
-                                    @click="showPostCreateForm = true; postContent.removeSelection()"
+                                    @click="showPostCreateForm = true; postContentRef.removeSelection()"
                                     :title="$gettext('Auswahl zitieren und antworten')"
                                     :aria-label="$gettext('Auswahl zitieren und antworten')"
                                 >
diff --git a/resources/vue/components/forum/posts/PostContent.vue b/resources/vue/components/forum/posts/PostContent.vue
index 50af192..1c29812 100644
--- a/resources/vue/components/forum/posts/PostContent.vue
+++ b/resources/vue/components/forum/posts/PostContent.vue
@@ -13,7 +13,6 @@ const props = defineProps({
     }
 });
 
-
 const actionsRef = useTemplateRef('actions');
 
 const onTextSelected = event => {
@@ -40,9 +39,8 @@ defineExpose({
     removeSelection
 });
 
-onMounted(() => {
-    document.addEventListener("selectionchange", newSelectionHandler);
-})
+onMounted(() => document.addEventListener('selectionchange', newSelectionHandler));
+
 
 onDeactivated(() => {
     document.removeEventListener('selectionchange', newSelectionHandler);
@@ -55,7 +53,6 @@ watch(() => props.modelValue, newValue => {
 });
 </script>
 
-
 <template>
     <div @mouseup="onTextSelected" class="with-ballon-action" v-bind="$attrs">
         <div class="text-highlight m-0 post-content" v-html="content"></div>
diff --git a/resources/vue/components/forum/posts/PostCreateForm.vue b/resources/vue/components/forum/posts/PostCreateForm.vue
index e6460d3..458e580 100644
--- a/resources/vue/components/forum/posts/PostCreateForm.vue
+++ b/resources/vue/components/forum/posts/PostCreateForm.vue
@@ -50,9 +50,7 @@ onMounted(() => {
 
     if (props.quote) {
         content.value = `
-            <a href="#post_${props.parent_id}">
-                <blockquote>${normalizeQuote(props.quote)}</blockquote>
-            </a>
+            <blockquote>${normalizeQuote(props.quote)}</blockquote>
             <br />
         `;
     }
@@ -101,7 +99,7 @@ const storePost = async () => {
             { data: getPostJSONAPIObject }
         );
 
-        const post = await deserializeJSONAPIResponse(response)
+        const post = await deserializeJSONAPIResponse(response);
 
         forumDiscussionPost.addPost(post);
         content.value = "";