share-target でデフォルトテキストが表示されないバグの修正

[Nagarei]

share-target API が今まではデフォルトテキストが空文字になっていたので修正。
元々の状態でもテキストエリアに表示されないだけで編集せずに投稿すれば元々の文字列が投稿できていたが、一度でも編集するとテキストエリアの文字が投稿されていた。

Vue何も分からずに適当に編集しているので作法とか間違ってるかも

share-target APIの使用例: https://q.trap.jp/share-target?title=foo&text=aaaaaaaa&url=www.google.co.jp

[github-actions]

Preview (prod) → https://4163-prod.traq-preview.trapti.tech/
Preview (dev) → https://4163-dev.traq-preview.trapti.tech/

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (016a60a) 86.35% compared to head (ea4d834) 86.35%.
Report is 2 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #4163   +/-   ##
=======================================
  Coverage   86.35%   86.35%           
=======================================
  Files          66       66           
  Lines        4719     4719           
  Branches      564      564           
=======================================
  Hits         4075     4075           
  Misses        638      638           
  Partials        6        6           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[mehm8128]

PRありがとうございます、こんなページあったの始めて知りました

ShareTargetForm.vueの68～76行目の

// FIXME: 親子関係なのにprovide-injectを乱用してるの微妙
const { state } = useMessageInputState('share-target')
watch(
  () => props.defaultText,
  newVal => {
    state.text = newVal
  },
  { immediate: true }
)

でおそらくtextareaの値を初期化する処理は入っていそうなので、defaultTextをpropsとして渡す必要はなさそうです(useMessageInputStateでshare-targetというkeyでstoreを通してコンポーネント間でstateが共有されていそうです)

なんでdefaultTextがtextareaに反映されていないのか色々見てみたのですが、なんでか分からないけどtextareaにv-if="state.text !== ''"みたいなのをつければ直りました(多分上に挙げたコードでnewValにしたのがtextareaの方には上手くリアクティブに反映されてなかったんだと思います)
ただ、v-ifを使う方針だとtextのquery paramが空文字orない場合だとtextareaが一生表示されなくなってしまうので、以下のどれかになりそうです

• 「textのquery paramが空文字orない場合」がありえないと仮定していいならv-ifを使う方針にする
• useMessageInputStateで変更がリアクティブに反映されるように修正する
  • useMessageInputStateの第二引数にdefaultTextを渡すとかでもいいかも？他のところでこのcomposablesがどう使われているのか把握してないのでもしかしたらよくないかもです
• useMessageInputStateを使わずに、props・emitだけで処理するようにする
• 今の方針のままにする
  • その場合、上で挙げたwatchのコードは消してもよさそうかもです

[Nagarei]

ShareTargetForm.vue の 77行目で使っている usePostMessage が、useMessageInputStateによって登録されたメッセージを投稿する関数に見えるので、useMessageInputState を使わないのは不自然になってしまう気がします。
同じ理由で state.text の初期化はしないといけないのでwatchも消せなくて、もし消した場合は無編集で送ると空文字が投稿されてしまう気がします。（確認しないで言っています）

useMessageInputState で変更がリアクティブに反映されるように修正するのが一番筋が良い気がしますが、実現方法が良く分からないです。

なお、usePostMessageは通常のチャンネルUI(src/components/Main/MainView/MessageInput/MessageInput.vue)上でのメッセージの投稿にも使っている関数のようです。ただし、第二引数の inputStateKey はこの share-target API でしか使っていないので、useMessageInputState を使わないオプションもとれるように修正してしまうという方法もあるかもしれないです。将来的に画像に対応したりとかまで考えると難しいかもしれない。

実装方針はメンテナでも vue 詳しいわけでも無いので僕からはなんとも...

[SSlime-s]

色々試してみてたんですが、

- v-model="state.text"
+ :value="state.text"
+ @input="e => { state.text = (e.target as HTMLTextAreaElement).value }"

だけで治りそうでした (v-model と変わらないはずなのに :doushite:)

watch に console.debug とか仕込んで見た感じだと state 自体はリアクティブに変更されていて、その中身もちゃんといい感じに更新されてそうでした
useMessageInputState の処理の関係上 中で watch がいっぱい呼び出されるようになってて、そのサイクルと textarea の v-model に与えてる値が更新されたときの textarea の中での更新のサイクル がおかしくなってるのかなぁ と思ったんですが、試す術とかがわからず挫折したという記録だけ書いておきます

[mehm8128]

↑で直りそうならそれでよさそうです

[mehm8128]

なんでこれで直るのかは結局分かってないけど、メインの機能でもないしいいと思います
ありがとうございます