Monaco completion provider: offer document tokens in the right model

An original notice-template editor accepts tokens such as {{collection_desk}}. An author typing {{coll should be able to insert the complete token. An unrelated HTML source editor on the same page should not receive these application-specific suggestions.

Recognize a narrow token context

The following fragment belongs in an application that already initializes Monaco and owns a text model named noticeModel. It offers two developer-defined tokens after {{, followed by zero or more ASCII letters or underscores immediately before the cursor.

import * as monaco from 'monaco-editor';

const tokenNames = ['collection_desk', 'closing_time'];
const noticeUri = noticeModel.uri.toString();

const completionRegistration =
  monaco.languages.registerCompletionItemProvider('html', {
    triggerCharacters: ['{'],
    provideCompletionItems(model, position) {
      if (model.uri.toString() !== noticeUri) {
        return { suggestions: [] };
      }

      const before = model.getLineContent(position.lineNumber)
        .slice(0, position.column - 1);
      const match = before.match(/\{\{([a-z_]*)$/);
      if (!match) return { suggestions: [] };

      const prefix = match[1];
      const range = new monaco.Range(
        position.lineNumber,
        position.column - prefix.length,
        position.lineNumber,
        position.column
      );

      return {
        suggestions: tokenNames
          .filter(name => name.startsWith(prefix))
          .map(name => ({
            label: name,
            filterText: name,
            kind: monaco.languages.CompletionItemKind.Variable,
            insertText: name + '}}',
            range,
            detail: 'Notice template token'
          }))
      };
    }
  });

For {{coll at the cursor, the range covers coll. Accepting collection_desk replaces that prefix with collection_desk}}, leaving the two opening braces intact. The expected result is {{collection_desk}}.

Monaco positions use one-based line and column numbers. JavaScript slicing uses zero-based offsets, which is why the snippet subtracts one when extracting text before the cursor. The CompletionItem reference requires a single-line range containing the position where completion was requested.

Define what this small recognizer supports

This recognizer does not parse HTML or a full template language. It can offer tokens inside an attribute, comment, or script whenever the same prefix appears. If those contexts require different rules, add a deliberate parser or context check before returning suggestions.

The example also assumes no closing braces already sit after the cursor. In an editor that automatically inserts }}, accepting this insertion string could duplicate them. Adapt the replacement range to cover the actual existing suffix, or coordinate with that editor's bracket behavior. Check the cursor in the middle of a token as well as at the end before shipping the completion.

triggerCharacters asks for completion when an opening brace is typed. The provider can also be invoked by the editor's explicit suggestion action. It does not execute the inserted token or fill in a real desk name; the template renderer and its data contract remain separate.

Register once per intended lifetime

Registering another provider on every render or keystroke can accumulate duplicate suggestions. Keep this registration with the component or service that owns the notice-token feature. When that owner is permanently removed:

completionRegistration.dispose();

If the editor switches to another notice model while remaining mounted, update the scoping policy intentionally. This example captures one model URI. A reused URI for unrelated documents would defeat that distinction. The Monaco model setup guide explains document identity and model ownership.

For remote suggestions, the provider receives a cancellation token. Handle cancellation and current request identity before returning expensive results. The provider contract also supports resolving extra item details separately; neither feature is needed for this fixed local list.

Test accepted text, scope, and cleanup

In the actual application, type {{coll, invoke suggestions, and accept collection_desk. Read the model value and confirm the completed token contains exactly two braces at each end. Invoke the same prefix in the unrelated HTML model and confirm this provider contributes no items. Ordinary HTML providers may still offer their own suggestions there.

Close and reopen the notice editor to check for duplicate registration. Then save the chosen model value through the template service and preview it with real, authorized token data. A correct completion inserts the supported token; the reader preview confirms whether the renderer understands it.