From 51e89ad55c5bb3717afe9f2efe0dc0b1f50a121e Mon Sep 17 00:00:00 2001 From: Jonatan Heyman Date: Sat, 14 Jan 2023 15:04:53 +0100 Subject: [PATCH] Set padding-top on .cm-content class instead of using .block-start element for the padding. This fixes an issue with being able to scroll the editor when there is only a single line in the document. Use 1px border for line between blocks. This way we can make sure blocks always overlap slightly, and we don't have to care about fractional pixel rounding errors. --- index.html | 8 +++++++- src/editor/block/note-block.js | 6 +++--- src/editor/styles.css | 25 ++++++++++++++++--------- src/editor/theme/base.js | 3 +++ src/editor/theme/dark.js | 1 - src/editor/theme/light.js | 4 ---- 6 files changed, 29 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index ac1a051..62f48f3 100644 --- a/index.html +++ b/index.html @@ -9,9 +9,15 @@ -
+ + + + + +
diff --git a/src/editor/block/note-block.js b/src/editor/block/note-block.js index 527aa82..a2d33b6 100644 --- a/src/editor/block/note-block.js +++ b/src/editor/block/note-block.js @@ -193,7 +193,7 @@ const blockLayer = layer({ let extraHeight = view.viewState.editorHeight - ( view.defaultLineHeight + // when scrolling furthest down, one line is still shown at the top view.documentPadding.top + - 7 + 8 ) toCoordsBottom += extraHeight } @@ -202,9 +202,9 @@ const blockLayer = layer({ 0, // Change "- 0 - 6" to "+ 1 - 6" on the following line, and "+ 1 + 13" to "+2 + 13" on the line below, // in order to make the block backgrounds to have no gap between them - fromCoordsTop - (view.documentTop - view.documentPadding.top) - 0 - 6, + fromCoordsTop - (view.documentTop - view.documentPadding.top) - 1 - 6, null, // width is set to 100% in CSS - (toCoordsBottom - fromCoordsTop) + 1 + 13, + (toCoordsBottom - fromCoordsTop) + 15, )) }) return markers diff --git a/src/editor/styles.css b/src/editor/styles.css index 9f4e275..66a0878 100644 --- a/src/editor/styles.css +++ b/src/editor/styles.css @@ -22,27 +22,34 @@ body { overflow-y: auto; } -.blocks-layer .block-even { - width: 100%; - background: #252B37; -} +.blocks-layer .block-even, .blocks-layer .block-odd { width: 100%; - background: #222f38; + box-sizing: content-box; +} +.blocks-layer .block-even:first-child { + border-top: none; +} +.blocks-layer .block-even { + background: #252B37; + border-top: 1px solid #1e222a; +} +.blocks-layer .block-odd { + background: #222f38; + border-top: 1px solid #1e222a; } - .light-theme .blocks-layer .block-even { background: #ffffff; + border-top: 1px solid #dfdfdf; } .light-theme .blocks-layer .block-odd { background: #f4f8f4; + border-top: 1px solid #dfdfdf; } .block-start { height: 12px; - /*background: rgb(0, 0, 0); - height: 2px*/ } .block-start.first { - height: 4px; + height: 0px; } diff --git a/src/editor/theme/base.js b/src/editor/theme/base.js index fd5b144..1826387 100644 --- a/src/editor/theme/base.js +++ b/src/editor/theme/base.js @@ -2,6 +2,9 @@ import { EditorView } from '@codemirror/view'; export const heynoteBase = EditorView.theme({ + ".cm-content": { + paddingTop: 4, + }, '.cm-scroller': { fontFamily: "Menlo, Monaco, 'Courier New', monospace", }, diff --git a/src/editor/theme/dark.js b/src/editor/theme/dark.js index ffed896..9f75f24 100644 --- a/src/editor/theme/dark.js +++ b/src/editor/theme/dark.js @@ -38,7 +38,6 @@ const darkTheme = EditorView.theme({ }, '.cm-content': { caretColor: cursor, - paddingTop: 0, }, '.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor }, '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': { backgroundColor: selection }, diff --git a/src/editor/theme/light.js b/src/editor/theme/light.js index 08c789e..83b6004 100644 --- a/src/editor/theme/light.js +++ b/src/editor/theme/light.js @@ -5,10 +5,6 @@ export const heynoteLight = EditorView.theme({ //color: base04, backgroundColor: "#dfdfdf", }, - ".cm-content": { - //caretColor: cursor, - paddingTop: 0, - }, ".cm-cursor, .cm-dropCursor": { borderLeftColor: "#000", },