fix: メッセージスクロール周りの改修

src/components/Main/MainView/ChannelView/ChannelViewContent/ChannelViewContentMain.vue

@@ -137,7 +137,7 @@ const toNewMessage = () => {
     }
   }
 
-  const element = unrefElement(scrollerRef)
+  const element = unrefElement(scrollerRef.value?.rootRef)
   if (!element) return
 
   element.scrollTo({
@@ -146,7 +146,7 @@ const toNewMessage = () => {
 }
 
 const handleScroll = () => {
-  const element = unrefElement(scrollerRef)
+  const element = unrefElement(scrollerRef.value?.rootRef)
   if (!element || isLoading.value) return
   const { scrollTop, scrollHeight, clientHeight } = element
   showToNewMessageButton.value = scrollHeight - 2 * clientHeight > scrollTop

src/components/Main/MainView/MessageElement/ClipElement.vue

@@ -40,8 +40,9 @@ import type { MessageId } from '/@/types/entity-ids'
 import MessageQuoteListItemFooter from './Embeddings/MessageQuoteListItemFooter.vue'
 import MessageContents from './MessageContents.vue'
 import MessageTools, { useMessageToolsHover } from './MessageTools.vue'
-import type { ChangeHeightData } from './composables/useElementRenderObserver'
-import useElementRenderObserver from './composables/useElementRenderObserver'
+import useElementRenderObserver, {
+  type ChangeHeightData
+} from './composables/useElementRenderObserver'
 
 const props = defineProps<{
   messageId: MessageId

src/components/Main/MainView/MessageElement/MessageContents.vue

@@ -16,29 +16,32 @@
         :channel-id="message.channelId"
         @finish-editing="finishEditing"
       />
-      <MessageQuoteList
-        v-if="embeddingsState.quoteMessageIds.length > 0"
-        :class="$style.messageEmbeddingsList"
-        :parent-message-channel-id="message.channelId"
-        :message-ids="embeddingsState.quoteMessageIds"
-      />
-      <MessageFileList
-        v-if="embeddingsState.fileIds.length > 0"
-        :class="$style.messageEmbeddingsList"
-        :channel-id="message.channelId"
-        :file-ids="embeddingsState.fileIds"
-      />
-      <MessageOgpList
-        v-if="embeddingsState.externalUrls.length > 0"
-        :external-urls="embeddingsState.externalUrls"
-      />
+      <DeferredRender>
+        <MessageQuoteList
+          v-if="embeddingsState.quoteMessageIds.length > 0"
+          :class="$style.messageEmbeddingsList"
+          :parent-message-channel-id="message.channelId"
+          :message-ids="embeddingsState.quoteMessageIds"
+        />
+        <MessageFileList
+          v-if="embeddingsState.fileIds.length > 0"
+          :class="$style.messageEmbeddingsList"
+          :channel-id="message.channelId"
+          :file-ids="embeddingsState.fileIds"
+        />
+        <MessageOgpList
+          v-if="embeddingsState.externalUrls.length > 0"
+          :external-urls="embeddingsState.externalUrls"
+        />
+      </DeferredRender>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue'
 
+import DeferredRender from '/@/components/UI/DeferredRender.vue'
 import MarkdownContent from '/@/components/UI/MarkdownContent.vue'
 import UserIcon from '/@/components/UI/UserIcon.vue'
 import useEmbeddings from '/@/composables/message/useEmbeddings'

src/components/Main/MainView/MessageElement/MessageElement.vue

@@ -55,8 +55,9 @@ import type { MessageId, UserId } from '/@/types/entity-ids'
 import MessageContents from './MessageContents.vue'
 import MessagePinned from './MessagePinned.vue'
 import MessageStampList from './MessageStampList.vue'
-import type { ChangeHeightData } from './composables/useElementRenderObserver'
-import useElementRenderObserver from './composables/useElementRenderObserver'
+import useElementRenderObserver, {
+  type ChangeHeightData
+} from './composables/useElementRenderObserver'
 
 const props = withDefaults(
   defineProps<{

src/components/Main/MainView/MessageElement/composables/useElementRenderObserver.ts

@@ -21,30 +21,27 @@ const useElementRenderObserver = (
     quoteMessageIds: readonly MessageId[]
     fileIds: readonly FileId[]
     externalUrls: readonly ExternalUrl[]
+    hasCodeBlock: boolean
   }>,
   emit: ((name: 'entryMessageLoaded', relativePos: number) => void) &
     ((name: 'changeHeight', data: ChangeHeightData) => void)
 ) => {
   const route = useRoute()
 
-  let lastHeight = 0
-  let lastBottom = 0
-  let lastTop = 0
+  type State = {
+    height: number
+    bottom: number
+    top: number
+  }
+
+  let prevState: State | null = null
+
   const resizeObserver = new ResizeObserver(entries => {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const entry = entries[0]!
     const { height, bottom, top } = entry.target.getBoundingClientRect()
 
-    emit('changeHeight', {
-      id: messageId.value,
-      heightDiff: height - lastHeight,
-      top,
-      bottom,
-      lastTop,
-      lastBottom
-    })
-
-    if (lastHeight === 0) {
+    if (prevState === null) {
       // 初回に高さが変化した場合、初期レンダリング完了とみなす
       // これ以降新規にobserveしないためにwatcherを止める
       stop()
@@ -56,23 +53,32 @@ const useElementRenderObserver = (
         const { top } = bodyRef.value.getBoundingClientRect()
         emit('entryMessageLoaded', top - parentTop)
       }
+    } else {
+      emit('changeHeight', {
+        id: messageId.value,
+        heightDiff: height - prevState.height,
+        top,
+        bottom,
+        lastTop: prevState.top,
+        lastBottom: prevState.bottom
+      })
     }
 
-    lastHeight = height
-    lastBottom = bottom
-    lastTop = top
+    prevState = { height, bottom, top }
   })
+
   const stop = watchEffect(
     () => {
       if (
         (unref(isEntryMessage) ||
           embeddingsState.quoteMessageIds.length > 0 ||
           embeddingsState.fileIds.length > 0 ||
-          embeddingsState.externalUrls.length > 0) &&
+          embeddingsState.externalUrls.length > 0 ||
+          embeddingsState.hasCodeBlock) &&
         bodyRef.value
       ) {
         /*
-          引用 / 添付ファイル / 外部URL がある場合か
+          引用 / 添付ファイル / 外部URL / コードブロック がある場合か
           エントリーメッセージは
           高さ監視をする
         */
@@ -82,6 +88,7 @@ const useElementRenderObserver = (
     // 監視前に高さが変わってしまうのを防止するためにsyncを指定する
     { flush: 'sync' }
   )
+
   watch(
     () => route.path,
     () =>