In a freshly created editor, there’s only one line. How can I make an editor always show at least N lines? (for example, N = 10)
Would showing the editor at full screen height helps?
I know it doesn’t solve your problem here, but maybe you just not want the initial single line editor.
I’m embedding a code editor in the middle of a page (like on a problem-solving service – Leetcode/Codewars/etc.). I don’t like how it starts with just one line:
Instead, I want it to show at least 10 numbered lines:
…but without literally placing 10
\n's in the code.Hopefully that makes sense.
Found this thread: CodeMirror 6: Setting a minimum height but allow the editor to grow , that’s pretty much what I wanted. Perhaps without the line numbers, but it’s not that important.
This is the theme that worked for me:
const theme = EditorView.theme({
'.cm-activeLine': {
backgroundColor: 'var(--codemirror-active-line)',
},
'.cm-content': {
height: 'var(--codemirror-height)',
},
'.cm-scroller': {
overflow: 'hidden',
},
'.cm-wrap': {
height: 'var(--codemirror-height)',
border: '1px solid silver',
},
});Found this thread: Making the editor N lines high by default ,
That link redirects to this post.
Glad you got it worked out.
And yes you can remove the line numbers extension, if you use @codemirror/basic-setup, you can basically duplicate it and remove just the line numbers extension.
Oops, fixed the link
I meant that the line numbers aren’t extended down. Which is fine:
I still want them where they are now, though
I don’t think you can specify the height as N lines directly. It requires the editor to be loaded, so that you can make measurements and figure out how tall that N lines would be.