feat: auto-clickable http(s) links in the editor#78
Merged
Conversation
Paint bare `http(s)://` URLs as clickable links via a ProseMirror inline decoration, mirroring the tag-badge extension. The decoration is non-destructive: it never rewrites the document, so a bare URL stays a bare URL in the Markdown output (GFM auto-links these anyway) instead of becoming `[url](url)`. - `detectLinks()` matches `http(s)://…` then trims trailing sentence punctuation and unbalanced closing brackets, so prose like `see https://example.com.` and `(https://example.com)` link cleanly while balanced parens in the URL itself are preserved. - Existing link marks, inline `code`, and code blocks are skipped so URLs are never double-linked or linkified inside code. - Links open in a new tab on Cmd/Ctrl+click (a plain click still edits the text); pass `{ openOnPlainClick: true }` to open on a plain click instead. Wired into the demo editor and exported from the package. Adds unit tests for the pure `detectLinks()` matcher. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Deploying blocks with
|
| Latest commit: |
38a149c
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://e5f22832.blocks-cno.pages.dev |
| Branch Preview URL: | https://feat-auto-clickable-links.blocks-cno.pages.dev |
offtop
requested changes
Jul 3, 2026
offtop
approved these changes
Jul 3, 2026
| href: string; | ||
| } | ||
|
|
||
| function countChar(text: string, char: string): number { |
There was a problem hiding this comment.
this will work with non char values but with strings as well
function countChar(text: string, stringToCount: string) {
return text.split(stringToCount).length - 1;
}> 'test'.split("t").length - 1;
2
> 'test'.split("te").length - 1;
1
> 'testtest'.split("te").length - 1;
2
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Bare
http(s)://URLs typed (or pasted) into the editor are now painted as clickable links.How
A new
autoLinkExtension(src/editor/autoLink.ts) adds a ProseMirror inline decoration for every URL — built the same way as the existing@tagbadge feature, and for the same reason: it is non-destructive. It only decorates the text, never rewriting the document, so the Markdown round-trips unchanged (a bare URL stayshttps://example.com, not[https://example.com](https://example.com)— GFM auto-links bare URLs anyway).detectLinks()— pure, unit-tested matcher. Matcheshttp(s)://…, then trims trailing sentence punctuation and unbalanced closing brackets, sosee https://example.com.and(https://example.com)link cleanly while a real…/Foo_(bar)URL keeps its parentheses.code, and code blocks — URLs are never double-linked or linkified inside code.autoLinkExtension({ openOnPlainClick: true })to open on a plain click instead. Links open in a new tab withnoopener,noreferrer.Wired into the demo editor (
App.tsx) and exported from the package (autoLinkExtension,AutoLinkExtension,detectLinks,LinkMatch). Styling added instyles.css(light + dark), reusing the existing primary-blue tokens.Test plan
npx vitest run— 210 passed (17 newdetectLinkscases covering schemes, prose embedding, punctuation trimming, balanced vs. unbalanced parens, and negative cases)tsc -bcleannpm run buildclean🤖 Generated with Claude Code