bblog

Today I Learned

日々の仕事と学びの振り返りです。何をして、何を学んだかを記録します。

Alla11yanimationarchitecturebrowserbundlingcachingcanvasci-cdclscollaborationcssdrag-and-dropeditoreslintimagesimmutabilitylanding-pagemeasurementmobilemodalmonoreponavigationnetworknextjspage-transitionperformanceplaywrightpointer-eventsreactreliabilityscrollsearchsecurityselectionseoserverlessservice-workershellssrstorytellingtelemetrytestingthemingundousesyncexternalstorevirtualizationwebpackwebsocket
入力を止めてから350ms後に自動で検索します。

5件の記録 · #editor

2026년 7월

2026-07-10

Modal peek スタックと CSS layer パッケージ

単一 dialog 内の document push と @layer ベースの editor CSS 分離で、peek UX とテーマのカスタマイズを合わせた一日

  • gallery→peek は dialog を新しく開くより、同じ shell で documentId だけ替えるほうが連続的だ
  • async resolve は (newId, oldContent) 中間フレームを render-time reset で防がねばならない
2026-07-09

階層型ドキュメントナビと viewer バンドル分離

page push/peek navigator と read-only viewer entry の分離で、ポートフォリオのデモ深度とバンドルを同時に合わせた一日

  • ドキュメントグラフは page ブロック + push/peek navigator 契約で flat editor と分離するほうがよい
  • peek·embed は editor と DOM は同じでも import graph が違ってこそ viewer バンドルが小さくなる
2026-07-06

バンドルの shared vendor、クロスブロック選択、フローティング UI 座標

webpack splitChunks の罠、ハイブリッドエディタのクロスブロック範囲演算、selectionchange·scroll anchor パターン、Context 購読の分離

  • catch-all vendor に chunks:all と固定 name を一緒に使うと、dynamic import が shared チャンクへ引き上げられる
  • クロスブロックのテキスト演算は範囲 state の代わりに getSelection からの無状態派生 + 境界 split の単一化が安全だ
2026-07-05

ブロックエディタの順序・協業・キーボード契約

fractional ordering, optimistic rebase, IME defer, keyboard undo 委譲, scoped popover, Jest ESM shim など汎用パターンの整理

  • sibling の順序は integer index より fractional position key + neighbor anchor + tie-break が concurrent insert に有利だ
  • optimistic UI は inverse patch なしには rebase できず、remote seq が merge の権威でなければならない
2026-07-04

ドキュメントは host SoT、エディタは focused guest

ブロックドキュメント編集器における host/guest 境界、React 外部ストアのスナップショット、undo の2スタック、HTML5 ドラッグ・選択/コピーを、初めて読む人向けに整理

  • ドキュメントの意味は host のパッチが所有し、リッチテキストエンジンはフォーカスブロックの guest としてのみ置く
  • useSyncExternalStore のスナップショットに ms タイムスタンプだけを使うと、同一 ms の mutation で再レンダーが落ちる — 単調な revision が必要