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);