test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: set iframe height based on content height

Browse Source
This commit is contained in:
Shariq Ansari 2024-05-30 19:45:35 +05:30
parent 2c7a4ccd2a
commit bf5f102330
1 changed files with 45 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/src/components/EmailContent.vue
View File

@ -1,7 +1,8 @@
<template> <template>
<iframe <iframe
ref="iframeRef"
:srcdoc="htmlContent" :srcdoc="htmlContent"
class="h-screen max-h-[500px] w-full" class="prose-f block h-screen max-h-[500px] w-full"
style=" style="
mask-image: linear-gradient( mask-image: linear-gradient(
to bottom, to bottom,
@ -13,6 +14,8 @@
</template> </template>
<script setup> <script setup>
import { ref, watch } from 'vue'
const props = defineProps({ const props = defineProps({
content: { content: {
type: String, type: String,
@ -20,12 +23,24 @@ const props = defineProps({
}, },
}) })
const iframeRef = ref(null)
const htmlContent = ` const htmlContent = `
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link href="/src/index.css" rel="stylesheet">
<style> <style>
.prose-f {
--tw-prose-body: #383838;
color: var(--tw-prose-body);
font-weight: 420;
letter-spacing: 0.02em;
max-width: none;
font-size: 14px;
line-height: 1.6;
}
.email-content { .email-content {
word-break: break-word; word-break: break-word;
} }
@ -101,8 +116,35 @@ const htmlContent = `
</style> </style>
</head> </head>
<body> <body>
<div class="email-content prose-f">${props.content}</div> <div ref="emailContentRef" class="email-content prose-f">${props.content}</div>
</body> </body>
</html> </html>
` `
watch(iframeRef, (iframe) => {
if (iframe) {
iframe.onload = () => {
const emailContent =
iframe.contentWindow.document.querySelector('.email-content')
iframe.style.height = emailContent.offsetHeight + 25 + 'px'
let fileName = ''
// read file name on path /src and get the file name of the css file to inject in the iframe
// /assets/crm/frontend/assets/*.css
const files = import.meta.globEager('/*/*')
for (const file in files) {
debugger
fileName = file
}
// inject link in head of iframe
const head = iframe.contentWindow.document.head
const link = document.createElement('link')
link.rel = 'stylesheet'
link.href = '/src/index.css'
head.appendChild(link)
}
}
})
</script> </script>