How to layout using fields.markdoc now fields.document is deprecated?

[devnomic]

It also seems now layout only read the first array only? i cannot add multiple layout. when i click the layout button in toolbar, it always make two columns, there is no dropdown menu to choose 2 or 3 columns (if i remember correctly in the old version there is a dropdown menu when layout button clicked?).

 layouts: [
            [1, 1], //only have this layout
            [1, 1, 1],
          ],

[devnomic]

It suppose to show the popup menu like this when layout button clicked, now it doesn't (i'm using remix version).

Sceenshot above is using keystatic 0.2.x with astro version

[emmatown]

The built-in layout element from fields.document intentionally wasn't included in fields.markdoc/fields.mdx to not provide specific semantics to custom components,

You can write your own custom components to get similar functionality. For example, this is how you could have a 2 by 2 layout.

import { fields } from '@keystatic/core';
import { repeating, wrapper } from '@keystatic/core/content-components';

fields.markdoc({
  label: 'Content',
  components: {
    layout: repeating({
      children: 'layout-area',
      label: 'Layout',
      schema: {},
      validation: { children: { min: 2, max: 2 } },
      ContentView(props) {
        return (
          <div
            style={{
              display: 'grid',
              gridTemplateColumns: '1fr 1fr',
              gap: '1rem',
            }}
          >
            {props.children}
          </div>
        );
      },
    }),
    'layout-area': wrapper({
      label: 'Layout area',
      schema: {},
      forSpecificLocations: true,
    }),
  },
})