Emoji support in profile (#3514)

* Emoji in profile

* Add emojis to fields

src/client/app/common/views/components/autocomplete.vue

@@ -3,7 +3,9 @@
 	<ol class="users" ref="suggests" v-if="users.length > 0">
 		<li v-for="user in users" @click="complete(type, user)" @keydown="onKeydown" tabindex="-1">
 			<img class="avatar" :src="user.avatarUrl" alt=""/>
-			<span class="name">{{ user | userName }}</span>
+			<span class="name">
+				<misskey-flavored-markdown :text="user.name || user.username" :shouldBreak="false" :plainText="true" :custom-emojis="user.emojis"/>
+			</span>
 			<span class="username">@{{ user | acct }}</span>
 		</li>
 	</ol>

src/client/app/common/views/components/emoji.vue

@@ -1,5 +1,5 @@
 <template>
-<img v-if="customEmoji" class="fvgwvorwhxigeolkkrcderjzcawqrscl custom" :src="url" :alt="alt" :title="alt"/>
+<img v-if="customEmoji" class="fvgwvorwhxigeolkkrcderjzcawqrscl custom" :class="{ normal: normal }" :src="url" :alt="alt" :title="alt"/>
 <img v-else-if="char && !useOsDefaultEmojis" class="fvgwvorwhxigeolkkrcderjzcawqrscl" :src="url" :alt="alt" :title="alt"/>
 <span v-else-if="char && useOsDefaultEmojis">{{ char }}</span>
 <span v-else>:{{ name }}:</span>
@@ -20,6 +20,11 @@ export default Vue.extend({
 			type: String,
 			required: false
 		},
+		normal: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
 		customEmojis: {
 			required: false,
 			default: () => []
@@ -83,4 +88,11 @@ export default Vue.extend({
 		&:hover
 			transform scale(1.2)
 
+		&.normal
+			height 1.25em
+			vertical-align -0.25em
+
+			&:hover
+				transform none
+
 </style>

src/client/app/common/views/components/mfm.ts

@@ -49,6 +49,10 @@ export default Vue.component('misskey-flavored-markdown', {
 			type: Boolean,
 			default: true
 		},
+		plainText: {
+			type: Boolean,
+			default: false
+		},
 		author: {
 			type: Object,
 			default: null
@@ -69,7 +73,7 @@ export default Vue.component('misskey-flavored-markdown', {
 
 		if (this.ast == null) {
 			// Parse text to ast
-			ast = parse(this.text);
+			ast = parse(this.text, this.plainText);
 		} else {
 			ast = this.ast as Node[];
 		}
@@ -254,7 +258,8 @@ export default Vue.component('misskey-flavored-markdown', {
 							name: token.props.name
 						},
 						props: {
-							customEmojis: this.customEmojis || customEmojis
+							customEmojis: this.customEmojis || customEmojis,
+							normal: this.plainText
 						}
 					})];
 				}

src/client/app/common/views/components/note-header.vue

@@ -1,7 +1,9 @@
 <template>
 <header class="bvonvjxbwzaiskogyhbwgyxvcgserpmu">
 	<mk-avatar class="avatar" :user="note.user" v-if="$store.state.device.postStyle == 'smart'"/>
-	<router-link class="name" :to="note.user | userPage" v-user-preview="note.user.id">{{ note.user | userName }}</router-link>
+	<router-link class="name" :to="note.user | userPage" v-user-preview="note.user.id">
+		<misskey-flavored-markdown :text="note.user.name || note.user.username" :shouldBreak="false" :plainText="true" :custom-emojis="note.user.emojis"/>
+	</router-link>
 	<span class="is-admin" v-if="note.user.isAdmin">admin</span>
 	<span class="is-bot" v-if="note.user.isBot">bot</span>
 	<span class="is-cat" v-if="note.user.isCat">cat</span>

src/client/app/common/views/components/renote.vue

@@ -3,7 +3,9 @@
 	<mk-avatar class="avatar" :user="note.user"/>
 	<fa icon="retweet"/>
 	<i18n path="@.renoted-by" tag="span">
-		<router-link class="name" :to="note.user | userPage" v-user-preview="note.userId" place="user">{{ note.user | userName }}</router-link>
+		<router-link class="name" :to="note.user | userPage" v-user-preview="note.userId" place="user">
+				<misskey-flavored-markdown :text="note.user.name || note.user.username" :shouldBreak="false" :plainText="true" :custom-emojis="note.user.emojis"/>
+		</router-link>
 	</i18n>
 	<div class="info">
 		<span class="mobile" v-if="note.viaMobile"><fa icon="mobile-alt"/></span>

src/client/app/common/views/components/welcome-timeline.vue

@@ -5,7 +5,9 @@
 			<mk-avatar class="avatar" :user="note.user" target="_blank"/>
 			<div class="body">
 				<header>
-					<router-link class="name" :to="note.user | userPage" v-user-preview="note.user.id">{{ note.user | userName }}</router-link>
+					<router-link class="name" :to="note.user | userPage" v-user-preview="note.user.id">
+						<misskey-flavored-markdown :text="note.user.name || note.user.username" :shouldBreak="false" :plainText="true" :custom-emojis="note.user.emojis"/>
+					</router-link>
 					<span class="username">@{{ note.user | acct }}</span>
 					<div class="info">
 						<router-link class="created-at" :to="note | notePage">

src/client/app/common/views/pages/follow.vue

@@ -6,10 +6,12 @@
 		<div class="banner" :style="bannerStyle"></div>
 		<mk-avatar class="avatar" :user="user" :disable-preview="true"/>
 		<div class="body">
-			<router-link :to="user | userPage" class="name">{{ user | userName }}</router-link>
+			<router-link :to="user | userPage" class="name">
+				<misskey-flavored-markdown :text="user.name || user.username" :shouldBreak="false" :plainText="true" :custom-emojis="user.emojis"/>
+			</router-link>
 			<span class="username">@{{ user | acct }}</span>
 			<div class="description">
-				<misskey-flavored-markdown v-if="user.description" :text="user.description" :author="user" :i="$store.state.i"/>
+				<misskey-flavored-markdown v-if="user.description" :text="user.description" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/>
 			</div>
 		</div>
 	</main>