サロゲートペアを字数にカウントしないようにする (#2661)

* Update post-form.vue

* Update messaging-message.ts

* Update post-form.vue

* Update note.ts

* Update post-form.vue

refs: https://github.com/syuilo/misskey/pull/2661#issuecomment-419579444

* Update post-form.vue

refs: https://github.com/syuilo/misskey/pull/2661#issuecomment-419579444

* Update messaging-message.ts

refs: https://github.com/syuilo/misskey/pull/2661#issuecomment-419579444

* Update note.ts

refs: https://github.com/syuilo/misskey/pull/2661#issuecomment-419579444

* Update post-form.vue

refs: https://github.com/syuilo/misskey/pull/2661#discussion_r216175581

* Update post-form.vue

* Update post-form.vue

refs: https://github.com/syuilo/misskey/pull/2661#discussion_r216242002

* Update post-form.vue

refs: https://github.com/syuilo/misskey/pull/2661#discussion_r216242105

2 files changed, 13 insertions, 3 deletions

diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index fd489283f1..483a51b0ae 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -45,7 +45,7 @@
 		<span v-if="visibility === 'specified'">%fa:envelope%</span>
 		<span v-if="visibility === 'private'">%fa:lock%</span>
 	</button>
-	<p class="text-count" :class="{ over: text.length > 1000 }">{{ 1000 - text.length }}</p>
+	<p class="text-count" :class="{ over: this.trimmedLength(text) > 1000 }">{{ 1000 - this.trimmedLength(text) }}</p>
 	<button :class="{ posting }" class="submit" :disabled="!canPost" @click="post">
 		{{ posting ? '%i18n:@posting%' : submitText }}<mk-ellipsis v-if="posting"/>
 	</button>
@@ -63,6 +63,7 @@ import MkVisibilityChooser from '../../../common/views/components/visibility-cho
 import parse from '../../../../../mfm/parse';
 import { host } from '../../../config';
 import { erase } from '../../../../../prelude/array';
+import { length } from 'stringz';
 import parseAcct from '../../../../../misc/acct/parse';
 
 export default Vue.extend({
@@ -147,7 +148,7 @@ export default Vue.extend({
 		canPost(): boolean {
 			return !this.posting &&
 				(1 <= this.text.length || 1 <= this.files.length || this.poll || this.renote) &&
-				(this.text.trim().length <= 1000);
+				(length(this.text.trim()) <= 1000);
 		}
 	},
 
@@ -199,6 +200,10 @@ export default Vue.extend({
 	},
 
 	methods: {
+	  trimmedLength(text: string) {
+			return length(text.trim());
+		},
+
 		addTag(tag: string) {
 			insertTextAtCursor(this.$refs.text, ` #${tag} `);
 		},
diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index 7e6a4c38e1..be20b11f14 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -4,7 +4,7 @@
 		<header>
 			<button class="cancel" @click="cancel">%fa:times%</button>
 			<div>
-				<span class="text-count" :class="{ over: text.length > 1000 }">{{ 1000 - text.length }}</span>
+				<span class="text-count" :class="{ over: trimmedLength(text) > 1000 }">{{ 1000 - trimmedLength(text) }}</span>
 				<span class="geo" v-if="geo">%fa:map-marker-alt%</span>
 				<button class="submit" :disabled="!canPost" @click="post">{{ submitText }}</button>
 			</div>
@@ -60,6 +60,7 @@ import getFace from '../../../common/scripts/get-face';
 import parse from '../../../../../mfm/parse';
 import { host } from '../../../config';
 import { erase } from '../../../../../prelude/array';
+import { length } from 'stringz';
 import parseAcct from '../../../../../misc/acct/parse';
 
 export default Vue.extend({
@@ -180,6 +181,10 @@ export default Vue.extend({
 	},
 
 	methods: {
+		trimmedLength(text: string) {
+			return length(text.trim());
+		},
+
 		addTag(tag: string) {
 			insertTextAtCursor(this.$refs.text, ` #${tag} `);
 		},