Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Add copy to clipboard button when hovered over markdown code block. #2025

Closed
mturoci opened this issue Jun 19, 2023 · 3 comments · Fixed by #2120
Closed

Add copy to clipboard button when hovered over markdown code block. #2025

mturoci opened this issue Jun 19, 2023 · 3 comments · Fixed by #2120
Assignees
@marek-mihok
Labels
feature Feature request ui Related to UI

Comments

@mturoci
Copy link
Collaborator

mturoci commented Jun 19, 2023

Extract the clipboard button component from our existing copyable_text widget and reuse it within markdown. The markdown copy button should only be visible on hover over the code block.
@mturoci mturoci added ui Related to UI feature Feature request labels Jun 19, 2023
@Pratyakshshiv
Copy link

i would love to work on this can you please assign @mturoci ?

@mturoci
Copy link
Collaborator Author

mturoci commented Jun 22, 2023

@Pratyakshshiv I think it would be better to handle 1 issue at a time as I already assigned #1817. Anyway, you do not need to ask for being assigned first, you can create PR directly.

@Pratyakshshiv
Copy link

@Pratyakshshiv I think it would be better to handle 1 issue at a time as I already assigned #1817. Anyway, you do not need to ask for being assigned first, you can create PR directly.

ok i will work on #1817 first

marek-mihok added a commit that referenced this issue Jul 31, 2023
@marek-mihok
feat: initial implementation #2025
376383f
marek-mihok added a commit that referenced this issue Aug 16, 2023
@marek-mihok
chore: apply top-right position based on anchor component ref #2025
94e5e2a
marek-mihok added a commit that referenced this issue Aug 17, 2023
@marek-mihok
chore: use text input as anchor element, refactor and cleanup, ref wo…
fff09ab 
…rking only on second render #2025
marek-mihok added a commit that referenced this issue Aug 17, 2023
@marek-mihok
chore: re-render copybutton after textfield ref is mounted #2025
825e26d
marek-mihok added a commit that referenced this issue Aug 17, 2023
@marek-mihok
chore: fix saving text to clipboard for input, show button in markdow…
fe85040 
…n codeblocks #2025
marek-mihok added a commit that referenced this issue Aug 17, 2023
@marek-mihok
chore: update unit tests, multiline test failing #2025
e8c2128
marek-mihok added a commit that referenced this issue Aug 18, 2023
@marek-mihok
chore: update button position when anchor element position changes #2025
4677eac
marek-mihok added a commit that referenced this issue Aug 18, 2023
@marek-mihok
chore: use css only to position button #2025
f5fa3fc
marek-mihok added a commit that referenced this issue Aug 18, 2023
@marek-mihok
chore: use css only to show/hide button #2025
400bc0e
marek-mihok added a commit that referenced this issue Aug 18, 2023
@marek-mihok
chore: implement portal inside button component #2025
1827e7c
marek-mihok added a commit that referenced this issue Aug 18, 2023
@marek-mihok
chore: offset adjustment #2025
f59068d
marek-mihok added a commit that referenced this issue Aug 18, 2023
@marek-mihok
add TODO #2025
b19eace
marek-mihok added a commit that referenced this issue Aug 20, 2023
@marek-mihok
fix: show input button when label is not defined #2025
d124000
marek-mihok added a commit that referenced this issue Aug 20, 2023
@marek-mihok
chore: Prevent multiple portals from being created #2025
062e59c
marek-mihok added a commit that referenced this issue Aug 20, 2023
@marek-mihok
chore: minor refactor #2025
e388179
marek-mihok added a commit that referenced this issue Aug 24, 2023
@marek-mihok
chore: use event listeners to show/hide button because classList is u…
d3d83fd 
…nstable #2025
marek-mihok added a commit that referenced this issue Aug 28, 2023
@marek-mihok
fix: do not create new element with every render #2025
6143f7b
@marek-mihok marek-mihok mentioned this issue Aug 28, 2023
Merged
5 tasks
marek-mihok added a commit that referenced this issue Aug 28, 2023
@marek-mihok
chore: use unique id for markdown codeblock #2025
6094402
marek-mihok added a commit that referenced this issue Aug 28, 2023
@marek-mihok
chore: do not use portal for markdown copy button #2025
af34fb7
marek-mihok added a commit that referenced this issue Aug 30, 2023
@marek-mihok
feat: initial implementation #2025
bca8ef1
marek-mihok added a commit that referenced this issue Aug 30, 2023
@marek-mihok
chore: apply top-right position based on anchor component ref #2025
0e4e1e6
marek-mihok added a commit that referenced this issue Aug 30, 2023
@marek-mihok
chore: use text input as anchor element, refactor and cleanup, ref wo…
1d0f007 
…rking only on second render #2025
marek-mihok added a commit that referenced this issue Aug 30, 2023
@marek-mihok
chore: re-render copybutton after textfield ref is mounted #2025
77de049
mturoci pushed a commit that referenced this issue Sep 6, 2023
@marek-mihok @mturoci
feat: initial implementation #2025
5fd12a1
mturoci pushed a commit that referenced this issue Sep 6, 2023
@marek-mihok @mturoci
chore: apply top-right position based on anchor component ref #2025
be5cf4f
mturoci pushed a commit that referenced this issue Sep 6, 2023
@marek-mihok @mturoci
chore: use text input as anchor element, refactor and cleanup, ref wo…
ee24e24 
…rking only on second render #2025
mturoci pushed a commit that referenced this issue Sep 6, 2023
@marek-mihok @mturoci
chore: re-render copybutton after textfield ref is mounted #2025
15cdfe8
mturoci pushed a commit that referenced this issue Sep 6, 2023
@marek-mihok @mturoci
chore: fix saving text to clipboard for input, show button in markdow…
798057f 
…n codeblocks #2025
mturoci pushed a commit that referenced this issue Sep 6, 2023
@marek-mihok @mturoci
chore: update unit tests, multiline test failing #2025
d5b27a0
mturoci pushed a commit that referenced this issue Sep 6, 2023
@marek-mihok @mturoci
chore: update button position when anchor element position changes #2025
6b97f0c
mturoci pushed a commit that referenced this issue Sep 6, 2023
@marek-mihok @mturoci
chore: use css only to position button #2025
71c54e7
mturoci pushed a commit that referenced this issue Sep 6, 2023
@marek-mihok @mturoci
chore: use css only to show/hide button #2025
ab32afb
mturoci pushed a commit that referenced this issue Sep 6, 2023
@marek-mihok @mturoci
chore: implement portal inside button component #2025
3f00a90
mturoci pushed a commit that referenced this issue Sep 6, 2023
@marek-mihok @mturoci
chore: offset adjustment #2025
768ee01
mturoci pushed a commit that referenced this issue Sep 6, 2023
@marek-mihok @mturoci
add TODO #2025
f5f656d
mturoci pushed a commit that referenced this issue Sep 6, 2023
@marek-mihok @mturoci
fix: show input button when label is not defined #2025
ad785cd
mturoci pushed a commit that referenced this issue Sep 6, 2023
@marek-mihok @mturoci
chore: Prevent multiple portals from being created #2025
9582558
mturoci pushed a commit that referenced this issue Sep 6, 2023
@marek-mihok @mturoci
chore: minor refactor #2025
bfa5afd
mturoci pushed a commit that referenced this issue Sep 6, 2023
@marek-mihok @mturoci
chore: use event listeners to show/hide button because classList is u…
ca319bc 
…nstable #2025
mturoci pushed a commit that referenced this issue Sep 6, 2023
@marek-mihok @mturoci
fix: do not create new element with every render #2025
8d5676c
mturoci pushed a commit that referenced this issue Sep 6, 2023
@marek-mihok @mturoci
chore: modify solution to work with rebased version #2025
fecbc74
mturoci pushed a commit that referenced this issue Sep 6, 2023
@marek-mihok @mturoci
chore: remove button render tests, improve button visibility on dark …
9955eae 
…backgrounds #2025
mturoci pushed a commit that referenced this issue Sep 6, 2023
@marek-mihok @mturoci
chore: re-implement without portals #2025
d26a5ef
mturoci pushed a commit that referenced this issue Sep 6, 2023
@marek-mihok @mturoci
chore: show copy button if label is not defined #2025
76120e9
mturoci pushed a commit that referenced this issue Sep 6, 2023
@marek-mihok @mturoci
chore: remove unnecessary constants #2025
e3768cf
mturoci pushed a commit that referenced this issue Sep 6, 2023
@marek-mihok @mturoci
chore: re-implement without anchorElement, refactor #2025
8f35825
mturoci pushed a commit that referenced this issue Sep 6, 2023
@marek-mihok @mturoci
chore: use appendChild instead of insertAdjacentElement, refactor #2025
83d5b5c
mturoci pushed a commit that referenced this issue Sep 6, 2023
@marek-mihok @mturoci
chore: remove failing test cases due to hover pseudo selector not wor…
6e2c9ca 
…king with jsdom #2025
mturoci added a commit that referenced this issue Sep 6, 2023
@mturoci
fix: Center copy btn icon, make code cleaner. #2025
542fc88
mturoci added a commit that referenced this issue Sep 6, 2023
@marek-mihok @mturoci
feat: Add copy to clipboard button to markdown code block #2025 (#2120)
54c0553 
Co-authored-by: Martin Turoci <martin.turoci@h2o.ai>
@marek-mihok marek-mihok mentioned this issue Sep 6, 2023
Merged
5 tasks
marek-mihok added a commit that referenced this issue Jan 15, 2024
@marek-mihok @mturoci
feat: Add copy to clipboard button to markdown code block #2025 (#2120)
138123a 
Co-authored-by: Martin Turoci <martin.turoci@h2o.ai>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@marek-mihok marek-mihok

Labels
feature Feature request ui Related to UI
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: Add copy to clipboard button to markdown code block #2025 h2oai/wave
3 participants
@marek-mihok @mturoci @Pratyakshshiv