imgui_md code block render doesn't play with imgui_node_editor

[bgribble]

My app uses imgui_node_editor to build a diagram on a canvas. One of the types of diagram node is a text display (it's used for displaying comments and inline documentation about the diagram)

I have recently gotten imgui_mdto work as a markdown display, 🎉

It has some quirks which I am working around, but here is one that I think is an issue with the imgui_md_wrapper code that is part of the bindings: A code block (whether started with ``` or with a 4-space indent) displays the formatted code jammed against the left edge of the window, not the left edge of the block containing the markdown display.

As the attached screencast shows, other markdown content and the shaded background for the code block are rendered more or less where expected (there is some kind of icon displayed off the right side of the window, but I will worry about that later).

Screencast.From.2024-11-20.12-43-15.mp4

The app in the screencast is hosted at https://github.com/bgribble/mfp and the master branch is what the screencast was made from.

[pthom]

The node editor has some limitations: it cannot support child window (i.e. any widget that includes a scrollbar).

For this reason, it is impossible to display the nice code look with ImGuiColorTextEdit.

I did a correction that will display the code block as pure text (with a monospace font), when inside the node editor.

See this demo for inspiration:
https://github.com/pthom/imgui_bundle/blob/main/bindings/imgui_bundle/demos_python/sandbox/sandbox_node_md_code.py

[bgribble]

For anyone who comes across this ticket while looking at imgui_md and imgui_node_editor interactions:

• imgui_md wants to (unconfigurably) use the entire width of the window. You can modify this by putting the markdown render inside a table with a fixed column width.
• An HTML <div> in your markdown is not a block element! It acts more like a <span>. So you can use custom <div> class handling to implement inline markup
• For some reason, the div callback does not get called for open or close <div> tags that are at the start of a line. You can put an   before the <div> and the callback will be called.   renders to the empty string so it doesn't mess with layout.

[bgribble]

I did a correction that will display the code block as pure text (with a monospace font), when inside the node editor.

I did the same thing locally :) I just used a regex transformation on the markdown to implement it.

Sort of a bummer that the nice code editor won't work, but it's understandable. I am pretty happy with the results I am able to get now.

[pthom]

imgui_md wants to (unconfigurably) use the entire width of the window. You can modify this by putting the markdown render inside a table with a fixed column width.

You may also set this at startup

    # important: force the window content width to be the same as the node width
    add_ons_params.with_node_editor = True
    add_ons_params.with_node_editor_config = ed.Config()
    add_ons_params.with_node_editor_config.force_window_content_width_to_node_width 

In which case, imgui_md will use the width of the node (you may need to add other elements or a dummy to the node to set its width). And in this case imgui.separator(), input_text_multiline() and others will work in a node