feat(react-tinacms-inline): previewUrl is now optionally async

tinacms · Aug 5, 2020 · 3aaead3 · 3aaead3
1 parent 8e57a0e
commit 3aaead3
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 3 deletions.
diff --git a/packages/demo-gatsby/gatsby-config.js b/packages/demo-gatsby/gatsby-config.js
@@ -36,6 +36,7 @@ module.exports = {
       resolve: "gatsby-plugin-tinacms",
       options: {
         manualInit: true,
+        enabled: true,
         sidebar: {
           hidden: process.env.NODE_ENV === "production",
           position: "displace",

diff --git a/packages/demo-gatsby/src/templates/blog-post.js b/packages/demo-gatsby/src/templates/blog-post.js
@@ -201,6 +201,13 @@ function BlogPostTemplate(props) {
 
                   return media.map(m => `/images/${m.filename}`)
                 },
+                previewUrl(src) {
+                  return new Promise(resolve => {
+                    setTimeout(() => {
+                      resolve(src)
+                    }, 3000)
+                  })
+                },
               }}
             >
               <div

diff --git a/packages/react-tinacms-editor/src/plugins/Image/nodeView.ts b/packages/react-tinacms-editor/src/plugins/Image/nodeView.ts
@@ -30,7 +30,7 @@ export class ImageView implements NodeView {
   constructor(
     node: Node,
     view: EditorView,
-    previewSrc: (url: string) => string = Identity
+    private previewSrc: (src: string) => string = Identity
   ) {
     this.node = node
     this.view = view
@@ -39,14 +39,19 @@ export class ImageView implements NodeView {
     this.dom.classList.add('tinacms-image-wrapper')
     this.img = document.createElement('img')
     const { src, align, alt, title, width, height } = node.attrs
-    this.img.src = previewSrc(src)
+    this.updateImgSrc(src)
     if (height) this.img.style.height = height
     if (width) this.img.style.width = width
     if (align) this.img.classList.add(`align-${align}`)
     if (alt) this.img.alt = alt
     if (title) this.img.title = title
     this.dom.appendChild(this.img)
   }
+  async updateImgSrc(src: string) {
+    if (this.img) {
+      this.img.src = await this.previewSrc(src)
+    }
+  }
 
   update(node: Node) {
     if (this.img) {

diff --git a/packages/react-tinacms-editor/src/types.ts b/packages/react-tinacms-editor/src/types.ts
@@ -26,7 +26,7 @@ import { Format } from './translator'
 
 export interface ImageProps {
   upload?: (files: File[]) => Promise<string[]>
-  previewUrl?: (url: string) => string
+  previewUrl?: (url: string) => string | Promise<string>
 }
 
 export interface KeymapPlugin {