`getDocumentSymbols` returns incorrect ordered symbol list in flatten mode

monaco-editor version: 0.24.0 **Browser: Chrome 91.0.4472.77 **OS: macOS 12.0 Beta Playground code that reproduces the issue:

https://alauda.github.io/k8s-form-in-action/demo/

Change the yaml content like the following:

containers:
  - name: nginx
    ports:
      - containerPort: 80

open devtool, execute window.DEBUG = true, click the yaml content you will get

As you can see, name symbol comes before 0 which is incorrect obviously, while containerPort comes after 0 which is correct.

What means when a symbol has multi children, the flatted result is incorrect.

If you want to run this sample locally, you can check https://github.com/alauda/k8s-form-in-action

run yarn && yarn dev and then visit http://localhost:4200

The related source code is at https://github.com/alauda/k8s-form-in-action/blob/master/src/app/demo/component.ts#L168

[rcjsuen]

I did some digging into this…

const value =
    `containers:
  - name: nginx
    ports:
      - containerPort: 80`;

monaco.editor.create(document.getElementById("container"), {
    value: value,
    language: "yaml"
});

const symbols = [
    {
        name: "containers",
        range: {
            startLineNumber: 1, startColumn: 1,
            endLineNumber: 4, endColumn: 26
        }
    },
    {
        name: "container 0",
        range: {
            startLineNumber: 2, startColumn: 5,
            endLineNumber: 5, endColumn: 1
        },
    },
    {
        name: "name",
        range: {
            startLineNumber: 2, startColumn: 5,
            endLineNumber: 2, endColumn: 16
        }
    },
    {
        name: "ports",
        range: {
            startLineNumber: 3, startColumn: 5,
            endLineNumber: 5, endColumn: 1
        }
    },
    {
        name: "ports 0",
        range: {
            startLineNumber: 4, startColumn: 9,
            endLineNumber: 4, endColumn: 26
        }

    },
    {
        name: "containerPort",
        range: {
            startLineNumber: 4, startColumn: 9,
            endLineNumber: 4, endColumn: 26
        }
    }
]

monaco.languages.registerDocumentSymbolProvider("yaml", {
    provideDocumentSymbols: (model, token) => {
        return symbols.map(s => {
            return {
                name: s.name,
                range: s.range,
                selectionRange: s.range,
                kind: monaco.languages.SymbolKind.Object
            }
        });
    }
});

1. You can reproduce this issue by running the above JavaScript code in the Monaco Editor Playground. Use F1 in the editor and use @ to jump to the symbol. In my screenshot I’ve added some whitespace after creating the editor so you can see both the code and the list of symbols for illustrative purposes.

const ranges = [
    {startLineNumber: 1, startColumn: 1, endLineNumber: 5, endColumn: 1}, // containers
    {startLineNumber: 2, startColumn: 5, endLineNumber: 5, endColumn: 1}, // 0-th element of containers
    {startLineNumber: 2, startColumn: 5, endLineNumber: 2, endColumn: 16}, // name
    {startLineNumber: 3, startColumn: 5, endLineNumber: 5, endColumn: 1}, // ports
    {startLineNumber: 4, startColumn: 9, endLineNumber: 4, endColumn: 26}, // 0-th element of ports
    {startLineNumber: 4, startColumn: 9, endLineNumber: 4, endColumn: 26}, // containerPort
]
ranges.sort((a, b) => {
    return monaco.Range.compareRangesUsingStarts(a, b);
});
console.log(ranges);

1. The reason the symbols are getting “moved around” is because of how VS Code is sorting them in compareRangesUsingStarts(*). You can see this change by running the above JavaScript code in the Monaco Editor Playground. The calling code can be found here and you can keep walking backwards from there as desired.
2. @JounQin I should note to you that the getDocumentSymbols(*) function is not considered API based on the contents of the vscode.d.ts file or the monaco.d.ts file so you shouldn’t be using it to get an outline of the symbols from a model.

[spahnke]

Can’t offer much help here, but as far as I know the Monaco editor does not provide any language intelligence for YAML out-of-the-box. So where are these symbols computed? Where does the DocumentSymbolProvider come from? I would start there and look into the ordering coming directly from that provider. That would probably also help you in providing a minimal repro if there should be a bug on Monaco’s side.