最近使ったハッシュタグを表示するようにするなど

.npmrc

@@ -1 +1,2 @@
 save-exact=true
+package-lock = false

package.json

@@ -126,6 +126,7 @@
 		"highlight.js": "9.12.0",
 		"html-minifier": "3.5.19",
 		"http-signature": "1.2.0",
+		"insert-text-at-cursor": "0.1.1",
 		"is-root": "2.0.0",
 		"is-url": "1.2.4",
 		"jquery": "3.3.1",
@@ -205,6 +206,7 @@
 		"vue-json-tree-view": "2.1.4",
 		"vue-loader": "15.2.6",
 		"vue-router": "3.0.1",
+		"vue-style-loader": "4.1.1",
 		"vue-template-compiler": "2.5.16",
 		"vuedraggable": "2.16.0",
 		"vuex": "3.0.1",

src/client/app/desktop/views/components/post-form.vue

@@ -10,6 +10,9 @@
 			<span v-for="u in visibleUsers">{{ u | userName }}<a @click="removeVisibleUser(u)">[x]</a></span>
 			<a @click="addVisibleUser">+ユーザーを追加</a>
 		</div>
+		<div class="hashtags" v-if="recentHashtags.length > 0">
+			<a v-for="tag in recentHashtags" @click="addTag(tag)">#{{ tag }}</a>
+		</div>
 		<input v-show="useCw" v-model="cw" placeholder="内容への注釈 (オプション)">
 		<textarea :class="{ with: (files.length != 0 || poll) }"
 			ref="text" v-model="text" :disabled="posting"
@@ -46,6 +49,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import insertTextAtCursor from 'insert-text-at-cursor';
 import * as XDraggable from 'vuedraggable';
 import getKao from '../../../common/scripts/get-kao';
 import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue';
@@ -91,7 +95,8 @@ export default Vue.extend({
 			visibility: 'public',
 			visibleUsers: [],
 			autocomplete: null,
-			draghover: false
+			draghover: false,
+			recentHashtags: JSON.parse(localStorage.getItem('hashtags') || '[]')
 		};
 	},
 
@@ -183,6 +188,10 @@ export default Vue.extend({
 	},
 
 	methods: {
+		addTag(tag: string) {
+			insertTextAtCursor(this.$refs.text, ` #${tag} `);
+		},
+
 		watch() {
 			this.$watch('text', () => this.saveDraft());
 			this.$watch('poll', () => this.saveDraft());
@@ -370,6 +379,13 @@ export default Vue.extend({
 			}).then(() => {
 				this.posting = false;
 			});
+
+			if (this.text && this.text != '') {
+				const hashtags = parse(this.text).filter(x => x.type == 'hashtag').map(x => x.hashtag);
+				let history = JSON.parse(localStorage.getItem('hashtags') || '[]') as string[];
+				history = history.filter(x => !hashtags.includes(x));
+				localStorage.setItem('hashtags', JSON.stringify(hashtags.concat(history)));
+			}
 		},
 
 		saveDraft() {
@@ -478,6 +494,10 @@ root(isDark)
 				margin-right 16px
 				color isDark ? #fff : #666
 
+		> .hashtags
+			> *
+				margin-right 8px
+
 		> .medias
 			margin 0
 			padding 0

src/client/app/mobile/views/components/post-form.vue

@@ -1,5 +1,6 @@
 <template>
 <div class="mk-post-form">
+	<div class="form">
 		<header>
 			<button class="cancel" @click="cancel">%fa:times%</button>
 			<div>
@@ -37,11 +38,16 @@
 			</footer>
 			<input ref="file" class="file" type="file" accept="image/*" multiple="multiple" @change="onChangeFile"/>
 		</div>
+	</div>
+	<div class="hashtags" v-if="recentHashtags.length > 0">
+		<a v-for="tag in recentHashtags" @click="addTag(tag)">#{{ tag }}</a>
+	</div>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import insertTextAtCursor from 'insert-text-at-cursor';
 import * as XDraggable from 'vuedraggable';
 import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue';
 import getKao from '../../../common/scripts/get-kao';
@@ -85,7 +91,8 @@ export default Vue.extend({
 			visibility: 'public',
 			visibleUsers: [],
 			useCw: false,
-			cw: null
+			cw: null,
+			recentHashtags: JSON.parse(localStorage.getItem('hashtags') || '[]')
 		};
 	},
 
@@ -161,6 +168,10 @@ export default Vue.extend({
 	},
 
 	methods: {
+		addTag(tag: string) {
+			insertTextAtCursor(this.$refs.text, ` #${tag} `);
+		},
+
 		focus() {
 			(this.$refs.text as any).focus();
 		},
@@ -281,6 +292,13 @@ export default Vue.extend({
 			}).catch(err => {
 				this.posting = false;
 			});
+
+			if (this.text && this.text != '') {
+				const hashtags = parse(this.text).filter(x => x.type == 'hashtag').map(x => x.hashtag);
+				let history = JSON.parse(localStorage.getItem('hashtags') || '[]') as string[];
+				history = history.filter(x => !hashtags.includes(x));
+				localStorage.setItem('hashtags', JSON.stringify(hashtags.concat(history)));
+			}
 		},
 
 		cancel() {
@@ -302,18 +320,22 @@ root(isDark)
 	max-width 500px
 	width calc(100% - 16px)
 	margin 8px auto
-	background isDark ? #282C37 : #fff
-	border-radius 8px
-	box-shadow 0 0 2px rgba(#000, 0.1)
 
 	@media (min-width 500px)
 		margin 16px auto
 		width calc(100% - 32px)
+
+		> .form
 			box-shadow 0 8px 32px rgba(#000, 0.1)
 
 	@media (min-width 600px)
 		margin 32px auto
 
+	> .form
+		background isDark ? #282C37 : #fff
+		border-radius 8px
+		box-shadow 0 0 2px rgba(#000, 0.1)
+
 		> header
 			z-index 1000
 			height 50px
@@ -443,6 +465,12 @@ root(isDark)
 					border-radius 0
 					box-shadow none
 
+	> .hashtags
+		margin 8px
+
+		> *
+			margin-right 8px
+
 .mk-post-form[data-darkmode]
 	root(true)