🐛 Fix Enter not starting a new line in code editors

- Chromium 150 (Blockbench 5.2) inserts <br> on Enter, which CodeJar drops from its value
- Insert line breaks as `\n` text instead, in every CodeJar editor
- Fixes #535

Author: SnaveSutit

src/panels/textDisplayElement/textDisplayElement.svelte

@@ -1,6 +1,7 @@
 <script lang="ts" module>
 	import { CodeJar } from '@novacbn/svelte-codejar'
 	import { TextDisplay } from '../../outliner/textDisplay'
+	import { insertLineBreakAsText } from '../../util/codeJar'
 	import { localize as translate } from '../../util/lang'
 	import { Stopwatch } from '../../util/stopwatch'
 	import {
@@ -117,7 +118,11 @@
 	class="toolbar text-display-text-toolbar"
 	style={!!selected ? 'margin-bottom: 16px;' : 'visibility:hidden; height: 0px;'}
 >
-	<div class="content codejar-container" on:keydown={onKeydown}>
+	<div
+		class="content codejar-container"
+		on:keydown={onKeydown}
+		on:beforeinput={insertLineBreakAsText}
+	>
 		<CodeJar
 			bind:element={codeJarElement}
 			syntax="snbtTextComponent"

src/svelteComponents/customCodeJar.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { CodeJar } from '@novacbn/svelte-codejar'
+	import { insertLineBreakAsText } from '../util/codeJar'
 
 	interface Props {
 		value: string
@@ -55,7 +56,7 @@
 	})
 </script>
 
-<div class="content codejar-container" onkeydown={onKeydown}>
+<div class="content codejar-container" onkeydown={onKeydown} onbeforeinput={insertLineBreakAsText}>
 	<CodeJar
 		bind:element={codeJarElement}
 		{syntax}

src/tests/ui-behaviour.test.ts

@@ -146,4 +146,30 @@ describe('UI behaviour', () => {
 			expect(await blockbench.dialog().isOpen()).toBe(false)
 		})
 	})
+
+	describe('code editors', () => {
+		it('Enter starts a new line in the On-Summon Function editor', async () => {
+			await blockbench.newProject(BLUEPRINT_FORMAT_ID)
+			await blockbench.action('animated_java:action/blueprint-settings').trigger()
+			await blockbench.evaluate(() => {
+				;(globalThis as any).Dialog.open.sidebar.setPage('eventFunctions')
+			})
+			await blockbench.waitFor(() => document.querySelector('.dialog pre[contenteditable]'))
+			await blockbench.page.click('.dialog pre[contenteditable]')
+
+			const { keyboard } = blockbench.page
+			await keyboard.type('tag @s add a')
+			await keyboard.press('Enter')
+			await keyboard.type('tag @s add b')
+			await keyboard.press('Enter')
+			await keyboard.type('say hi')
+			await blockbench.dialog().cancel()
+
+			expect(
+				await blockbench.evaluate(
+					() => (globalThis as any).Project.animated_java.on_summon_function
+				)
+			).toBe('tag @s add a\ntag @s add b\nsay hi')
+		})
+	})
 })

src/util/codeJar.ts

@@ -0,0 +1,21 @@
+/**
+ * `beforeinput` handler that inserts native line breaks into a CodeJar editor as `\n` text.
+ *
+ * Chromium 150+ (Blockbench 5.2+) inserts `<br>` on Enter, even in `plaintext-only` `<pre>`
+ * editors, and CodeJar reads its value from `textContent`, which drops `<br>`.
+ */
+export function insertLineBreakAsText(event: InputEvent) {
+	if (event.inputType !== 'insertLineBreak' && event.inputType !== 'insertParagraph') return
+	const selection = getSelection()
+	if (!(event.target instanceof HTMLElement) || !selection?.rangeCount) return
+
+	const afterCursor = document.createRange()
+	afterCursor.selectNodeContents(event.target)
+	const { endContainer, endOffset } = selection.getRangeAt(0)
+	afterCursor.setStart(endContainer, endOffset)
+
+	event.preventDefault()
+	// A trailing `\n` doesn't render as a new line in a <pre>, so pad it with a second one.
+	// The caret lands between them, since the browser can't place it after a trailing `\n`.
+	document.execCommand('insertHTML', false, afterCursor.toString() === '' ? '\n\n' : '\n')
+}