feat: HTML node (#5107)

* ✨ Create HTML templating node PoC

* ♻️ Apply feedback

* 🐛 Scope CSS selectors

* ✏️ Adjust description

* ✏️ Adjust placeholder

* ⚡ Replace two custom files with package output

* ➕ Add `codemirror-lang-html-n8n`

* 👕 Appease linter

* 🧪 Skip event bus tests

* ⏪ Revert "Skip event bus tests"

This reverts commit 5702585d0de3b8465660567132e9003e78f1104c.

* ✏️ Update codex

* 🧹 Cleanup

* 🐛 Restore original for `continueOnFail`

* ⚡ Improve `getResolvables`

packages/editor-ui/package.json

@@ -40,6 +40,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/vue-fontawesome": "^2.0.2",
     "axios": "^0.21.1",
+    "codemirror-lang-html-n8n": "^1.0.0",
     "codemirror-lang-n8n-expression": "^0.1.0",
     "dateformat": "^3.0.3",
     "esprima-next": "5.8.4",
@@ -62,6 +63,7 @@
     "n8n-workflow": "~0.133.2",
     "normalize-wheel": "^1.0.1",
     "pinia": "^2.0.22",
+    "prettier": "^2.8.2",
     "prismjs": "^1.17.1",
     "timeago.js": "^4.0.2",
     "uuid": "^8.3.2",

packages/editor-ui/src/Interface.ts

@@ -1102,7 +1102,7 @@ export interface IModalState {
 	httpNodeParameters?: string;
 }
 
-export type IRunDataDisplayMode = 'table' | 'json' | 'binary' | 'schema';
+export type IRunDataDisplayMode = 'table' | 'json' | 'binary' | 'schema' | 'html';
 export type NodePanelType = 'input' | 'output';
 
 export interface TargetItem {

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

@@ -0,0 +1,210 @@
+<template>
+	<div ref="htmlEditor" class="ph-no-capture"></div>
+</template>
+
+<script lang="ts">
+import mixins from 'vue-typed-mixins';
+import prettier from 'prettier/standalone';
+import htmlParser from 'prettier/parser-html';
+import cssParser from 'prettier/parser-postcss';
+import jsParser from 'prettier/parser-babel';
+import { html } from 'codemirror-lang-html-n8n';
+import { autocompletion } from '@codemirror/autocomplete';
+import { indentWithTab, insertNewlineAndIndent, history } from '@codemirror/commands';
+import { bracketMatching, ensureSyntaxTree, foldGutter, indentOnInput } from '@codemirror/language';
+import { EditorState, Extension } from '@codemirror/state';
+import {
+	dropCursor,
+	EditorView,
+	highlightActiveLine,
+	highlightActiveLineGutter,
+	keymap,
+	lineNumbers,
+	ViewUpdate,
+} from '@codemirror/view';
+
+import { expressionInputHandler } from '@/plugins/codemirror/inputHandlers/expression.inputHandler';
+import { highlighter } from '@/plugins/codemirror/resolvableHighlighter';
+import { htmlEditorEventBus } from '@/event-bus/html-editor-event-bus';
+import { expressionManager } from '@/mixins/expressionManager';
+import { theme } from './theme';
+import { nonTakenRanges } from './utils';
+import type { Range, Section } from './types';
+
+export default mixins(expressionManager).extend({
+	name: 'HtmlEditor',
+	props: {
+		html: {
+			type: String,
+		},
+		isReadOnly: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			editor: {} as EditorView,
+		};
+	},
+	computed: {
+		doc(): string {
+			return this.editor.state.doc.toString();
+		},
+
+		extensions(): Extension[] {
+			return [
+				bracketMatching(),
+				autocompletion(),
+				html({ autoCloseTags: true }),
+				expressionInputHandler(),
+				keymap.of([indentWithTab, { key: 'Enter', run: insertNewlineAndIndent }]),
+				indentOnInput(),
+				theme,
+				lineNumbers(),
+				highlightActiveLineGutter(),
+				history(),
+				foldGutter(),
+				dropCursor(),
+				indentOnInput(),
+				highlightActiveLine(),
+				EditorState.readOnly.of(this.isReadOnly),
+				EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
+					if (!viewUpdate.docChanged) return;
+
+					highlighter.removeColor(this.editor, this.htmlSegments);
+					highlighter.addColor(this.editor, this.resolvableSegments);
+
+					this.$emit('valueChanged', this.doc);
+				}),
+			];
+		},
+
+		sections(): Section[] {
+			const { state } = this.editor;
+
+			const fullTree = ensureSyntaxTree(this.editor.state, this.doc.length);
+
+			if (fullTree === null) {
+				throw new Error(`Failed to parse syntax tree for: ${this.doc}`);
+			}
+
+			let documentRange: Range = [-1, -1];
+			const styleRanges: Range[] = [];
+			const scriptRanges: Range[] = [];
+
+			fullTree.cursor().iterate((node) => {
+				if (node.type.name === 'Document') {
+					documentRange = [node.from, node.to];
+				}
+
+				if (node.type.name === 'StyleSheet') {
+					styleRanges.push([node.from - '<style>'.length, node.to + '</style>'.length]);
+				}
+
+				if (node.type.name === 'Script') {
+					scriptRanges.push([node.from - '<script>'.length, node.to + ('<' + '/script>').length]);
+					// typing the closing script tag in full causes ESLint, Prettier and Vite to crash
+				}
+			});
+
+			const htmlRanges = nonTakenRanges(documentRange, [...styleRanges, ...scriptRanges]);
+
+			const styleSections: Section[] = styleRanges.map(([start, end]) => ({
+				kind: 'style' as const,
+				range: [start, end],
+				content: state.sliceDoc(start, end).replace(/<\/?style>/g, ''),
+			}));
+
+			const scriptSections: Section[] = scriptRanges.map(([start, end]) => ({
+				kind: 'script' as const,
+				range: [start, end],
+				content: state.sliceDoc(start, end).replace(/<\/?script>/g, ''),
+			}));
+
+			const htmlSections: Section[] = htmlRanges.map(([start, end]) => ({
+				kind: 'html' as const,
+				range: [start, end] as Range,
+				content: state.sliceDoc(start, end).replace(/<\/html>/g, ''),
+				// opening tag may contain attributes, e.g. <html lang="en">
+			}));
+
+			return [...styleSections, ...scriptSections, ...htmlSections].sort(
+				(a, b) => a.range[0] - b.range[0],
+			);
+		},
+	},
+
+	methods: {
+		root() {
+			const root = this.$refs.htmlEditor as HTMLDivElement | undefined;
+
+			if (!root) throw new Error('Expected div with ref "htmlEditor"');
+
+			return root;
+		},
+
+		format() {
+			const formatted = [];
+
+			for (const { kind, content } of this.sections) {
+				if (kind === 'style') {
+					const formattedStyle = prettier.format(content, {
+						parser: 'css',
+						plugins: [cssParser],
+					});
+
+					formatted.push(`<style>\n${formattedStyle}</style>`);
+				}
+
+				if (kind === 'script') {
+					const formattedScript = prettier.format(content, {
+						parser: 'babel',
+						plugins: [jsParser],
+					});
+
+					formatted.push(`<script>\n${formattedScript}<` + '/script>');
+					// typing the closing script tag in full causes ESLint, Prettier and Vite to crash
+				}
+
+				if (kind === 'html') {
+					const match = content.match(/(?<pre>[\s\S]*<html[\s\S]*?>)(?<rest>[\s\S]*)/);
+
+					if (!match?.groups?.pre || !match.groups?.rest) continue;
+
+					// Prettier cannot format pre-HTML section, e.g. <!DOCTYPE html>, so keep as is
+
+					const { pre, rest } = match.groups;
+
+					const formattedRest = prettier.format(rest, {
+						parser: 'html',
+						plugins: [htmlParser],
+					});
+
+					formatted.push(`${pre}\n${formattedRest}</html>`);
+				}
+			}
+
+			this.editor.dispatch({
+				changes: { from: 0, to: this.doc.length, insert: formatted.join('\n\n') },
+			});
+		},
+	},
+
+	mounted() {
+		htmlEditorEventBus.$on('format-html', this.format);
+
+		const state = EditorState.create({ doc: this.html, extensions: this.extensions });
+
+		this.editor = new EditorView({ parent: this.root(), state });
+
+		highlighter.addColor(this.editor, this.resolvableSegments);
+	},
+
+	destroyed() {
+		htmlEditorEventBus.$off('format-html', this.format);
+	},
+});
+</script>
+
+<style lang="scss" module></style>

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

@@ -0,0 +1,85 @@
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { EditorView } from '@codemirror/view';
+import { tags } from '@lezer/highlight';
+
+export const theme = [
+	EditorView.theme({
+		'&': {
+			'font-size': '0.8em',
+			border: 'var(--border-base)',
+			borderRadius: 'var(--border-radius-base)',
+			backgroundColor: 'var(--color-code-background)',
+			color: 'var(--color-code-foreground)',
+		},
+		'.cm-content': {
+			fontFamily: "Menlo, Consolas, 'DejaVu Sans Mono', monospace !important",
+			caretColor: 'var(--color-code-caret)',
+		},
+		'.cm-cursor, .cm-dropCursor': {
+			borderLeftColor: 'var(--color-code-caret)',
+		},
+		'&.cm-focused .cm-selectionBackgroundm .cm-selectionBackground, .cm-content ::selection': {
+			backgroundColor: 'var(--color-code-selection)',
+		},
+		'.cm-activeLine': {
+			backgroundColor: 'var(--color-code-lineHighlight)',
+		},
+		'.cm-activeLineGutter': {
+			backgroundColor: 'var(--color-code-lineHighlight)',
+		},
+		'.cm-gutters': {
+			backgroundColor: 'var(--color-code-gutterBackground)',
+			color: 'var(--color-code-gutterForeground)',
+		},
+		'.cm-scroller': {
+			overflow: 'auto',
+			maxHeight: '350px',
+		},
+	}),
+	syntaxHighlighting(
+		HighlightStyle.define([
+			{ tag: tags.keyword, color: '#c678dd' },
+			{
+				tag: [tags.name, tags.deleted, tags.character, tags.propertyName, tags.macroName],
+				color: '#e06c75',
+			},
+			{ tag: [tags.function(tags.variableName), tags.labelName], color: '#61afef' },
+			{ tag: [tags.color, tags.constant(tags.name), tags.standard(tags.name)], color: '#d19a66' },
+			{ tag: [tags.definition(tags.name), tags.separator], color: '#abb2bf' },
+			{
+				tag: [
+					tags.typeName,
+					tags.className,
+					tags.number,
+					tags.changed,
+					tags.annotation,
+					tags.modifier,
+					tags.self,
+					tags.namespace,
+				],
+				color: '#e06c75',
+			},
+			{
+				tag: [
+					tags.operator,
+					tags.operatorKeyword,
+					tags.url,
+					tags.escape,
+					tags.regexp,
+					tags.link,
+					tags.special(tags.string),
+				],
+				color: '#56b6c2',
+			},
+			{ tag: [tags.meta, tags.comment], color: '#7d8799' },
+			{ tag: tags.strong, fontWeight: 'bold' },
+			{ tag: tags.emphasis, fontStyle: 'italic' },
+			{ tag: tags.strikethrough, textDecoration: 'line-through' },
+			{ tag: tags.link, color: '#7d8799', textDecoration: 'underline' },
+			{ tag: tags.heading, fontWeight: 'bold', color: '#e06c75' },
+			{ tag: [tags.atom, tags.bool, tags.special(tags.variableName)], color: '#d19a66' },
+			{ tag: [tags.processingInstruction, tags.string, tags.inserted], color: '#98c379' },
+			{ tag: tags.invalid, color: 'red', 'font-weight': 'bold' },
+		]),
+	),
+];

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

@@ -0,0 +1,7 @@
+export type Range = [number, number];
+
+export type Section = {
+	kind: 'html' | 'script' | 'style';
+	content: string;
+	range: Range;
+};

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

@@ -0,0 +1,40 @@
+import type { Range } from './types';
+
+/**
+ * Return the ranges of a full range that are _not_ within the taken ranges,
+ * assuming sorted taken ranges. e.g. `[0, 10]` and `[[2, 3], [7, 8]]`
+ * return `[[0, 1], [4, 6], [9, 10]]`
+ */
+export function nonTakenRanges(fullRange: Range, takenRanges: Range[]) {
+	const found = [];
+
+	const [fullStart, fullEnd] = fullRange;
+	let i = fullStart;
+	let curStart = fullStart;
+
+	takenRanges = [...takenRanges];
+
+	while (i < fullEnd) {
+		if (takenRanges.length === 0) {
+			found.push([curStart, fullEnd]);
+			break;
+		}
+
+		const [takenStart, takenEnd] = takenRanges[0];
+
+		if (i < takenStart) {
+			i++;
+			continue;
+		}
+
+		if (takenStart !== fullStart) {
+			found.push([curStart, i - 1]);
+		}
+
+		i = takenEnd + 1;
+		curStart = takenEnd + 1;
+		takenRanges.shift();
+	}
+
+	return found;
+}

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

@@ -79,6 +79,13 @@
 					@valueChanged="valueChangedDebounced"
 				/>
 
+				<html-editor
+					v-else-if="getArgument('editor') === 'htmlEditor' && isHtmlNode(node)"
+					:html="node.parameters.html"
+					:isReadOnly="isReadOnly"
+					@valueChanged="valueChangedDebounced"
+				/>
+
 				<div
 					v-else-if="isEditor === true"
 					class="code-edit clickable ph-no-capture"
@@ -337,6 +344,7 @@ import ExpressionParameterInput from '@/components/ExpressionParameterInput.vue'
 import PrismEditor from 'vue-prism-editor';
 import TextEdit from '@/components/TextEdit.vue';
 import CodeNodeEditor from '@/components/CodeNodeEditor/CodeNodeEditor.vue';
+import HtmlEditor from '@/components/HtmlEditor/HtmlEditor.vue';
 import { externalHooks } from '@/mixins/externalHooks';
 import { nodeHelpers } from '@/mixins/nodeHelpers';
 import { showMessage } from '@/mixins/showMessage';
@@ -345,7 +353,7 @@ import { hasExpressionMapping, isValueExpression, isResourceLocatorValue } from
 
 import mixins from 'vue-typed-mixins';
 import { CUSTOM_API_CALL_KEY } from '@/constants';
-import { CODE_NODE_TYPE } from '@/constants';
+import { CODE_NODE_TYPE, HTML_NODE_TYPE } from '@/constants';
 import { PropType } from 'vue';
 import { debounceHelper } from '@/mixins/debounce';
 import { mapStores } from 'pinia';
@@ -353,6 +361,7 @@ import { useWorkflowsStore } from '@/stores/workflows';
 import { useNDVStore } from '@/stores/ndv';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
 import { useCredentialsStore } from '@/stores/credentials';
+import { htmlEditorEventBus } from '@/event-bus/html-editor-event-bus';
 
 export default mixins(
 	externalHooks,
@@ -365,6 +374,7 @@ export default mixins(
 	components: {
 		CodeEdit,
 		CodeNodeEditor,
+		HtmlEditor,
 		ExpressionEdit,
 		ExpressionParameterInput,
 		NodeCredentials,
@@ -948,6 +958,9 @@ export default mixins(
 		isCodeNode(node: INodeUi): boolean {
 			return node.type === CODE_NODE_TYPE;
 		},
+		isHtmlNode(node: INodeUi): boolean {
+			return node.type === HTML_NODE_TYPE;
+		},
 		rgbaToHex(value: string): string | null {
 			// Convert rgba to hex from: https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
 			const valueMatch = (value as string).match(
@@ -1077,6 +1090,8 @@ export default mixins(
 					}
 				}
 				this.loadRemoteParameterOptions();
+			} else if (command === 'formatHtml') {
+				htmlEditorEventBus.$emit('format-html');
 			}
 
 			if (this.node && (command === 'addExpression' || command === 'removeExpression')) {

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

@@ -28,6 +28,9 @@
 import { NodeParameterValueType } from 'n8n-workflow';
 import Vue, { PropType } from 'vue';
 import { isValueExpression, isResourceLocatorValue } from '@/utils';
+import { useNDVStore } from '@/stores/ndv';
+import { mapStores } from 'pinia';
+import { HTML_NODE_TYPE } from '@/constants';
 
 export default Vue.extend({
 	name: 'parameter-options',
@@ -51,6 +54,7 @@ export default Vue.extend({
 		},
 	},
 	computed: {
+		...mapStores(useNDVStore),
 		isDefault(): boolean {
 			return this.parameter.default === this.value;
 		},
@@ -91,6 +95,18 @@ export default Vue.extend({
 			return !!this.getArgument('loadOptionsMethod') || !!this.getArgument('loadOptions');
 		},
 		actions(): Array<{ label: string; value: string; disabled?: boolean }> {
+			if (
+				this.ndvStore.activeNode?.type === HTML_NODE_TYPE &&
+				this.ndvStore.activeNode?.parameters.operation === 'generateHtmlTemplate'
+			) {
+				return [
+					{
+						label: 'Format HTML',
+						value: 'formatHtml',
+					},
+				];
+			}
+
 			const actions = [
 				{
 					label: this.$locale.baseText('parameterInput.resetValue'),

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

@@ -316,6 +316,11 @@
 				:totalRuns="maxRunIndex"
 			/>
 
+			<run-data-html
+				v-else-if="hasNodeRun && isPaneTypeOutput && displayMode === 'html'"
+				:inputData="inputData"
+			/>
+
 			<run-data-schema
 				v-else-if="hasNodeRun && displayMode === 'schema'"
 				:data="jsonData"
@@ -475,6 +480,7 @@ import {
 	MAX_DISPLAY_DATA_SIZE,
 	MAX_DISPLAY_ITEMS_AUTO_ALL,
 	TEST_PIN_DATA,
+	HTML_NODE_TYPE,
 } from '@/constants';
 
 import BinaryDataDisplay from '@/components/BinaryDataDisplay.vue';
@@ -497,6 +503,7 @@ import { useNodeTypesStore } from '@/stores/nodeTypes';
 const RunDataTable = () => import('@/components/RunDataTable.vue');
 const RunDataJson = () => import('@/components/RunDataJson.vue');
 const RunDataSchema = () => import('@/components/RunDataSchema.vue');
+const RunDataHtml = () => import('@/components/RunDataHtml.vue');
 
 export type EnterEditModeArgs = {
 	origin: 'editIconButton' | 'insertTestDataLink';
@@ -512,6 +519,7 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
 		RunDataTable,
 		RunDataJson,
 		RunDataSchema,
+		RunDataHtml,
 	},
 	props: {
 		nodeUi: {
@@ -598,6 +606,8 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
 			pane: this.paneType as 'input' | 'output',
 			branchIndex: this.currentOutputIndex,
 		});
+
+		if (this.paneType === 'output') this.setDisplayMode();
 	},
 	destroyed() {
 		this.hidePinDataDiscoveryTooltip();
@@ -651,6 +661,14 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
 				defaults.unshift({ label: this.$locale.baseText('runData.schema'), value: 'schema' });
 			}
 
+			if (
+				this.isPaneTypeOutput &&
+				this.activeNode?.type === HTML_NODE_TYPE &&
+				this.activeNode.parameters.operation === 'generateHtmlTemplate'
+			) {
+				defaults.unshift({ label: 'HTML', value: 'html' });
+			}
+
 			return defaults;
 		},
 		hasNodeRun(): boolean {
@@ -833,6 +851,9 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
 		isPaneTypeInput(): boolean {
 			return this.paneType === 'input';
 		},
+		isPaneTypeOutput(): boolean {
+			return this.paneType === 'output';
+		},
 	},
 	methods: {
 		onItemHover(itemIndex: number | null) {
@@ -1275,11 +1296,26 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
 				this.ndvStore.activeNodeName = this.node.name;
 			}
 		},
+		setDisplayMode() {
+			if (!this.activeNode) return;
+
+			const shouldDisplayHtml =
+				this.activeNode.type === HTML_NODE_TYPE &&
+				this.activeNode.parameters.operation === 'generateHtmlTemplate';
+
+			this.ndvStore.setPanelDisplayMode({
+				pane: 'output',
+				mode: shouldDisplayHtml ? 'html' : 'table',
+			});
+		},
 	},
 	watch: {
 		node() {
 			this.init();
 		},
+		hasNodeRun() {
+			if (this.paneType === 'output') this.setDisplayMode();
+		},
 		inputData: {
 			handler(data: INodeExecutionData[]) {
 				if (this.paneType && data) {

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

@@ -0,0 +1,50 @@
+<template>
+	<div class="__html-display" v-html="html"></div>
+</template>
+
+<script lang="ts">
+import type { PropType } from 'vue';
+import type { INodeExecutionData } from 'n8n-workflow';
+
+export default {
+	name: 'RunDataHtml',
+	props: {
+		inputData: {
+			type: Array as PropType<INodeExecutionData[]>,
+		},
+	},
+	computed: {
+		html() {
+			if (!this.inputData) return '';
+
+			return this.scopeCss(this.inputData[0].json.html as string);
+		},
+	},
+	methods: {
+		/**
+		 * Scope all CSS selectors to prevent user stylesheets from leaking.
+		 */
+		scopeCss(str: string) {
+			const stylesheets = str.match(/<style>([\s\S]*?)<\/style>/g);
+
+			if (!stylesheets) return str;
+
+			const map = stylesheets.reduce<Record<string, string>>((acc, match) => {
+				match.split('\n').forEach((line) => {
+					if (line.endsWith('{')) acc[line] = ['.__html-display', line].join(' ');
+				});
+
+				return acc;
+			}, {});
+
+			return Object.entries(map).reduce((acc, [key, value]) => acc.replace(key, value), str);
+		},
+	},
+};
+</script>
+
+<style lang="scss">
+.__html-display {
+	padding: 0 var(--spacing-s);
+}
+</style>

packages/editor-ui/src/constants.ts

@@ -92,6 +92,7 @@ export const ELASTIC_SECURITY_NODE_TYPE = 'n8n-nodes-base.elasticSecurity';
 export const EMAIL_SEND_NODE_TYPE = 'n8n-nodes-base.emailSend';
 export const EMAIL_IMAP_NODE_TYPE = 'n8n-nodes-base.emailReadImap';
 export const EXECUTE_COMMAND_NODE_TYPE = 'n8n-nodes-base.executeCommand';
+export const HTML_NODE_TYPE = 'n8n-nodes-base.html';
 export const HTTP_REQUEST_NODE_TYPE = 'n8n-nodes-base.httpRequest';
 export const HUBSPOT_TRIGGER_NODE_TYPE = 'n8n-nodes-base.hubspotTrigger';
 export const IF_NODE_TYPE = 'n8n-nodes-base.if';

packages/editor-ui/src/event-bus/html-editor-event-bus.ts

@@ -0,0 +1,3 @@
+import Vue from 'vue';
+
+export const htmlEditorEventBus = new Vue();

packages/editor-ui/src/mixins/expressionManager.ts

@@ -1,6 +1,6 @@
 import mixins from 'vue-typed-mixins';
 import { mapStores } from 'pinia';
-import { ensureSyntaxTree, syntaxTree } from '@codemirror/language';
+import { ensureSyntaxTree } from '@codemirror/language';
 
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { useNDVStore } from '@/stores/ndv';
@@ -9,7 +9,7 @@ import { EXPRESSION_EDITOR_PARSER_TIMEOUT } from '@/constants';
 import type { PropType } from 'vue';
 import type { EditorView } from '@codemirror/view';
 import type { TargetItem } from '@/Interface';
-import type { Plaintext, RawSegment, Resolvable, Segment } from '@/types/expressions';
+import type { Html, Plaintext, RawSegment, Resolvable, Segment } from '@/types/expressions';
 
 export const expressionManager = mixins(workflowHelpers).extend({
 	props: {
@@ -56,6 +56,10 @@ export const expressionManager = mixins(workflowHelpers).extend({
 			return this.segments.filter((s): s is Plaintext => s.kind === 'plaintext');
 		},
 
+		htmlSegments(): Html[] {
+			return this.segments.filter((s): s is Html => s.kind !== 'resolvable');
+		},
+
 		segments(): Segment[] {
 			if (!this.editor) return [];
 

packages/editor-ui/src/plugins/codemirror/inputHandlers/expression.inputHandler.ts

@@ -29,7 +29,19 @@ const handler = EditorView.inputHandler.of((view, from, to, insert) => {
 
 	const transaction = insertBracket(view.state, insert);
 
-	if (!transaction) return false;
+	if (!transaction) {
+		// customization: brace setup when surrounded by HTML tags: <div></div> -> <div>{| }</div>
+		if (insert === '{') {
+			const cursor = view.state.selection.main.head;
+			view.dispatch({
+				changes: { from: cursor, insert: '{ }' },
+				selection: { anchor: cursor + 1 },
+			});
+			return true;
+		}
+
+		return false;
+	}
 
 	view.dispatch(transaction);
 
@@ -90,6 +102,7 @@ const [_, bracketState] = closeBrackets() as readonly Extension[];
  * - prevent token autoclosing during autocompletion (exception: `{`),
  * - prevent square bracket autoclosing prior to `.json`
  * - inject whitespace and braces for resolvables
+ * - set up braces when surrounded by HTML tags
  *
  * Other than segments marked `customization`, this is a copy of the [original](https://github.com/codemirror/closebrackets/blob/0a56edfaf2c6d97bc5e88f272de0985b4f41e37a/src/closebrackets.ts#L79).
  */

packages/editor-ui/src/types/expressions.ts

@@ -6,6 +6,8 @@ export type Segment = Plaintext | Resolvable;
 
 export type Plaintext = { kind: 'plaintext'; plaintext: string } & Range;
 
+export type Html = Plaintext; // for n8n parser, functionally identical to plaintext
+
 export type Resolvable = {
 	kind: 'resolvable';
 	resolvable: string;