Unkown inline node type: Image | Upon saving image in Document Field

[NeeshSamsi]

I enabled images with images: true in a document field called article. The Keystatic page loaded normally, it allowed me to create an article and add an image. Upon saving, the page reloaded with this error.

[simonswiss]

What does the generated Markdoc look like for that article — the image tag specifically?

[NeeshSamsi]

Should have linked the repo: https://github.com/inquisitblog/inquisit

[JedWatson]

Hey @NeeshSamsi I've cloned your repo to take a look, I can't see a commit with your recent images change though (I found the add-keystatic branch)

Could you commit your WIP so we can reproduce the error, and share steps to reproduce?

e.g

• Clone {repo} (I've done this)
• Checkout {branch} (I've done this)
• Run {command}
• Visit {url}

If you don't want to commit the files in a broken state to that branch, maybe create another branch with the error in it? Just need to make sure we can see what steps you took (in git) and also the error you're getting

Thanks!

[NeeshSamsi]

That's odd, I have pushed my WiP to add-keystatic. This is what I just did in a fresh directory.

1. Clone the repo - gh repo clone inquisitblog/inquisit
2. Install packages - pnpm i
3. Run dev server - pnpm dev
4. Visit the site at http://127.0.0.1:3000/
5. I get the following error: Error: Invalid data for "understanding-algorithmic-bias" in collection "blogposts": Unexpected error: Error: Unknown inline node type: image

Alternatively, after 2. you can build the project with pnpm build and receive a similar error that spams the terminal

At this point, in the src\data\blogposts\understanding-algorithmic-bias.mdoc file, the last line (line 25) should be ![Something](image%20\(2).jpg)

[NeeshSamsi]

Oh maybe my folder structure is a little misleading and you checked the first data folder. That's the data folder that I kept as a source of truth from the main branch. The folder that Keystatic is working with is src/data.

[simonswiss]

I've cloned the repo and had a little play. I can reproduce the error.

To unblock you, what is causing the error is the \ backslash in the image path.

We'll work on fixing that, but for the time being you can manually rename the image in markdoc from image%20\(2).jpg to image%20(2).jpg — this will make the error go away.

Best option is to not upload images with parentheses, but we'll definitely have a look to prevent this from breaking.

Also, side note: you can use the directory and publicPath options in the document field's image to collocate the blog post images with the cover image, if you want:

article: fields.document({
  // ...
- images: true,
+ images: {
+   directory: "public/images/blogposts",
+   publicPath: "/images/blogposts/",
+ },
})

[NeeshSamsi]

Oh no wonder, it was working fine then I must have started using this test image, literally some random image in my downloads which is why it has the parenthesis. Thanks for looking into this

[NeeshSamsi]

About your side note. I tried that, however, I got the following error: Error: Invalid directory public/images/blogposts in content field serialization as soon as I choose the image. Unlike the unknown inline node type error, it doesn't even let me save the document. I pushed the erroring config incase you want to test it.

// keystatic.config.ts
        ...
        images: {
            directory: "public/images/blogposts/",
            publicPath: "/images/blogposts/",
        },
        ...

[NeeshSamsi]

Would it be better to open a new issue for this?

[simonswiss]

Hey!

Good news — this was due to a bug in Markdoc which Emma opened a PR on the Markdoc repo to fix, and... it's been merged ✨

https://github.com/markdoc/markdoc/pull/474