customizable native markdown component

[yihuang]

I'm not experienced in nicegui and frontend in general, start a mini project recently to write a llm chat gui with nicegui (https://github.com/yihuang/nicechat), it works very good so far.

But now I try to dig deeper, I find myself trying to customize the features in markdown, for example adding some tools to the code-blocks, I have to patch markdown2 library to inject raw html/javascript snippets, which is quite ugly (code), and hard to implement more advanced features.

For such use cases, I feel that we need a nicegui native markdown component that do the rendering with nicegui itself, and implemented in a customizable. WDYT?

[evnchn]

https://nicegui.io/documentation/markdown#markdown_element

extras: list of markdown2 extensions (default: ['fenced-code-blocks', 'tables'])

Have you tried it already?

---

If you want to further customize the functionalities, check:

nicegui/nicegui/elements/markdown.py

Line 17 in 4855d10

class Markdown(ContentElement, component='markdown.js', default_classes='nicegui-markdown'):

and the accompanying https://github.com/zauberzeug/nicegui/blob/4855d1023131f7feae9b074404dd391fcfba29cb/nicegui/elements/markdown.js

[yihuang]

that's what I'm trying to do, use custom markdown extensions to emit extra html/javascript snippets, but there are a few issues:

• we are dropped into the primitive land with raw html/javascripts snippets, the code is ugly, especially with event handlings and server communications, I think with nicegui the app state is at server side, if you want to access anything from raw javascript, you need to call some server api somehow, I'm not sure about that yet.
• the emitted html might break the other parts of markdown2, markdown2 basically use a bunch of regex to transform the text internally, very error prune.

[evnchn]

if you want to access anything from javascript, you need to call some server api somehow

It's ui.run_javascript which is basically client.run_javascript under the hood, getting client from context.client. Would be self.client for a custom element.

Do a code search to see how it's used, or check out:

nicegui/nicegui/elements/code.py

Line 38 in 4855d10

self.client.on_connect(lambda: self.client.run_javascript(f'''