Markdown widget: Code blocks in lists are incorrectly ordered, sometimes don't appear

[jamescooke]

Current behaviour

Very similar to this old issue in Rich: Textualize/rich#1036

When we use the same content (a list with a code block):

cat > order.md

This is a test.

1. first item
2. second item

       code block

Normal text

And then render it with Frogmouth:

frogmouth order.md

Then the code block does not appear:

If we tweak the code block to use triple backticks, then the block appears, but out of order:

cat > order2.md

This is a test.

1. first item
2. second item

   ``
   code block
   ``

Normal text

Please forgive my use of a double backtick above - I wasn't able to get a triple backtick to render in a code block in this markdown issue body 😬 . I've attached the file for confirmation: order2.md

frogmouth order2.md

Expected behaviour

Render code block as part of the second item consistently.

Rich appears to render both markdown excerpts OK (and they appear the same). Tested with rich==13.3.5

[davep]

This looks very much to be in the realm of the Textual, with this being handled by the Markdown widget. I'll move this over there.

[davep]

Given Markdown is based on markdown-it, the first thing to do here is be sure how it handles things. Looks like it renders this as expected:

As such, at first glance, this would appear to be a bug in Markdown.

[jamescooke]

Thanks for moving the issue from Frogmouth @davep

I've confirmed the behaviour is in the Textual Markdown widget as follows:

• Used the markdown.py example file from the docs
• Replaced EXAMPLE_MARKDOWN variable with the failing contents from order.md and order2.md in turn.
• Ran each example with python markdown.py with textual==0.26.0 installed.
• Received the same render as Frogmouth (with code block not appearing with order.md and out of order in order2.md) as screenshotted in the original issue description.

[TomJGooding]

I'm sure that @davep is already way ahead of me on this, but posting anyway just in case it helps!

I experimented with a blockquote inside a list item and it looks like Textual renders this as expected:

I'm still trying to get to grips with the Markdown update method, but it looks like a blockquote token type is appended to the stack, whereas a code block is one of few token types (fence) that is instead appended to the ouput.

I hoped it might be as simple as changing this to the stack, but this breaks the docs markdown_viewer.py example.

[davep]

Half of the above will be fixed by #2803 (the part above indented code blocks).

I'm about to take a look at the problem of the code block appearing out of order when part of a list. The general problem can be seen here:

I've not dived into the code yet, but I wanted to get an overview of what the widget tree looks like. Right off it seems clear that a list is an "atomic" or "leaf" widget, rendering its content and not containing other widgets (in other words the items in the list aren't widgets). Meanwhile the code is a MarkdownFence so can't be inline in the list.

This fits perfectly with what @TomJGooding finds above.

[davep]

Actually, scratch that, I'm talking nonsense (for a change). Turns out that I was managing to render the tree just a little too soon after doing the update on the Markdown. (╯°□°）╯︵ ┻━┻

So, after I wait a moment and then refresh things the tree makes a lot more sense:

[davep]

@TomJGooding You hoped right, like 99% of the way there right anyway:

I hoped it might be as simple as changing this to the stack, but this breaks the docs markdown_viewer.py example.

Came down to e2dd711

[TomJGooding]

Ah, that makes sense. I don't think that co-author was really deserved, but thank you!

[davep]

I don't think that co-author was really deserved, but thank you!

You found the right spot and mostly found the fix, I just copied your homework and tweaked it. ;-)

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.