非ASCIIなドメインへのメンションの修正 (#2903)

* punycodeでされたmentionのラベルをunicodeとして表示する

* post-form mentionはpunycodeにする

* mentionの表示はURLもAPI向けもunicodeにする

src/client/app/common/views/components/misskey-flavored-markdown.ts

@@ -116,16 +116,16 @@ export default Vue.component('misskey-flavored-markdown', {
 				case 'mention': {
 					return (createElement as any)('a', {
 						attrs: {
-							href: `${url}/@${getAcct(token)}`,
+							href: `${url}/${token.canonical}`,
 							target: '_blank',
 							dataIsMe: (this as any).i && getAcct((this as any).i) == getAcct(token),
 							style: 'color:var(--mfmMention);'
 						},
 						directives: [{
 							name: 'user-preview',
-							value: token.content
+							value: token.canonical
 						}]
-					}, token.content);
+					}, token.canonical);
 				}
 
 				case 'hashtag': {

src/client/app/common/views/directives/autocomplete.ts

@@ -1,6 +1,6 @@
 import * as getCaretCoordinates from 'textarea-caret';
 import MkAutocomplete from '../components/autocomplete.vue';
-import renderAcct from '../../../../../misc/acct/render';
+import { toASCII } from 'punycode';
 
 export default {
 	bind(el, binding, vn) {
@@ -188,7 +188,7 @@ class Autocomplete {
 			const trimmedBefore = before.substring(0, before.lastIndexOf('@'));
 			const after = source.substr(caret);
 
-			const acct = renderAcct(value);
+			const acct = value.host === null ? value.username : `${value.username}@${toASCII(value.host)}`;
 
 			// 挿入
 			this.text = `${trimmedBefore}@${acct} ${after}`;