fix(client): add sanitize-html to MkAutocomplete (#9433)

* fix(server): /emoji to accept `@.` host expression

* fix(client): use MkEmoji for custom emoji in MkEmojiPicker

* change convertToWebp

* nanka iroiro

* remove

* fix

* nearLosslessは労多くして益少なしなのでやめる

* do not cleanup tmp for development

* update sharp.js to 0.31.3

* mixed: true

* fix MkAutocomplete of 912791b3ab

* clean up

* https://github.com/misskey-dev/misskey/pull/9431#discussion_r1059215943

* edit mkautocomplete.vue use sanitize-html

* fix package.json

packages/frontend/package.json

@@ -45,6 +45,7 @@
 		"rndstr": "1.0.0",
 		"rollup": "3.9.0",
 		"s-age": "1.1.2",
+		"sanitize-html": "^2.8.1",
 		"sass": "1.57.1",
 		"seedrandom": "3.0.5",
 		"strict-event-emitter-types": "2.0.0",
@@ -73,6 +74,7 @@
 		"@types/katex": "0.14.0",
 		"@types/matter-js": "0.18.2",
 		"@types/punycode": "2.1.0",
+		"@types/sanitize-html": "^2.8.0",
 		"@types/seedrandom": "3.0.3",
 		"@types/throttle-debounce": "5.0.0",
 		"@types/tinycolor2": "1.4.3",

packages/frontend/src/components/MkAutocomplete.vue

@@ -21,7 +21,8 @@
 				<MkEmoji :emoji="emoji.emoji" />
 			</div>
 			<!-- eslint-disable-next-line vue/no-v-html -->
-			<span class="name" v-html="emoji.name.replace(q ?? '', `<b>${q}</b>`)"></span>
+			<span v-if="q" class="name" v-html="sanitizeHtml(emoji.name.replace(q, `<b>${q}</b>`))"></span>
+			<span v-else v-text="emoji.name"></span>
 			<span v-if="emoji.aliasOf" class="alias">({{ emoji.aliasOf }})</span>
 		</li>
 	</ol>
@@ -44,6 +45,7 @@ import { defaultStore } from '@/store';
 import { emojilist } from '@/scripts/emojilist';
 import { instance } from '@/instance';
 import { i18n } from '@/i18n';
+import * as sanitizeHtml from 'sanitize-html';
 
 type EmojiDef = {
 	emoji: string;
@@ -453,6 +455,7 @@ onBeforeUnmount(() => {
 	> .emojis > li {
 
 		.emoji {
+			flex-shrink: 0;
 			display: flex;
 			margin: 0 4px 0 0;
 			height: 24px;
@@ -469,7 +472,12 @@ onBeforeUnmount(() => {
 
 		}
 
+		.name {
+			flex-shrink: 1;
+		}
+
 		.alias {
+			flex-shrink: 9999999;
 			margin: 0 0 0 8px;
 		}
 	}

yarn.lock

@@ -2644,7 +2644,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/sanitize-html@npm:2.8.0":
+"@types/sanitize-html@npm:2.8.0, @types/sanitize-html@npm:^2.8.0":
   version: 2.8.0
   resolution: "@types/sanitize-html@npm:2.8.0"
   dependencies:
@@ -8055,6 +8055,7 @@ __metadata:
     "@types/katex": 0.14.0
     "@types/matter-js": 0.18.2
     "@types/punycode": 2.1.0
+    "@types/sanitize-html": ^2.8.0
     "@types/seedrandom": 3.0.3
     "@types/throttle-debounce": 5.0.0
     "@types/tinycolor2": 1.4.3
@@ -8101,6 +8102,7 @@ __metadata:
     rndstr: 1.0.0
     rollup: 3.9.0
     s-age: 1.1.2
+    sanitize-html: ^2.8.1
     sass: 1.57.1
     seedrandom: 3.0.5
     start-server-and-test: 1.15.2
@@ -14944,7 +14946,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sanitize-html@npm:2.8.1":
+"sanitize-html@npm:2.8.1, sanitize-html@npm:^2.8.1":
   version: 2.8.1
   resolution: "sanitize-html@npm:2.8.1"
   dependencies: