Supersedes #2499.
## Thinking Path
1. **Project context**: Paperclip uses a markdown editor
(`MarkdownEditor`) for document editing. Users expect to paste
markdown-formatted text from external sources (like code editors, other
documents) and have it render correctly.
2. **Problem identification**: When users paste plain text containing
markdown syntax (e.g., `# Heading`, `- list item`), the editor was
treating it as plain text, resulting in raw markdown syntax being
displayed rather than formatted content.
3. **Root cause**: The default browser paste behavior doesn't recognize
markdown syntax in plain text. The editor needed to intercept paste
events and detect when the clipboard content looks like markdown.
4. **Solution design**:
- Create a utility (`markdownPaste.ts`) to detect markdown patterns in
plain text
- Add a paste capture handler in `MarkdownEditor` that intercepts paste
events
- When markdown is detected, prevent default paste and use
`insertMarkdown` instead
- Handle edge cases (code blocks, file pastes, HTML content)
## What
- Added `ui/src/lib/markdownPaste.ts`: Utility to detect markdown
patterns and normalize line endings
- Added `ui/src/lib/markdownPaste.test.ts`: Test coverage for markdown
detection
- Modified `ui/src/components/MarkdownEditor.tsx`: Added paste capture
handler to intercept and handle markdown paste
## Why
Users frequently copy markdown content from various sources (GitHub,
documentation, notes) and expect it to render correctly when pasted into
the editor. Without this fix, users see raw markdown syntax (e.g., `#
Title` instead of a formatted heading), which degrades the editing
experience.
## How to Verify
1. Open any document in Paperclip
2. Copy markdown text from an external source (e.g., `# Heading\n\n-
Item 1\n- Item 2`)
3. Paste into the editor
4. **Expected**: The content should render as formatted markdown
(heading + bullet list), not as plain text with markdown syntax
### Test Coverage
```bash
cd ui
npm test -- markdownPaste.test.ts
```
All tests should pass, including:
- Windows line ending normalization (`\r\n` → `\n`)
- Old-Mac line ending normalization (`\r` → `\n`)
- Markdown block detection (headings, lists, code fences, etc.)
- Plain text rejection (non-markdown content)
## Risks
1. **False positives**: Plain text containing markdown-like characters
(e.g., a paragraph starting with `#` as a hashtag) may be incorrectly
treated as markdown. The detection uses a heuristic that requires
block-level markdown patterns, which reduces but doesn't eliminate this
risk.
2. **Removed focus guard**: The previous implementation used
`isFocusedRef` to prevent `onChange` from firing during programmatic
`setMarkdown` calls. This guard was removed as part of refactoring. The
assumption is that MDXEditor does not fire `onChange` during
`setMarkdown`, but this should be monitored for unexpected parent update
loops.
3. **Clipboard compatibility**: The paste handler specifically looks for
`text/plain` content and ignores `text/html` (to preserve existing HTML
paste behavior). This means pasting from rich text editors that provide
both HTML and plain text will continue to use the HTML path, which may
or may not be the desired behavior.
---------
Co-authored-by: 馨冉 <xinxincui239@gmail.com>
The portal-rendered mention dropdown could appear off-screen on mobile
devices. Clamp top/left to keep it within the viewport and cap width
to 100vw - 16px.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
The mention suggestion dropdown was getting clipped when typing at the
end of a long description inside modals/dialogs because parent containers
had overflow-y-auto. Render it via createPortal to document.body with
fixed positioning and z-index 9999 so it always appears above all UI.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
The previous fix (validateUrl on linkPlugin) only affected the link dialog,
not the markdown-to-Lexical import path. Lexical's LinkNode.sanitizeUrl()
converts agent:// and project:// URLs to about:blank because they aren't
in its allowlist. Override the prototype method to preserve these schemes
so mention chips render correctly.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
When dragging or pasting an image into a markdown editor field, the cursor
would end up right next to the image making it hard to continue typing.
Now inserts two newlines after the image so a new paragraph is ready.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
MarkdownEditor's plugins useMemo depended on imageUploadHandler, which
was a new arrow function on every parent render. This caused MDXEditor
to reinitialize plugins on each render, firing onChange, which updated
the overlay state in AgentConfigForm, triggering a parent re-render —
creating an infinite "Maximum update depth exceeded" loop.
Fix: use a stable ref for imageUploadHandler so plugins are only created
once (keyed on whether a handler exists, not its identity). Also use a
module-level empty object for env config fallback to avoid unnecessary
EnvVarEditor re-renders.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Rename all workspace packages from @paperclip/* to @paperclipai/* and
the CLI binary from `paperclip` to `paperclipai` in preparation for
npm publishing. Bump CLI version to 0.1.0 and add package metadata
(description, keywords, license, repository, files). Update all
imports, documentation, user-facing messages, and tests accordingly.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Fix project mention insertion to use markdown-level replacement instead
of DOM manipulation. Restructure project validator to accept an optional
workspace when creating a project.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add project mention system using project:// URI scheme with optional
color parameter. Mentions render as colored pill chips in markdown
bodies and the WYSIWYG editor. Autocomplete in editors shows both
agents and projects. Server extracts mentioned project IDs from issue
content and returns them in the issue detail response.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
After tab-completing a mention, the cursor was placed before the
completion instead of after it. The root cause: Lexical's DOM
reconciliation after document.execCommand("insertText") would lose
the browser-set cursor position. Added requestAnimationFrame-based
cursor repositioning that first tries the original text node, then
falls back to searching for the mention text in the DOM.
Also normalizes editor content padding for consistent mention dropdown
positioning.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Use a ref for mentionState so selectMention always reads the latest
value (prevents stale-closure "blink" on click/Enter/Tab)
- Add explicit space key handling to dismiss the popup immediately
- Move Escape handler outside filteredMentions check so it always works
- Sync mentionStateRef on all state transitions
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The old approach used document.execCommand("insertText") to directly
manipulate the contentEditable DOM, but MDXEditor (Lexical) reverted
these changes during reconciliation causing the "blink" bug.
Fix: work at the markdown string level instead — find the @query in
the markdown, replace it with @Name, and update via setMarkdown().
Also add an input event listener alongside selectionchange for more
reliable mention detection (fixes space-to-dismiss).
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Replaced plain textarea in CommentThread with MarkdownEditor
for rich markdown editing (no toolbar, compact styling)
- Added @-mention autocomplete to MarkdownEditor:
- Detects @ trigger while typing with cursor-positioned dropdown
- Arrow key navigation, Enter/Tab to select, Escape to dismiss
- Filters mentionable names as user types after @
- Added onSubmit prop to MarkdownEditor for Cmd/Ctrl+Enter support
- Agents from the company are passed as mentionable options
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Introduce MarkdownEditor built on @mdxeditor/editor with headings,
lists, links, quotes, image upload with drag-and-drop, and themed CSS
integration. Add asset image upload API (routes, service, storage) and
wire image upload into InlineEditor multiline mode, NewIssueDialog,
NewProjectDialog, GoalDetail, IssueDetail, and ProjectDetail
description fields. Tighten prompt template editor styling.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
