fix copy-to-clipboard button on safari (fixes #2377)

nicegui/elements/code.py

@@ -3,7 +3,6 @@ import time
 from typing import Optional
 
 from ..element import Element
-from ..functions.javascript import run_javascript
 from .button import Button as button
 from .markdown import Markdown as markdown
 from .markdown import remove_indentation
@@ -27,16 +26,16 @@ class Code(Element):
 
         with self:
             self.markdown = markdown(f'```{language}\n{self.content}\n```').classes('overflow-auto')
-            self.copy_button = button(icon='content_copy', on_click=self.copy_to_clipboard) \
+            self.copy_button = 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')
+            self.copy_button._props['onclick'] = f'navigator.clipboard.writeText(`{self.content}`)'
 
         self._last_scroll: float = 0.0
         self.markdown.on('scroll', self._handle_scroll)
         timer(0.1, self._update_copy_button)
 
-    async def copy_to_clipboard(self) -> None:
-        """Copy the code to the clipboard."""
-        run_javascript('navigator.clipboard.writeText(`' + self.content + '`)')
+    async def show_checkmark(self) -> None:
+        """Show a checkmark icon for 3 seconds."""
         self.copy_button.props('icon=check')
         await asyncio.sleep(3.0)
         self.copy_button.props('icon=content_copy')

website/documentation/demo.py

@@ -37,13 +37,11 @@ def demo(f: Callable, *, lazy: bool = True, tab: Optional[Union[str, Callable]]
             code.append('ui.run()')
         full_code = isort.code('\n'.join(code), no_sections=True, lines_after_imports=1)
         with python_window(classes='w-full max-w-[44rem]'):
-            def copy_code():
-                ui.run_javascript('navigator.clipboard.writeText(`' + full_code + '`)')
-                ui.notify('Copied to clipboard', type='positive', color='primary')
             ui.markdown(f'````python\n{full_code}\n````')
-            ui.icon('content_copy', size='xs') \
+            icon = ui.icon('content_copy', size='xs') \
                 .classes('absolute right-2 top-10 opacity-10 hover:opacity-80 cursor-pointer') \
-                .on('click', copy_code, [])
+                .on('click', lambda: ui.notify('Copied to clipboard', type='positive', color='primary'), [])
+            icon._props['onclick'] = f'navigator.clipboard.writeText(`{full_code}`)'  # pylint: disable=protected-access
         with browser_window(title=tab,
                             classes='w-full max-w-[44rem] min-[1500px]:max-w-[20rem] min-h-[10rem] browser-window') as window:
             if lazy: