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/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>