Copy To Clipboard Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the sheet: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Copy as button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same CopyFields component and share the block's state, so a format picked in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

Yes: Copy writes the preview text to the clipboard with the browser's clipboard API, which needs a secure page (HTTPS or localhost) and, in some browsers, a press as its trigger, which this is. If the browser refuses, the button says it couldn't copy, an alert line asks you to select the preview and copy it yourself, and a polite message says so. After a success the button shows Copied and the number of rows for a few seconds, then returns to its label; nothing closes by itself.

Pure functions over the typed rows, one per format. csvOf quotes a field when it holds a comma, a quote or a line break, doubles the quotes inside it and puts an apostrophe in front of a field that starts with a formula sign, so a spreadsheet never runs it. markdownOf writes a pipe table with a separator row and right-aligned numbers. jsonOf writes an array of objects with named fields. textOf joins cells with tabs. Swap ROWS and COLUMNS for your selection and add formats as entries in CHOICES.

A Markdown table needs its header row to be a table, and JSON names every field in every object, so there is no header to leave out. For those two the checkbox is ticked, disabled and says "always, here". For CSV and Plain text it is yours to choose, and the preview and the line count change with it.

Yes. The formats are one radio group, so the arrow keys move between them, the checkbox is a real one, and the preview is a focusable region you can scroll with the arrow keys. A polite message reports each copy, and the dialog has its own copy of that message while it is open. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. Focus returns to Copy as when the dialog closes.

The copy shown on load docks to the foot of the page as a bottom sheet, its actions pinned at the bottom with the copy button on top, and the formats in two rows, the checkbox and the preview scrolling above. The preview scrolls sideways inside its box rather than wrapping. The real dialog keeps the Dialog's own phone layout: a sheet stuck to the bottom of the screen.