How are code cells represented in the AST when using layouts?

[andrewpbray]

Description

I've run into an unexpected structure in the AST when using layout-ncol on code cells. Namely, why aren't the blocks corresponding to that code cell (CodeBlock and Divs with images) nested within a .cell Div in the same manner as code cells without layout-ncol? This has caused a bug in a filter that I've written. I can fix it with a post-render filter but figured I'd check in to see if this is the intended structure.

Let me build up to the layout-ncol from simpler two simpler examples.

Examples

If you have a qmd that only has a code cell like the following,

```r
#| echo: true
#| myattr: apple
#| label: A

hist(rnorm(5))
```

It gets rendered to native as:

Pandoc
  Meta { unMeta = fromList [] }
  [ Div
      ( "" , [ "cell" ] , [ ( "myattr" , "apple" ) ] )
      [ CodeBlock
          ( "" , [ "r" , "cell-code" ] , [] ) "hist(rnorm(5))"
      , Div
          ( "" , [ "cell-output-display" ] , [] )
          [ Para
              [ Image
                  ( "" , [] , [] )
                  []
                  ( "example_files/figure-native/A-1.png" , "" )
              ]
          ]
      ]
  ]

If you add a second plot to that code cell like this,

```r
#| echo: true
#| myattr: apple
#| label: B

hist(rnorm(5))

hist(rnorm(15))
```

it will render to native like:

Pandoc
  Meta { unMeta = fromList [] }
  [ Div
      ( "" , [ "cell" ] , [ ( "myattr" , "apple" ) ] )
      [ CodeBlock
          ( "" , [ "r" , "cell-code" ] , [] ) "hist(rnorm(5))"
      , Div
          ( "" , [ "cell-output-display" ] , [] )
          [ Para
              [ Image
                  ( "" , [] , [] )
                  []
                  ( "example_files/figure-native/B-1.png" , "" )
              ]
          ]
      , CodeBlock
          ( "" , [ "r" , "cell-code" ] , [] ) "hist(rnorm(15))"
      , Div
          ( "" , [ "cell-output-display" ] , [] )
          [ Para
              [ Image
                  ( "" , [] , [] )
                  []
                  ( "example_files/figure-native/B-2.png" , "" )
              ]
          ]
      ]
  ]

So it interleaves CodeBlock and Divs holding the image for each image thats is produced. This is stored as a list of blocks under a .cell Div that inherits the attributes (myattr: apple) of the original code cell, same as the first example. This makes sense to me.

Now if we add layout-ncol: 2,

```{r}
#| echo: true
#| label: C
#| layout-ncol: 2

hist(rnorm(5))

hist(rnorm(15))
```

and render to HTML, it no longer interleaves, it puts a single CodeBlock before the images:

Rendered to native no longer works, but we can peek at the AST at various points in the process. Here is a simplified glimpse at quarto.log.output(pandoc.blocks) when run at post-quarto (this is very similar to pre-quarto):

Blocks {
  [1] Div {
    attr: Attr {
      attributes: AttributeList {
        layout-ncol: "2"
        myattr: "apple"}
      classes: List {
        [1] "cell"}}
    content: Blocks {
      [1] CodeBlock {
        attr: Attr {
          classes: List {
            [1] "r"
            [2] "cell-code"}}
        text: "hist(rnorm(5))"}
      [2] Div {
        attr: Attr {
          classes: List {
            [1] "cell-output-display"}}
        content: Blocks {
          [1] Para {
            content: Inlines {
              [1] Image {
                attr: Attr {
                  attributes: AttributeList {
                    width: "672"}}
                src: "example_files/figure-html/C-1.png"}}}}}
      [3] CodeBlock {
        attr: Attr {
          classes: List {
            [1] "r"
            [2] "cell-code"}
        text: "hist(rnorm(15))"}
      [4] Div {
        attr: Attr {
          classes: List {
            [1] "cell-output-display"}}
        content: Blocks {
          [1] Para {
            content: Inlines {
              [1] Image {
                attr: Attr {
                  attributes: AttributeList {
                    width: "672"}}
                src: "example_files/figure-html/C-2.png"}}}}}}}

This looks very similar to the second example: the blocks are nested under a .cell Div that inherits the attributes (myattr: apple) of the original code cell. So the layouts must be done during the render filters (which makes sense). If I run quarto.log.output(pandoc.blocks) post-render, I get:

  [1] Div {
    attr: Attr {
      classes: List {
        [1] "quarto-scaffold"
    content: Blocks {
      [1] CodeBlock {
        attr: Attr {
          attributes: AttributeList {}
          classes: List {
            [1] "r"
            [2] "cell-code"
        text: "hist(rnorm(5))
                  hist(rnorm(15))"
      }
      [2] Div {
        attr: Attr {
          attributes: AttributeList {
            layout-ncol: "2"
            myattr: "apple"
          }
          classes: List {
            [1] "cell"
            [2] "quarto-layout-panel"
        content: Blocks {
          [1] Div {
            attr: Attr {
              classes: List {
                [1] "quarto-layout-row"
            content: Blocks {
              [1] Div {
                attr: Attr {
                  classes: List {
                    [1] "quarto-layout-cell"
                content: Blocks {
                  [1] Para {
                    content: Inlines {
                      [1] Image {
                        attr: Attr {
                          attributes: AttributeList {
                            width: "672"
                          classes: List {
                            [1] "img-fluid"
                        src: "example_files/figure-html/C-1.png"
              [2] Div {
                attr: Attr {
                  classes: List {
                    [1] "quarto-layout-cell"
                content: Blocks {
                  [1] Para {
                    content: Inlines {
                      [1] Image {
                        attr: Attr {
                          attributes: AttributeList {
                            width: "672"}
                          classes: List {
                            [1] "img-fluid"
                        src: "example_files/figure-html/C-2.png"

This does a few things:

1. Removes the interleaving of CodeBlock and output in Divs
2. Adds appropriate classes to the output Divs for the layout to work.
3. Now it is only the output Divs that are wrapped in a .cell Div. The CodeBlock has been pulled out as a block that's parallel to the .cell Div and both are wrapped in a .quarto-scaffold class.

Question

It is 3 that's causing a problem in my filter. Any attributes on the original code cell in the qmd will be transfered to the .cell Div that, unlike code cells without layout-ncol, is not a parent block to the CodeBlock showing the source code. In the render filter that processes these layouts, can those attributes be transferred instead to the parent block with the .quarto-scaffold class? (it may make sense to transfer the .cell class there too).