gui/components/DplEditor

A controlled CodeMirror 6 editor for DPL boxes (the prompt, the negative prompt, the wrapper Start/End). It behaves like a <textarea> — value + onChange(next) so the parent owns state — but adds DPL syntax highlighting and a brace-aware autocomplete dropdown of every list / generator token. Line wrapping is on; height is driven by CSS (.dpl-editor).

The catalog is read lazily per-completion (so browser-local custom blocks show up without a remount), and edits made while the parent re-renders don't echo back into the document (the latest value is tracked in a ref and compared before re-dispatching).

Description:

  • A controlled CodeMirror 6 editor for DPL boxes (the prompt, the negative prompt, the wrapper Start/End). It behaves like a <textarea> — value + onChange(next) so the parent owns state — but adds DPL syntax highlighting and a brace-aware autocomplete dropdown of every list / generator token. Line wrapping is on; height is driven by CSS (.dpl-editor).

    The catalog is read lazily per-completion (so browser-local custom blocks show up without a remount), and edits made while the parent re-renders don't echo back into the document (the latest value is tracked in a ref and compared before re-dispatching).

Source:

Methods

(inner) DplEditor(props) → {JSX.Element}

Source:
Parameters:
Name Type Description
props object
Properties
Name Type Attributes Description
value string

The DPL text (controlled).
onChange function

(next) — called on user edits.
placeholder string <optional>

Placeholder shown when empty (may change over time).
className string <optional>

Extra class on the wrapper (e.g. prompt-input).
ariaLabel string <optional>

Accessible label for the editor.
settings object <optional>

Generation settings — used to roll the live example in the autocomplete info panel with the correct SFW/NSFW gating. Read lazily, so updates don't remount.
Returns:
Type
JSX.Element