Block- & Template-Standardwerte

Blockeigenschaften (Farben, Schriftgrößen, Padding, Platzhaltertexte usw.) sind in Factory-Funktionen fest einprogrammiert. Mit blockDefaults und templateDefaults können Sie diese überschreiben, sodass jeder neue Block und jedes neue Template standardmäßig zu Ihrer Marke passt.

Block-Standardwerte

Übergeben Sie ein blockDefaults-Objekt an init(). Jeder Schlüssel wird einem Blocktyp zugeordnet und akzeptiert eine partielle Überschreibung der Eigenschaften dieses Blocks:

import { init } from '@templatical/editor';

const editor = await init({
  container: '#editor',
  blockDefaults: {
    title: { color: '#000000' },
    paragraph: {},
    button: {
      backgroundColor: '#ff6600',
      textColor: '#ffffff',
      styles: { padding: { top: 20, bottom: 20 } },
    },
    divider: { color: '#eeeeee', thickness: 2 },
    image: { alt: 'Brand image' },
  },
});

Standardwerte werden angewendet bei:

• Ziehen eines Blocks aus der Seitenleiste
• Programmatischem Aufruf von createAndAddBlock()

Standardwerte werden nicht angewendet bei:

• Duplizieren eines vorhandenen Blocks (die Werte des Quellblocks bleiben erhalten)
• Laden gespeicherter Inhalte aus der API

Platzhaltertext

Der Text, mit dem ein neuer Block startet, ist lokalisiert. blockDefaults überschreibt damit einen lokalisierten Wert und keinen englischen:

const editor = await init({
  container: '#editor',
  locale: 'de',
  blockDefaults: {
    // Ohne diese Angaben zeigt ein neuer Titel „Geben Sie Ihren Titel ein“
    // und ein neuer Button „Hier klicken“.
    title: { content: '<p>Ihre Überschrift</p>' },
    paragraph: { content: '<p>Ihr Text</p>' },
    button: { text: 'Jetzt kaufen' },
    video: { alt: 'Produktvideo' },
  },
});

title.content und paragraph.content sind Rich-Text-HTML — schließen Sie den Text in <p>…</p> ein. Alle anderen Felder oben sind einfache Zeichenketten.

Welcher Locale ein Standardwert folgt, hängt davon ab, ob der Text für die bearbeitende Person oder für die empfangende Person bestimmt ist; die Tabelle dazu steht unter Internationalisierung. Werte, die Sie hier setzen, gewinnen gegen beide.

Deep-Merge-Verhalten

Verschachtelte Objekte werden deep-merged, nicht flach ersetzt. Das bedeutet, Sie können einen einzelnen Padding-Wert überschreiben, ohne den Rest zu verlieren:

blockDefaults: {
  button: {
    // Nur das obere Padding ändert sich. right/bottom/left behalten ihre Standardwerte.
    styles: { padding: { top: 20 } },
    // Gleiches für buttonPadding — nur top ändert sich.
    buttonPadding: { top: 16 },
  },
}

Arrays werden ersetzt, nicht zusammengeführt. Beispielsweise ersetzt das Setzen von table.rows das gesamte Standard-Rows-Array.

Unterstützte Blocktypen

Schlüssel	Blocktyp
title	Title
paragraph	Paragraph
image	Image
button	Button
divider	Divider
section	Section
video	Video
social	Social Icons
spacer	Spacer
html	HTML
menu	Menu
table	Table

Benutzerdefinierte Blöcke sind von blockDefaults nicht betroffen. Sie verwenden ihre eigenen default-Werte, die in der CustomBlockDefinition-Feldkonfiguration definiert sind.

TypeScript-Typ

import type { BlockDefaults } from '@templatical/editor';
// oder
import type { BlockDefaults } from '@templatical/types';

Jeder Blocktyp-Schlüssel akzeptiert Partial<Omit<BlockType, 'id' | 'type'>> — Sie können jede Eigenschaft außer id und type überschreiben, die immer automatisch generiert werden. Siehe Blocktypen für die vollständige Liste der verfügbaren Eigenschaften pro Block.

Template-Standardwerte

Übergeben Sie ein templateDefaults-Objekt, um die Standard-Template-Einstellungen zu überschreiben, die beim Erstellen eines neuen leeren Templates verwendet werden:

const editor = await init({
  container: '#editor',
  templateDefaults: {
    width: 640,
    backgroundColor: '#f5f5f5',
    fontFamily: 'Helvetica, sans-serif',
    preheaderText: 'Check out our latest news',
  },
});

Wann Template-Standardwerte gelten

• Kein Inhalt angegeben — templateDefaults überschreiben die fest einprogrammierten Factory-Standardwerte (width: 600, bg: #ffffff usw.).
• Inhalt angegeben — Die Einstellungen des bereitgestellten Inhalts werden unverändert übernommen. templateDefaults haben keine Wirkung.

Mit anderen Worten, templateDefaults sind Fallbacks für fehlenden Inhalt, keine Überschreibungen für vorhandenen Inhalt.

Verfügbare Einstellungen

Eigenschaft	Standard	Beschreibung
width	600	Template-Breite in Pixeln
backgroundColor	#ffffff	Hintergrundfarbe des Templates
fontFamily	Arial	Standard-Schriftfamilie
locale	en	BCP-47-Inhaltssprache (<html lang>)
direction	—	"ltr" oder "rtl". Ungesetzt folgt der Inhaltssprache
preheaderText	—	E-Mail-Preheader-Text

TypeScript-Typ

import type { TemplateDefaults } from '@templatical/editor';
// oder
import type { TemplateDefaults } from '@templatical/types';

Eine Einstellung ausblenden

templateDefaults legt einen Startwert fest; darüber, ob der Autor ihn ändern darf, entscheidet es nicht. Um eine Einstellung aus dem Einstellungs-Panel zu nehmen, übergeben Sie eine Positivliste an templateSettings.fields:

const editor = await init({
  container: '#editor',
  // Der Autor wählt die Breite; Sprache und Preheader kommen aus der Anwendung.
  templateSettings: { fields: ['width', 'backgroundColor', 'fontFamily'] },
});

Die beiden greifen nur in einer Richtung ineinander. templateDefaults wirkt, wenn kein Inhalt übergeben wird, und kann eine Einstellung an einem geladenen Template deshalb nicht festsetzen — setzen Sie diese über den Inhalt selbst (init({ content }) oder das load Ihres templates-Providers). Die vollständige Feldliste und wie Karten ihren Feldern folgen, steht unter Einstellungs-Panel einschränken.

Integrierte Standardkonstanten

Das SDK exportiert die integrierten Standardwerte für jeden Blocktyp und die Template-Einstellungen als Konstanten. Verwenden Sie diese, um aktuelle Standardwerte zu inspizieren, zu erweitern oder benutzerdefinierte Presets zu erstellen:

import {
  DEFAULT_BLOCK_DEFAULTS,
  DEFAULT_TEMPLATE_DEFAULTS,
  TITLE_BLOCK_DEFAULTS,
  PARAGRAPH_BLOCK_DEFAULTS,
  BUTTON_BLOCK_DEFAULTS,
} from '@templatical/types';

// Die Standardwerte für einen einzelnen Blocktyp inspizieren
console.log(TITLE_BLOCK_DEFAULTS);
// { content: '<p>Enter your title</p>', level: 2, color: '#1a1a1a', ... }

// Template-Standardwerte inspizieren
console.log(DEFAULT_TEMPLATE_DEFAULTS);
// { width: 600, backgroundColor: '#ffffff', fontFamily: 'Arial' }

// Ein benutzerdefiniertes Preset erstellen, indem die Standardwerte eines einzelnen Blocks erweitert werden
const myButtonDefaults = {
  ...BUTTON_BLOCK_DEFAULTS,
  backgroundColor: '#ff6600',
  borderRadius: 8,
};

Verfügbare Konstanten

Pro-Block-Konstanten — jede enthält die Standardwerte der Eigenschaften für diesen Blocktyp (ausgenommen id, type und styles):

Konstante	Blocktyp
TITLE_BLOCK_DEFAULTS	Title
PARAGRAPH_BLOCK_DEFAULTS	Paragraph
IMAGE_BLOCK_DEFAULTS	Image
BUTTON_BLOCK_DEFAULTS	Button
DIVIDER_BLOCK_DEFAULTS	Divider
SECTION_BLOCK_DEFAULTS	Section
VIDEO_BLOCK_DEFAULTS	Video
SOCIAL_ICONS_BLOCK_DEFAULTS	Social Icons
SPACER_BLOCK_DEFAULTS	Spacer
HTML_BLOCK_DEFAULTS	HTML
MENU_BLOCK_DEFAULTS	Menu
TABLE_BLOCK_DEFAULTS	Table

Kombinierte Konstanten:

Konstante	Beschreibung
DEFAULT_BLOCK_DEFAULTS	Alle Blocktyp-Standardwerte in einem einzigen Objekt (Schlüssel entsprechen der BlockDefaults-Schnittstelle)
DEFAULT_TEMPLATE_DEFAULTS	Standardwerte der Template-Einstellungen (width, backgroundColor, fontFamily)

Diese Konstanten sind die einzige Quelle der Wahrheit, die intern von den Factory-Funktionen verwendet wird. Wenn Sie nur einige Eigenschaften überschreiben müssen, brauchen Sie sie nicht zu referenzieren — übergeben Sie einfach Ihre Überschreibungen an blockDefaults und sie werden mit diesen Werten deep-merged.

Programmatische Verwendung

Die zugrunde liegenden Factory-Funktionen akzeptieren Standardwerte auch direkt:

import { createBlock, createTitleBlock, createParagraphBlock, createDefaultTemplateContent } from '@templatical/types';
import type { BlockDefaults } from '@templatical/types';

// Einzelner Block mit partiellen Überschreibungen
const title = createTitleBlock({ level: 2, color: '#000' });
const paragraph = createParagraphBlock({ content: '<p>Hello</p>' });

// Über createBlock mit vollständiger Standardwert-Map
const defaults: BlockDefaults = {
  title: { color: '#000000' },
  button: { backgroundColor: '#ff6600' },
};
const block = createBlock('title', defaults);

// Template mit benutzerdefinierten Einstellungen
const content = createDefaultTemplateContent('Helvetica, sans-serif', {
  width: 640,
  backgroundColor: '#f5f5f5',
});