diff --git a/src/common/text/elements/link.js b/src/common/text/elements/link.js new file mode 100644 index 000000000..03315bb2c --- /dev/null +++ b/src/common/text/elements/link.js @@ -0,0 +1,19 @@ +/** + * Link + */ + +module.exports = text => { + const match = text.match(/^\??\[(.+?)\]\((https?:\/\/[\w\/:%#@\$&\?!\(\)\[\]~\.=\+\-]+)\)/); + if (!match) return null; + const silent = text[0] == '?'; + const link = match[0]; + const title = match[1]; + const url = match[2]; + return { + type: 'link', + content: link, + title: title, + url: url, + silent: silent + }; +}; diff --git a/src/common/text/elements/url.js b/src/common/text/elements/url.js index f350b707a..1003aff9c 100644 --- a/src/common/text/elements/url.js +++ b/src/common/text/elements/url.js @@ -3,11 +3,12 @@ */ module.exports = text => { - const match = text.match(/^https?:\/\/[\w\/:%#@\$&\?!\(\)\[\]~\.=\+\-]+/); + const match = text.match(/^https?:\/\/[\w\/:%#@\$&\?!\(\)\[\]~\.=\+\-]+/); if (!match) return null; - const link = match[0]; + const url = match[0]; return { - type: 'link', - content: link + type: 'url', + content: url, + url: url }; }; diff --git a/src/common/text/index.js b/src/common/text/index.js index 442416903..ab1342230 100644 --- a/src/common/text/index.js +++ b/src/common/text/index.js @@ -5,6 +5,7 @@ const elements = [ require('./elements/bold'), require('./elements/url'), + require('./elements/link'), require('./elements/mention'), require('./elements/hashtag'), require('./elements/code'), diff --git a/src/web/app/common/scripts/text-compiler.js b/src/web/app/common/scripts/text-compiler.js index 2edffbb76..d4570ca92 100644 --- a/src/web/app/common/scripts/text-compiler.js +++ b/src/web/app/common/scripts/text-compiler.js @@ -21,8 +21,10 @@ module.exports = (tokens, shouldBreak) => { .replace(/(\r\n|\n|\r)/g, shouldBreak ? '
' : ' '); case 'bold': return '' + escape(token.bold) + ''; - case 'link': + case 'url': return ''; + case 'link': + return '' + escape(token.title) + ''; case 'mention': return '' + token.content + ''; case 'hashtag': // TODO diff --git a/src/web/app/desktop/tags/post-detail.tag b/src/web/app/desktop/tags/post-detail.tag index 69379317f..ca2d59f2e 100644 --- a/src/web/app/desktop/tags/post-detail.tag +++ b/src/web/app/desktop/tags/post-detail.tag @@ -233,6 +233,16 @@ font-size 1.5em color #717171 + .link + &:after + content "\f14c" + display inline-block + padding-left 2px + font-family FontAwesome + font-size .9em + font-weight 400 + font-style normal + > mk-url-preview margin-top 8px @@ -367,10 +377,10 @@ // URLをプレビュー tokens - .filter(t => t.type == 'link') + .filter(t => (t.type == 'url' || t.type == 'link') && !t.silent) .map(t => { riot.mount(this.refs.text.appendChild(document.createElement('mk-url-preview')), { - url: t.content + url: t.url }); }); } diff --git a/src/web/app/desktop/tags/timeline-post.tag b/src/web/app/desktop/tags/timeline-post.tag index 9a1dede2d..8929a8dd5 100644 --- a/src/web/app/desktop/tags/timeline-post.tag +++ b/src/web/app/desktop/tags/timeline-post.tag @@ -229,6 +229,16 @@ mk-url-preview margin-top 8px + .link + &:after + content "\f14c" + display inline-block + padding-left 2px + font-family FontAwesome + font-size .9em + font-weight 400 + font-style normal + > .reply margin-right 8px color #717171 @@ -344,10 +354,10 @@ // URLをプレビュー tokens - .filter(t => t.type == 'link') + .filter(t => (t.type == 'url' || t.type == 'link') && !t.silent) .map(t => { riot.mount(this.refs.text.appendChild(document.createElement('mk-url-preview')), { - url: t.content + url: t.url }); }); } diff --git a/src/web/app/mobile/tags/post-detail.tag b/src/web/app/mobile/tags/post-detail.tag index b32fe6173..f6f6bb62d 100644 --- a/src/web/app/mobile/tags/post-detail.tag +++ b/src/web/app/mobile/tags/post-detail.tag @@ -230,6 +230,16 @@ @media (min-width 500px) font-size 24px + .link + &:after + content "\f14c" + display inline-block + padding-left 2px + font-family FontAwesome + font-size .9em + font-weight 400 + font-style normal + > mk-url-preview margin-top 8px @@ -368,10 +378,10 @@ // URLをプレビュー tokens - .filter(t => t.type == 'link') + .filter(t => (t.type == 'url' || t.type == 'link') && !t.silent) .map(t => { riot.mount(this.refs.text.appendChild(document.createElement('mk-url-preview')), { - url: t.content + url: t.url }); }); } diff --git a/src/web/app/mobile/tags/timeline-post.tag b/src/web/app/mobile/tags/timeline-post.tag index 9da25b7b2..f706dc7de 100644 --- a/src/web/app/mobile/tags/timeline-post.tag +++ b/src/web/app/mobile/tags/timeline-post.tag @@ -209,6 +209,16 @@ > .dummy display none + .link + &:after + content "\f14c" + display inline-block + padding-left 2px + font-family FontAwesome + font-size .9em + font-weight 400 + font-style normal + mk-url-preview margin-top 8px @@ -318,10 +328,10 @@ // URLをプレビュー tokens - .filter(t => t.type == 'link') + .filter(t => (t.type == 'url' || t.type == 'link') && !t.silent) .map(t => { riot.mount(this.refs.text.appendChild(document.createElement('mk-url-preview')), { - url: t.content + url: t.url }); }); } diff --git a/test/text.js b/test/text.js index e2527cfe0..dd4521c83 100644 --- a/test/text.js +++ b/test/text.js @@ -49,11 +49,23 @@ describe('Text', () => { ], tokens); }); - it('link', () => { + it('url', () => { const tokens = analyze('https://himasaku.net'); - assert.deepEqual([ - { type: 'link', content: 'https://himasaku.net' } - ], tokens); + assert.deepEqual([{ + type: 'url', + content: 'https://himasaku.net', + url: 'https://himasaku.net' + }], tokens); + }); + + it('link', () => { + const tokens = analyze('[ひまさく](https://himasaku.net)'); + assert.deepEqual([{ + type: 'link', + content: '[ひまさく](https://himasaku.net)', + title: 'ひまさく', + url: 'https://himasaku.net' + }], tokens); }); it('emoji', () => {