diff --git a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_collect_config.tsx b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_collect_config.tsx index bf9d965f945cf..60b8cc33c178f 100644 --- a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_collect_config.tsx +++ b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_collect_config.tsx @@ -31,6 +31,19 @@ export interface UrlDrilldownCollectConfigProps { variablesHelpDocsLink?: string; } +const isCursorBetweenDoubleCurlyBrackets = (editor: monaco.editor.IStandaloneCodeEditor) => { + const model = editor.getModel(); + const position = editor.getPosition(); + if (!model || !position) return false; + + const offset = model.getOffsetAt(position); + const text = model.getValue(); + const twoCharactersBeforeOffset = text.slice(offset - 2, offset); + const twoCharactersAfterOffset = text.slice(offset, offset + 2); + + return twoCharactersBeforeOffset === '{{' && twoCharactersAfterOffset === '}}'; +}; + export const UrlDrilldownCollectConfig: React.FC = ({ config, variables, @@ -64,9 +77,10 @@ export const UrlDrilldownCollectConfig: React.FC onSelect={(variable: string) => { const editor = editorRef.current; if (!editor) return; + const text = isCursorBetweenDoubleCurlyBrackets(editor) ? variable : `{{${variable}}}`; editor.trigger('keyboard', 'type', { - text: '{{' + variable + '}}', + text, }); }} />