Field validation failed: content: Unexpected error: Error: Unknown inline node type: image

[CapitaineToinon]

Given a newly created keystatic astro project:

{
  "name": "@keystatic/templates-astro",
  "version": "0.0.13",
  "license": "MIT",
  "dependencies": {
    "@astrojs/markdoc": "^0.5.0",
    "@astrojs/react": "^3.0.0",
    "@keystatic/astro": "^2.0.0",
    "@keystatic/core": "^0.2.0",
    "@types/react": "^18.2.8",
    "@types/react-dom": "^18.0.11",
    "astro": "^3.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "scripts": {
    "dev": "astro dev --host 127.0.0.1",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  }
}

Add the tables to the post collection:

import { config, fields, collection } from '@keystatic/core';

export default config({
  storage: {
    kind: 'local',
  },
  collections: {
    posts: collection({
      label: 'Posts',
      slugField: 'title',
      path: 'src/content/posts/*',
      format: { contentField: 'content' },
      schema: {
        title: fields.slug({ name: { label: 'Title' } }),
        content: fields.document({
          label: 'Content',
          formatting: true,
          dividers: true,
          links: true,
          tables: true, // 👈 Add this
          images: {
            directory: 'src/assets/images/posts',
            publicPath: '../../assets/images/posts/',
          },
        }),
      },
    }),
  },
});

Then through the admin, create a page with a table and inside a cell, an image:

Hit create and now the admin will claim the content is invalid:

Even though if we visit the website, the page renders fine:

I don't think this is related to markdoc as the generated markdown is valid and renders just fine. Somehow, when keystatic tries to validate the content it claims it's invalid despite that content being generated by keystatic itself.

We can even see that images are allowed in editor.tsx:

https://github.com/Thinkmill/keystatic/blob/6b9c653c33e8ea491f63d404464a42d7626db91f/packages/keystatic/DocumentEditor/editor.tsx#L99C23-L99C23 so I'm not sure what's going on.

[CapitaineToinon]

I assume it's related to https://github.com/Thinkmill/keystatic/blob/f3cc119cc8446b4613085e0172f383e9e65e3522/packages/keystatic/src/form/fields/document/markdoc/from-markdoc.ts#L16

[CapitaineToinon]

I've added the following condition to my local running keystatic as a workaround for now, seems to work.

  if (node.type === 'image') {
    return {
      type: 'image',
      src: decodeURI(node.attributes.src) as any,
      alt: node.attributes.alt,
      title: node.attributes.title ?? '',
      children: [],
    };
  }

Problem is that if I have a cell with just one image in, then I can't add text before or after, or edit anything really. I think that issue my be a more global issue with images though. Not sure how you guys wanna handle that.

[CapitaineToinon]

Actually I'm getting the same issue with paragraphs now

[JedWatson]

Thanks for the detailed report @CapitaineToinon, we'll check this out asap

[CapitaineToinon]

Hey, we now have an app live (https://soulsspeedruns.com/) and I'm getting this error again with other node types, this time it's by my users. Because of some community disagreements the old website was shut (Mediawiki) and so we migrated to keystatic as it seems simpled enough.

Again, this error happens by just editing the page with the editor, hitting save and now it becomes invalid again.

I'm getting pretty tired about the editor, I would love to have a raw editor, maybe monacco or codemirror. I've tried to manually dig into the source code to understand how the fields api work but it was just too much work and I just don't have a work around right now. At least, we render the pages using Astro so we bypass the keystatic pipeline entirely for rendering. However I originally wanted to use Remix or Next but going through the reader api yields the same errors.

Would love to have some help on this. Thanks in advance.