extern/heynote
1
0
Fork 0
mirror of https://github.com/heyman/heynote.git synced 2024-11-21 23:43:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

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.

Browse Source 
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.
This commit is contained in:
Jonatan Heyman 2023-01-14 15:04:53 +01:00
parent 52f1ac71da
commit 51e89ad55c
6 changed files with 29 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@ -9,9 +9,15 @@
<link rel="stylesheet" href="src/editor/styles.css" /> <link rel="stylesheet" href="src/editor/styles.css" />
</head> </head>
<body> <body>
<div id="editor" style="width:100%; height:100%;"></div>
<!--<div id="app"></div>--> <!--<div id="app"></div>-->
<!--<script type="module" src="/src/main.ts"></script>--> <!--<script type="module" src="/src/main.ts"></script>-->
<!--<div id="app"></div>
<script type="module" src="src/main.js"></script>-->
<div id="editor" class="editor"></div>
<script type="module" src="src/editor/index.js"></script> <script type="module" src="src/editor/index.js"></script>
</body> </body>
</html> </html>

6
src/editor/block/note-block.js
View File

@ -193,7 +193,7 @@ const blockLayer = layer({
let extraHeight = view.viewState.editorHeight - ( let extraHeight = view.viewState.editorHeight - (
view.defaultLineHeight + // when scrolling furthest down, one line is still shown at the top view.defaultLineHeight + // when scrolling furthest down, one line is still shown at the top
view.documentPadding.top + view.documentPadding.top +
7 8
) )
toCoordsBottom += extraHeight toCoordsBottom += extraHeight
} }
@ -202,9 +202,9 @@ const blockLayer = layer({
0, 0,
// Change "- 0 - 6" to "+ 1 - 6" on the following line, and "+ 1 + 13" to "+2 + 13" on the line below, // 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 // 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 null, // width is set to 100% in CSS
(toCoordsBottom - fromCoordsTop) + 1 + 13, (toCoordsBottom - fromCoordsTop) + 15,
)) ))
}) })
return markers return markers

25
src/editor/styles.css
View File

@ -22,27 +22,34 @@ body {
overflow-y: auto; overflow-y: auto;
} }
.blocks-layer .block-even { .blocks-layer .block-even,
width: 100%;
background: #252B37;
}
.blocks-layer .block-odd { .blocks-layer .block-odd {
width: 100%; 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 { .light-theme .blocks-layer .block-even {
background: #ffffff; background: #ffffff;
border-top: 1px solid #dfdfdf;
} }
.light-theme .blocks-layer .block-odd { .light-theme .blocks-layer .block-odd {
background: #f4f8f4; background: #f4f8f4;
border-top: 1px solid #dfdfdf;
} }
.block-start { .block-start {
height: 12px; height: 12px;
/*background: rgb(0, 0, 0);
height: 2px*/
} }
.block-start.first { .block-start.first {
height: 4px; height: 0px;
} }

3
src/editor/theme/base.js
View File

@ -2,6 +2,9 @@ import { EditorView } from '@codemirror/view';
export const heynoteBase = EditorView.theme({ export const heynoteBase = EditorView.theme({
".cm-content": {
paddingTop: 4,
},
'.cm-scroller': { '.cm-scroller': {
fontFamily: "Menlo, Monaco, 'Courier New', monospace", fontFamily: "Menlo, Monaco, 'Courier New', monospace",
}, },

1
src/editor/theme/dark.js
View File

@ -38,7 +38,6 @@ const darkTheme = EditorView.theme({
}, },
'.cm-content': { '.cm-content': {
caretColor: cursor, caretColor: cursor,
paddingTop: 0,
}, },
'.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor }, '.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
'&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': { backgroundColor: selection }, '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': { backgroundColor: selection },

4
src/editor/theme/light.js
View File

@ -5,10 +5,6 @@ export const heynoteLight = EditorView.theme({
//color: base04, //color: base04,
backgroundColor: "#dfdfdf", backgroundColor: "#dfdfdf",
}, },
".cm-content": {
//caretColor: cursor,
paddingTop: 0,
},
".cm-cursor, .cm-dropCursor": { ".cm-cursor, .cm-dropCursor": {
borderLeftColor: "#000", borderLeftColor: "#000",
}, },