Schéma de bloc & types de champs

Tous les types de champs

Définissez les props éditables d'un bloc avec le builder fields.*() à l'intérieur de defineBlock. Chaque builder renvoie une définition de champ ; la clé que vous lui donnez dans props devient la clé de contenu.

Builder	Description	Type de valeur
fields.singleLine()	Champ de texte sur une ligne	string
fields.multiLine()	Zone de texte multiligne	string
fields.richText()	Éditeur WYSIWYG (Tiptap)	string (HTML)
fields.numeric()	Champ numérique	number
fields.boolean()	Interrupteur	boolean
fields.date()	Sélecteur de date	string (ISO)
fields.color()	Sélecteur de couleur	string (hex)
fields.media()	Téléversement d'image/vidéo	string (URL)
fields.link()	URL interne/externe	string
fields.select()	Liste déroulante (choix unique)	string
fields.multiselect()	Choix multiple	string[]
fields.repeater()	Tableau d'objets	Array<object>

---

Définir un bloc

Un bloc se déclare avec defineBlock. Ses champs éditables se trouvent sous props :

import type { ComponentType } from "react";
import { defineBlock, fields } from "@cmssy/react";
import Component from "./src";

export const heroBlock = defineBlock({
  type: "hero",
  label: "Hero",
  component: Component as unknown as ComponentType<{ content: Record<string, unknown> }>,
  props: {
    heading: fields.singleLine({ label: "Heading", required: true, defaultValue: "Welcome" }),
    description: fields.multiLine({ label: "Description" }),
  },
});

---

Options de champs

Chaque builder fields.*() accepte les mêmes options de base :

fields.singleLine({
  label: "Heading",
  required: true,
  defaultValue: "Welcome",
  placeholder: "Enter text",
  helperText: "Main heading",
})

Clés disponibles : label, required, defaultValue, placeholder, helperText. Les champs select et repeater en ajoutent quelques-unes (ci-dessous).

---

Select & Multiselect

Les options sont un simple tableau de chaînes :

props: {
  layout: fields.select({
    label: "Layout",
    options: ["grid", "list", "carousel"],
    defaultValue: "grid",
  }),
  tags: fields.multiselect({
    label: "Tags",
    options: ["featured", "new"],
  }),
}

---

Repeater (tableaux)

Utilisez itemSchema — une map de fields.*() imbriqués — pour décrire chaque ligne :

props: {
  features: fields.repeater({
    label: "Features",
    maxItems: 6,
    itemSchema: {
      icon: fields.singleLine({ label: "Icon Name", defaultValue: "Star" }),
      title: fields.singleLine({ label: "Title", required: true }),
      description: fields.multiLine({ label: "Description" }),
    },
  }),
}

Dans votre composant :

export default function Features({ content }) {
  return (
    <div className="grid grid-cols-3 gap-6">
      {(content.features ?? []).map((f, i) => (
        <div key={i}><h3>{f.title}</h3><p>{f.description}</p></div>
      ))}
    </div>
  );
}

Le repeater prend aussi en charge itemLabel, addButtonLabel, minItems, maxItems et collapsible.