feat(editor): SQL editor overhaul (#6282)

* Draft setup
* ⚡ Implemented expression evaluation in Postgres node, minor SQL editor UI improvements, minor refacring
* ⚡ Added initial version of expression preview for SQL editor
* ⚡ Linking npm package for codemirror sql grammar instead of a local file
* ⚡ Moving expression editor wrapper elements to the component
* ⚡ Using expression preview in SQL editor
* Use SQL parser skipping whitespace
* ✨ Added support for custom skipped segments specification
* ✨ Fixing highlight problems with dots and expressions that resolve to zero
* 👕 Fixing linting error
* ✨ Added current item support
* ⚡ Added expression support to more nodes with sql editor
* ✨ Added expression support for other nodes
* ✨ Implemented different SQL dialect support
* 🐛 Fixing hard-coded parameter names for editors
* ✨ Fixing preview for nested queries, updating query when input data changes, adding keyboard shortcut to toggle comments
* ✨ Adding a custom automcomplete notice for different editors
* ⚡ Updating SQL autocomplete notice
* ✅ Added unit tests for SQL editor
* ⚡ Using latest grammar
* 🐛 Fixing code node editor rendering
* 💄 SQL preview dropdown matches editor width. Removing unnecessary css
* ⚡ Addressing PR review feedback
* 👌 Addressing PR review feedback pt2
* 👌 Added path alias for utils in nodes-base package
* 👌 Addressing more PR review feedback
* ✅ Adding tests for `getResolvables` utility function
* ⚡Fixing lodash imports
* 👌 Better focus handling, adding more plugins to the editor, other minor imrovements
* ⚡ Not showing SQL autocomplete suggestions inside expressions
* ⚡ Using npm package for sql grammar
* ⚡ Removing autocomplete notice, adding line highlight on syntax error
* 👌 Addressing code review feedback
---------
Co-authored-by: Milorad Filipovic <milorad@n8n.io>

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

@@ -23,6 +23,7 @@ export const expressionManager = defineComponent({
 	data() {
 		return {
 			editor: {} as EditorView,
+			skipSegments: [] as string[],
 		};
 	},
 	watch: {
@@ -71,6 +72,8 @@ export const expressionManager = defineComponent({
 		},
 
 		segments(): Segment[] {
+			if (!this.editor?.state) return [];
+
 			const rawSegments: RawSegment[] = [];
 
 			const fullTree = ensureSyntaxTree(
@@ -83,14 +86,18 @@ export const expressionManager = defineComponent({
 				throw new Error(`Failed to parse expression: ${this.editor.state.doc.toString()}`);
 			}
 
+			const skipSegments = ['Program', 'Script', 'Document', ...this.skipSegments];
+
 			fullTree.cursor().iterate((node) => {
-				if (node.type.name === 'Program') return;
+				const text = this.editor.state.sliceDoc(node.from, node.to);
+
+				if (skipSegments.includes(node.type.name)) return;
 
 				rawSegments.push({
 					from: node.from,
 					to: node.to,
-					text: this.editor.state.sliceDoc(node.from, node.to),
-					token: node.type.name,
+					text,
+					token: node.type.name === 'Resolvable' ? 'Resolvable' : 'Plaintext',
 				});
 			});
 
@@ -100,7 +107,18 @@ export const expressionManager = defineComponent({
 				if (token === 'Resolvable') {
 					const { resolved, error, fullError } = this.resolve(text, this.hoveringItem);
 
-					acc.push({ kind: 'resolvable', from, to, resolvable: text, resolved, error, fullError });
+					acc.push({
+						kind: 'resolvable',
+						from,
+						to,
+						resolvable: text,
+						// TODO:
+						// For some reason, expressions that resolve to a number 0 are breaking preview in the SQL editor
+						// This fixes that but as as TODO we should figure out why this is happening
+						resolved: String(resolved),
+						error,
+						fullError,
+					});
 
 					return acc;
 				}