-
-
Notifications
You must be signed in to change notification settings - Fork 504
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update Markdown elements even if invisible (e.g. inside tooltip or tab) #2803
Update Markdown elements even if invisible (e.g. inside tooltip or tab) #2803
Conversation
Mermaid diagrams work now. |
There is an annoying blinking during the update of the content if Mermaid diagram is shown. However, this bug is not so major, I think, and Markdown elements now are correctly shown in tooltips :) |
aa0a213
to
c73d85a
Compare
…ents to work inside tooltips. Signed-off-by: Alexander Zarubkin <alexander.zarubkin@toptal.com>
c73d85a
to
f7afcb6
Compare
I'm sorry, I force-pushed new fix - it appears to be a one-liner 😄 |
Wow, that's a nice solution! |
The following minimal example reproduces blinking for me: textarea = ui.textarea()
markdown = ui.markdown(extras=['fenced-code-blocks', 'tables', 'mermaid'])
markdown.bind_content_from(textarea, 'value') Now type the following into textarea:
You should see Mermaid diagram in Markdown. Now type something in textarea below that code block. You will see that markdown contents on each change will shortly blink with the code of the Mermaid diagram before being replaced with the diagram itself. |
I think I found a rather nice solution: Instead of calling the "update" method with an HTML payload, we can simply update the element and handle the "updated" lifecycle hook on the client to render Mermaid diagrams. I tested with the following snippet with ui.textarea() as textarea:
with ui.tooltip():
ui.markdown(extras=['fenced-code-blocks', 'mermaid']).bind_content_from(textarea, 'value')
ui.markdown(extras=['fenced-code-blocks', 'mermaid']).bind_content_from(textarea, 'value') as well as with the code from #278 (comment). All seems to work well. @me21 Would you like to try it out? |
@falkoschindler works nicely! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great! Thank you for your contribution, @me21! I think together we found a really nice solution to this rendering problem. 🙂
This is an attempt to fix #2779. It seems to make Markdown elements update correctly but breaks Mermaid diagrams in Markdown elements, not sure why.
Additional changes are welcome.