What is the correct structure of a code block?

[12joan]

Up until now, I've been using toggleNodeType to create and remove code blocks. The only problem with this approach is that when applying it to multiple paragraphs, they each become a separate code block, as noted in another discussion.

In an attempt to correct this behaviour, I switched to using toggleCodeBlock, but the resulting code blocks seem to be created incorrectly, or at least differently, and this is causing several problems. (For example, repeatedly toggling code block on the same line causes text to be removed entirely.)

I've made some progress towards partly fixing this behaviour in Plate, but I'm not certain I'm creating correctly structured code blocks in my tests.

Here's what I've currently got in my test for unwrapCodeBlock.

const input = ((                             
  <editor>
    <hcodeblock>                                                  
      <hcodeline>
        <htext>line 1</htext>
        <cursor />        
      </hcodeline>                                         
      <hcodeline>
        <htext>line 2</htext>
      </hcodeline>
    </hcodeblock>
  </editor>
) as any) as PlateEditor;

This produces the following node, which looks sensible to me.

{
  "type": "code_block",
  "children": [
    {
      "type": "code_line",
      "children": [
        {
          "text": "line 1"
        }
      ]
    },
    {
      "type": "code_line",
      "children": [
        {
          "text": "line 2"
        }
      ]
    }
  ]
}

However, the nodes I get from toggleNodeType, createAutoformatPlugin and toggleCodeBlock are structured differently.

Created with toggleNodeType or createAutoFormatPlugin:

{
  "type": "code_block",
  "children": [
    {
      "text": "created with toggleNodeType\nnew line",
      "type": "code_line"
    }
  ]
},

Created with toggleCodeBlock:

{
  "type": "code_block",
  "children": [
    {
      "type": "code_line",
      "children": [
        {
          "text": "created with toggleCodeBlock",
          "type": "code_block"
        }
      ]
    },
    {
      "type": "code_line",
      "children": [
        {
          "text": "new line"
        }
      ]
    }
  ]
},

Which, if any, of these structures are correct?

[zbeyens]

Correct structure:

{
  "type": "code_block",
  "children": [
    {
      "type": "code_line",
      "children": [
        {
          "text": "line 1"
        }
      ]
    },
    {
      "type": "code_line",
      "children": [
        {
          "text": "line 2"
        }
      ]
    }
  ]
}

It looks like the toggle is not working well, which could be due to the normalizer. Could you try adding withoutNormalizing in unwrapCodeBlock and let us know how that works? To avoid future regression, it would be great if you could create a unit test for normalizeCodeBlock too.

Tracked in #2161

Thanks again for your help!

[12joan]

Thanks for your reply!

The current implementation of unwrapCodeBlock, without withoutNormalizing, replaces a correctly-structured code block with [], removing it entirely.

With withoutNormalizing, it unwraps the first code_line to an orphaned text node, which is removed upon normalization. The second code_line remains in the code block.

Before normalization

    [
      {
        "text": "line 1"
      },
      {
        "type": "code_block",
        "children": [
          {
            "type": "code_line",
            "children": [
              {
                "text": "line 2"
              }
            ]
          }
        ]
      }
    ]

After normalization

    [
      {
        "type": "code_block",
        "children": [
          {
            "type": "code_line",
            "children": [
              {
                "text": "line 2"
              }
            ]
          }
        ]
      }
    ]

I'm working on a fixed implementation of unwrapCodeBlock, which currently looks like this:

unwrapCodeBlock

export const unwrapCodeBlock = <V extends Value>(
  editor: PlateEditor<V>,
  { at }: { at?: Path } = {}
) => {
  withoutNormalizing(editor, () => {   
    const codeBlockEntry = getBlockAbove(editor, {    
      at,                                            
      match: { type: getPluginType(editor, ELEMENT_CODE_BLOCK) },    
    });                                                             
                                                               
    if (codeBlockEntry) {                                        
      const codeLineEntries = getChildren(codeBlockEntry);    
                                                             
      codeLineEntries.forEach((codeLineEntry) => {    
        setElements(                                      
          editor,                                                   
          { type: getPluginType(editor, ELEMENT_DEFAULT) },         
          { at: codeLineEntry[1] }                            
        );                                                          
      });                                                    
                                                             
      unwrapNodes(editor, {                          
        at: codeBlockEntry[1],                               
        match: { type: getPluginType(editor, ELEMENT_CODE_BLOCK) },    
        split: true,                                                  
      });                                                     
    }                                
  });                                                         
};                                   

This works fine for the simple case where only one code block is selected. I'm still working on getting it to work properly when multiple code blocks are selected.

I'll definitely take a look at adding tests for normalizeCodeBlock once unwrapCodeBlock and toggleCodeBlock are working correctly. 👍

[12joan]

I'm working on the assumption that unwrapCodeBlock should replace the entire code block with paragraphs, not just the selected lines. Let me know if that isn't the desired behaviour.

[12joan]

unwrapCodeBlock is working now, so I thought I'd take a look at normalizeCodeBlock. I'm not too familiar with normalizers in Plate/Slate, so I'm not sure what sorts of normalizations are in-scope and which aren't.

The only thing the normalizer does currently is ensure that all children of a code block are code lines. I've added a test that proves it can successfully convert a paragraph child to a code line. It throws an error if I try it with a text node child (i.e. <htext> as a child of <hcodeblock>), but I assume this is out of scope, so I haven't included it in the test for now.

Theoretically, it might be useful if normalizeCodeBlock could cope with each of the incorrect structures I encountered in my original question, but that might add too much complexity. In any case, I'm probably not familiar enough with Plate's various helper functions to implement that effectively, so I'll stick to testing what's already implented for now.

Tomorrow, I'll take a look at why toggleCodeBlock is adding type: 'code_line' to the text nodes inside actual code lines.

[12joan]

Created a draft PR #2163