From 3ef1950ce09b28bbeab6f0f3da8bc2b8b6db8592 Mon Sep 17 00:00:00 2001
From: Vishal <321vishalds@gmail.com>
Date: Thu, 1 Aug 2024 20:26:18 +0530
Subject: [PATCH] encode dp to base64 in preview (#8)
As a follow up of #9, this PR introduces a temporary fix for the DP not being rendered in previews issue. This is temporary and will be reverted later once the server is fixed.
---
src/pages/templates/Editor.tsx | 42 ++++++++++++++++++++++++++++++----
1 file changed, 37 insertions(+), 5 deletions(-)
diff --git a/src/pages/templates/Editor.tsx b/src/pages/templates/Editor.tsx
index ac159c5..afca56d 100644
--- a/src/pages/templates/Editor.tsx
+++ b/src/pages/templates/Editor.tsx
@@ -22,7 +22,7 @@ const Editor: Component = () => {
const [isLeftPane, showLeftPane] = createSignal(true)
const [status, setStatus] = createSignal('')
const [error, setError] = createSignal('')
- const [data, setData] = createSignal()
+ const [data, setData] = createSignal([])
const [htmlCode, setHtmlCode] = createSignal('')
const [cssCode, setCssCode] = createSignal('')
@@ -56,9 +56,41 @@ const Editor: Component = () => {
}
})
- const refreshPreview = () => {
+ const refreshPreview = async() => {
+ // temporary fix for showing dp in preview because of https://github.com/zitefy/server/pull/9
+ // this will be removed in the future.
+ setStatus('encoding data...')
+ const updatedData: Link[] = await Promise.all(data().map(async (item: Link) => {
+ if (item.selector === 'image' && item.value) {
+ // if it's the dp, then encode it to base64 for the preview
+ try {
+ const response = await fetch(item.value)
+ const blob = await response.blob()
+ return new Promise((resolve, reject) => {
+ const reader = new FileReader()
+ reader.onloadend = () => {
+ if (typeof reader.result === 'string') {
+ resolve({
+ ...item,
+ value: reader.result,
+ })
+ } else {
+ console.error(`Failed to encode image: ${item.value}`)
+ resolve(item)
+ }
+ }
+ reader.onerror = reject
+ reader.readAsDataURL(blob)
+ })
+ } catch (err) {
+ console.error(`Failed to encode image: ${item.value}`, err)
+ return item
+ }
+ }
+ return item
+ }))
setStatus('refreshing preview...')
- getCodePreview(htmlCode(), cssCode(), jsCode(), data() || [])
+ getCodePreview(htmlCode(), cssCode(), jsCode(), updatedData)
.then(previews => {
setMobilePreview(previews.mobile)
setDesktopPreview(previews.desktop)
@@ -167,7 +199,7 @@ const Editor: Component = () => {
html={htmlCode()} setHtml={setHtmlCode}
css={cssCode()} setCSS={setCssCode}
js={jsCode()} setJS={setJsCode}
- onRefresh={refreshPreview}
+ onRefresh={() => void refreshPreview()}
/>
@@ -191,7 +223,7 @@ const Editor: Component = () => {
-
+ void refreshPreview()} mobile={mobilePreview()} desktop={desktopPreview()} />