Monaco Editor 默认不支持 XML 语言吗？

Question

I am trying to use Monaco Editor for XML language, but XML string is not getting formatted while the editor instance is being rendered, whereas its working fine for JSON.

I also don't find "Format Document" option in Context Menu of Editor(if it is opened with XML language). Does Monaco editor support XML formatting by default?

Answer 1

It appears that Monaco Editor doesn't format xml by default. A colleague of mine - @thewahome , had to write code to format the xml. If you're interested on how to format xml the following snippet will help.

function formatXml(xml: any) {
  const PADDING = ' '.repeat(2);
  const reg = /(>)(<)(\/*)/g;
  let pad = 0;

  xml = xml.replace(reg, '$1\r\n$2$3');

  return xml.split('\r\n').map((node: any, index: number) => {
    let indent = 0;
    if (node.match(/.+<\/\w[^>]*>$/)) {
      indent = 0;
    } else if (node.match(/^<\/\w/) && pad > 0) {
      pad -= 1;
    } else if (node.match(/^<\w[^>]*[^\/]>.*$/)) {
      indent = 1;
    } else {
      indent = 0;
    }

    pad += indent;

    return PADDING.repeat(pad - indent) + node;
  }).join('\r\n');
}

Answer 2

The support for XML in Monaco is strange. As far as I know, there is no XML formatter implemented. But don't use XML formatting on clientside . It's a potential bottleneck in your app if you edit large texts. Format XML only once on your backend and send it already formatted. Monaco can be configured to follow XML indention as you type.

You can play around with this in Monaco editor playground . (just copy, paste, run):

monaco.editor.create(document.getElementById('container'), {
    value: "<group>\n<content>\n<value text=\"Press Ctrl + Shift + F\">\</value>\n</content>\n</group>",
    language: "xml",
    tabSize: 2,
    autoIndent: "full",
    detectIndentation: true,
    formatOnType: true,
    formatOnPaste: true,
});

monaco.languages.setLanguageConfiguration("xml", {
    "indentationRules": {
        "increaseIndentPattern": new RegExp("<(?!\\?|[^>]*\\/>)([-_.A-Za-z0-9]+)(?=\\s|>)\\b[^>]*>(?!.*<\\/\\1>)|<!--(?!.*-->)|\\{[^}\"']*$"),
        "decreaseIndentPattern": new RegExp("^\\s*(<\\/(?!html)[-_.A-Za-z0-9]+\\b[^>]*>|-->|})"),
    },
});

monaco.editor.addKeybindingRules([
    {
        // Reindent lines with Ctrl + Shift + F
        keybinding: monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KeyF,
        command: "editor.action.reindentlines",
    },
]);

indentationRules are borrowed from vscode HTML extension configuration and simplified. More information about it here .

This configuration also enables the "Reindent lines" action in the context menu.