引用のコールアウト

ここに、コンポーネントを最新化し、リッチテキストエディタのサポートを追加するアップデートがあります!:rocket:
微調整や予期せぬエッジケースが必要になるかもしれませんが、これはかなりの良いスタートだと考えています。:folded_hands:

要約

  • リッチテキストエディタのサポートを追加(詳細な概要は下記参照)
  • レンダリングをglimmerコンポーネントに変換
  • ネストされたcalloutでのCSSカラーを修正
  • エイリアスでのCSSカラーを修正
  • 折りたたみのアニメーションがよりスムーズになるはず
  • callout_transition_duration_ms設定(折りたたみアニメーション)を追加
  • デフォルトのcalloutを挿入するためのショートカットとしてCtrl + qを追加。両方のエディタで動作し、ショートカットはキーボードショートカットモーダルに追加されます
    画像
  • チャット:ツールバーにデフォルトのcalloutを挿入するボタンを追加
    画像
  • Markdownプレビュー:アイコンをクリックしてタイプを変更する機能を追加
    画像

リッチテキストエディタ

リッチテキストエディタについて、そして期待できることについて話しましょう!

calloutの作成:

calloutを挿入するには4つの方法があります:

  • キーボードショートカット
  • ツールバー
  • 入力ルール
    • /callout<:type>
    • !!<type>
  • 貼り付けサポート
    ビデオ

calloutの編集

calloutを編集するためのコントロールは、選択した場合にのみ表示されます。

  • タイプセレクター
    アイコンをクリックすると、フローティングメニューが表示されます。
  • カスタムタイトル
    インラインフォーマットと絵文字をサポート
  • 折りたたみ
    calloutを折りたたみ可能に設定します。オプションメニューからアクセスできます。
    ビデオ

calloutの整理

  • 移動コントロール

    • デスクトップ
      calloutをドラッグアンドドロップするためのハンドルがあります。
    • タッチデバイス
      calloutを上下に移動したり、隣接するcalloutの中にネストしたりできます。これは、頻繁に行う操作ではないため、ビューの肥大化を避けるためにデフォルトで無効になっています。オプションで切り替えることができます。
    ビデオ

  • キーボードナビゲーション
    これにより、ネストされたcalloutに出入りしやすくなります。
    このバージョンでは動作を consistent に保つために、将来的に調整が必要になるかもしれません。

    • タイトルの先頭で、calloutセレクターが自動的に開きます。
    • 段落がないcallout本文内では、段落が作成されます。空のコンテンツで終了した場合、段落は削除されます。
    • タイトル内でEnterを押すと、カーソルが本文内に移動します(必要に応じて段落が作成されます)。
    ビデオ

  • クリックして挿入

    • 段落がない領域では、内部をクリックして段落を開くことができます。
    • お好みで、calloutの内部または外部に段落を開くためにボタンを使用することもできます。
      ビデオ

おそらく、後で調べることは次のとおりです:

  • 入力ルールのオートコンプリート
  • 特にダークモードでの一貫性と視認性を確保するために、最新のCSSを使用して色を改善する。
  • 設定をすべて削除し、まずシンプルさに重点を置き、高度なカスタマイズはCSSのみで行いたいと思っていましたが、それはもう手遅れでした :rofl:

フィードバックをくれたMoinに特に感謝します。

以上です。ご意見をお聞かせください。フィードバックは大歓迎です!

「いいね!」 7