Indent issues with javascript in <text> blocks

[lscorcia]

Describe the bug: Hi, I'm migrating a few projects from ASP.net WebForms to .net core 6. The ASP.net projects used DevExpress WebForms controls and they are being migrated to the DevExpress DevExtreme suite.

The DevExtreme suite controls use extensively the Razor @<text>...</text> block pattern, e.g.:

@(Html.DevExtreme().DataGrid<GetListaIncontriOutputDto>()
  .ID("gridIncontri")
  .OnCellPrepared(@<text>
    function (e) {
      if (e.rowType == "filter" && e.columnIndex == 1) {
        $("<a href='#' onclick='clearGridFilters()'>Pulisci</a>").appendTo(e.cellElement);
      }
    }
    </text>)
  .OnContentReady(@<text>
    function (e) {
      $("#annullaIncontroButton").dxButton("instance").option("disabled", e.component.getSelectedRowKeys().length != 1);
    }
  </text>)
  .OnSelectionChanged(@<text>
    function (e) {
      $("#annullaIncontroButton").dxButton("instance").option("disabled", e.selectedRowKeys.length != 1);
    }
  </text>)
)

Unfortunately, when typing out those code blocks, Visual Studio does not indent the javascript code, making everything pretty ugly to read, especially for longer methods. By pressing Ctrl+K, Ctrl+D on the above code, this is what happens:

@(Html.DevExtreme().DataGrid<GetListaIncontriOutputDto>()
  .ID("gridIncontri")
  .OnCellPrepared(@<text>
    function (e) {
    if (e.rowType == "filter" && e.columnIndex == 1) {
    $("<a href='#' onclick='clearGridFilters()'>Pulisci</a>").appendTo(e.cellElement);
    }
    }
  </text>)
  .OnContentReady(@<text>
    function (e) {
    $("#annullaIncontroButton").dxButton("instance").option("disabled", e.component.getSelectedRowKeys().length != 1);
    }
  </text>)
  .OnSelectionChanged(@<text>
    function (e) {
    $("#annullaIncontroButton").dxButton("instance").option("disabled", e.selectedRowKeys.length != 1);
    }
  </text>)
)

Version used: VS2022 17.2.4

To reproduce: Steps to reproduce the behavior:

1. Paste the above code in a .cshtml file
2. Press Ctrl+K, Ctrl+D
3. See indent being removed

Expected behavior: I would expect curly braces to apply indent, or at the very least to be left alone as typed.

Actual behavior: Indent is removed from nodes.

[davidwengier]

@ToddGrun @zkat I looked into this a bit and it seems like Razor is doing the right thing, but the Html language server is sending back edits that move everything to the same column.

Wasn't there a TypeScript formatting bug that moved everything to column 0? Wondering if this could be a dupe of that?

[davidwengier]

Logged this internally as https://devdiv.visualstudio.com/DevDiv/_workitems/edit/1612535. Since that isn't public, I'll keep this open to track it.

[davidwengier]

This is something we currently can't provide any help with, unfortunately. We get our Html/JavaScript formatting from the Html language server, but we don't have a deep understanding of the languages in Razor. When formatting this code we correctly send the JavaScript to the Html server to format but because the surrounding context is entirely C#, there is no way for the Html server to know that it is JavaScript, so it formats it as though it is plain text in a Html file, and lines everything up neatly as you observe.

A workaround you should be able to do is to put the bulk of the JavaScript code in one or more <script> blocks, so the Html server will understand the context. You would then just put the JavaScript function name in the attribute, and everything should work fine.

I'll leave this issue open though as in theory it might be possible in future for us on the Razor side to understand that these attributes contain JavaScript, and generate a fake <script> block that we send over the Html server, get it to give us the formatting results of that, and then re-apply those in-situ to the Razor file. This is the approach we take with C# in Razor files, but sadly rolling this out for Html will be very expensive, and there are a lot of features in the Razor editor that currently rely on the fact that we don't do this for Html.

[lscorcia]

Thank you for the detailed analysis, I understand the issue. As a workaround, is there any way to completely disable Razor code automatic indenting for @<text> blocks?

[davidwengier]

Unfortunately no. We are tracking the ability to add options in general in https://github.com/dotnet/razor-tooling/issues/6212 but if/when that might happen, and what the options are, is yet to be determined.