kristianwindandClaude Opus 4.8
9d4a13c2c2
A task is plain text — the title is an input, the description a textarea — so a pasted URL just sat there as words. It is now caught at display time and shown as a link in the list and on the board, without the stored text ever being anything but plain text. The link cannot live inside the row's open-button (an <a> in a <button> is invalid), so the body is a container with the open action as an overlay behind it: plain text and the meta row still open the task, links are raised above and take their own click. Conservative about what counts — an explicit http(s):// or a bare www. host, not every dotted word. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
69 lines
2.3 KiB
JavaScript
69 lines
2.3 KiB
JavaScript
/**
|
|
* Splits a plain string into runs of text and the URLs inside it, so a task's
|
|
* title or description can be shown with the links clickable without the text
|
|
* ever having been anything but plain text on disk.
|
|
*
|
|
* A task is not rich text — the title is an `<input>` and the description a
|
|
* `<textarea>` — so there is nowhere to *store* a link. What there is instead is
|
|
* a person who pasted one in and expects to be able to click it. This finds the
|
|
* ones that are unambiguously links and leaves everything else exactly as typed.
|
|
*
|
|
* Deliberately conservative about what counts as a link: an explicit
|
|
* `http://`/`https://`, or a bare `www.` host. "example.com" on its own is not
|
|
* matched — most of those are sentences ("the file.txt is here"), and a false
|
|
* link in a title is worse than a real one left plain.
|
|
*/
|
|
|
|
// A trailing `.,;:!?` or a closing bracket is almost always punctuation the
|
|
// sentence owns rather than part of the URL, so the run stops before it. A `)`
|
|
// is only dropped when the URL holds no `(` of its own — Wikipedia-style links
|
|
// carry balanced parentheses that belong to the address.
|
|
const URL_RE = /\b(?:https?:\/\/|www\.)[^\s<>]+/gi;
|
|
|
|
function trimTrailing(url) {
|
|
let end = url.length;
|
|
while (end > 0) {
|
|
const ch = url[end - 1];
|
|
if ('.,;:!?"\''.includes(ch)) {
|
|
end--;
|
|
continue;
|
|
}
|
|
if (ch === ')' && !url.slice(0, end).includes('(')) {
|
|
end--;
|
|
continue;
|
|
}
|
|
break;
|
|
}
|
|
return url.slice(0, end);
|
|
}
|
|
|
|
/**
|
|
* @param {string} text
|
|
* @returns {Array<{ text: string, href?: string }>} runs in order; a run with an
|
|
* `href` is a link, one without is plain text. An empty or link-free string
|
|
* comes back as a single text run (possibly empty) so callers can render it the
|
|
* same way regardless.
|
|
*/
|
|
export function linkify(text) {
|
|
const value = text ?? '';
|
|
const runs = [];
|
|
let last = 0;
|
|
|
|
for (const match of value.matchAll(URL_RE)) {
|
|
const raw = trimTrailing(match[0]);
|
|
if (!raw) continue;
|
|
const start = match.index;
|
|
|
|
if (start > last) runs.push({ text: value.slice(last, start) });
|
|
|
|
const href = raw.startsWith('www.') ? `https://${raw}` : raw;
|
|
runs.push({ text: raw, href });
|
|
last = start + raw.length;
|
|
}
|
|
|
|
if (last < value.length) runs.push({ text: value.slice(last) });
|
|
if (!runs.length) runs.push({ text: value });
|
|
|
|
return runs;
|
|
}
|