Editor: disable orphans

package.json

@@ -14,6 +14,7 @@
 		"react-dom": "^18.3.1"
 	},
 	"devDependencies": {
+		"@blockly/disable-top-blocks": "^0.5.12",
 		"@blockly/theme-dark": "^7.0.10",
 		"@blockly/theme-modern": "^6.0.10",
 		"@emotion/react": "^11.14.0",

src/BlocklyThemes.d.ts → src/Blockly.d.ts

@@ -7,3 +7,11 @@ declare module '@blockly/theme-modern' {
 	const theme: Blockly.Theme
 	export = theme
 }
+
+declare module '@blockly/disable-top-blocks' {
+	const X: {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		DisableTopBlocks: any
+	}
+	export = X
+}

src/Components/Editor.tsx

@@ -1,3 +1,4 @@
+import { DisableTopBlocks } from '@blockly/disable-top-blocks'
 import DarkTheme from '@blockly/theme-dark'
 import ModernTheme from '@blockly/theme-modern'
 import * as Blockly from 'blockly/core'
@@ -104,13 +105,19 @@ export const Editor: FunctionComponent<{
 					setWorkspace(workspace)
 					setTheme(workspace)
 					workspace.addTrashcan() // @TODO: improve styling
+
+					workspace.addChangeListener(Blockly.Events.disableOrphans)
+					new DisableTopBlocks().init()
+
+					// Set base XML
 					Blockly.Events.setRecordUndo(false)
 					Blockly.Xml.clearWorkspaceAndLoadFromXml(
 						new window.DOMParser().parseFromString(baseXml, 'text/xml')
 							.documentElement,
 						workspace,
 					)
 					Blockly.Events.setRecordUndo(true)
+
 					if (initialXml) {
 						Blockly.Xml.clearWorkspaceAndLoadFromXml(
 							new window.DOMParser().parseFromString(initialXml, 'text/xml')