wip

src/client/components/post-form.vue

@@ -33,8 +33,8 @@
 				<button @click="addVisibleUser" class="_buttonPrimary"><fa :icon="faPlus" fixed-width/></button>
 			</div>
 		</div>
-		<input v-show="useCw" ref="cw" class="cw" v-model="cw" :placeholder="$t('annotation')" v-autocomplete="{ model: 'cw' }">
-		<textarea v-model="text" class="text" :class="{ withCw: useCw }" ref="text" :disabled="posting" :placeholder="placeholder" v-autocomplete="{ model: 'text' }" @keydown="onKeydown" @paste="onPaste"></textarea>
+		<input v-show="useCw" ref="cw" class="cw" v-model="cw" :placeholder="$t('annotation')">
+		<textarea v-model="text" class="text" :class="{ withCw: useCw }" ref="text" :disabled="posting" :placeholder="placeholder" @keydown="onKeydown" @paste="onPaste"></textarea>
 		<x-post-form-attaches class="attaches" :files="files"/>
 		<x-poll-editor v-if="poll" ref="poll" @destroyed="poll = false" @updated="onPollUpdate()"/>
 		<x-uploader ref="uploader" @uploaded="attachMedia" @change="onChangeUploadings"/>
@@ -68,6 +68,7 @@ import extractMentions from '../../misc/extract-mentions';
 import getAcct from '../../misc/acct/render';
 import { formatTimeString } from '../../misc/format-time-string';
 import { selectDriveFile } from '@/scripts/select-drive-file';
+import { Autocomplete } from '@/scripts/autocomplete';
 import { noteVisibilities } from '../../types';
 import { utils } from '@syuilo/aiscript';
 import * as os from '@/os';
@@ -280,6 +281,9 @@ export default defineComponent({
 			this.focus();
 		});
 
+		new Autocomplete(this.$refs.text, this, { model: 'text' });
+		new Autocomplete(this.$refs.cw, this, { model: 'cw' });
+
 		this.$nextTick(() => {
 			// 書きかけの投稿を復元
 			if (!this.instant && !this.mention) {

src/client/directives/index.ts

@@ -1,13 +1,11 @@
 import { App } from 'vue';
 
 import userPreview from './user-preview';
-import autocomplete from './autocomplete';
 import size from './size';
 import particle from './particle';
 import tooltip from './tooltip';
 
 export default function(app: App) {
-	app.directive('autocomplete', autocomplete);
 	app.directive('userPreview', userPreview);
 	app.directive('user-preview', userPreview);
 	app.directive('size', size);

src/client/directives/user-preview.ts

@@ -29,7 +29,6 @@ export default {
 
 			self.close = os.popup(MkUserPreview, {
 				user: self.user,
-			}, null, {
 				source: el
 			});
 

src/client/os.ts

@@ -60,7 +60,6 @@ export function popup(component: Component, props: Record<string, any>, events =
 			props,
 			showing,
 			events,
-			source: option?.source,
 			done: close,
 			bgClick: () => close(),
 			closed: () => {

src/client/scripts/autocomplete.ts

@@ -1,25 +1,15 @@
-import { Directive } from 'vue';
+import { Ref, ref } from 'vue';
 import * as getCaretCoordinates from 'textarea-caret';
 import { toASCII } from 'punycode';
+import { popup } from '@/os';
 
-export default {
-	mounted(el, binding, vn) {
-		const self = el._autoCompleteDirective_ = {} as any;
-		self.x = new Autocomplete(el, vn.context, binding.value);
-		self.x.attach();
-	},
-
-	unmounted(el, binding, vn) {
-		const self = el._autoCompleteDirective_;
-		self.x.detach();
-	}
-} as Directive;
-
-/**
- * オートコンプリートを管理するクラス。
- */
-class Autocomplete {
-	private suggestion: any;
+export class Autocomplete {
+	private suggestion: {
+		x: Ref<number>;
+		y: Ref<number>;
+		q: Ref<string>;
+		close: Function;
+	};
 	private textarea: any;
 	private vm: any;
 	private currentType: string;
@@ -148,31 +138,34 @@ class Autocomplete {
 		//#endregion
 
 		if (this.suggestion) {
-			// TODO: Vueの警告が出るのでなんとかする
-			this.suggestion.x = x;
-			this.suggestion.y = y;
-			this.suggestion.q = q;
+			this.suggestion.x.value = x;
+			this.suggestion.y.value = y;
+			this.suggestion.q.value = q;
 
 			this.opening = false;
 		} else {
 			const MkAutocomplete = await import('@/components/autocomplete.vue');
 
-			// サジェスト要素作成
-			this.suggestion = new MkAutocomplete({
-				parent: this.vm,
-				propsData: {
-					textarea: this.textarea,
-					complete: this.complete,
-					close: this.close,
-					type: type,
-					q: q,
-					x,
-					y
-				}
-			}).$mount();
+			const _x = ref(x);
+			const _y = ref(y);
+			const _q = ref(q);
 
-			// 要素追加
-			document.body.appendChild(this.suggestion.$el);
+			const promise = popup(MkAutocomplete, {
+				textarea: this.textarea,
+				complete: this.complete,
+				close: this.close,
+				type: type,
+				q: _q,
+				x: _x,
+				y: _y,
+			});
+
+			this.suggestion = {
+				q: _q,
+				x: _x,
+				y: _y,
+				close: () => promise.cancel(),
+			};
 
 			this.opening = false;
 		}
@@ -184,7 +177,7 @@ class Autocomplete {
 	private close() {
 		if (this.suggestion == null) return;
 
-		this.suggestion.destroyDom();
+		this.suggestion.close();
 		this.suggestion = null;
 
 		this.textarea.focus();