Multiple new lines?

v6
1

I’m using CodeMirror as a rich markdown editor. While the following config mostly works, there is one small behavior I’d like to improve for this use case:

If you want to add multiple line breaks like after one paragraph to start the next paragraph, codemirror seems to only support one blank line at a time.

What would I need to learn to improve that behavior? At the very least I’m thinking it would be an extension. Is it just a matter of replacing the enter keymapping with a more primitive one or is there more involved?

Here’s my config so far:

export default function MarkdownTextEditor({
	value,
	theme,
}: MarkdownEditorProps) {
	const extensions = useMemo<Extension[]>(() => {
		return [
			markdown({
				base: markdownLanguage,
				codeLanguages: languages,
			}),
			history(),
			EditorView.lineWrapping,
			syntaxHighlighting(highlightStyle),
		]
	}, [])

	const codeMirrorTheme = useMemo<Extension>(
		() => (theme === 'dark' ? crunchyDark : crunchyLight),
		[theme],
	)

	// eslint-disable-next-line react-hooks/exhaustive-deps
	const initialValue = useMemo(() => value, [])

	return (
		<CodeMirror
			className="border bg-transparent font-mono markdown-editor"
			autoFocus={true}
			value={initialValue}
			theme={codeMirrorTheme}
			minHeight={'calc(1/3 * 100vh)'}
			basicSetup={false}
			indentWithTab={false}
			extensions={extensions}
		/>
	)
}

Thanks for any help or advice!

2

As I wrote my question and pondered the possibility that I just needed to add a keymap, I gave it a shot and that turned out to be the answer! Just needed to add this to the list of extensions.

keymap.of([
	{
		key: 'Enter',
		run: insertBlankLine,
	},
]),