Monaco format document: await the action before reading the save value

An original notice editor has a Format button beside Save. Its author pastes a compressed HTML notice and wants readable markup in the stored record. The application needs to keep the action's asynchronous result, the active document, and the eventual save payload aligned.

Run the existing formatting action

This integration fragment assumes an initialized Monaco editor with a model and language support already configured:

async function formatAndRead(editor) {
  const model = editor.getModel();
  if (!model) throw new Error('No document is open.');

  const action = editor.getAction('editor.action.formatDocument');
  if (!action || !action.isSupported()) {
    throw new Error('Formatting is unavailable for this document.');
  }

  await action.run();

  if (model.isDisposed() || editor.getModel() !== model) {
    throw new Error('The open document changed during formatting.');
  }
  return model.getValue();
}

The caller must catch a rejection and show an appropriate message. In a Format-and-save flow, pass the returned string to the application's existing save service only after this function resolves. Preserve an unsaved state if the service rejects it. The standalone editor interface documents model and action access.

The identity check prevents a format request started for one model from returning another tab's text. It does not decide the application's document ID. Capture that ID with the model in the surrounding save operation, and prevent or explicitly handle competing saves and tab changes.

An action's completion is not a Boolean report that formatting changed the document. The model may already follow the formatter's rules, or an intervening edit may affect whether proposed formatting is applied. Read the current model after the action and test the behavior your application promises; do not display “All issues fixed” merely because the promise resolved.

Diagnose an unavailable action at the language boundary

A source model with HTML syntax colors does not prove the HTML language worker or formatting provider is available. Confirm the model's language and inspect worker requests in the actual build. A missing worker asset and a model assigned to plain text require different fixes. The Monaco HTML integration guide covers those setup boundaries.

Do not install a second formatter simply to make the button appear active. If the application supplies its own formatter, Monaco's DocumentFormattingEditProvider returns edits for a whole document. That is a separate integration contract requiring a real formatter, cancellation handling, and deliberate language registration.

Avoid formatting HTML with a tag-splitting regular expression. Script contents, style contents, significant whitespace, and template syntax need the formatter's actual parser and configuration. A template language should use a formatting path that understands its source.

Keep document and selection formatting separate

The action above requests whole-document formatting. A control labeled “Format selection” must use an available range-formatting path and the intended selection instead. Naming a button does not change what formatDocument operates on.

For a notice with a short address inside a <pre> block, inspect the address after formatting as well as the outer indentation. If the output differs, determine whether that difference follows the chosen formatter's rules and is acceptable for the document. Formatting is not HTML validation, sanitization, or a repair for missing alternative text. The markup cleanup guide covers that structural review.

Check one save and one failure path

In the development application, paste an intentionally untidy fictional notice, run the action, and inspect the current model. Save that returned text and reopen the same record. The stored source should match the intended post-action value; a rendered webpage alone cannot establish its indentation.

Then use a model without a supported formatter and confirm the control reports the unavailable action without claiming a save. Switch documents while a slow formatter is pending and verify that the application does not save the second document under the first one's ID. Keep the notice unsaved if formatting or persistence fails, with its current source available for correction.