From 9c3773c5ff8c02bf110cb5409a241de1210ff68f Mon Sep 17 00:00:00 2001
From: Prince Rajpoot <44585452+princerajpoot20@users.noreply.github.com>
Date: Tue, 26 Mar 2024 14:49:07 +0530
Subject: [PATCH 1/3] feat: add Visual JSON Schema Editor (#905)

Co-authored-by: samz <samir.amzani@gmail.com>
---
 .../VisualJsonSchemaEditor.stories.tsx        | 284 ++++++++++++++++++
 package-lock.json                             |   3 +-
 package.json                                  |   3 +-
 packages/ui/components/VisualEditor.tsx       | 101 +++++++
 .../ui/components/VisualEditor/CodeEditor.tsx |  51 ++++
 .../ui/components/VisualEditor/Example.tsx    |  12 +
 .../VisualEditor/PropertyControls.tsx         |  88 ++++++
 .../components/VisualEditor/SchemaObject.tsx  |  73 +++++
 .../VisualEditor/SchemaProperty.tsx           | 148 +++++++++
 .../ui/components/icons/NotRequiredIcon.tsx   |  13 +
 packages/ui/components/icons/RequiredIcon.tsx |  13 +
 packages/ui/components/icons/index.tsx        |   2 +
 packages/ui/components/index.tsx              |   3 +
 13 files changed, 792 insertions(+), 2 deletions(-)
 create mode 100644 apps/design-system/src/components/VisualJsonSchemaEditor.stories.tsx
 create mode 100644 packages/ui/components/VisualEditor.tsx
 create mode 100644 packages/ui/components/VisualEditor/CodeEditor.tsx
 create mode 100644 packages/ui/components/VisualEditor/Example.tsx
 create mode 100644 packages/ui/components/VisualEditor/PropertyControls.tsx
 create mode 100644 packages/ui/components/VisualEditor/SchemaObject.tsx
 create mode 100644 packages/ui/components/VisualEditor/SchemaProperty.tsx
 create mode 100644 packages/ui/components/icons/NotRequiredIcon.tsx
 create mode 100644 packages/ui/components/icons/RequiredIcon.tsx

diff --git a/apps/design-system/src/components/VisualJsonSchemaEditor.stories.tsx b/apps/design-system/src/components/VisualJsonSchemaEditor.stories.tsx
new file mode 100644
index 000000000..394eeabae
--- /dev/null
+++ b/apps/design-system/src/components/VisualJsonSchemaEditor.stories.tsx
@@ -0,0 +1,284 @@
+import React, { useState } from 'react';
+import { VisualEditor, CodeEditor, Examples } from '@asyncapi/studio-ui';
+
+export default {
+  component: VisualEditor,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+type TemplateProps = {
+  initialSchema: string;
+};
+
+const Template: React.FC<TemplateProps> = ({ initialSchema }) => {
+  const [schema, setSchema] = useState<string>(initialSchema);
+  const [editorType, setEditorType] = useState<'visual' | 'code' | 'examples'>('visual');
+
+
+  return (
+    <div>
+      <div style={{ width: '45vw', minWidth:'550px', background: '#0F172A', color: '#CBD5E1', fontFamily: 'Inter, sans-serif' }}>
+        <button style={{padding: 5}} onClick={() => setEditorType('visual')}>Visual Editor </button>
+        <button style={{padding: 5}} onClick={() => setEditorType('code')}>Code Editor </button>
+        <button style={{padding: 5}} onClick={() => setEditorType('examples')}>Examples </button>
+      </div>
+      <div>
+        {editorType === 'visual' && (
+          <VisualEditor schema={schema} onSchemaChange={setSchema} />
+        )}
+        {editorType === 'code' && (
+          <CodeEditor schema={schema} onSchemaChange={setSchema} />
+        )}
+        {editorType === 'examples' && (
+          <Examples/>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const Sample_Schema = () => (
+  <Template
+    initialSchema={JSON.stringify({
+      "type": "object",
+      "properties": {
+     
+        "age": {
+          "type": "integer"
+        },
+        "address": {
+          "type": "object",
+          "properties": {
+            "street": {
+              "type": "string"
+            },
+            "city": {
+              "type": "string"
+            },
+            "pincode":{
+              "type": "number"
+            }
+          },
+          "required": [
+            "street",
+            "city"
+          ]
+        }
+      }
+    }, null, 2)}
+  />
+);
+
+export const Schema_with_array_object = () => (
+  <Template
+    initialSchema={JSON.stringify({
+      "type": "object",
+      "properties": {
+        "firstName": {
+          "type": "string"
+        },
+        "lastName": {
+          "type": "string"
+        },
+        "age": {
+          "type": "boolean"
+        },
+        "height": {
+          "type": ["integer", "null"]
+        },
+        "friends": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "properties": {
+              "firstName": {
+                "type": "string"
+              }
+            },
+            "required": ["firstName"]
+          }
+        }
+      },
+      "required": ["firstName", "lastName"]
+    }
+    , null, 2)}
+  />
+);
+
+export const WithArray_obj = () => (
+  <Template
+    initialSchema={JSON.stringify({
+      "type": "object",
+      "properties": {
+        "books": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "properties": {
+              "title": {
+                "type": "string"
+              },
+              "author": {
+                "type": "string"
+              }
+            }
+          }
+        }
+      }
+    }, null, 2)}
+  />
+);
+
+export const WithArray_obj_and_obj = () => (
+  <Template
+    initialSchema={JSON.stringify({
+      "type": "object",
+      "properties": {
+          "books": {
+              "type": "array",
+              "items": {
+                  "type": "object",
+                  "properties": {
+                      "title": {"type": "string"},
+                      "author": {"type": "string"}
+                  },
+                  "required": ["title"]
+              }
+          },
+          "list": {
+              "type": "object",
+              "properties": {
+                  "hii": {"type": "string"}
+              }
+          }
+      },
+      "required": ["books", "list"]
+    }, null, 2)}
+  />
+);
+
+export const Array_of_string = () => (
+  <Template
+    initialSchema={JSON.stringify({
+      "type": "object",
+      "properties": {
+        "numbers": {
+          "type": "array",
+          "items": {
+            "type": "number"
+          }
+        },
+        "aString": {
+          "type": "string"
+        },
+        "aNumber": {
+          "type": "number"
+        }
+      },
+      "required": ["numbers", "aString", "aNumber"]
+    }, null, 2)}
+  />
+);
+
+export const Root_Array_of_Object = () => (
+  <Template
+    initialSchema={JSON.stringify({
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "id": {
+            "type": "integer"
+          },
+          "name": {
+            "type": "string"
+          },
+          "isActive": {
+            "type": "boolean"
+          }
+        },
+        "required": ["id", "name"]
+      }
+    }, null, 2)}
+  />
+);
+
+export const two_property_having_same_name = () => (
+  <Template
+    initialSchema={JSON.stringify({
+
+      "type": "object",
+      "properties": {
+        "address": {
+          "type": "object",
+          "properties": {
+            "address": { "type": "object",
+            "properties": {
+              "street": { "type": "string" },
+              "city": { "type": "string" }
+            }
+          }
+          }
+        }
+      }
+    }
+    
+    , null, 2)}
+  />
+);
+
+export const nestead_array = () => (
+  <Template
+    initialSchema={JSON.stringify(
+      {
+        "type": "object",
+        "properties": {
+          "age": {
+            "type": "integer"
+          },
+          "address": {
+            "type": "object",
+            "properties": {
+              "street": {
+                "type": "string"
+              },
+              "city": {
+                "type": "string"
+              },
+              "pincode": {
+                "type": "number"
+              },
+              "contact_number": {
+                "type": "array",
+                "items": {
+                  "type": "object",
+                  "properties": {
+                    "name": {
+                      "type": "string"
+                    },
+                    "mobile":{
+                      "type": "stirng"
+                    },
+                    "address": {
+                      "type": "object",
+                      "properties":{
+                        "city":{
+                          "type": "string"
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            },
+            "required": [
+              "street",
+              "city"
+            ]
+          }
+        }
+      }, null, 2)}
+  />
+);
+
diff --git a/package-lock.json b/package-lock.json
index c95a3d7ce..523927e83 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,8 @@
         "packages/*"
       ],
       "dependencies": {
-        "@changesets/cli": "^2.26.2"
+        "@changesets/cli": "^2.26.2",
+        "lodash": "^4.17.21"
       },
       "devDependencies": {
         "esbuild": "^0.19.0",
diff --git a/package.json b/package.json
index 791b222d1..5210ebfb0 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
   ],
   "packageManager": "npm@8.19.3",
   "dependencies": {
-    "@changesets/cli": "^2.26.2"
+    "@changesets/cli": "^2.26.2",
+    "lodash": "^4.17.21"
   }
 }
diff --git a/packages/ui/components/VisualEditor.tsx b/packages/ui/components/VisualEditor.tsx
new file mode 100644
index 000000000..1d8a661d1
--- /dev/null
+++ b/packages/ui/components/VisualEditor.tsx
@@ -0,0 +1,101 @@
+import React, { useState, useEffect } from 'react';
+import SchemaObject from './VisualEditor/SchemaObject';
+import _ from 'lodash';
+
+interface VisualEditorProps {
+    schema: string;
+    onSchemaChange: (newSchema: string) => void;
+}
+
+interface SchemaObjectInterface {
+    type?: string;
+    items?: any;
+    properties?: { [key: string]: any };
+    required?: string[];
+}
+
+export const VisualEditor: React.FC<VisualEditorProps> = ({ schema, onSchemaChange }) => {
+  const selectStyle = {
+    backgroundColor: '#0F172A',
+    color: 'white',
+    borderRadius: '3px',
+    fontSize: '12px',
+    fontFamily: 'Inter, sans-serif'
+  };
+  
+  const [schemaObject, setSchemaObject] = useState<SchemaObjectInterface>({});
+
+  useEffect(() => {
+    const safeParse = _.attempt(JSON.parse, schema);
+    if (!_.isError(safeParse)) {
+      console.log('Successfully parsed schema.');
+      setSchemaObject(safeParse);
+    } else {
+      console.error('Invalid JSON schema:', safeParse.message);
+    }
+  }, [schema]);
+
+  const handleSchemaChange = (updatedPart: any) => {
+    const updatedSchema = { ...schemaObject, ...updatedPart };
+    const newSchemaString = JSON.stringify(updatedSchema);
+    console.log('Schema updated:', newSchemaString);
+    setSchemaObject(updatedSchema);
+    onSchemaChange(newSchemaString);
+  };
+
+  const renderRootTypeSelector = () => (
+    <div>
+      <select
+        value={schemaObject.type || ''}
+        onChange={(e) => handleSchemaChange({ type: e.target.value })}
+        style={selectStyle}
+      >
+        <option value="">Select root type</option>
+        <option value="object">Object</option>
+        <option value="array">Array</option>
+        <option value="string">String</option>
+        <option value="number">Number</option>
+        <option value="boolean">Boolean</option>
+      </select>
+    </div>
+  );
+
+  const renderArrayItemTypeSelector = () => {
+    if (schemaObject.type === 'array') {
+      return (
+        <div>
+          <strong>Array Item Type:</strong>
+          <select
+            value={schemaObject.items?.type || ''}
+            onChange={(e) => handleSchemaChange({ items: { ...schemaObject.items, type: e.target.value } })}
+            style={selectStyle}
+          >
+            <option value="">Select item type</option>
+            <option value="string">String</option>
+            <option value="number">Number</option>
+            <option value="boolean">Boolean</option>
+            <option value="object">Object</option>
+            <option value="array">Array</option>
+          </select>
+        </div>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <div className="visual-editor" style={{ width: '45vw', minWidth: '550px', background: '#0F172A', color: '#CBD5E1', fontFamily: 'Inter, sans-serif', padding: '20px'}}>
+      {renderRootTypeSelector()}
+      {renderArrayItemTypeSelector()}
+
+      <SchemaObject
+        schema={schemaObject.type === 'array' ? schemaObject.items : schemaObject}
+        onSchemaChange={(newSchema: any) => handleSchemaChange(newSchema)}
+        path={schemaObject.type === 'array' ? 'items' : ''}
+        level={0}
+      />
+    </div>
+  );
+};
+
+export default VisualEditor;
\ No newline at end of file
diff --git a/packages/ui/components/VisualEditor/CodeEditor.tsx b/packages/ui/components/VisualEditor/CodeEditor.tsx
new file mode 100644
index 000000000..937513f3f
--- /dev/null
+++ b/packages/ui/components/VisualEditor/CodeEditor.tsx
@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from 'react';
+import _ from 'lodash';
+import debounce from 'lodash/debounce';
+
+interface CodeEditorProps {
+  schema: string;
+  onSchemaChange: (newSchema: string) => void;
+}
+
+export const CodeEditor: React.FC<CodeEditorProps> = ({ schema, onSchemaChange }) => {
+  const [value, setValue] = useState<string>(schema);
+  const [error, setError] = useState<string>('');
+
+  useEffect(() => {
+    setValue(schema);
+    setError('');
+  }, [schema]);
+
+  const handleChange = debounce((newValue: string) => {
+    try {
+      setError('');
+      onSchemaChange(newValue);
+      console.log('Schema valid and updated from Code Editor:', newValue);
+    } catch (e) {
+      if (_.isError(e)) {
+        setError(`Invalid JSON: ${e.message}`);
+        console.error('Error updating schema from Code Editor:', e.message);
+      }
+    }
+  }, 250);
+
+  const handleTextAreaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newValue = e.target.value;
+    setValue(newValue);
+    handleChange(newValue);
+  };
+
+  return (
+    <div className="code-editor">
+      <h2>Code Editor</h2>
+      {error && <p style={{ color: 'red' }}>Error: {error}</p>}
+      <textarea
+        value={value}
+        onChange={handleTextAreaChange}
+        style={{ width: '45vw', minWidth: '550px', height: '400px' }}
+      />
+    </div>
+  );
+};
+
+export default CodeEditor;
diff --git a/packages/ui/components/VisualEditor/Example.tsx b/packages/ui/components/VisualEditor/Example.tsx
new file mode 100644
index 000000000..3b47ec0f6
--- /dev/null
+++ b/packages/ui/components/VisualEditor/Example.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export const Examples: React.FC = () => {
+  return (
+    <div className=" width: '50%', border border-gray-500 rounded p-4">
+      <h2>Examples</h2>
+      {/* Add example(future development) */}
+      <p>This section will show examples of how to use the schema in the future.</p>
+    </div>
+  );
+};
+export default Examples;
\ No newline at end of file
diff --git a/packages/ui/components/VisualEditor/PropertyControls.tsx b/packages/ui/components/VisualEditor/PropertyControls.tsx
new file mode 100644
index 000000000..d2f9d850f
--- /dev/null
+++ b/packages/ui/components/VisualEditor/PropertyControls.tsx
@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import _ from 'lodash';
+
+interface PropertyControlsProps {
+    onAdd: (path: string, property: { name: string; schema: any }) => void;
+    schemaPath?: string;
+    level: number;
+}
+
+const PropertyControls: React.FC<PropertyControlsProps> = ({ onAdd, schemaPath, level }) => {
+  const inputAndSelectStyle = {
+    backgroundColor: '#0F172A',
+    color: 'white',
+    borderRadius: '3px',
+    padding: '2px',
+    fontSize: '14px',
+    fontFamily: 'Inter, Helvetica'
+  };
+
+  const [key, setKey] = useState('');
+  const [type, setType] = useState('');
+  const [error, setError] = useState('');
+  const [itemType, setItemType] = useState('');
+
+  const handleAddProperty = () => {
+    if (_.isEmpty(key) || _.isEmpty(type)) {
+      setError('Both property name and type are required.');
+      return;
+    }
+
+    const fullPath = schemaPath ? `${schemaPath}.properties.${key}` : `properties.${key}`;
+    console.log('Full Full Path :)', fullPath);
+    console.log(`Adding new property at: ${fullPath}`);
+
+    onAdd(fullPath, {
+      type, 
+      ...(type === 'object' && { properties: {} }), 
+      ...(type === 'array' && { items: { type: itemType } }) 
+    } as any); 
+
+    setKey('');
+    setType('');
+    setItemType('');
+    setError('');
+  };
+
+  return (
+    <div style={{
+      marginLeft: `${level === 0 ? 20 : level * 20}px`,
+      color: '#CBD5E1',
+      fontFamily: 'Inter, sans-serif',
+      borderLeft: '1px solid grey',
+      paddingLeft: '10px',
+      marginTop: '-1px',
+    }}>
+      <div className="flex gap-[6px] items-center mt-[6px] mb-[6px]">
+        <input
+          type="text"
+          value={key}
+          onChange={(e) => setKey(e.target.value)}
+          placeholder="Property name"
+          style={inputAndSelectStyle}
+        />
+        <select value={type} onChange={(e) => setType(e.target.value)} style={inputAndSelectStyle}>
+          <option value="">Select type</option>
+          <option value="string">String</option>
+          <option value="number">Number</option>
+          <option value="boolean">Boolean</option>
+          <option value="object">Object</option>
+          <option value="array">Array</option>
+        </select>
+        {type === 'array' && (
+          <select value={itemType} onChange={(e) => setItemType(e.target.value)} style={inputAndSelectStyle}>
+            <option value="">Select item type</option>
+            <option value="string">String</option>
+            <option value="number">Number</option>
+            <option value="boolean">Boolean</option>
+            <option value="object">Object</option>
+          </select>
+        )}
+        <button onClick={handleAddProperty}>Add Property</button>
+      </div>
+      {error && <p style={{ color: '#DB2777' }}>{error}</p>}
+    </div>
+  );
+};
+
+export default PropertyControls;
diff --git a/packages/ui/components/VisualEditor/SchemaObject.tsx b/packages/ui/components/VisualEditor/SchemaObject.tsx
new file mode 100644
index 000000000..36b5661d0
--- /dev/null
+++ b/packages/ui/components/VisualEditor/SchemaObject.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import _ from 'lodash';
+import SchemaProperty from './SchemaProperty';
+import PropertyControls from './PropertyControls';
+
+interface SchemaObjectProps {
+  schema: any;
+  onSchemaChange: (newSchema: any) => void;
+  path: string;
+  level: number;
+}
+
+const SchemaObject: React.FC<SchemaObjectProps> = ({
+  schema,
+  onSchemaChange,
+  path,
+  level,
+}) => {
+  console.log(`Rendering SchemaObject. Path: ${path}, Level: ${level}`);
+
+  const handleAddProperty = (fullPath: string, propertySchema: any) => {
+    const updatedSchema = _.cloneDeep(schema);
+    const normalizedPath = fullPath.startsWith('.') ? fullPath.slice(1) : fullPath;
+    console.log('Normalised path',normalizedPath);
+    _.set(updatedSchema, normalizedPath, propertySchema);
+
+    console.log(`Property added at ${normalizedPath}`, updatedSchema);
+    onSchemaChange(updatedSchema);
+  };
+
+  const handleRemoveProperty = (propertyPath: string) => {
+    const currentSchema = _.cloneDeep(schema);
+    _.unset(currentSchema, propertyPath);
+    console.log(`Removed property at ${propertyPath}`);
+    onSchemaChange(currentSchema);
+  };
+
+  const handleTypeChange = (propertyPath: string, newSchema: any) => { // Added types to resolve TS7006
+    console.log(`handleTypeChange called with path: ${propertyPath}, newType: ${newSchema}`);
+    const currentSchema = _.cloneDeep(schema);
+    _.set(currentSchema, propertyPath, newSchema);
+    console.log(`Type changed at ${propertyPath}`, newSchema);
+    onSchemaChange(currentSchema);
+  };
+
+  return (
+    <div style={{ margin: '10px 0' }}>
+      {_.map(schema.properties, (propertySchema, propertyName) => (
+        <SchemaProperty
+          key={propertyName}
+          name={propertyName}
+          schema={propertySchema}
+          onRemove={handleRemoveProperty}
+          onToggleRequired={() => console.log('Toggling required')}
+          isRequired={_.includes(schema.required, propertyName)}
+          onTypeChange={handleTypeChange}
+          onAddNestedProperty={handleAddProperty}
+          onRemoveNestedProperty={handleRemoveProperty}
+          onToggleNestedRequired={() => console.log('Toggling nested required')}
+          path={`${path}.properties.${propertyName}`}
+          level={level + 1}
+        />
+      ))}
+      <PropertyControls
+        onAdd={handleAddProperty}
+        schemaPath={path}
+        level={level}
+      />
+    </div>
+  );
+};
+
+export default SchemaObject;
diff --git a/packages/ui/components/VisualEditor/SchemaProperty.tsx b/packages/ui/components/VisualEditor/SchemaProperty.tsx
new file mode 100644
index 000000000..c402cd96a
--- /dev/null
+++ b/packages/ui/components/VisualEditor/SchemaProperty.tsx
@@ -0,0 +1,148 @@
+import React from 'react';
+import _ from 'lodash';
+import SchemaObject from './SchemaObject';
+import PropertyControls from './PropertyControls';
+import { RequiredIcon, NotRequiredIcon, TrashIcon } from '../icons';
+
+interface SchemaPropertyProps {
+    name: string;
+    schema: any;
+    onRemove: (path: string, propertyName: string) => void;
+    onToggleRequired: (path: string, propertyName: string) => void;
+    isRequired: boolean;
+    onTypeChange: (path: string, propertyName: string, newSchema: any) => void;
+    onAddNestedProperty: (fullPath: string, newProperty: any) => void;
+    onRemoveNestedProperty: (path: string, propertyName: string) => void;
+    onToggleNestedRequired: (path: string, propertyName: string) => void;
+    path: string;
+    level: number;
+}
+
+const SchemaProperty: React.FC<SchemaPropertyProps> = ({
+  name, 
+  schema, 
+  onRemove, 
+  onToggleRequired, 
+  isRequired, 
+  onTypeChange, 
+  onAddNestedProperty, 
+  onRemoveNestedProperty, 
+  onToggleNestedRequired, 
+  path, 
+  level 
+}) => {
+  console.log(`Rendering SchemaProperty. Name: ${name}, Path: ${path}, Level: ${level}`);
+
+  const handleTypeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const newType = event.target.value;
+    const updatedSchema = _.cloneDeep(schema);
+    updatedSchema.type = newType;
+
+    if (newType === 'array') {
+      updatedSchema.items = updatedSchema.items || { type: 'string' };
+    } else if (newType === 'object') {
+      updatedSchema.properties = updatedSchema.properties || {};
+    }
+
+    console.log(`Type changed for ${name} at ${path} to ${newType}`);
+    onTypeChange(path, name, updatedSchema);
+  };
+
+  const handleRemove = () => {
+    console.log(`Removing property ${name} at ${path}`);
+    onRemove(path, name);
+  };
+
+  const handleToggleRequired = () => {
+    console.log(`Toggling required for ${name} at ${path}`);
+    onToggleRequired(path, name);
+  };
+
+  const renderArrayItemsProperties = () => {
+    if (schema.type === 'array' && schema.items && schema.items.type === 'object') {
+      return (
+        <SchemaObject
+          schema={schema.items}
+          onSchemaChange={(newItemsSchema) => {
+            const updatedSchema = { ...schema, items: newItemsSchema };
+            onTypeChange(path, name, updatedSchema);
+            //Need to updated schema from local schema
+          }}
+          path={''}
+          level={level + 1}
+        />
+      );
+    }
+    return null;
+  };
+  
+  const renderNestedProperties = () => {
+    if (schema.type === 'object') {
+      return _.map(schema.properties, (nestedSchema, nestedName) => (
+        <SchemaProperty
+          key={nestedName}
+          name={nestedName}
+          schema={nestedSchema}
+          onRemove={onRemoveNestedProperty}
+          onToggleRequired={onToggleNestedRequired}
+          isRequired={_.includes(schema.required, nestedName)}
+          onTypeChange={onTypeChange}
+          onAddNestedProperty={onAddNestedProperty}
+          onRemoveNestedProperty={onRemoveNestedProperty}
+          onToggleNestedRequired={onToggleNestedRequired}
+          path={`${path}.properties.${nestedName}`}
+          level={level + 1}
+        />
+      ));
+    }
+    return null;
+  };
+
+  return (
+    <div style={{ marginLeft: `${level * 20}px`, borderLeft: '1px solid grey', paddingLeft: '10px', marginBottom: '-8px' }}>
+      <div className="flex items-center justify-between">
+        <div>
+          <strong className="[font-family:'Inter',Helvetica] font-medium text-extendedblue-gray300">{name}</strong>
+          <select
+            value={schema.type}
+            onChange={handleTypeChange}
+            style={{
+              backgroundColor: '#0F172A',
+              color: 'white',
+              borderRadius: '3px',
+              padding: '2px',
+              fontSize: '14px',
+              fontFamily: 'Inter, Helvetica'
+            }}
+          >
+            <option value="">Select type</option>
+            <option value="string">String</option>
+            <option value="number">Number</option>
+            <option value="boolean">Boolean</option>
+            <option value="object">Object</option>
+            <option value="array">Array</option>
+          </select>
+        </div>
+        <div style={{ marginLeft: 'auto' }}>
+          <button style={{ marginRight: '10px' }} onClick={handleRemove}>
+            <TrashIcon className="w-4 h-4" />
+          </button>
+          <button onClick={handleToggleRequired}>
+            {isRequired ? <RequiredIcon className="w-4 h-4" /> : <NotRequiredIcon className="w-4 h-4" />}
+          </button>
+        </div>
+      </div>
+      {renderNestedProperties()}
+      {renderArrayItemsProperties()}
+      {schema.type === 'object' && (
+        <PropertyControls
+          onAdd={onAddNestedProperty}
+          schemaPath={`${path}`}
+          level={level + 1}
+        />
+      )}
+    </div>
+  );
+};
+
+export default SchemaProperty;
diff --git a/packages/ui/components/icons/NotRequiredIcon.tsx b/packages/ui/components/icons/NotRequiredIcon.tsx
new file mode 100644
index 000000000..d45df4281
--- /dev/null
+++ b/packages/ui/components/icons/NotRequiredIcon.tsx
@@ -0,0 +1,13 @@
+const NotRequiredIcon = (props: any) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16" height="16" viewBox="0 0 16 16" fill="none"
+    {...props}
+  >
+    <path fillRule="evenodd" clipRule="evenodd" d="M8.00033 0L6.80505 1.30539L5.22645 0.481353L4.55514 2.11075L2.78388 1.86808L2.71989 3.62748L0.96996 3.9955L1.5186 5.67157L0.000666639 6.60894L1.10129 8.001L0 9.39239L1.5186 10.3291L0.970626 12.0058L2.71989 12.3745L2.78388 14.1333L4.55514 13.8906L5.22645 15.5206L6.80505 14.6966L8.00033 16L9.19695 14.6966L10.7749 15.5206L11.4462 13.8906L13.2181 14.1333L13.2828 12.3745L15.032 12.0058L14.4827 10.3291L16 9.39239L14.8994 8.001L16 6.60894L14.4827 5.67157L15.032 3.9955L13.2828 3.62748L13.2181 1.86808L11.4462 2.11075L10.7749 0.481353L9.19695 1.30539L8.00033 0ZM8.00033 1.77941L8.93363 2.79812L10.1642 2.15609L10.6889 3.42748L12.0662 3.2388L12.1155 4.61019L13.4734 4.89554L13.0461 6.19692L14.2194 6.92162L13.3674 8.00167L14.2194 9.07904L13.0461 9.80307L13.4734 11.1065L12.1155 11.3925L12.0662 12.7625L10.6889 12.5739L10.1642 13.8466L8.93363 13.2039L8.00033 14.2219L7.06771 13.2039L5.83709 13.8466L5.31311 12.5739L3.93584 12.7625L3.88717 11.3925L2.52856 11.1065L2.95521 9.80307L1.78126 9.07904L2.63389 8.00167L1.78059 6.92229L2.95588 6.19692L2.52923 4.89554L3.88717 4.61019L3.93584 3.2388L5.31311 3.42748L5.83709 2.15609L7.06771 2.79812L8.00033 1.77941Z" fill="#334155"/>
+  </svg>
+);
+
+NotRequiredIcon.displayName = 'NotRequiredIcon';
+
+export default NotRequiredIcon
diff --git a/packages/ui/components/icons/RequiredIcon.tsx b/packages/ui/components/icons/RequiredIcon.tsx
new file mode 100644
index 000000000..70b165a8b
--- /dev/null
+++ b/packages/ui/components/icons/RequiredIcon.tsx
@@ -0,0 +1,13 @@
+const RequiredIcon = (props: any) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16" height="16" viewBox="0 0 16 16" fill="none"
+    {...props}
+  >
+    <path fillRule="evenodd" clipRule="evenodd" d="M8.00033 0L6.80505 1.30539L5.22645 0.481353L4.55514 2.11075L2.78388 1.86808L2.71989 3.62748L0.96996 3.9955L1.5186 5.67157L0.000666639 6.60894L1.10129 8.001L0 9.39239L1.5186 10.3291L0.970626 12.0058L2.71989 12.3745L2.78388 14.1333L4.55514 13.8906L5.22645 15.5206L6.80505 14.6966L8.00033 16L9.19695 14.6966L10.7749 15.5206L11.4462 13.8906L13.2181 14.1333L13.2828 12.3745L15.032 12.0058L14.4827 10.3291L16 9.39239L14.8994 8.001L16 6.60894L14.4827 5.67157L15.032 3.9955L13.2828 3.62748L13.2181 1.86808L11.4462 2.11075L10.7749 0.481353L9.19695 1.30539L8.00033 0ZM8.00033 1.77941L8.93363 2.79812L10.1642 2.15609L10.6889 3.42748L12.0662 3.2388L12.1155 4.61019L13.4734 4.89554L13.0461 6.19692L14.2194 6.92162L13.3674 8.00167L14.2194 9.07904L13.0461 9.80307L13.4734 11.1065L12.1155 11.3925L12.0662 12.7625L10.6889 12.5739L10.1642 13.8466L8.93363 13.2039L8.00033 14.2219L7.06771 13.2039L5.83709 13.8466L5.31311 12.5739L3.93584 12.7625L3.88717 11.3925L2.52856 11.1065L2.95521 9.80307L1.78126 9.07904L2.63389 8.00167L1.78059 6.92229L2.95588 6.19692L2.52923 4.89554L3.88717 4.61019L3.93584 3.2388L5.31311 3.42748L5.83709 2.15609L7.06771 2.79812L8.00033 1.77941Z" fill="#DB2777"/>
+  </svg>
+);
+
+RequiredIcon.displayName = 'RequiredIcon';
+
+export default RequiredIcon
diff --git a/packages/ui/components/icons/index.tsx b/packages/ui/components/icons/index.tsx
index 9bbd645ba..f56c8ecf3 100644
--- a/packages/ui/components/icons/index.tsx
+++ b/packages/ui/components/icons/index.tsx
@@ -30,8 +30,10 @@ export { default as IBMMQIcon } from './IBMMQIcon'
 export { default as KafkaIcon } from './KafkaIcon'
 export { default as MQTTIcon } from './MQTTIcon'
 export { default as NATSIcon } from './NATSIcon'
+export { default as NotRequiredIcon } from './NotRequiredIcon'
 export { default as PulsarIcon } from './PulsarIcon'
 export { default as RedisIcon } from './RedisIcon'
+export { default as RequiredIcon } from './RequiredIcon'
 export { default as SealIcon } from './SealIcon'
 export { default as ServerIcon } from './ServerIcon'
 export { default as SolaceIcon } from './SolaceIcon'
diff --git a/packages/ui/components/index.tsx b/packages/ui/components/index.tsx
index 8f58846ed..1fb51f761 100644
--- a/packages/ui/components/index.tsx
+++ b/packages/ui/components/index.tsx
@@ -13,4 +13,7 @@ export * from './Sidebar'
 export * from './SlideOver'
 export * from './Toolbar'
 export * from './AppCard'
+export * from './VisualEditor/Example'
+export * from './VisualEditor/CodeEditor'
+export * from './VisualEditor'
 export { default as Tooltip } from './Tooltip'

From 9e29651a182109541aeceb5c1e4e7cb7087d360b Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 26 Mar 2024 10:24:58 +0100
Subject: [PATCH 2/3] build(deps-dev): bump express from 4.18.2 to 4.19.2
 (#1036)

---
 package-lock.json | 89 ++++++++++++++++++++++++++++++++---------------
 1 file changed, 61 insertions(+), 28 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 523927e83..ca5ef3317 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15161,12 +15161,13 @@
       "license": "MIT"
     },
     "node_modules/body-parser": {
-      "version": "1.20.1",
+      "version": "1.20.2",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
+      "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "bytes": "3.1.2",
-        "content-type": "~1.0.4",
+        "content-type": "~1.0.5",
         "debug": "2.6.9",
         "depd": "2.0.0",
         "destroy": "1.2.0",
@@ -15174,7 +15175,7 @@
         "iconv-lite": "0.4.24",
         "on-finished": "2.4.1",
         "qs": "6.11.0",
-        "raw-body": "2.5.1",
+        "raw-body": "2.5.2",
         "type-is": "~1.6.18",
         "unpipe": "1.0.0"
       },
@@ -15185,29 +15186,33 @@
     },
     "node_modules/body-parser/node_modules/bytes": {
       "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">= 0.8"
       }
     },
     "node_modules/body-parser/node_modules/debug": {
       "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "ms": "2.0.0"
       }
     },
     "node_modules/body-parser/node_modules/ms": {
       "version": "2.0.0",
-      "dev": true,
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "dev": true
     },
     "node_modules/body-parser/node_modules/qs": {
       "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
       "dev": true,
-      "license": "BSD-3-Clause",
       "dependencies": {
         "side-channel": "^1.0.4"
       },
@@ -16390,9 +16395,10 @@
       "license": "MIT"
     },
     "node_modules/cookie": {
-      "version": "0.5.0",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
@@ -19515,16 +19521,17 @@
       }
     },
     "node_modules/express": {
-      "version": "4.18.2",
+      "version": "4.19.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
+      "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
-        "body-parser": "1.20.1",
+        "body-parser": "1.20.2",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
-        "cookie": "0.5.0",
+        "cookie": "0.6.0",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
         "depd": "2.0.0",
@@ -25826,8 +25833,9 @@
     },
     "node_modules/media-typer": {
       "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
@@ -29793,9 +29801,10 @@
       }
     },
     "node_modules/raw-body": {
-      "version": "2.5.1",
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
+      "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "bytes": "3.1.2",
         "http-errors": "2.0.0",
@@ -29808,8 +29817,9 @@
     },
     "node_modules/raw-body/node_modules/bytes": {
       "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">= 0.8"
       }
@@ -34094,8 +34104,9 @@
     },
     "node_modules/type-is": {
       "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "media-typer": "0.3.0",
         "mime-types": "~2.1.24"
@@ -46269,11 +46280,13 @@
       "dev": true
     },
     "body-parser": {
-      "version": "1.20.1",
+      "version": "1.20.2",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
+      "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
       "dev": true,
       "requires": {
         "bytes": "3.1.2",
-        "content-type": "~1.0.4",
+        "content-type": "~1.0.5",
         "debug": "2.6.9",
         "depd": "2.0.0",
         "destroy": "1.2.0",
@@ -46281,17 +46294,21 @@
         "iconv-lite": "0.4.24",
         "on-finished": "2.4.1",
         "qs": "6.11.0",
-        "raw-body": "2.5.1",
+        "raw-body": "2.5.2",
         "type-is": "~1.6.18",
         "unpipe": "1.0.0"
       },
       "dependencies": {
         "bytes": {
           "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+          "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
           "dev": true
         },
         "debug": {
           "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
           "dev": true,
           "requires": {
             "ms": "2.0.0"
@@ -46299,10 +46316,14 @@
         },
         "ms": {
           "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
           "dev": true
         },
         "qs": {
           "version": "6.11.0",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+          "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
           "dev": true,
           "requires": {
             "side-channel": "^1.0.4"
@@ -47065,7 +47086,9 @@
       "dev": true
     },
     "cookie": {
-      "version": "0.5.0",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
       "dev": true
     },
     "cookie-signature": {
@@ -49349,15 +49372,17 @@
       }
     },
     "express": {
-      "version": "4.18.2",
+      "version": "4.19.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
+      "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
       "dev": true,
       "requires": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
-        "body-parser": "1.20.1",
+        "body-parser": "1.20.2",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
-        "cookie": "0.5.0",
+        "cookie": "0.6.0",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
         "depd": "2.0.0",
@@ -53536,6 +53561,8 @@
     },
     "media-typer": {
       "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
       "dev": true
     },
     "memfs": {
@@ -55838,7 +55865,9 @@
       "dev": true
     },
     "raw-body": {
-      "version": "2.5.1",
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
+      "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
       "dev": true,
       "requires": {
         "bytes": "3.1.2",
@@ -55849,6 +55878,8 @@
       "dependencies": {
         "bytes": {
           "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+          "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
           "dev": true
         }
       }
@@ -58701,6 +58732,8 @@
     },
     "type-is": {
       "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
       "dev": true,
       "requires": {
         "media-typer": "0.3.0",

From 791dec5064bb3ceaef9840cfc79963ed4a18ca66 Mon Sep 17 00:00:00 2001
From: asyncapi-bot <bot+chan@asyncapi.io>
Date: Tue, 26 Mar 2024 14:53:58 +0100
Subject: [PATCH 3/3] chore: update @asyncapi/html-template to 2.2.2 version
 (#1037)

---
 apps/studio/package.json |  2 +-
 package-lock.json        | 48 ++++++++++++++++++++--------------------
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/apps/studio/package.json b/apps/studio/package.json
index 9d1168c51..aac9b35d6 100644
--- a/apps/studio/package.json
+++ b/apps/studio/package.json
@@ -76,7 +76,7 @@
   "devDependencies": {
     "@asyncapi/dotnet-nats-template": "^0.12.1",
     "@asyncapi/go-watermill-template": "^0.2.72",
-    "@asyncapi/html-template": "^2.2.1",
+    "@asyncapi/html-template": "^2.2.2",
     "@asyncapi/java-spring-cloud-stream-template": "^0.13.4",
     "@asyncapi/java-spring-template": "^1.5.1",
     "@asyncapi/java-template": "^0.2.1",
diff --git a/package-lock.json b/package-lock.json
index ca5ef3317..54201f472 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -525,7 +525,7 @@
       "devDependencies": {
         "@asyncapi/dotnet-nats-template": "^0.12.1",
         "@asyncapi/go-watermill-template": "^0.2.72",
-        "@asyncapi/html-template": "^2.2.1",
+        "@asyncapi/html-template": "^2.2.2",
         "@asyncapi/java-spring-cloud-stream-template": "^0.13.4",
         "@asyncapi/java-spring-template": "^1.5.1",
         "@asyncapi/java-template": "^0.2.1",
@@ -1437,13 +1437,13 @@
       }
     },
     "node_modules/@asyncapi/html-template": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/@asyncapi/html-template/-/html-template-2.2.1.tgz",
-      "integrity": "sha512-t+hsjXg2EEFPUxY3PaKdj6i6WT+B+KvcYR9x0MyCh8kXo/bJXnsOVVon0l/QOfkonMvVaTIJmc47NLK7WViqPA==",
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@asyncapi/html-template/-/html-template-2.2.2.tgz",
+      "integrity": "sha512-+uMVePjLanofP9+B2T/Rnc05ibBQwpakHzatYW3rcoFU3SdIh33J9u0apNiD/yyIJh5CaCtz++WG56siw8NRnw==",
       "dev": true,
       "dependencies": {
         "@asyncapi/generator-react-sdk": "^1.0.9",
-        "@asyncapi/parser": "^3.0.5",
+        "@asyncapi/parser": "^3.0.10",
         "@asyncapi/react-component": "^1.2.13",
         "highlight.js": "10.7.3",
         "puppeteer": "^14.1.0",
@@ -1471,12 +1471,12 @@
       }
     },
     "node_modules/@asyncapi/html-template/node_modules/@asyncapi/parser": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/@asyncapi/parser/-/parser-3.0.5.tgz",
-      "integrity": "sha512-Kc/hwCyb2/YzcIfQlY9lwjUDV/9cXMjVewQz9WvPVAaFlOr83bdHpccfnl2sQNXDcC+zCcpEDBjs41ATowPE3Q==",
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@asyncapi/parser/-/parser-3.0.10.tgz",
+      "integrity": "sha512-x9qo7SHGzPWbC1XCRyilcI+Z6UZsWZ9uRl05h9j4G/v+3IjNG3krwngiAbt59nbLlYZD/nBS7Hc03GayoocnQw==",
       "dev": true,
       "dependencies": {
-        "@asyncapi/specs": "^6.4.0",
+        "@asyncapi/specs": "^6.5.3",
         "@openapi-contrib/openapi-schema-to-json-schema": "~3.2.0",
         "@stoplight/json": "^3.20.2",
         "@stoplight/json-ref-readers": "^1.2.2",
@@ -1498,9 +1498,9 @@
       }
     },
     "node_modules/@asyncapi/html-template/node_modules/@asyncapi/specs": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@asyncapi/specs/-/specs-6.4.0.tgz",
-      "integrity": "sha512-hTw0xF09i+eoSGP8LKo6aM+XOkvWsgV7kYpFHXd45VX9RcVZl5cADFIYDnPZkd52WaDJ4S+8Nrwkt/1vDb6SrQ==",
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/@asyncapi/specs/-/specs-6.5.3.tgz",
+      "integrity": "sha512-mZROlCOLkZEWy5tN4pPop3JEJflSKmLLMGO1TebF5wjnroqZ3yp/GuGUxVIl3jVNxFk1i5nZ2AtWzAD/HaUj3Q==",
       "dev": true,
       "dependencies": {
         "@types/json-schema": "^7.0.11"
@@ -36811,13 +36811,13 @@
       }
     },
     "@asyncapi/html-template": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/@asyncapi/html-template/-/html-template-2.2.1.tgz",
-      "integrity": "sha512-t+hsjXg2EEFPUxY3PaKdj6i6WT+B+KvcYR9x0MyCh8kXo/bJXnsOVVon0l/QOfkonMvVaTIJmc47NLK7WViqPA==",
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@asyncapi/html-template/-/html-template-2.2.2.tgz",
+      "integrity": "sha512-+uMVePjLanofP9+B2T/Rnc05ibBQwpakHzatYW3rcoFU3SdIh33J9u0apNiD/yyIJh5CaCtz++WG56siw8NRnw==",
       "dev": true,
       "requires": {
         "@asyncapi/generator-react-sdk": "^1.0.9",
-        "@asyncapi/parser": "^3.0.5",
+        "@asyncapi/parser": "^3.0.10",
         "@asyncapi/react-component": "^1.2.13",
         "highlight.js": "10.7.3",
         "puppeteer": "^14.1.0",
@@ -36845,12 +36845,12 @@
           }
         },
         "@asyncapi/parser": {
-          "version": "3.0.5",
-          "resolved": "https://registry.npmjs.org/@asyncapi/parser/-/parser-3.0.5.tgz",
-          "integrity": "sha512-Kc/hwCyb2/YzcIfQlY9lwjUDV/9cXMjVewQz9WvPVAaFlOr83bdHpccfnl2sQNXDcC+zCcpEDBjs41ATowPE3Q==",
+          "version": "3.0.10",
+          "resolved": "https://registry.npmjs.org/@asyncapi/parser/-/parser-3.0.10.tgz",
+          "integrity": "sha512-x9qo7SHGzPWbC1XCRyilcI+Z6UZsWZ9uRl05h9j4G/v+3IjNG3krwngiAbt59nbLlYZD/nBS7Hc03GayoocnQw==",
           "dev": true,
           "requires": {
-            "@asyncapi/specs": "^6.4.0",
+            "@asyncapi/specs": "^6.5.3",
             "@openapi-contrib/openapi-schema-to-json-schema": "~3.2.0",
             "@stoplight/json": "^3.20.2",
             "@stoplight/json-ref-readers": "^1.2.2",
@@ -36872,9 +36872,9 @@
           }
         },
         "@asyncapi/specs": {
-          "version": "6.4.0",
-          "resolved": "https://registry.npmjs.org/@asyncapi/specs/-/specs-6.4.0.tgz",
-          "integrity": "sha512-hTw0xF09i+eoSGP8LKo6aM+XOkvWsgV7kYpFHXd45VX9RcVZl5cADFIYDnPZkd52WaDJ4S+8Nrwkt/1vDb6SrQ==",
+          "version": "6.5.3",
+          "resolved": "https://registry.npmjs.org/@asyncapi/specs/-/specs-6.5.3.tgz",
+          "integrity": "sha512-mZROlCOLkZEWy5tN4pPop3JEJflSKmLLMGO1TebF5wjnroqZ3yp/GuGUxVIl3jVNxFk1i5nZ2AtWzAD/HaUj3Q==",
           "dev": true,
           "requires": {
             "@types/json-schema": "^7.0.11"
@@ -37683,7 +37683,7 @@
         "@asyncapi/converter": "^1.4.15",
         "@asyncapi/dotnet-nats-template": "^0.12.1",
         "@asyncapi/go-watermill-template": "^0.2.72",
-        "@asyncapi/html-template": "^2.2.1",
+        "@asyncapi/html-template": "^2.2.2",
         "@asyncapi/java-spring-cloud-stream-template": "^0.13.4",
         "@asyncapi/java-spring-template": "^1.5.1",
         "@asyncapi/java-template": "^0.2.1",