Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

[Feature Request] Copy selection as rich text (for Outlook and Slack)

Open
  • Is something wrong?
#1,972 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
48/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Active
Tech stack
typescript
Domain
developer-experience, frontend

Research direction

Start by reading packages/ui/utils/clipboard.ts and packages/ui/utils/selectionActions.ts, then trace how AnnotationToolbar.tsx exposes selection actions and how the #1174 fallback handles copying. Define the rich-text output and cleanup rules from the issue, including plain-text fallback and HTTP behavior. Done means the toolbar action and shortcut copy formatted HTML plus plain text, with cleaned markup; the Slack-specific action is conditional on HTML pasting poorly into Slack.

Written by the indexing model from the issue text.

Description

enhancement

Problem

I review plans and documents in Plannotator, then share parts of them by email (Outlook) and in chat (Slack). Every copy action in the UI copies plain text only. The selection toolbar's copy button, Vim Y and "Copy as markdown" on tables all go through copyTextToClipboard() in packages/ui/utils/clipboard.ts, which calls navigator.clipboard.writeText(). When I paste, I lose headings, bold, links, lists and code formatting.

Today I paste the text into an external converter first:

Their output is what I want from a "Copy for Outlook" or "Copy for Slack" action, without leaving Plannotator.

Proposal

Add a built-in Copy as rich text action to the selection toolbar, with a keyboard shortcut. It writes one ClipboardItem with two formats:

  • text/html: the rendered selection. Outlook, Word, Google Docs and other apps that accept rich text keep the formatting.
  • text/plain: the current plain text, as the fallback.

If the HTML copy does not paste well into Slack, add a second action, Copy for Slack. It writes Slack markup as plain text (*bold*, _italic_, <url|text>, • bullets, code blocks), like Slackdown does.

Alternative considered

Expose the existing selectionActions prop (packages/ui/utils/selectionActions.ts, used in AnnotationToolbar.tsx) through config, so that users can add their own copy actions. #1572 made that seam opt-in for host apps only ("Plannotator as the provider of these capabilities, not a product that uses them"), so a built-in action seems a better fit. If configurable actions are acceptable, the seam already provides the button, the dropdown and the selection context.

Notes

  • Clean up the copied HTML. Remove annotation highlights, data-block-id attributes, toolbar elements and theme colors, so that dark-theme colors do not appear in an email.
  • ClipboardItem needs a secure context. The fallback added in #1174 could also call clipboardData.setData('text/html', ...) in its copy handler, so that the action still works over plain HTTP on remote hosts.

Version: plannotator 0.28.22 (Pi extension). I checked the code paths above against main

Dominant language
TypeScript
Stars
8.7k
Forks
649
Avg merge
4h 10m
Merged PRs (30d)
429

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from backnotprop/plannotator

All issues in backnotprop/plannotator

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.