serdarciplak / BlazorMonaco

Blazor component for Microsoft's Monaco Editor which powers Visual Studio Code.
https://serdarciplak.github.io/BlazorMonaco/
MIT License
432 stars 98 forks source link

How to get Document Symbols? #87

Open IvanJosipovic opened 1 year ago

IvanJosipovic commented 1 year ago

I'm looking for the OutlineModel.asListOfDocumentSymbols function. See here, https://github.com/microsoft/monaco-editor/issues/2959

JS code example:

import { editor } from 'monaco-editor';
import { ILanguageFeaturesService } from 'monaco-editor/esm/vs/editor/common/services/languageFeatures.js';
import { OutlineModel } from 'monaco-editor/esm/vs/editor/contrib/documentSymbols/browser/outlineModel.js';
import { StandaloneServices } from 'monaco-editor/esm/vs/editor/standalone/browser/standaloneServices.js';

const ed = editor.create(/* options */);

async function main() {
  const { documentSymbolProvider } = StandaloneServices.get(ILanguageFeaturesService);
  const outline = await OutlineModel.create(documentSymbolProvider, ed.getModel());
  const symbols = outline.asListOfDocumentSymbols();
}

This is useful for the registerHoverProvider which I have implemented with the code below:

namespace UI.Components
{
    public partial class MonacoRegisterHoverProvider
    {
        [Inject]
        IJSRuntime jsRuntime { get; set; }

        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            {
                var module = await jsRuntime.InvokeAsync<IJSObjectReference>("import", $"./_content/UI/Components/{GetType().Name}.razor.js");
                await module.InvokeVoidAsync("registerHoverProvider", "yaml", DotNetObjectReference.Create(this));
            }
        }

        [JSInvokable]
        public async Task<object> ProvideHoverAsync(string model, Position position)
        {
            return new {
                contents = new[]
                {
                    new
                    {
                        value = $"This is a tooltip at {position.lineNumber} - {position.column}"
                    }
                }
            };
        }
    }

    public class Position
    {
        public int lineNumber { get; set; }
        public int column { get; set; }
    }
}
export function registerHoverProvider(languageId, hoverProvider) {
    monaco.languages.registerHoverProvider(languageId, {
        provideHover: function (model, position) {
            const yamlContent = model.getValueInRange({
                startLineNumber: 1,
                endLineNumber: 3,
            });

            return hoverProvider.invokeMethodAsync("ProvideHoverAsync", yamlContent, position);
        }
    });
}