(obsolete) Zenn 편집기의 커서 위치가 Devotool이 나타나면 왠지 낫습니다.

OBSOLETE: 다 된 것 같아요.
관련issue:Line wrapping for a line of 100%(-ish) width corrupts following lines,웹 편집 재개발
나는 Zenn이 전체적으로 매우 좋다고 생각하지만, 유일하게 사람을 괴롭히는 것은 내장된 Mardown 편집기의 커서가 매우 엇갈린다는 것이다.

↑ 생각 중이야.끝에 커서가 놓여 있지만 커서의 과장은 크게 틀렸다.
(문제를 일으킨 Mardown: https://gist.github.com/okuoku/83347f8b72a1c9ad2318847fa8f10ade--저번 보도의 출처)
수중에 있는 Windows 환경이라면 Firefox와 MS Edge(Chromium)는 모든 화면에서 편차가 생기고 맥의 사파리는 편차가 없다.

작업 제안

다음 중 하나를 발견하면 치유할 수 있다.

버트 상태에서 DevTool

화면 폭 축소

Mac

사용

까닭

Zenn이 사용한 CodeMirror의<div>의 사이즈가 일치하지 않아 클래스CodeMirror-sizer와 그에 포함된<div>의 사이즈가 일치하지 않기 때문이다.
이 사이즈는 코드미러가 자동으로 내부 사이즈를 측정해 설정하지만, 설정하면 워드랩과 리턴 등으로 인해 편차가 생기지 않을까요.
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-sizermin-height의 설정에 따라 높이는 2697px

↑ 바로 아래<div> 높이 부족

오류 사례를 최소화할 수 있습니까?

문제가 발생했을 때 Ctrl+A를 사용하여 모두 선택하면 선택 영역의 그림에 문제가 있음을 알 수 있습니다.

이 방법으로 문제가 간단하게 발생했는지 알 수 있기 때문에 노력만 하면 잘못된 사례를 최소화할 수 있다고 생각합니다.하지만 많은 시도를 했지만 일관성 있는 결과를 얻지 못했다.

감광

... Qita나 Hackmd처럼 스타일 편집기나 미리 보기를 하지 않는 두 개의 창은 형식이 좋지 않습니다...?