コンポーザープレビュー用の画像削除ボタン

特徴
1

こんにちは。

コンポーザーから簡単に画像を削除できる新機能について考えています。ユーザーが複数の画像をアップロードし、そのうちの1つだけを削除したい場合、Markdownに慣れていないと非常に複雑になります。もちろん試みますが、結果は通常、壊れたリンクなどになります…

画像のaltテキストに関する変更がありましたが、これは非常にうまく機能し、ユーザーフレンドリーでした。プレビュー側でaltテキストを編集できるようになります。

プレビュー側で画像に削除ボタンを配置できると素晴らしいでしょう。画像コーナーにゴミ箱アイコンまたはXアイコンを配置し、そのボタンをクリックすると実際の画像Markdownコードをターゲットにして削除できるかもしれません。:slightly_smiling_face:

ありがとうございます :slightly_smiling_face:

「いいね！」 8
3

ドン、ありがとうございます。それは便利なボタンのようですね。追加するのもそれほど難しくないでしょう。これは#pr_welcomeとしてマークしておきます。追加されるのを楽しみにしています。

「いいね！」 3
4

これを解決するために取り組んでいます。動作する概念実証がほぼ完成しました。
d-editor.js と composer-editor.js の 2 つのコンポーネント間で、まだ 1 つ不明な点があります。私のこれまでの解決策は、d-editor.js コンポーネント内で更新されるプレビュー/HTML コンテンツをリッスンすることに基づいています…など。
私は正しい方向に向かっていますか？

「いいね！」 1
5

コンポーザープレビューで、画像のサイズ変更や代替テキストの追加を行うボタンの横に、画像を削除するのに最も適した場所があります。

image

画像のマークアップを削除するフックは、100%/75%/50% ボタンと非常によく似ているはずです。画像のスケーリングがどのように行われているかは、こちらで確認できます。

「いいね！」 2
6

これは非常にまれな操作であり、視覚的なノイズが増えるため、そこにこれを追加することについては少し迷っています。

編集ボタンに近すぎないように、その行の右側に配置された「ゴミ箱」アイコンはどうでしょうか？

@awesomerobot の意見は？

また、ここでの操作の順序が正しいのかどうか疑問です。回転とクロップの方が重要でしょうか？

「いいね！」 3
7

追加の削除ボタンを配置するだけであれば、以下のようにできます。

Screen Shot 2022-07-18 at 9.42.53 PM
Screen Shot 2022-07-18 at 9.42.53 PM213×212 38.2 KB

編集ボタンを左に移動させ（ボーナス：コンポーザー入力へのマウス距離が近くなる）、削除ボタンを右に配置します。これにより、無害な操作と危険な操作の間に距離ができます。

その他の追加機能：

  • 編集アイコンを50%、75%と同様に青色にする
  • テキストは黒色のままにし、入力フィールドもクリックできるようにする
  • タイトルエディターが開いている場合、プレビューテキストのベースラインに合わせて位置を調整できますか（zレイヤーの上）。これにより、クリック時の表示の揺れが少なくなります。
    Screen Shot 2022-07-18 at 9.44.53 PM
    Screen Shot 2022-07-18 at 9.44.53 PM316×222 40.2 KB

これはより大きなスコープですが、回転と切り抜きでは、まったく異なる種類のメニューが必要になるかもしれません。

http://notion.so に良い例があります。

彼らはボタンに多くのオプションがあり、スケーリングはハンドルをドラッグして行います。

1つの良い小さな詳細は、ボタンオーバーレイに対して小さすぎる画像を追加した場合、操作しようとすると、ボタンを含むように画像のスケールが強制されることです。これにより、ホバー時に周囲のコンテンツをオーバーレイするボタンが回避されます。

「いいね！」 7
8

@awesomerobot フィードバックありがとうございます。認識を合わせるために、もう1つ質問があります。この点について:\n\n[quote="Kris, post:7, topic:233005, username:awesomerobot"]\nタイトルエディタが開いているとき、プレビューテキストのベースラインに一致するように位置を調整できますか（zレイヤーを上に）？これにより、クリック時のシフトが軽減されます。\n[/quote]\n\n「スケールボタン」コンテナが「代替編集ボタン」とともに表示されるシナリオは2つあります。\n\n通常、これらは同じ行に表示されます。ただし、代替テキストが長い場合、代替コンテナは次の行にオーバーフローします。\n\n同じ行\n\n

image
image1138×268 102 KB
\n\nオーバーフロー\n
image
image1138×328 79.5 KB
\n\nさて、上記の点に戻ります。オーバーフロー動作をデフォルトにしたいと仮定すると、理にかなっています。それ以外の場合、短い代替テキストでは、削除ボタンは編集代替ボタンを閉じるだけになります。\n\n別の代替案として、代替コンテナをスケールボタンの前に表示することもできます。例:\n\n同じ行:\n
image
image1138×328 95.8 KB
\n\n\n\nオーバーフロー:\n
image
image1138×328 102 KB
\n\nしたがって、削除ボタンが50%の後に来ることは明らかですが、上記の2つのシナリオでどのように機能するかは明確ではありません。

「いいね！」 2
9

[更新]

上記の2番目のアプローチに従いました。
これがどのように見えるかのビデオはこちらです。

すべて問題なければ、コードをリファクタリングしてPRをプッシュ/作成します。

「いいね！」 8
10

追加の詳細を説明していただきありがとうございます！これで大丈夫だと思います！

「いいね！」 6
11

ありがとうございます。すでにPRを提出しました FEATURE: add image delete button in preview. by ghassanmas · Pull Request #17624 · discourse/discourse · GitHub

「いいね！」 7
12

本日、これがマージされました

「いいね！」 6