import { IDomEditor } from '@wangeditor/editor';
/** SVG icon for the variable dropdown button */
export declare const VARIABLE_ICON_SVG = "<svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 7V4h16v3\"/><path d=\"M9 20h6\"/><path d=\"M12 4v16\"/></svg>";
/**
 * Insert a variable badge into the editor as a styled inline element.
 * Uses wangEditor's dangerouslyInsertHtml to render a visually distinct badge.
 */
export declare function insertVariableBadge(editor: IDomEditor, varName: string): void;
/**
 * Extract all variable names from editor content (for validation/preview).
 */
export declare function extractVariablesFromHtml(html: string): string[];
/**
 * CSS styles for the variable badge inside wangEditor content.
 * These should be injected into the editor's container via :deep() selector.
 */
export declare const VARIABLE_BADGE_STYLES = "\n.tpl-variable-badge {\n    display: inline-block;\n    background: #ecf5ff;\n    color: #409eff;\n    border: 1px solid #d9ecff;\n    border-radius: 4px;\n    padding: 0 6px;\n    margin: 0 2px;\n    font-family: \"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, monospace;\n    font-size: 0.9em;\n    line-height: 1.6;\n    vertical-align: baseline;\n    cursor: default;\n    user-select: none;\n    white-space: nowrap;\n}\n.tpl-variable-badge:hover {\n    background: #d9ecff;\n    border-color: #b3d8ff;\n}\n";