Fix text copy inserting line breaks between characters

[Copilot]

Copying text from TextMorph produced line breaks between each character. This occurs because browsers serialize inline-block elements (used for per-character animation) with newlines when building clipboard data.

Changes

• Added copy event handler that intercepts clipboard operations and provides clean text content from the selection range
• Respects partial selections by cloning range contents and extracting textContent
• Event lifecycle managed in constructor/destroy

Implementation

private handleCopy(e: ClipboardEvent) {
  const selection = window.getSelection();
  if (!selection || selection.rangeCount === 0) return;

  const range = selection.getRangeAt(0);
  if (this.element.contains(range.commonAncestorContainer)) {
    e.preventDefault();
    const container = document.createElement("div");
    container.appendChild(range.cloneContents());
    e.clipboardData?.setData("text/plain", container.textContent || "");
  }
}

Before: Copying "React" → R\ne\na\nc\nt
After: Copying "React" → React

Original prompt

fix text select+copy adding line breaks between letters in TextMorph

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
torph	Ready	Preview, Comment	Feb 3, 2026 8:19am