✨ enhance image handling in handleHTMLImgs to adjust float style (#135)

* ✨ enhance image handling in handleHTMLImgs to adjust float style for parent elements containing only images

* ✨ reorder imports in AIOverview.vue for better organization and readability

Author: Whyjsee

apps/slax-reader-dweb/layers/core/components/Article/BookmarkArticle.vue

@@ -279,6 +279,21 @@ const handleHTMLImgs = (imgs: HTMLImageElement[]) => {
     }
 
     img.classList.add(loadingKey)
+
+    const parentElement = img.parentElement
+    const parentChilds = parentElement ? Array.from(parentElement.childNodes) : []
+
+    const isOnlyImages = parentChilds.every(child => {
+      if (child.nodeType === Node.ELEMENT_NODE) {
+        const element = child as HTMLElement
+        return element.tagName.toLowerCase() === 'img'
+      }
+      return true
+    })
+
+    if (isOnlyImages) {
+      img.style.cssFloat = 'none'
+    }
   })
 }
 

apps/slax-reader-extensions/src/components/AIOverview.vue

@@ -34,14 +34,16 @@
 </template>
 
 <script lang="ts" setup>
-import type { BookmarkBriefDetail, BookmarkTag } from '@commons/types/interface'
 import BookmarkTags from './BookmarkTags.vue'
-import { RESTMethodPath } from '@commons/types/const'
-import { RequestMethodType } from '@commons/utils/request'
-import Toast, { ToastType } from './Toast'
-import MarkdownText from './Markdown/MarkdownText.vue'
 import DotLoading from './DotLoading.vue'
+import MarkdownText from './Markdown/MarkdownText.vue'
+
 import { Resize } from '@commons/utils/directive'
+import { RequestMethodType } from '@commons/utils/request'
+
+import Toast, { ToastType } from './Toast'
+import { RESTMethodPath } from '@commons/types/const'
+import type { BookmarkBriefDetail, BookmarkTag } from '@commons/types/interface'
 
 type OverviewSocketData =
   | {