<script setup lang="ts">
import { onBeforeUnmount, onMounted } from 'vue'

let observer: MutationObserver | undefined

function enhanceImages(root: ParentNode = document) {
  root.querySelectorAll<HTMLImageElement>('.slidev-layout img').forEach((image) => {
    image.classList.add('easy-smart-image')
    const fit = image.getAttribute('fit')
    const position = image.getAttribute('position')
    const maxHeight = image.getAttribute('max-height')
    if (fit)
      image.style.objectFit = fit
    if (position)
      image.style.objectPosition = position
    if (maxHeight)
      image.style.maxHeight = maxHeight
  })
}

onMounted(() => {
  enhanceImages()
  observer = new MutationObserver(records => records.forEach(record => enhanceImages(record.target as ParentNode)))
  observer.observe(document.body, { childList: true, subtree: true })
})

onBeforeUnmount(() => observer?.disconnect())
</script>

<template>
  <span hidden aria-hidden="true" />
</template>
