Monaco read-only mode: lock the reference pane while keeping its source readable

For a template-review screen, consider a current draft beside an approved reference. Reviewers need to select and copy reference text. Disabling the surrounding panel would interfere with that task; an editor read-only setting keeps the source available while removing ordinary text editing from that pane.

Configure the intended view

In an application that already initializes Monaco, create the reference editor with its existing reference model:

const referenceEditor = monaco.editor.create(referenceContainer, {
  model: referenceModel,
  readOnly: true,
  domReadOnly: true,
  readOnlyMessage: {
    value: 'Approved reference. Edit the draft pane instead.'
  },
  automaticLayout: true
});

referenceContainer must have usable dimensions, and referenceModel must be the intended document. The Monaco setup guide covers those prerequisites. This fragment adds a view policy to that setup; it does not load an approved record.

domReadOnly controls the underlying input's DOM read-only behavior. Use the documented editor option for the editing policy instead of locating an internal textarea and changing it yourself. Keep an ordinary visible “Approved reference” label outside the editor so the explanation is available before someone attempts an edit.

For an existing draft editor whose review state changes:

function showDraftReviewMode(locked) {
  draftEditor.updateOptions({
    readOnly: locked,
    domReadOnly: locked
  });
}

Derive locked from the application's current review state. If several independent operations can require a lock, combine their reasons before updating this Boolean. Monaco's option does not supply CKEditor's named-lock accounting; the CKEditor lock guide describes that different API.

Decide whether the reference is live or frozen

Two Monaco editors may share one model. If one remains editable, its changes appear in the read-only view because both display the same source. A read-only reference pane is therefore not an immutable approved snapshot merely because its controls reject typing.

Use a separate model loaded from the approved revision when the reference must stay fixed while the draft changes. Give each document a distinct URI and ownership policy. Programmatic operations such as referenceModel.setValue(...) also remain possible; audit the application's own update paths before promising that an approved view cannot change. The text model API defines those model operations.

Keep server write authorization and revision checks independent of the editor. A requester can bypass a disabled Save button, and an already-sent save request does not disappear when a pane becomes read-only. Show whether the current draft is saved separately from whether it can be edited.

Check copying and model ownership together

In a development copy, select and copy a phrase from the reference. Attempt ordinary typing and paste; its source should remain unchanged. Edit the draft and confirm whether the reference follows or stays fixed according to the chosen shared-model or separate-revision design.

Then change the review state and confirm only the intended draft becomes editable. Inspect model values directly after each step. Finish by reopening the approved revision and the current draft from storage; the labels, saved revision identities, and actual editing behavior should describe the same two documents.