diff --git a/.changeset/copy-chat-raw-markdown.md b/.changeset/copy-chat-raw-markdown.md new file mode 100644 index 0000000..827cda9 --- /dev/null +++ b/.changeset/copy-chat-raw-markdown.md @@ -0,0 +1,5 @@ +--- +"@jmfederico/pi-web": patch +--- + +Copying selected rendered chat markdown now places the raw markdown source on the clipboard. diff --git a/src/client/src/components/FormattedText.ts b/src/client/src/components/FormattedText.ts index 259204b..1369307 100644 --- a/src/client/src/components/FormattedText.ts +++ b/src/client/src/components/FormattedText.ts @@ -9,7 +9,7 @@ export class FormattedText extends LitElement { @property() text = ""; override render() { - return html`
${unsafeHTML(toSafeMarkdownHtml(this.text))}
`; + return html`
${unsafeHTML(toSafeMarkdownHtml(this.text))}
`; } override updated(): void { @@ -48,6 +48,13 @@ export class FormattedText extends LitElement { void this.copyCode(code.textContent, button); }; + private readonly onFormattedCopy = (event: ClipboardEvent): void => { + if (event.clipboardData === null || !hasSelectedText(currentSelection(this))) return; + event.clipboardData.setData("text/plain", this.text); + event.preventDefault(); + event.stopPropagation(); + }; + private async copyCode(text: string, button: HTMLButtonElement): Promise { const ok = await writeClipboard(text); this.setCopyButtonState(button, ok ? "copied" : "failed"); @@ -67,6 +74,20 @@ export class FormattedText extends LitElement { static override styles = formattedTextStyles; } +function currentSelection(element: Element): Selection | null { + const root = element.getRootNode(); + if (typeof ShadowRoot !== "undefined" && root instanceof ShadowRoot && hasRootSelection(root)) return root.getSelection(); + return element.ownerDocument.getSelection(); +} + +function hasRootSelection(root: Node): root is Node & { getSelection: () => Selection | null } { + return "getSelection" in root && typeof root.getSelection === "function"; +} + +function hasSelectedText(selection: Selection | null): boolean { + return selection !== null && !selection.isCollapsed && selection.toString() !== ""; +} + async function writeClipboard(text: string): Promise { try { await navigator.clipboard.writeText(text);