Monaco context menu: add an action to the editor that owns it

A notice-review screen needs “Show selected source” beside the normal editing commands. The action should display exactly the current selection from that source editor, even when the page contains a second editor. It should leave the document untouched and remain available through a visible button as well.

Register an action on the intended instance

For an already initialized Monaco editor and a plain-text output element named selectionOutput:

function showSelectedSource(activeEditor) {
  const model = activeEditor.getModel();
  const selection = activeEditor.getSelection();
  selectionOutput.textContent = model && selection
    ? model.getValueInRange(selection)
    : '';
}

const selectionAction = editor.addAction({
  id: 'notice.show-selected-source',
  label: 'Show selected source',
  contextMenuGroupId: '8_notice_review',
  contextMenuOrder: 1,
  run: showSelectedSource
});

Use a <pre> or another appropriate text container for selectionOutput. Setting textContent displays source such as <p> as text rather than parsing it into the surrounding page. This action previews the selection; it does not copy to the clipboard or save a revision.

The callback receives the editor instance whose action ran. Capturing one global “active editor” variable instead can read the wrong document after focus changes. The standalone editor API exposes addAction() and the current model/selection operations.

Define behavior for an empty selection

The fragment deliberately displays an empty result when no source is selected. An application can show “Select source first” instead, but the action should not silently substitute the whole document if its label promises selected text.

For a selection-only action, a descriptor may also use precondition: 'editorHasSelection' to control availability through Monaco's context-key expression. Keep the callback's null checks because a model can be detached or a command invoked through another application route. UI availability is not document authorization.

The menu group determines placement, while contextMenuOrder orders items inside that group. Reuse an appropriate existing group or choose a stable custom group. Neither option implements the command's business logic. Avoid changing editor-internal menu DOM or intercepting right-click across the whole page to add one source action.

Offer the same task outside right-click

Attach an ordinary visible button to the same helper:

showSelectionButton.addEventListener('click', () => {
  showSelectedSource(editor);
});

Give that button type="button" in a surrounding form. The helper reads the retained Monaco selection even though clicking the external button moves browser focus. If the application replaces or clears that selection on blur, resolve that behavior explicitly before promising the alternative works.

Building an entirely new menu requires its own focus and positioning behavior; the HTML context-menu guide addresses that different task. With Monaco, adding a contributed action keeps the editor responsible for its menu.

Check selection, scope, and disposal

Select a phrase containing HTML angle brackets, open the editor's menu, and choose the new action. Compare the displayed text with the exact selected model range. Confirm that no element was created from the selected HTML and that the source value stayed unchanged.

Repeat through the visible button. If there are two editor instances, select different phrases in them and confirm the action reads the intended owner. Keep this action's registration with that owner's lifetime, and call selectionAction.dispose() when removing the feature. Remove a separately installed button listener under the application's normal cleanup policy as well.

Finish by reading the notice in its intended preview before saving. A menu command can make source inspection easier, but the rendered notice and the saved model still need to express the wording the reviewer approved.