feat(editor): Create separate components for JS and JSON editors (no-changelog) (#8156)

## Summary
This is part-1 of refactoring our code editors to extract different type
of editors into their own components.
In part-2 we'll
1. delete a of unused or duplicate code
2. switch to a `useEditor` composable to bring more UX consistency
across all the code editors.

## Review / Merge checklist
- [x] PR title and summary are descriptive
- [x] Tests included

packages/nodes-base/nodes/Discord/v1/DiscordV1.node.ts

@@ -55,14 +55,14 @@ const versionDescription: INodeTypeDescription = {
 					displayName: 'Allowed Mentions',
 					name: 'allowedMentions',
 					type: 'json',
-					typeOptions: { alwaysOpenEditWindow: true, editor: 'code' },
+					typeOptions: { alwaysOpenEditWindow: true },
 					default: '',
 				},
 				{
 					displayName: 'Attachments',
 					name: 'attachments',
 					type: 'json',
-					typeOptions: { alwaysOpenEditWindow: true, editor: 'code' },
+					typeOptions: { alwaysOpenEditWindow: true },
 					default: '',
 				},
 				{
@@ -75,14 +75,14 @@ const versionDescription: INodeTypeDescription = {
 					displayName: 'Components',
 					name: 'components',
 					type: 'json',
-					typeOptions: { alwaysOpenEditWindow: true, editor: 'code' },
+					typeOptions: { alwaysOpenEditWindow: true },
 					default: '',
 				},
 				{
 					displayName: 'Embeds',
 					name: 'embeds',
 					type: 'json',
-					typeOptions: { alwaysOpenEditWindow: true, editor: 'code' },
+					typeOptions: { alwaysOpenEditWindow: true },
 					default: '',
 				},
 				{
@@ -95,7 +95,7 @@ const versionDescription: INodeTypeDescription = {
 					displayName: 'JSON Payload',
 					name: 'payloadJson',
 					type: 'json',
-					typeOptions: { alwaysOpenEditWindow: true, editor: 'code' },
+					typeOptions: { alwaysOpenEditWindow: true },
 					default: '',
 				},
 				{

packages/nodes-base/nodes/Discord/v2/actions/common.description.ts

@@ -416,11 +416,9 @@ export const embedsFixedCollection: INodeProperties = {
 				{
 					displayName: 'Value',
 					name: 'json',
-					type: 'string',
+					type: 'json',
 					default: '={}',
 					typeOptions: {
-						editor: 'json',
-						editorLanguage: 'json',
 						rows: 2,
 					},
 					displayOptions: {

packages/nodes-base/nodes/ExecuteWorkflow/ExecuteWorkflow.node.ts

@@ -111,9 +111,8 @@ export class ExecuteWorkflow implements INodeType {
 			{
 				displayName: 'Workflow JSON',
 				name: 'workflowJson',
-				type: 'string',
+				type: 'json',
 				typeOptions: {
-					editor: 'json',
 					rows: 10,
 				},
 				displayOptions: {

packages/nodes-base/nodes/ExecuteWorkflow/GenericFunctions.ts

@@ -1,10 +1,6 @@
 import { readFile as fsReadFile } from 'fs/promises';
-import {
-	NodeOperationError,
-	type IExecuteFunctions,
-	type IExecuteWorkflowInfo,
-	jsonParse,
-} from 'n8n-workflow';
+import { NodeOperationError, jsonParse } from 'n8n-workflow';
+import type { IWorkflowBase, IExecuteFunctions, IExecuteWorkflowInfo } from 'n8n-workflow';
 
 export async function getWorkflowInfo(this: IExecuteFunctions, source: string, itemIndex = 0) {
 	const workflowInfo: IExecuteWorkflowInfo = {};
@@ -33,8 +29,7 @@ export async function getWorkflowInfo(this: IExecuteFunctions, source: string, i
 		workflowInfo.code = jsonParse(workflowJson);
 	} else if (source === 'parameter') {
 		// Read workflow from parameter
-		const workflowJson = this.getNodeParameter('workflowJson', itemIndex) as string;
-		workflowInfo.code = jsonParse(workflowJson);
+		workflowInfo.code = this.getNodeParameter('workflowJson', itemIndex) as IWorkflowBase;
 	} else if (source === 'url') {
 		// Read workflow from url
 		const workflowUrl = this.getNodeParameter('workflowUrl', itemIndex) as string;

packages/nodes-base/nodes/Function/Function.node.ts

@@ -40,7 +40,7 @@ export class Function implements INodeType {
 				typeOptions: {
 					alwaysOpenEditWindow: true,
 					codeAutocomplete: 'function',
-					editor: 'code',
+					editor: 'jsEditor',
 					rows: 10,
 				},
 				type: 'string',

packages/nodes-base/nodes/FunctionItem/FunctionItem.node.ts

@@ -40,7 +40,7 @@ export class FunctionItem implements INodeType {
 				typeOptions: {
 					alwaysOpenEditWindow: true,
 					codeAutocomplete: 'functionItem',
-					editor: 'code',
+					editor: 'jsEditor',
 					rows: 10,
 				},
 				type: 'string',

packages/nodes-base/nodes/ItemLists/V1/ItemListsV1.node.ts

@@ -596,7 +596,7 @@ export class ItemListsV1 implements INodeType {
 					type: 'string',
 					typeOptions: {
 						alwaysOpenEditWindow: true,
-						editor: 'code',
+						editor: 'jsEditor',
 						rows: 10,
 					},
 					default: `// The two items to compare are in the variables a and b

packages/nodes-base/nodes/ItemLists/V2/ItemListsV2.node.ts

@@ -598,7 +598,7 @@ export class ItemListsV2 implements INodeType {
 					type: 'string',
 					typeOptions: {
 						alwaysOpenEditWindow: true,
-						editor: 'code',
+						editor: 'jsEditor',
 						rows: 10,
 					},
 					default: `// The two items to compare are in the variables a and b

packages/nodes-base/nodes/ItemLists/V3/actions/itemList/sort.operation.ts

@@ -96,7 +96,7 @@ const properties: INodeProperties[] = [
 		type: 'string',
 		typeOptions: {
 			alwaysOpenEditWindow: true,
-			editor: 'code',
+			editor: 'jsEditor',
 			rows: 10,
 		},
 		default: `// The two items to compare are in the variables a and b

packages/nodes-base/nodes/RespondToWebhook/RespondToWebhook.node.ts

@@ -115,8 +115,6 @@ export class RespondToWebhook implements INodeType {
 				},
 				default: '{\n  "myField": "value"\n}',
 				typeOptions: {
-					editor: 'json',
-					editorLanguage: 'json',
 					rows: 4,
 				},
 				description: 'The HTTP response JSON data',

packages/nodes-base/nodes/Set/v2/manual.mode.ts

@@ -139,11 +139,9 @@ const properties: INodeProperties[] = [
 					{
 						displayName: 'Value',
 						name: 'objectValue',
-						type: 'string',
+						type: 'json',
 						default: '={}',
 						typeOptions: {
-							editor: 'json',
-							editorLanguage: 'json',
 							rows: 2,
 						},
 						displayOptions: {

packages/nodes-base/nodes/Set/v2/raw.mode.ts

@@ -15,10 +15,8 @@ const properties: INodeProperties[] = [
 	{
 		displayName: 'JSON Output',
 		name: 'jsonOutput',
-		type: 'string',
+		type: 'json',
 		typeOptions: {
-			editor: 'json',
-			editorLanguage: 'json',
 			rows: 5,
 		},
 		default: '{\n  "my_field_1": "value",\n  "my_field_2": 1\n}',

packages/nodes-base/nodes/TheHiveProject/actions/query/executeQuery.operation.ts

@@ -13,13 +13,12 @@ const properties: INodeProperties[] = [
 	{
 		displayName: 'Query',
 		name: 'queryJson',
-		type: 'string',
+		type: 'json',
 		required: true,
 		default: '=[\n  {\n    "_name": "listOrganisation"\n  }\n]',
 		description: 'Search for objects with filtering and sorting capabilities',
 		hint: 'The query should be an array of operations with the required selection and optional filtering, sorting, and pagination. See <a href="https://docs.strangebee.com/thehive/api-docs/#operation/Query%20API" target="_blank">Query API</a> for more information.',
 		typeOptions: {
-			editor: 'json',
 			rows: 10,
 		},
 	},

packages/nodes-base/nodes/Transform/Sort/Sort.node.ts

@@ -106,7 +106,7 @@ export class Sort implements INodeType {
 				type: 'string',
 				typeOptions: {
 					alwaysOpenEditWindow: true,
-					editor: 'code',
+					editor: 'jsEditor',
 					rows: 10,
 				},
 				default: `// The two items to compare are in the variables a and b