copying the content of ui.code after set_content yields to the initial content

[jlmanaloto]

First Check

• I added a very descriptive title here.
• This is not a Q&A. I am sure something is wrong with NiceGUI or its documentation.
• I used the GitHub search to find a similar issue and came up empty.

Example Code

from nicegui import ui

c = ui.code('''
    from nicegui import ui

    ui.label('Code inception!')

    ui.run()
''').classes('w-full')
c.set_content('new content')
c.update()

ui.run()

Description

Copying the content of ui.code always gives the initial content even after using set_content() and update(). Given the example code, I would expect to get "new content" when pasting to a text editor but instead, I still get the code block from the initialized value of ui.code content.

NiceGUI Version

2.24.2

Python Version

Python 3.11.9

Browser

Chrome

Operating System

Windows

Additional Context

No response

[python-and-novella]

The truth is, f-string in js_handler is only pure string.
So, clicking copy button just copies the current content:

from nicegui import ui
import json
c = ui.code('''
    from nicegui import ui

    ui.label('Code inception!')

    ui.run()
''').classes('w-full')

ui.button('copy before update').on('click', js_handler=f'() => navigator.clipboard.writeText({json.dumps(obj=c.content)})')

c.set_content('new content')
c.update()

ui.button('copy after update').on('click', js_handler=f'() => navigator.clipboard.writeText({json.dumps(obj=c.content)})')
ui.run()

[python-and-novella]

I make a little patch:

from nicegui import ui
import json
c = ui.code('''
    from nicegui import ui

    ui.label('Code inception!')

    ui.run()
''').classes('w-full')

c.set_content('new content')
c.update()

with c:
    c.copy_button.delete()
    c.copy_button = ui.button(icon='content_copy', on_click=c.show_checkmark) \
                .props('round flat size=sm').classes('absolute right-2 top-2 opacity-20 hover:opacity-80') \
                .on('click', js_handler=f'() => navigator.clipboard.writeText({json.dumps(c.content)})')

ui.run()

[python-and-novella]

Or try this:

from nicegui import ui

import json
class Code(ui.code):
    def _handle_content_change(self, content):
        if not hasattr(self,'copy_button'): return
        with self:
            self.copy_button.delete()
            self.copy_button = ui.button(icon='content_copy', on_click=self.show_checkmark) \
                .props('round flat size=sm').classes('absolute right-2 top-2 opacity-20 hover:opacity-80') \
                .on('click', js_handler=f'() => navigator.clipboard.writeText({json.dumps(self.content)})')
ui.code = Code

c = ui.code('''
    from nicegui import ui

    ui.label('Code inception!')

    ui.run()
''').classes('w-full')

c.set_content('new content')
c.update()

ui.run()

[jlmanaloto]

Appreciate the response! As checked, this works.

I can see from code.py element has this:

    def _handle_content_change(self, content: str) -> None:
        pass  # handled by markdown element

Prolly better to implement it under that empty method instead of having this workaround?
Anyway closing this issue.

[python-and-novella]

I think you should keep this issue open.
I just provide a temporary patch, it is not a solution.
Maybe maintainer will fix it elegantly.

[falkoschindler]

Thanks for reporting this bug, @jlmanaloto!
Although having a workaround is better than nothing, we should fix it in the library. Therefore I'm re-opening the issue.
We won't have time to look into it before the upcoming 3.0 release. But feel free to propose a pull request and we'll review it as soon as possible.

[python-and-novella]

@falkoschindler If you accept my temporary patch, I will create PR. Or it is not a good way to solve problem, I am happy to wait someone do this.

[falkoschindler]

@python-and-novella I'm thinking about a way that doesn't recreate the whole button element again and again: Instead we could put the content into a new prop

props: {
  content: String,
},

which is updated on content change:

def __init__(...):
    ...
    self._props['content'] = content
    ...

def _handle_content_change(self, content: str) -> None:
    self._props['content'] = content

Then the click handler could access this prop:

.on('click', js_handler=f'() => navigator.clipboard.writeText(getElement("{self.id}").content)')

[python-and-novella]

All right, I'm not js expert, Your idea is better. I will wait for you or someone else.