Block-Schema & Feldtypen

Alle Feldtypen

Definiere die editierbaren Props eines Blocks mit dem fields.*()-Builder innerhalb von defineBlock. Jeder Builder gibt eine Felddefinition zurück; der Schlüssel, den du ihm in props gibst, wird zum Content-Schlüssel.

Builder	Beschreibung	Werttyp
fields.singleLine()	Einzeiliges Texteingabefeld	string
fields.multiLine()	Mehrzeilige Textarea	string
fields.richText()	WYSIWYG-Editor (Tiptap)	string (HTML)
fields.numeric()	Zahleneingabe	number
fields.boolean()	Umschalter	boolean
fields.date()	Datumsauswahl	string (ISO)
fields.color()	Farbauswahl	string (hex)
fields.media()	Bild-/Video-Upload	string (URL)
fields.link()	Interne/externe URL	string
fields.select()	Dropdown (einfach)	string
fields.multiselect()	Mehrfachauswahl	string[]
fields.repeater()	Array von Objekten	Array<object>

---

Einen Block definieren

Ein Block wird mit defineBlock deklariert. Seine editierbaren Felder liegen unter 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" }),
  },
});

---

Feldoptionen

Jeder fields.*()-Builder akzeptiert dieselben Basisoptionen:

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

Verfügbare Schlüssel: label, required, defaultValue, placeholder, helperText. Select- und Repeater-Felder bringen noch ein paar weitere mit (siehe unten).

---

Select & Multiselect

Die Optionen sind ein einfaches Array aus Strings:

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

---

Repeater (Arrays)

Nutze itemSchema — eine Map aus verschachtelten fields.*() — um jede Zeile zu beschreiben:

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" }),
    },
  }),
}

In deiner Komponente:

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>
  );
}

Repeater unterstützt außerdem itemLabel, addButtonLabel, minItems, maxItems und collapsible.