Improve URL Auto-Linking In Messages (#2240)
As a user, I’d like the app to autolink as many possible URL formats I write in messages as possible, e.g. - [x] URLs without protocol: `github.com` - [x] URLs with in different languages (Unicode): - [x] `https://zh.wikipedia.org/zh-hans/信号` - [x] `https://ru.wikipedia.org/wiki/Сигнал` - [x] URLs with single quotes: `https://www.example.com/this-couldn't-be-true` - [x] Messages with URLs right after special characters: `wink ;)https://www.youtube.com/watch?v=oHg5SJYRHA0` - [x] URLs with square brackets: `https://www.example.com/test.html?foo=bar&baz[qux]=quux` - [x] **Infrastructure:** Include TypeScript files in build. - [x] **Infrastructure:** Rename `ts/test` to `ts/styleguide`. - [x] **Infrastructure:** Decouple linting from testing. - [x] **Infrastructure:** Run all tests in CI. - [x] **Infrastructure:** Compile TypeScript on CI. ### Dependencies - Forked `link-text` to disable HTML escaping: It only has the minimum required dependencies: - `linkify-it`: Best-in-class link detection library with support for Unicode/IDN. Popular alternative: `linkifyjs`. Doesn’t handle Unicode in URLs. - ~~`escape-html`: Standalone dependency for escaping HTML.~~ - `uc.micro`: Standalone dependency of Unicode data files. ### Known Issues We don’t auto-link trailing exclamation points which in most cases would be expected to be part of the message body rather than the link. **Counterexample:** `https://en.wikipedia.org/wiki/Mother!`. N.B. GitHub doesn’t do this right either. Fixes #598.pull/1/head
Daniel Gasienica
7 years ago
committed by
GitHub
commit
3a05201501
@ -0,0 +1,9 @@
|
||||
declare namespace LinkText {
|
||||
type Attributes = {
|
||||
[key: string]: string;
|
||||
}
|
||||
}
|
||||
|
||||
declare function linkText(value: string, attributes: LinkText.Attributes): string;
|
||||
|
||||
export = linkText;
|
||||
@ -0,0 +1,12 @@
|
||||
import linkTextInternal from '../../js/modules/link_text';
|
||||
|
||||
|
||||
export const linkText = (value: string): string =>
|
||||
linkTextInternal(value, { target: '_blank' });
|
||||
|
||||
export const replaceLineBreaks = (value: string): string =>
|
||||
value.replace(/\r?\n/g, '<br>');
|
||||
|
||||
// NOTE: How can we use `lodash/fp` `compose` with type checking?
|
||||
export const render = (value: string): string =>
|
||||
replaceLineBreaks(linkText(value));
|
||||
@ -0,0 +1,96 @@
|
||||
import 'mocha';
|
||||
import { assert } from 'chai';
|
||||
|
||||
import * as HTML from '../../html';
|
||||
|
||||
interface Test {
|
||||
input: string;
|
||||
name: string;
|
||||
output?: string;
|
||||
outputHref?: string;
|
||||
outputLabel?: string;
|
||||
postText?: string;
|
||||
preText?: string;
|
||||
skipped?: boolean;
|
||||
}
|
||||
|
||||
describe('HTML', () => {
|
||||
describe('linkText', () => {
|
||||
const TESTS: Array<Test> = [
|
||||
{
|
||||
name: 'square brackets',
|
||||
input: 'https://www.example.com/test.html?foo=bar&baz[qux]=quux',
|
||||
output: 'https://www.example.com/test.html?foo=bar&baz[qux]=quux',
|
||||
},
|
||||
{
|
||||
name: 'Chinese characters',
|
||||
input: 'https://zh.wikipedia.org/zh-hans/信号',
|
||||
output: 'https://zh.wikipedia.org/zh-hans/信号',
|
||||
},
|
||||
{
|
||||
name: 'Cyrillic characters',
|
||||
input: 'https://ru.wikipedia.org/wiki/Сигнал',
|
||||
output: 'https://ru.wikipedia.org/wiki/Сигнал',
|
||||
},
|
||||
{
|
||||
skipped: true,
|
||||
name: 'trailing exclamation points',
|
||||
input: 'https://en.wikipedia.org/wiki/Mother!',
|
||||
output: 'https://en.wikipedia.org/wiki/Mother!',
|
||||
},
|
||||
{
|
||||
name: 'single quotes',
|
||||
input: "https://www.example.com/this-couldn't-be-true",
|
||||
output: "https://www.example.com/this-couldn't-be-true",
|
||||
},
|
||||
{
|
||||
name: 'special characters before URL begins',
|
||||
preText: 'wink ;)',
|
||||
input: 'https://www.youtube.com/watch?v=oHg5SJYRHA0',
|
||||
output: 'https://www.youtube.com/watch?v=oHg5SJYRHA0',
|
||||
},
|
||||
{
|
||||
name: 'URLs without protocols',
|
||||
input: 'github.com',
|
||||
outputHref: 'http://github.com',
|
||||
outputLabel: 'github.com',
|
||||
},
|
||||
];
|
||||
|
||||
TESTS.forEach((test) => {
|
||||
(test.skipped ? it.skip : it)(`should handle ${test.name}`, () => {
|
||||
const preText = test.preText || 'Hello ';
|
||||
const postText = test.postText || ' World!';
|
||||
const input: string = `${preText}${test.input}${postText}`;
|
||||
const expected: string = [
|
||||
preText,
|
||||
`<a href="${test.outputHref || test.output}" target="_blank">`,
|
||||
test.outputLabel || test.output,
|
||||
'</a>',
|
||||
postText,
|
||||
].join('');
|
||||
|
||||
const actual = HTML.linkText(input);
|
||||
assert.equal(actual, expected);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('render', () => {
|
||||
it('should preserve line breaks', () => {
|
||||
const input: string = 'Hello\n\n\nWorld!';
|
||||
const expected: string = 'Hello<br><br><br>World!';
|
||||
|
||||
const actual = HTML.render(input);
|
||||
assert.equal(actual, expected);
|
||||
});
|
||||
|
||||
it('should not escape HTML', () => {
|
||||
const input: string = "Hello\n<script>alert('evil');</script>World!";
|
||||
const expected: string = "Hello<br><script>alert('evil');</script>World!";
|
||||
|
||||
const actual = HTML.render(input);
|
||||
assert.equal(actual, expected);
|
||||
});
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue