Fix scroll to post form

6 files changed, 19 insertions, 24 deletions

diff --git a/resources/vue/apps/forum/discussions/Show.vue b/resources/vue/apps/forum/discussions/Show.vue
index 9b97197..8ab23c7 100644
--- a/resources/vue/apps/forum/discussions/Show.vue
+++ b/resources/vue/apps/forum/discussions/Show.vue
@@ -129,9 +129,6 @@ onMounted(async () => {
 
     const urlHash = window.location.hash.split("#")[1];
     if (urlHash) {
-        if (urlHash === 'new-post') {
-            postCreateForm.value = true;
-        }
         jumpTo(document.getElementById(urlHash))
     } else if (props.readIndex < posts.value.length) {
         if (props.readIndex === 0) {
diff --git a/resources/vue/components/StudipWysiwyg.vue b/resources/vue/components/StudipWysiwyg.vue
index 13e567a..7e47943 100644
--- a/resources/vue/components/StudipWysiwyg.vue
+++ b/resources/vue/components/StudipWysiwyg.vue
@@ -18,7 +18,6 @@ const props = defineProps({
 const content = defineModel({ type: String, default: '' });
 
 const createdEditor = ref(null);
-const shouldFocus = ref(props.autofocus);
 
 const editor = computed(() => {
     switch (props.editorType) {
@@ -34,14 +33,12 @@ const editor = computed(() => {
 const focus = () => {
     if (createdEditor.value && typeof createdEditor.value.focus === 'function') {
         createdEditor.value.focus();
-    } else {
-        shouldFocus.value = true;
     }
 }
 
 const onReady = editorInstance => {
     createdEditor.value = editorInstance;
-    if (shouldFocus.value) {
+    if (props.autofocus) {
         focus();
     }
     STUDIP.eventBus.emit('editor-loaded', createdEditor.value);
diff --git a/resources/vue/components/forum/discussions/DiscussionFooter.vue b/resources/vue/components/forum/discussions/DiscussionFooter.vue
index b640d41..6912661 100644
--- a/resources/vue/components/forum/discussions/DiscussionFooter.vue
+++ b/resources/vue/components/forum/discussions/DiscussionFooter.vue
@@ -31,7 +31,6 @@ const hasUnreadPost = computed(() => {
 });
 
 const addPost = () => {
-    document.getElementById(`new-post`)?.scrollIntoView({ behavior: 'smooth' });
     postCreateForm.value = true;
 }
 </script>
diff --git a/resources/vue/components/forum/posts/Post.vue b/resources/vue/components/forum/posts/Post.vue
index 8f0baf2..c28e287 100644
--- a/resources/vue/components/forum/posts/Post.vue
+++ b/resources/vue/components/forum/posts/Post.vue
@@ -61,8 +61,7 @@ const editPost = () => {
     if (!canEditPost.value) {
         return;
     }
-
-    document.getElementById(`post_${props.post.id}`)?.scrollIntoView({ behavior: 'smooth' });
+    document.getElementById(`post_${props.post.id}`)?.scrollIntoView();
     showPostEditForm.value = true;
 }
 
@@ -92,7 +91,6 @@ const addPost = () => {
 }
 
 const addReply = () => {
-    document.getElementById(`create_form_${props.post.id}`)?.scrollIntoView({ behavior: 'smooth' });
     showPostCreateForm.value = true;
     selectedText.value = props.post.content;
 }
@@ -231,16 +229,15 @@ onBeforeUnmount(() => postObserver.disconnect());
                             class="forum-quote"
                         >
                             <template #actions>
-                                <a
-                                    :href="`#create_form_${post.id}`"
-                                    class="ballon-action__button"
+                                <button
+                                    class="ballon-action__button button-base"
                                     v-if="!forumConfig.allowGuestAccess && !showPostCreateForm && !discussion.closed_at"
                                     @click="showPostCreateForm = true; postContentRef.removeSelection()"
                                     :title="$gettext('Auswahl zitieren und antworten')"
                                     :aria-label="$gettext('Auswahl zitieren und antworten')"
                                 >
                                     <StudipIcon shape="quote" :size="20" />
-                                </a>
+                                </button>
                                 <button
                                     type="button"
                                     class="ballon-action__button button-base"
@@ -314,7 +311,7 @@ onBeforeUnmount(() => postObserver.disconnect());
             </div>
         </div>
     </div>
-    <div v-if="showPostCreateForm && !discussion.closed_at" :id="`create_form_${post.id}`" class="post-form-container" style="scroll-margin-top: 200px;">
+    <div v-if="showPostCreateForm && !discussion.closed_at" class="post-form-container">
         <PostCreateForm
             :parentId="post.id"
             :discussionId="props.discussion.discussion_id"
diff --git a/resources/vue/components/forum/posts/PostCreateForm.vue b/resources/vue/components/forum/posts/PostCreateForm.vue
index 910dd16..5f94d4e 100644
--- a/resources/vue/components/forum/posts/PostCreateForm.vue
+++ b/resources/vue/components/forum/posts/PostCreateForm.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {onMounted, onUnmounted, ref} from 'vue';
+import {onMounted, onUnmounted, onUpdated, ref, useTemplateRef} from 'vue';
 import {$gettext} from '@/assets/javascripts/lib/gettext';
 import {useForumConfig} from '@/vue/store/pinia/forum/ForumConfig';
 import {useForumPost} from '@/vue/store/pinia/forum/ForumPost';
@@ -29,6 +29,8 @@ const props = defineProps({
     }
 });
 
+const contentEditor = useTemplateRef('contentEditor');
+
 const normalizeQuote = quote => {
     const parser = new DOMParser();
     const document = parser.parseFromString(quote, 'text/html');
@@ -43,7 +45,7 @@ const normalizeQuote = quote => {
     return document.body.innerHTML;
 }
 
-onMounted(() => {
+onMounted(async () => {
     if (window.location.hash) {
         window.history.pushState('', document.title, window.location.href.split('#')[0]);
     }
@@ -54,6 +56,8 @@ onMounted(() => {
             <br />
         `;
     }
+
+    contentEditor.value.scrollIntoView();
 })
 
 onUnmounted(() => {
@@ -62,6 +66,8 @@ onUnmounted(() => {
     }
 })
 
+onUpdated (() => contentEditor.value.scrollIntoView());
+
 const content = ref('');
 const anonymous = ref(false);
 const isLoading = ref(false);
@@ -127,10 +133,9 @@ const storePost = async () => {
             </a>
             <p class="post-form__author-name">{{ authUser.name }}</p>
         </div>
-        <label for="post-content">
-            <span class="sr-only">{{ $gettext('Inhalt') }}</span>
-        </label>
-        <StudipWysiwyg id="post-content" :required="true" v-model="content" :autofocus="true" />
+       <div ref="contentEditor" style="scroll-margin-top: 200px;">
+           <StudipWysiwyg :required="true" v-model="content" :autofocus="true" />
+       </div>
         <div v-if="forumConfig.anonymousPost" class="mt-10">
             <StudipSwitch name="anonymous" v-model="anonymous" :label="$gettext('Anonym')" />
         </div>
diff --git a/resources/vue/components/forum/posts/PostEditForm.vue b/resources/vue/components/forum/posts/PostEditForm.vue
index 5508a18..9c24939 100644
--- a/resources/vue/components/forum/posts/PostEditForm.vue
+++ b/resources/vue/components/forum/posts/PostEditForm.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {onMounted, onUnmounted, ref} from 'vue';
+import {onMounted, onUnmounted, ref, useTemplateRef} from 'vue';
 import {$gettext} from '@/assets/javascripts/lib/gettext';
 import {useForumConfig} from '@/vue/store/pinia/forum/ForumConfig';
 import {useForumPost} from '@/vue/store/pinia/forum/ForumPost';
@@ -66,7 +66,7 @@ const updatePost = async () => {
     }
 }
 
-onMounted(() => {
+onMounted( () => {
     if (window.location.hash) {
         window.history.pushState('', document.title, window.location.href.split('#')[0]);
     }