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/editor-ui/src/components/ParameterInput.vue

@@ -124,14 +124,18 @@
 					@update:modelValue="valueChangedDebounced"
 				/>
 
-				<CodeNodeEditor
-					v-else-if="editorType === 'json' && !isExecuteWorkflowNode(node)"
-					:mode="node.parameters.mode"
+				<JsEditor
+					v-else-if="editorType === 'jsEditor'"
+					:model-value="modelValue"
+					:is-read-only="isReadOnly"
+					:rows="getArgument('rows')"
+					@update:modelValue="valueChangedDebounced"
+				/>
+
+				<JsonEditor
+					v-else-if="parameter.type === 'json'"
 					:model-value="modelValue"
-					:default-value="parameter.default"
-					:language="editorLanguage"
 					:is-read-only="isReadOnly"
-					:ai-button-enabled="false"
 					:rows="getArgument('rows')"
 					@update:modelValue="valueChangedDebounced"
 				/>
@@ -396,18 +400,15 @@ import ExpressionParameterInput from '@/components/ExpressionParameterInput.vue'
 import TextEdit from '@/components/TextEdit.vue';
 import CodeNodeEditor from '@/components/CodeNodeEditor/CodeNodeEditor.vue';
 import HtmlEditor from '@/components/HtmlEditor/HtmlEditor.vue';
+import JsEditor from '@/components/JsEditor/JsEditor.vue';
+import JsonEditor from '@/components/JsonEditor/JsonEditor.vue';
 import SqlEditor from '@/components/SqlEditor/SqlEditor.vue';
 
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { hasExpressionMapping, isValueExpression } from '@/utils/nodeTypesUtils';
 import { isResourceLocatorValue } from '@/utils/typeGuards';
 
-import {
-	CUSTOM_API_CALL_KEY,
-	EXECUTE_WORKFLOW_NODE_TYPE,
-	HTML_NODE_TYPE,
-	NODES_USING_CODE_NODE_EDITOR,
-} from '@/constants';
+import { CUSTOM_API_CALL_KEY, HTML_NODE_TYPE, NODES_USING_CODE_NODE_EDITOR } from '@/constants';
 
 import type { PropType } from 'vue';
 import { debounceHelper } from '@/mixins/debounce';
@@ -432,6 +433,8 @@ export default defineComponent({
 	components: {
 		CodeNodeEditor,
 		HtmlEditor,
+		JsEditor,
+		JsonEditor,
 		SqlEditor,
 		ExpressionEdit,
 		ExpressionParameterInput,
@@ -1119,9 +1122,6 @@ export default defineComponent({
 		isHtmlNode(node: INodeUi): boolean {
 			return node.type === HTML_NODE_TYPE;
 		},
-		isExecuteWorkflowNode(node: INodeUi): boolean {
-			return node.type === EXECUTE_WORKFLOW_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.match(/^rgba\((\d+),\s*(\d+),\s*(\d+),\s*(\d+(\.\d+)?)\)$/);