|
|
@@ -444,23 +444,23 @@ export function ExpressionInput({
|
|
|
</div>
|
|
|
)}
|
|
|
|
|
|
- {/* Expression syntax help */}
|
|
|
+ {/* Expression syntax help.
|
|
|
+ Below the field, in the normal flow - not floating at the cursor.
|
|
|
+ It used to be positioned where the caret was, which inside a textarea
|
|
|
+ put a block of reference text directly over the words being written,
|
|
|
+ and a prompt could not be edited at all while it was up. It is a
|
|
|
+ reminder, not something to pick from, so it never needs to be near
|
|
|
+ the caret. */}
|
|
|
{showAutocomplete && filteredFields.length === 0 && (
|
|
|
- <div
|
|
|
- ref={autocompleteRef}
|
|
|
- className="absolute z-50 w-full bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg shadow-lg mt-1 p-3"
|
|
|
- style={{
|
|
|
- top: autocompletePosition.top,
|
|
|
- left: autocompletePosition.left,
|
|
|
- }}
|
|
|
- >
|
|
|
- <div className="text-xs text-gray-600 dark:text-gray-400">
|
|
|
- <div className="font-medium mb-2">Expression Syntax:</div>
|
|
|
- <ul className="space-y-1 text-gray-500 dark:text-gray-400">
|
|
|
- <li><code className="bg-gray-100 dark:bg-slate-700 px-1 rounded">data.field</code> - Access input data</li>
|
|
|
- <li><code className="bg-gray-100 dark:bg-slate-700 px-1 rounded">$node["Name"].field</code> - Access node output</li>
|
|
|
- <li><code className="bg-gray-100 dark:bg-slate-700 px-1 rounded">$trigger.timestamp</code> - Trigger data</li>
|
|
|
- </ul>
|
|
|
+ <div className="mt-1 rounded-lg border border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800/60 px-3 py-2">
|
|
|
+ <div className="text-[11px] text-gray-600 dark:text-gray-400">
|
|
|
+ <span className="font-medium">Expression syntax: </span>
|
|
|
+ <code className="bg-gray-100 dark:bg-slate-700 px-1 rounded">data.field</code>
|
|
|
+ <span className="text-gray-400"> input data · </span>
|
|
|
+ <code className="bg-gray-100 dark:bg-slate-700 px-1 rounded">$node["Name"].field</code>
|
|
|
+ <span className="text-gray-400"> another node · </span>
|
|
|
+ <code className="bg-gray-100 dark:bg-slate-700 px-1 rounded">$trigger.timestamp</code>
|
|
|
+ <span className="text-gray-400"> trigger data</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
)}
|