Bug: CodeMirror 6 Snippet Placeholders in Prometheus Web UI — Only First Placeholder Editable, TAB Navigation Broken

ADITYATIWARI342005 · November 16, 2025, 1:25pm

Hi CodeMirror community,

I’m working on the Prometheus web UI (query editor), which uses CodeMirror 6 for PromQL completion and snippet insertion. I’m running into persistent trouble with snippet placeholder navigation: despite following all CodeMirror documentation, I can only get the first placeholder field to be editable—TAB does not cycle through additional fields as expected.

Reference File and Current Snippet Block

File:
web/ui/module/codemirror-promql/src/complete/promql.terms.ts

Current code:

typescript

{

label: 'histogram_quantile(\__quantile_\_, sum by(le) (rate(\__histogram_metric_\_\[5m\])))',

type: 'function',

detail: 'snippet',

info: 'Approximate a quantile value from an aggregated histogram',

apply: snippet('histogram_quantile(${\__quantile_\_}, sum by(le) (rate(${\__histogram_metric_\_}\[5m\])))'),

},
….other snippets.

Symptoms and Current Behavior

When a snippet is inserted in the editor, only the first placeholder (e.g., ${__input_vector__}) is active/selected.
Pressing TAB does not cycle through remaining fields (e.g., ${__dst__}, ${__replacement__}, etc.).
All other fields are static text, not editable placeholders.

What I’ve Tried So Far

Updated Placeholders to Numbered Format:
- Changed all snippet fields to use the CodeMirror-recommended numbered format: ${1:input_vector}, ${2:dst}, etc.
- No change in behavior—still only the first field editable and tab-navigable.
Checked Editor Setup and Keymap:
- Verified import { snippet } from '@codemirror/autocomplete' and keymap extension setup.
- Made sure snippetKeymap (from @codemirror/autocomplete) is present in my editor config:
```
typescript
```
  import{ keymap }from"@codemirror/view";import{ snippetKeymap }from"@codemirror/autocomplete"; keymap.of([...snippetKeymap]);
CodeMirror Documentation and Examples:
- Read all official docs and forum threads (ref), which claim TAB navigation should work with numbered placeholders.

Dependencies and Environment

Using CodeMirror 6 latest (@codemirror/autocomplete, @codemirror/view, etc.).
No overriding/forked editor setup.
Inspected other repos and demos; most show expected behavior for snippets, but my implementation doesn’t work.

Questions for the Community

Is there something else I need to do in my autocomplete/snippet setup in CodeMirror 6 to enable multi-field TAB navigation?
Is my placeholder format (${__name__} or ${1:name}) incorrect or insufficient?
Is there any nuance or caveat to how snippet fields must be defined or passed to snippet() for correct behavior?
Has anyone else seen a bugged/“malformed” snippet string improve navigation, and if so, what was the underlying cause?
Are there proven, open-source implementations I can use as reference for correct multi-field snippet navigation?

Thanks in advance for your help.

marijn · November 16, 2025, 3:08pm

When I try your snippet, it seems to work fine (focus starts on __quantile__, and moves to __histogram_metric__ when I hit tab).

@codemirror/lang-javascript has a bunch. But I don’t think your syntax is wrong (though the backslashes seem superfluous).

ADITYATIWARI342005 · November 16, 2025, 3:14pm

Thank you for your time,
Could you please elaborate by visiting the linked file, if it has some missing dependencies,
it would mean a lot to me,

github.com/prometheus/prometheus

web/ui/module/codemirror-promql/src/complete/promql.terms.ts

f5d1cb48c


      
          // You may obtain a copy of the License at
          //
          // http://www.apache.org/licenses/LICENSE-2.0
          //
          // Unless required by applicable law or agreed to in writing, software
          // distributed under the License is distributed on an "AS IS" BASIS,
          // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
          // See the License for the specific language governing permissions and
          // limitations under the License.
          
          import { Completion, snippet } from '@codemirror/autocomplete';
          
          export const durationTerms = [{ label: 'y' }, { label: 'w' }, { label: 'd' }, { label: 'h' }, { label: 'm' }, { label: 's' }, { label: 'ms' }];
          export const matchOpTerms = [{ label: '=' }, { label: '!=' }, { label: '=~' }, { label: '!~' }];
          export const binOpTerms = [
            { label: '^' },
            { label: '*' },
            { label: '/' },
            { label: '%' },
            { label: '+' },
            { label: '-' },

Actually, the TAB seems to move the code by '\t while it is supposed to navigate between the placeholders,

Thank you for the example you attached, I will look into it, But if possible you may have a look into it.

ADITYATIWARI342005 · November 16, 2025, 3:18pm

this is the input secction…

marijn · November 16, 2025, 3:54pm

I don’t see anything wrong with the file. But maybe you put in some high-precedence binding for tab in your editor, which ends up overriding the snippet field motion binding (which uses Prec.highest already, so you’d have to be doing that on your custom tab binding too)?