Initial commit

src/components/reader/ReaderBody.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { EmailSanitizer, SecurityLevel } from '@/utile/emailSanitizer'
+
+interface Props {
+  messageBody: string
+  isHtml: boolean
+  securityLevel: SecurityLevel
+  allowImages: boolean
+}
+
+const props = defineProps<Props>()
+
+// Sanitize HTML content for security
+const sanitizedMessageBody = computed(() => {
+  if (!props.messageBody || !props.isHtml) return props.messageBody
+  
+  return EmailSanitizer.sanitize(props.messageBody, {
+    securityLevel: props.securityLevel,
+    allowImages: props.allowImages,
+    allowExternalLinks: true,
+    allowStyles: true
+  })
+})
+
+// Iframe reference for sandboxed HTML rendering
+const emailFrame = ref<HTMLIFrameElement | null>(null)
+
+// Resize iframe to fit content
+const resizeIframe = () => {
+  if (emailFrame.value?.contentWindow?.document?.body) {
+    const height = emailFrame.value.contentWindow.document.body.scrollHeight
+    emailFrame.value.style.height = `${height + 20}px`
+  }
+}
+
+// Watch for changes to trigger resize
+watch(() => props.messageBody, () => {
+  setTimeout(resizeIframe, 100)
+})
+
+watch(() => props.allowImages, () => {
+  setTimeout(resizeIframe, 100)
+})
+</script>
+
+<template>
+  <div class="message-body pa-6">
+    <!-- HTML body (sandboxed iframe) -->
+    <iframe
+      v-if="isHtml"
+      ref="emailFrame"
+      sandbox="allow-same-origin"
+      class="html-content-frame"
+      :srcdoc="sanitizedMessageBody"
+      @load="resizeIframe"
+    />
+    
+    <!-- Plain text body -->
+    <pre v-else class="text-body-1 text-pre-wrap">{{ messageBody }}</pre>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.message-body {
+  background-color: rgb(var(--v-theme-background));
+  min-height: 100%;
+}
+
+.html-content-frame {
+  width: 100%;
+  border: none;
+  min-height: 400px;
+  display: block;
+  background: white;
+}
+
+.text-pre-wrap {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  font-family: inherit;
+}
+</style>