[basecamp/lexxy] 仮想カーソルの点滅アニメーションを修正

背景

Lexxyエディタでは、AttachmentNodeやTableNodeの前後に要素が存在しない状態で上下矢印キーを押すと、「仮想カーソル（virtual cursor）」が表示される仕組みがあります。これは実際には段落が存在しないものの、ユーザーが入力を開始した際に初めて段落要素が追加される特殊なUI状態です。

しかし、この仮想カーソルの点滅アニメーションが正しく動作していない問題がありました。

技術的な変更内容

CSSの移動とアニメーション定義の改善

仮想カーソルのスタイル定義が lexxy-content.css から lexxy-editor.css へ移動され、同時にアニメーション定義が改善されました。

変更前:

:where([data-lexical-cursor]) {
  animation: blink 1s step-end infinite;
  block-size: 1lh;
  border-inline-start: 1px solid currentColor;
  line-height: inherit;
  margin-block: 1em;
}

変更後:

:where([data-lexical-cursor]) {
  animation: blink 1s infinite;
  block-size: 1lh;
  border-inline-start: 1.5px solid currentColor;
  line-height: inherit;
  margin-block: 0 var(--lexxy-content-margin);
}

@keyframes blink {
  0% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 0;}
}

主な変更点

アニメーション方式の変更: step-end を削除し、opacity を使った滑らかな点滅に変更
- 0%から60%まで完全に表示（opacity: 1）
- 100%で非表示（opacity: 0）
- これにより、カーソルが約0.6秒表示され、0.4秒消える自然な点滅を実現
視覚的な改善:
- カーソルの太さを 1px から 1.5px に変更し、視認性を向上
- マージンを margin-block: 1em から margin-block: 0 var(--lexxy-content-margin) に変更し、CSS変数による柔軟な余白管理に対応
ファイル構成の最適化: エディタ固有のUI要素として lexxy-editor.css に配置することで、コンテンツ表示用のスタイルと編集時のUIスタイルを明確に分離

影響範囲

この変更により、AttachmentやTable要素の前後で矢印キーを使用した際に表示される仮想カーソルが、通常のテキストカーソルと同様に自然な点滅を行うようになります。ユーザー体験として、より直感的な編集操作が可能になります。