Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(frontend): 投稿ウインドウにMFM要素を追加するボタンの追加 #12788

Merged
merged 12 commits into from
Dec 27, 2023

Conversation

YAVIIGI
Copy link
Contributor

@YAVIIGI YAVIIGI commented Dec 24, 2023

What

投稿ウインドウにMFM要素を追加するボタンを追加して、カーソルの位置にMFM要素を追加できるようにします。
加えて、選択範囲を指定しているときにMFM要素を追加すると選択範囲を囲むようにMFM要素が追加されるようにします。
quickAddFunction-2

Why

#12787

普段使用している中で後から選択範囲を囲むようにMFM要素を追加したい場面が多々あるのですが、その際に:の後に出てくる自動補完を使うと最後の]を移動したりする必要が出てきたり特にスマートフォンユーザーは手間がかかってしまうように思います。
e.g., :hoge: を rainbow で囲いたいときに $[rainbow ]:hoge: と保管されてしまう

そのため、MFM要素を追加するボタンを投稿ウインドウに追加して、選択範囲の文字列を囲むようにMFM要素を加えられるようにしたいです。

Additional info (optional)

  • このボタンを押すと現在のカーソルの位置で$[Fn ]が追加されること
  • 選択範囲がある場合にこのボタンを押すと選択範囲を囲むように $[Fn :hoge:]と補完されること

Checklist

  • Read the contribution guide
  • Test working in a local environment
  • (If needed) Add story of storybook
  • (If needed) Update CHANGELOG.md
  • (If possible) Add tests

@github-actions github-actions bot added the packages/frontend Client side specific issue/PR label Dec 24, 2023
Copy link

codecov bot commented Dec 24, 2023

Codecov Report

Attention: 45 lines in your changes are missing coverage. Please review.

Comparison is base (2a5c9e6) 81.91% compared to head (8eb3f6a) 81.80%.

Files Patch % Lines
...ckages/frontend/src/scripts/mfm-function-picker.ts 26.22% 45 Missing ⚠️
Additional details and impacted files
@@             Coverage Diff             @@
##           develop   #12788      +/-   ##
===========================================
- Coverage    81.91%   81.80%   -0.12%     
===========================================
  Files          180      181       +1     
  Lines        27526    27599      +73     
  Branches       511      511              
===========================================
+ Hits         22549    22577      +28     
- Misses        4977     5022      +45     

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

@syuilo
Copy link
Member

syuilo commented Dec 25, 2023

MFMによる装飾は隠し機能的な感じだから当該ボタンの表示はオプトインで良い気がするわね

@syuilo
Copy link
Member

syuilo commented Dec 25, 2023

(デフォルトでは動きのあるMFMの表示はオフになってるし)

@YAVIIGI
Copy link
Contributor Author

YAVIIGI commented Dec 25, 2023

了解です!デフォルトは非表示にして、設定に本機能の表示/非表示の設定を設けてみます。

CHANGELOG.md Outdated Show resolved Hide resolved
@YAVIIGI
Copy link
Contributor Author

YAVIIGI commented Dec 25, 2023

デフォルトはOFFで、下記のような設定項目を追加しました。
image

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mfm-function-pickerとかの方が良さそう

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

a7026eefunctionmfm function に統一しました

@syuilo
Copy link
Member

syuilo commented Dec 27, 2023

lintの警告が多く出てますので直していただければ 🙏🏻
image

@YAVIIGI
Copy link
Contributor Author

YAVIIGI commented Dec 27, 2023

8eb3f6a で4スペースのインデントになっている個所を1タブに変更しました🙇‍♂️

@syuilo syuilo merged commit 47558a6 into misskey-dev:develop Dec 27, 2023
15 checks passed
@syuilo
Copy link
Member

syuilo commented Dec 27, 2023

👍🏻

camilla-ett pushed a commit to kaseiski/misskey that referenced this pull request Jan 2, 2024
* functionPicker の追加

* Update CHANGELOG.md

* fix lint errors

* Add addMfmFunction

* add enableQuickAddMfmFunction setting

* Update CHANGELOG.md

issue 番号を追加

* Update index.d.ts

* change 'functionPicker' to 'mfmFunctionPicker'

* Change indent from 4 space to 1 tab

---------

Co-authored-by: syuilo <[email protected]>
madonuko pushed a commit to FyraLabs/nyaakey that referenced this pull request Feb 26, 2024
* functionPicker の追加

* Update CHANGELOG.md

* fix lint errors

* Add addMfmFunction

* add enableQuickAddMfmFunction setting

* Update CHANGELOG.md

issue 番号を追加

* Update index.d.ts

* change 'functionPicker' to 'mfmFunctionPicker'

* Change indent from 4 space to 1 tab

---------

Co-authored-by: syuilo <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
packages/frontend Client side specific issue/PR
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants