Logik-Tags

Logik-Tags sind die Control-Flow-Tokens Ihrer Vorlagensyntax — Bedingungen und Schleifen wie {% if vip %} … {% endif %} oder {% for item in items %} … {% endfor %}. Sie sind getrennt von Merge-Tags: Merge-Tags sind Daten-Platzhalter, die man aus einer Liste auswählt, Logik-Tags sind Struktur, die Ihre Versandplattform zum Sendezeitpunkt auswertet.

Es gibt zwei unabhängige Teile:

• Hervorhebung — jedes Logik-Tag, das Sie in einen Titel- oder Absatzblock tippen oder einfügen, wird anhand des logic-Musters des Syntax-Presets erkannt und als großgeschriebenes Schlüsselwort-Badge dargestellt (IF, ENDIF, FOR…). Das ist immer aktiv und benötigt keine Konfiguration. Siehe Merge-Tags → Logik-Tags für Details zur Erkennung und zu den Syntax-Presets.
• Einfügen — konfigurieren Sie eine logicTags-Option, um Autoren eine eigene Schaltfläche Logik zu geben, damit sie Control-Flow einfügen können, ohne die Syntax von Hand zu schreiben. Darum geht es auf dieser Seite.

Konfiguration

Übergeben Sie eine logicTags-Option mit tags (einzelne Tokens) und/oder pairs (Öffnen/Schließen-Konstrukte). Beide sind optional.

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

const editor = await init({
  container: '#editor',
  logicTags: {
    tags: [
      { label: 'Sonst', value: '{% else %}', group: 'Bedingungen' },
    ],
    pairs: [
      {
        label: 'Wenn VIP',
        before: '{% if customer.vip %}',
        after: '{% endif %}',
        group: 'Bedingungen',
        description: 'Zeigt den umschlossenen Inhalt nur VIP-Kunden',
      },
      {
        label: 'Positionen durchlaufen',
        before: '{% for item in order.items %}',
        after: '{% endfor %}',
        group: 'Schleifen',
      },
    ],
  },
});

Logik-Tags verwenden dasselbe mergeTags.syntax-Preset (das Preset definiert sowohl das Daten- als auch das Logik-Muster), Sie konfigurieren die Syntax also nicht doppelt.

Typen

interface LogicTag {
  label: string;
  value: string;        // ein einzelnes Logik-Token, z. B. '{% else %}'
  group?: string;       // optionale Abschnittsbezeichnung im Picker
  description?: string; // optionaler Hilfetext im Picker
}

interface LogicPair {
  label: string;
  before: string;       // öffnendes Tag, z. B. '{% if vip %}'
  after: string;        // schließendes Tag, z. B. '{% endif %}'
  group?: string;       // optionale Abschnittsbezeichnung im Picker
  description?: string;
}

interface LogicTagsConfig {
  tags?: LogicTag[];
  pairs?: LogicPair[];
  onRequest?: () => Promise<LogicTag | LogicPair | null>;
}

value / before / after müssen die Syntax-Trennzeichen enthalten. group und description sind nur für den Picker — sie erscheinen weder auf dem Canvas noch im gerenderten MJML.

Der Picker

Wenn logicTags konfiguriert ist, erscheint eine Schaltfläche Logik in der Titel- und Absatz-Symbolleiste (neben Merge-Tag). Ein Klick öffnet einen Picker:

• tags und pairs teilen sich eine Liste, gegliedert nach group — ein Abschnitt listet zuerst die Öffnen/Schließen-Paare, dann die einzelnen Tags, sodass eine von beiden genutzte Gruppe (z. B. „Bedingungen") nur einmal erscheint.
• Ein einzelnes Tag zeigt ein einzelnes Schlüsselwort-Badge (z. B. ELSE), ein Paar zeigt beide (z. B. IF … ENDIF) und signalisiert damit, dass es die Auswahl umschließt.

Tippen filtert; mit ↑/↓ und Enter einfügen; Esc oder ein Klick auf den Hintergrund schließt.

Einfügeverhalten

• Ein einzelnes Tag wird an der Cursorposition eingefügt.
• Ein Paar umschließt die aktuelle Auswahl — [open]{Auswahl}[close] — sodass Autoren einen Absatz auswählen und ihn in einem Schritt bedingt machen können.
• Ein Paar ohne Auswahl setzt beide Pills nebeneinander, mit dem Cursor dazwischen, sodass Sie den umschlossenen Inhalt eintippen können.

Wählen Sie zum Beispiel den Text aus, den Sie bedingt machen möchten:

Wählen Sie ein Paar (hier Wenn VIP), und es umschließt die Auswahl — der Text steht nun zwischen dem öffnenden und dem schließenden Pill:

Beide Seiten werden als dieselben formatierten Logik-Badges wie getippte Logik dargestellt und unverändert im gerenderten MJML durchgereicht. Der Editor erzwingt keine Balancierung, bieten Sie das passende Öffnen/Schließen daher als ein einzelnes pair an (empfohlen) statt als zwei separate tags.

Ihr eigener Picker

Setzen Sie logicTags.onRequest, um den integrierten Picker durch Ihre eigene UI zu ersetzen — ein eigenes Modal, einen Bedingungs-Builder oder per API geladene Logik-Konstrukte (und so binden Konsumenten mit einer nicht-voreingestellten Syntax ihre eigene Erfahrung ein). Die Funktion wird aufgerufen, wenn der Benutzer auf Logik klickt; geben Sie das gewählte LogicTag / LogicPair zurück oder null zum Abbrechen. Die Reihenfolge entspricht den Merge-Tags: onRequest → integrierter Picker → nichts.

const editor = await init({
  container: '#editor',
  logicTags: {
    onRequest: async () => {
      const choice = await showMyLogicPicker();
      return choice; // LogicTag | LogicPair | null
    },
  },
});

Über Rich-Text hinaus: Textfelder

Logik ist nicht auf Titel-/Absatzblöcke beschränkt. Eingabefelder und Textareas, die bereits Merge-Tags unterstützen — Button-Text, Button-/Bild-URLs, Alt-Text — erhalten ebenfalls die Logik-Schaltfläche und heben Logik-Tags in ihrem Wert hervor.

Machen Sie z. B. den Button-Text bedingt:

{% if guest.status == 'vip' %}VIP-Zugang{% else %}Registrieren{% endif %}

In einem Textfeld wird ein Tag an der Cursorposition eingefügt und ein Paar umschließt den ausgewählten Text (als Zeichenkette) — genau wie im Rich-Text.