feat(core): Add support for building LLM applications (#7235)

This extracts all core and editor changes from #7246 and #7137, so that
we can get these changes merged first.

ADO-1120

[DB Tests](https://github.com/n8n-io/n8n/actions/runs/6379749011)
[E2E Tests](https://github.com/n8n-io/n8n/actions/runs/6379751480)
[Workflow Tests](https://github.com/n8n-io/n8n/actions/runs/6379752828)

---------

Co-authored-by: Jan Oberhauser <jan.oberhauser@gmail.com>
Co-authored-by: Oleg Ivaniv <me@olegivaniv.com>
Co-authored-by: Alex Grozav <alex@grozav.com>
Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in>

packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue

@@ -95,7 +95,9 @@ export default defineComponent({
 					{ key: 'Mod-Shift-z', run: redo },
 				]),
 				indentOnInput(),
-				theme,
+				theme({
+					isReadOnly: this.isReadOnly,
+				}),
 				lineNumbers(),
 				highlightActiveLineGutter(),
 				history(),
@@ -103,6 +105,7 @@ export default defineComponent({
 				dropCursor(),
 				indentOnInput(),
 				highlightActiveLine(),
+				EditorView.editable.of(!this.isReadOnly),
 				EditorState.readOnly.of(this.isReadOnly),
 				EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
 					if (!viewUpdate.docChanged) return;

packages/editor-ui/src/components/HtmlEditor/theme.ts

@@ -2,7 +2,7 @@ import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
 import { EditorView } from '@codemirror/view';
 import { tags } from '@lezer/highlight';
 
-export const theme = [
+export const theme = ({ isReadOnly }: { isReadOnly: boolean }) => [
 	EditorView.theme({
 		'&': {
 			'font-size': '0.8em',
@@ -18,6 +18,9 @@ export const theme = [
 		'.cm-cursor, .cm-dropCursor': {
 			borderLeftColor: 'var(--color-code-caret)',
 		},
+		'&.cm-editor': {
+			...(isReadOnly ? { backgroundColor: 'var(--color-code-background-readonly)' } : {}),
+		},
 		'&.cm-editor.cm-focused': {
 			outline: '0',
 		},
@@ -31,7 +34,9 @@ export const theme = [
 			backgroundColor: 'var(--color-code-lineHighlight)',
 		},
 		'.cm-gutters': {
-			backgroundColor: 'var(--color-code-gutterBackground)',
+			backgroundColor: isReadOnly
+				? 'var(--color-code-background-readonly)'
+				: 'var(--color-code-gutterBackground)',
 			color: 'var(--color-code-gutterForeground)',
 			borderTopLeftRadius: 'var(--border-radius-base)',
 			borderBottomLeftRadius: 'var(--border-radius-base)',