Images in the markdown widget do not preview in editorial workflow

[fool]

- Do you want to request a feature or report a bug?

bug

- What is the current behavior?

Images inserted in the raw editor seem like broken links in the preview after saving and reloading

- If the current behavior is a bug, please provide the steps to reproduce.

When adding an image to a post in the raw editor with the (+) sign, the image shows up in the preview. After saving and reopening the post, the image is a "broken link" and there is a 404 on the image path in the developer console.

Nonetheless, the image is saved and present in the deploy preview.

- What is the expected behavior?

Images appear to be functional in each of: editor, preview, saved copy and the deploy preview

- Please mention your node.js, and operating system version.

netlify install of the CMS v .3.8

@cassiozen watched this happen :)

[americool]

I've been looking into this -- I think the issue is that the image preview is stored on the new branch created when a new post is saved and isn't accessible when reviewed. However I can't confirm this yet, because I'm having trouble identifying the component(s) in question. I've attached two images here:
(Looking for what component is rendering broken image graphic)

placeholder (what is this component?):

My hope is to replace the broken image with a placeholder (like the second image, but with a little more detail), however I'm not sure where to look for what is generating the 404 image. The CSS Modules and the naming structure of the components make it very hard to identify what I am looking at.

[bdougie]

thoughts @biilmann?

[bdougie]

@americool I talked to biilmann IRL and this is a Prosemirror thing and need to be fixed on that end. Not something approachable within the CMS repo

[erquhart]

Re-opening this, merits further exploration.

[anthonysapp]

This is definitely related to @americool's post above. When the draft is saved, it creates a new branch etc, and puts the file there. Then when it's reloaded, the default AssetProxy class returns the image at it's saved path (something like "/img/{filename}.jpg"). If the site isn't deployed yet (which is the case within the editorial workflow), when you return to edit the entry, the image doesn't preview properly.

As a test, I did something like this:

render(){ 
    const rawPath = "https://raw.githubusercontent.com/{username}/{reponame}/";
    const previewImagesPath = "/site/static";
    const branch = entry.getIn(["metaData", "branch"]);
    let image = getAsset(entry.getIn(["data", "image"]));

    if (image.uploaded) {
        image = rawPath + branch + previewImagesPath + image;
    }

    return (<div>
        <img src={image} />
    </div>);
}

This works if the repo is public, but I haven't been able to get it working for a private repo yet.

[anthonysapp]

I'd suggest something like the above could probably be baked into the AssetProxy class if it was deemed a good direction for this, but I'm not sure if it is indeed a good direction or not :)

Edit: I also realized it's my solution above isn't an ideal solution as this issue would be the same for inline images (as in the OP). I assume the AssetProxy is used for inline images as well, so it might still have some relevance.

[anthonysapp]

@erquhart Just a thought - it might be best to rename this issue as it has more to do with the editorial workflow than the actual insertion of images. Something like "image uploading / editing in editorial workflow", maybe?

[erquhart]

@anthonysapp just saw your comment - renamed. I agree that the asset proxy is the most likely point of failure, any fix will probably center on changes there.

[dopry]

I've ran into this too. I think an important question is what is the best/easiest/most consistent way to identify the proper url based on the context of the post.. maybe there should be a backend.url(branch/tag/commit, path) that will return a URL to the raw image for previews and use in the admin ui or something similar...

thoughts?

[erquhart]

Update: introduction of the media library will cause asset management to be workflow agnostic, since uploading an asset will always result in a commit to the primary branch. Should be resolved when #350 is closed.

[dopry]

That makes sense for re-used content. Does it make sense for one time use content?

Consider the following use case, I'm prepping content for a marketing campaign the doesn't got live till a future date. My clients want to keep it quiet until the big campaign launch. I don't want the risk of content going public prematurely, and stressing my relationship with my client.

[erquhart]

@dopry I'd expect that use case to occur in a private repo. As long as the related assets aren't included in a published entry, you should be fine.

[dopry]

You're absolutely certain that there is no way google will index that? If someone emailed a link to a client with a google apps account, would it get indexed and potentially become available through search? I'd be much more comfortable if the content wasn't publicly available at all.

[erquhart]

Google can't/won't index private info from your email. If your GitHub repo is private and you don't publish the asset, it won't be exposed. If you're thinking of deploy previews, that's a hosting platform issue. If you're on Netlify, there's password protection available. I imagine other hosts offer similar protection - but again, even if not, that's a hosting thang.