Zenn
🩹

(obsolete) Zennのエディタのカーソル位置はDevToolを出すと何故か治る

2020/09/18に公開
CSS
Zenn
idea

OBSOLETE: たぶんもう治った

関連issue: Line wrapping for a line of 100%(-ish) width corrupts following lines, Webエディターの再開発

Zennは全体的に良好だと思うけど、唯一困るのが内蔵のMarkdownエディタのカーソルが非常にズレてしまう点。

↑ 〜 思っている。 の末尾にカーソルを置いているつもりだが、カーソルのレンダリングは大巾にズレている。

(問題を起こすMarkdown: https://gist.github.com/okuoku/83347f8b72a1c9ad2318847fa8f10ade -- 前回の記事 のソース )

手元のWindows環境だとFirefoxやMS Edge(Chromium)で 全画面の場合のみ ズレていて、MacのSafariだとズレない。

ワークアラウンド

以下のいずれかで治ることがわかった:

  • DevToolをドッキング状態で出す
  • 画面巾を狭くする
  • Macを使う

原因

原因は、Zennが使っているCodeMirrorの <div> が意図しないサイズになっている点で、クラス CodeMirror-sizer とそれが内包する <div> のサイズが一致しないことによって発生する。

このサイズはCodeMirrorが自動的に内部サイズを測定して設定しているものだが、設定後にword-wrapやリフローが起きるなどの理由でズレてしまうのだろう。

https://github.com/codemirror/CodeMirror/blob/6890f98b90b6df14912fe7ee7c04b89f33eb236d/src/display/update_display.js#L260

export function setDocumentHeight(cm, measure) {
  cm.display.sizer.style.minHeight = measure.docHeight + "px" // ★ ここでmin-heightを設定している
  cm.display.heightForcer.style.top = measure.docHeight + "px"
  cm.display.gutters.style.height = (measure.docHeight + cm.display.barHeight + scrollGap(cm)) + "px"
}

問題が発生している状況

↑ CodeMirror-sizer は min-height の設定どおり 2697 px の高さになっている

↑ 直下の <div> は高さが足りない

エラーケースを最小化できるか？

問題が発生したときに CTRL + A で全選択すると、選択範囲の描画がおかしいことがわかる。

この方法を使うと簡単に問題が起きているかがわかるので、頑張ればエラーケースを最小化できるのではないかと思える。しかし、色々試してみてもあまり一貫性のある結果は得られなかった。

かんそう

... QiitaとかHackmdみたいにstyleしないエディタとプレビューの2ペイン式で良くない。。？

Discussion