rapidoc 9.3.3 → 9.3.5

package/src/components/api-request.js

@@ -60,8 +60,10 @@ export default class ApiRequest extends LitElement {
       responseHeaders: { type: String, attribute: false },
       responseStatus: { type: String, attribute: false },
       responseUrl: { type: String, attribute: false },
+      curlSyntax: { type: String, attribute: false },
       fillRequestFieldsWithExample: { type: String, attribute: 'fill-request-fields-with-example' },
       allowTry: { type: String, attribute: 'allow-try' },
+      showCurlBeforeTry: { type: String, attribute: 'show-curl-before-try' },
       renderStyle: { type: String, attribute: 'render-style' },
       schemaStyle: { type: String, attribute: 'schema-style' },
       activeSchemaTab: { type: String, attribute: 'active-schema-tab' },
@@ -98,7 +100,9 @@ export default class ApiRequest extends LitElement {
       PrismStyles,
       css`
         *, *:before, *:after { box-sizing: border-box; }
-    
+        :where(button, input[type="checkbox"], [tabindex="0"]):focus-visible { box-shadow: var(--focus-shadow); }
+        :where(input[type="text"], input[type="password"], select, textarea):focus-visible { border-color: var(--primary-color); }
+        tag-input:focus-within { outline: 1px solid;}
         .read-mode {
           margin-top: 24px;
         }
@@ -213,20 +217,27 @@ export default class ApiRequest extends LitElement {
     `;
   }
 
-  /*
-  async updated(changedProperties) {
+  async updated() {
+    if (this.showCurlBeforeTry === 'true') {
+      this.applyCURLSyntax(this.shadowRoot);
+    }
+
     // In focused mode after rendering the request component, update the text-areas(which contains examples) using
     // the original values from hidden textareas
     // This is done coz, user may update the dom by editing the textarea's and once the DOM is updated externally change detection wont happen, therefore update the values manually
-    if (this.renderStyle === 'focused') {
-      if (changedProperties.size === 1 && changedProperties.has('activeSchemaTab')) {
-        // dont update example as only tabs is switched
-      } else {
-        this.requestUpdate();
-      }
+
+    // if (this.renderStyle === 'focused') {
+    //   if (changedProperties.size === 1 && changedProperties.has('activeSchemaTab')) {
+    //     // dont update example as only tabs is switched
+    //   } else {
+    //     this.requestUpdate();
+    //   }
+    // }
+
+    if (this.webhook === 'true') {
+      this.allowTry = 'false';
     }
   }
-  */
 
   async saveExampleState() {
     if (this.renderStyle === 'focused') {
@@ -259,28 +270,24 @@ export default class ApiRequest extends LitElement {
     }
   }
 
+  /* eslint-disable indent */
   renderExample(example, paramType, paramName) {
     return html`
       ${paramType === 'array' ? '[' : ''}
       <a
         part="anchor anchor-param-example"
+        style="display:inline-block; min-width:24px; text-align:center"
         class="${this.allowTry === 'true' ? '' : 'inactive-link'}"
         data-example-type="${paramType === 'array' ? paramType : 'string'}"
-        data-example="${example.value && Array.isArray(example.value) ? example.value?.join('~|~') : example.value || ''}"
+        data-example="${example.value && Array.isArray(example.value) ? example.value?.join('~|~') : (typeof example.value === 'object' ? JSON.stringify(example.value, null, 2) : example.value) || ''}"
+        title="${example.value && Array.isArray(example.value) ? example.value?.join('~|~') : (typeof example.value === 'object' ? JSON.stringify(example.value, null, 2) : example.value) || ''}"
         @click="${(e) => {
-    const inputEl = e.target.closest('table').querySelector(`[data-pname="${paramName}"]`);
-    if (inputEl) {
-      if (e.target.dataset.exampleType === 'array') {
-        inputEl.value = e.target.dataset.example.split('~|~');
-      } else {
-        inputEl.value = e.target.dataset.example;
-      }
-    }
-  }
-}"
-      >
-        ${example.value && Array.isArray(example.value) ? example.value?.join(', ') : example.value || '∅'}
-      </a>
+          const inputEl = e.target.closest('table').querySelector(`[data-pname="${paramName}"]`);
+          if (inputEl) {
+            inputEl.value = e.target.dataset.exampleType === 'array' ? e.target.dataset.example.split('~|~') : e.target.dataset.example;
+          }
+        }}"
+      > ${example.printableValue || example.value} </a>
       ${paramType === 'array' ? '] ' : ''}
     `;
   }
@@ -303,17 +310,15 @@ export default class ApiRequest extends LitElement {
     </ul>`;
   }
 
-  /* eslint-disable indent */
-
   exampleListTemplate(paramName, paramType, exampleList = []) {
-    return html` ${exampleList.length > 0
-      ? html`<span style="font-weight:bold">Examples: </span>
-          ${
-            anyExampleWithSummaryOrDescription(exampleList)
+    return html` ${
+      exampleList.length > 0
+        ? html`<span style="font-weight:bold">Examples: </span>
+          ${anyExampleWithSummaryOrDescription(exampleList)
             ? this.renderLongFormatExamples(exampleList, paramType, paramName)
-            : this.renderShortFormatExamples(exampleList, paramType, paramName)
-          }`
-      : ''}`;
+            : this.renderShortFormatExamples(exampleList, paramType, paramName)}`
+        : ''
+      }`;
   }
 
   inputParametersTemplate(paramType) {
@@ -336,7 +341,7 @@ export default class ApiRequest extends LitElement {
     for (const param of filteredParams) {
       const [declaredParamSchema, serializeStyle, mimeTypeElem] = getSchemaFromParam(param);
       if (!declaredParamSchema) {
-        continue; // eslint-disable-line no-continue
+        continue;
       }
       const paramSchema = getTypeInfo(declaredParamSchema);
       if (!paramSchema) {
@@ -367,7 +372,7 @@ export default class ApiRequest extends LitElement {
           || nestExampleIfPresent(param.example)
           || nestExampleIfPresent(mimeTypeElem?.example)
           || mimeTypeElem?.examples
-          || paramSchema.examples
+          || nestExampleIfPresent(paramSchema.examples)
           || nestExampleIfPresent(paramSchema.example)
         ),
         paramSchema.type,
@@ -449,8 +454,12 @@ export default class ApiRequest extends LitElement {
                             data-param-allow-reserved = "${paramAllowReserved}"
                             data-x-fill-example = "${param['x-fill-example'] || 'yes'}"
                             spellcheck = "false"
-                            .textContent="${param['x-fill-example'] === 'no' ? '' : live(this.fillRequestFieldsWithExample === 'true' ? example.exampleVal : '')}"
+                            .textContent="${param['x-fill-example'] === 'no' ? '' : live(this.fillRequestFieldsWithExample === 'true' ? (typeof example.exampleVal === 'object' ? JSON.stringify(example.exampleVal, null, 2) : example.exampleVal) : '')}"
                             style = "resize:vertical; width:100%; height: ${'read focused'.includes(this.renderStyle) ? '180px' : '120px'};"
+                            @input=${(e) => {
+                              const requestPanelEl = this.getRequestPanel(e);
+                              this.liveCURLSyntaxUpdate(requestPanelEl);
+                            }}
                           ></textarea>
                         </div>`
                         : html`
@@ -461,12 +470,12 @@ export default class ApiRequest extends LitElement {
                               .data = '${schemaAsObj}'
                               schema-expand-level = "${this.schemaExpandLevel}"
                               schema-description-expanded = "${this.schemaDescriptionExpanded}"
-                              allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
+                              allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
                               schema-hide-read-only = "${this.schemaHideReadOnly.includes(this.method)}"
                               schema-hide-write-only = "${this.schemaHideWriteOnly.includes(this.method)}"
-                              exportparts = "btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-clear-resp:btn-clear-resp,
-            file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, 
-            anchor:anchor, anchor-param-example:anchor-param-example"
+                              exportparts = "wrap-request-btn:wrap-request-btn, btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-clear-resp:btn-clear-resp,
+                                file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, 
+                                anchor:anchor, anchor-param-example:anchor-param-example"
                             > </schema-tree>
                           </div>`
                         }
@@ -482,6 +491,10 @@ export default class ApiRequest extends LitElement {
                       data-x-fill-example = "${param['x-fill-example'] || 'yes'}"
                       data-array="false"
                       .value="${param['x-fill-example'] === 'no' ? '' : live(this.fillRequestFieldsWithExample === 'true' ? example.exampleVal : '')}"
+                      @input=${(e) => {
+                        const requestPanelEl = this.getRequestPanel(e);
+                        this.liveCURLSyntaxUpdate(requestPanelEl);
+                      }}
                     />`
                 }
             </td>`
@@ -530,18 +543,18 @@ export default class ApiRequest extends LitElement {
     return html`
     <div class="table-title top-gap">${title}</div>
     <div style="display:block; overflow-x:auto; max-width:100%;">
-      <table class="m-table" style="width:100%; word-break:break-word;">
+      <table role="presentation" class="m-table" style="width:100%; word-break:break-word;">
         ${tableRows}
       </table>
     </div>`;
   }
 
-  // This method is called before navigation change in focusd mode
-  async beforerNavigationFocusedMode() {
+  // This method is called before navigation change in focused mode
+  async beforeNavigationFocusedMode() {
     // this.saveExampleState();
   }
 
-  // This method is called after navigation change in focusd mode
+  // This method is called after navigation change in focused mode
   async afterNavigationFocusedMode() {
     this.selectedRequestBodyType = '';
     this.selectedRequestBodyExample = '';
@@ -557,6 +570,9 @@ export default class ApiRequest extends LitElement {
       const readOnlyExampleEl = selectEl.closest('.example-panel').querySelector('.request-body-param');
       const userInputExampleTextareaEl = selectEl.closest('.example-panel').querySelector('.request-body-param-user-input');
       userInputExampleTextareaEl.value = readOnlyExampleEl.innerText;
+
+      const requestPanelEl = this.getRequestPanel({ target: selectEl });
+      this.liveCURLSyntaxUpdate(requestPanelEl);
     }, 0, exampleDropdownEl);
   }
 
@@ -672,6 +688,16 @@ export default class ApiRequest extends LitElement {
                     data-example-format = "${v.exampleFormat}"
                     style="width:100%; resize:vertical;"
                     .textContent = "${this.fillRequestFieldsWithExample === 'true' ? (v.exampleFormat === 'text' ? v.exampleValue : JSON.stringify(v.exampleValue, null, 2)) : ''}"
+                    @input=${(e) => {
+                      const requestPanelEl = this.getRequestPanel(e);
+                      this.liveCURLSyntaxUpdate(requestPanelEl);
+                    }}
+                    @keydown=${(e) => {
+                      if ((e.keyCode === 10 || e.keyCode === 13) && e.ctrlKey) {
+                        return this.onTryClick(e);
+                      }
+                    }}
+
                   ></textarea>
                 </div>  
               `)}
@@ -717,7 +743,7 @@ export default class ApiRequest extends LitElement {
               .data = '${schemaAsObj}'
               schema-expand-level = "${this.schemaExpandLevel}"
               schema-description-expanded = "${this.schemaDescriptionExpanded}"
-              allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
+              allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
               schema-hide-read-only = "${this.schemaHideReadOnly}"
               schema-hide-write-only = "${this.schemaHideWriteOnly}"
               exportparts = "schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
@@ -732,7 +758,7 @@ export default class ApiRequest extends LitElement {
               .data = "${schemaAsObj}"
               schema-expand-level = "${this.schemaExpandLevel}"
               schema-description-expanded = "${this.schemaDescriptionExpanded}"
-              allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
+              allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
               schema-hide-read-only = "${this.schemaHideReadOnly}"
               schema-hide-write-only = "${this.schemaHideWriteOnly}"
               exportparts = "schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
@@ -888,7 +914,7 @@ export default class ApiRequest extends LitElement {
                     data-example = "${Array.isArray(fieldExamples) ? fieldExamples.join('~|~') : fieldExamples}"
                     data-array = "true"
                     placeholder = "add-multiple &#x21a9;"
-                    .value = "${Array.isArray(fieldExamples) ? Array.isArray(fieldExamples[0]) ? fieldExamples[0] : [fieldExamples[0]] : [fieldExamples]}"
+                    .value = "${Array.isArray(fieldExamples) ? Array.isArray(fieldExamples[0]) ? fieldExamples[0] : fieldExamples : []}"
                   >
                   </tag-input>
                 `
@@ -965,7 +991,7 @@ export default class ApiRequest extends LitElement {
         }`);
       }
       return html`
-        <table style="width:100%;" class="m-table">
+        <table role="presentation" style="width:100%;" class="m-table">
           ${formDataTableRows}
         </table>
       `;
@@ -985,6 +1011,15 @@ export default class ApiRequest extends LitElement {
     `;
   }
 
+  curlSyntaxTemplate(display = 'flex') {
+    return html`
+      <div class="col m-markdown" style="flex:1; display:${display}; position:relative; max-width: 100%;">
+        <button  class="toolbar-btn" style = "position:absolute; top:12px; right:8px" @click='${(e) => { copyToClipboard(this.curlSyntax.replace(/\\$/, ''), e); }}' part="btn btn-fill"> Copy </button>
+        <pre style="white-space:pre"><code>${unsafeHTML(Prism.highlight(this.curlSyntax.trim().replace(/\\$/, ''), Prism.languages.shell, 'shell'))}</code></pre>
+      </div>
+      `;
+  }
+
   apiResponseTabTemplate() {
     let responseFormat = '';
     let responseContent = '';
@@ -1017,15 +1052,21 @@ export default class ApiRequest extends LitElement {
         }}">
           <button class="tab-btn ${this.activeResponseTab === 'response' ? 'active' : ''}" data-tab = 'response' > RESPONSE</button>
           <button class="tab-btn ${this.activeResponseTab === 'headers' ? 'active' : ''}"  data-tab = 'headers' > RESPONSE HEADERS</button>
-          <button class="tab-btn ${this.activeResponseTab === 'curl' ? 'active' : ''}" data-tab = 'curl'>CURL</button>
+          ${this.showCurlBeforeTry === 'true'
+            ? ''
+            : html`<button class="tab-btn ${this.activeResponseTab === 'curl' ? 'active' : ''}" data-tab = 'curl'>CURL</button>`}
         </div>
         ${this.responseIsBlob
           ? html`
             <div class="tab-content col" style="flex:1; display:${this.activeResponseTab === 'response' ? 'flex' : 'none'};">
+              ${this.responseBlobType === 'image'
+                ? html`<img style="max-height:var(--resp-area-height, 400px); object-fit:contain;" class="mar-top-8" src="${this.responseBlobUrl}"></img>`
+                : ''
+              }  
               <button class="m-btn thin-border mar-top-8" style="width:135px" @click='${(e) => { downloadResource(this.responseBlobUrl, this.respContentDisposition, e); }}' part="btn btn-outline">
                 DOWNLOAD
               </button>
-              ${this.responseBlobType === 'view'
+              ${this.responseBlobType === 'view' || this.responseBlobType === 'image'
                 ? html`<button class="m-btn thin-border mar-top-8" style="width:135px"  @click='${(e) => { viewResource(this.responseBlobUrl, e); }}' part="btn btn-outline">VIEW (NEW TAB)</button>`
                 : ''
               }
@@ -1040,10 +1081,7 @@ export default class ApiRequest extends LitElement {
           <button  class="toolbar-btn" style = "position:absolute; top:12px; right:8px" @click='${(e) => { copyToClipboard(this.responseHeaders, e); }}' part="btn btn-fill"> Copy </button>
           <pre style="white-space:pre"><code>${unsafeHTML(Prism.highlight(this.responseHeaders, Prism.languages.css, 'css'))}</code></pre>
         </div>
-        <div class="tab-content col m-markdown" style="flex:1; display:${this.activeResponseTab === 'curl' ? 'flex' : 'none'};">
-          <button  class="toolbar-btn" style = "position:absolute; top:12px; right:8px" @click='${(e) => { copyToClipboard(this.curlSyntax.replace(/\\$/, ''), e); }}' part="btn btn-fill"> Copy </button>
-          <pre style="white-space:pre"><code>${unsafeHTML(Prism.highlight(this.curlSyntax.trim().replace(/\\$/, ''), Prism.languages.shell, 'shell'))}</code></pre>
-        </div>
+        ${this.showCurlBeforeTry === 'true' ? '' : this.curlSyntaxTemplate(this.activeResponseTab === 'curl' ? 'flex' : 'none')}
       </div>`;
   }
 
@@ -1073,7 +1111,7 @@ export default class ApiRequest extends LitElement {
     `;
 
     return html`
-    <div style="display:flex; align-items:flex-end; margin:16px 0; font-size:var(--font-size-small);">
+    <div style="display:flex; align-items:flex-end; margin:16px 0; font-size:var(--font-size-small);" part="wrap-request-btn">
       <div class="hide-in-small-screen" style="flex-direction:column; margin:0; width:calc(100% - 60px);">
         <div style="display:flex; flex-direction:row; align-items:center; overflow:hidden;"> 
           ${selectedServerHtml}
@@ -1108,6 +1146,9 @@ export default class ApiRequest extends LitElement {
       }
       <button class="m-btn primary thin-border" part="btn btn-try" @click="${this.onTryClick}">TRY</button>
     </div>
+    <div class="row" style="font-size:var(--font-size-small); margin:5px 0">
+      ${this.showCurlBeforeTry === 'true' ? this.curlSyntaxTemplate() : ''}
+    </div>
     ${this.responseMessage === '' ? '' : this.apiResponseTabTemplate()}
     `;
   }
@@ -1133,27 +1174,12 @@ export default class ApiRequest extends LitElement {
     requestPanelInputEls.forEach((el) => { el.value = ''; });
   }
 
-  async onTryClick(e) {
-    // const me = this;
-    const tryBtnEl = e.target;
+  buildFetchURL(requestPanelEl) {
     let fetchUrl;
-    let curlUrl;
-    let curl = '';
-    let curlHeaders = '';
-    let curlData = '';
-    let curlForm = '';
-    const respEl = this.closest('.expanded-req-resp-container, .req-resp-container')?.getElementsByTagName('api-response')[0];
-    const acceptHeader = respEl?.selectedMimeType;
-    const requestPanelEl = e.target.closest('.request-panel');
     const pathParamEls = [...requestPanelEl.querySelectorAll("[data-ptype='path']")];
     const queryParamEls = [...requestPanelEl.querySelectorAll("[data-ptype='query']")];
     const queryParamObjTypeEls = [...requestPanelEl.querySelectorAll("[data-ptype='query-object']")];
-    const headerParamEls = [...requestPanelEl.querySelectorAll("[data-ptype='header']")];
-    const requestBodyContainerEl = requestPanelEl.querySelector('.request-body-container');
     fetchUrl = this.path;
-    const fetchOptions = {
-      method: this.method.toUpperCase(),
-    };
     // Generate URL using Path Params
     pathParamEls.map((el) => {
       fetchUrl = fetchUrl.replace(`{${el.dataset.pname}}`, encodeURIComponent(el.value));
@@ -1202,7 +1228,7 @@ export default class ApiRequest extends LitElement {
         const queryParam = new URLSearchParams();
         try {
           let queryParamObj = {};
-          const { paramSerializeStyle, paramSerializeExplode } = el.dataset;
+          const { paramSerializeStyle, paramSerializeExplode, pname } = el.dataset;
           queryParamObj = Object.assign(queryParamObj, JSON.parse(el.value.replace(/\s+/g, ' ')));
           if (el.dataset.paramAllowReserved === 'true') {
             queryParamsWithReservedCharsAllowed.push(el.dataset.pname);
@@ -1215,29 +1241,30 @@ export default class ApiRequest extends LitElement {
             }
           } else {
             for (const key in queryParamObj) {
+              const pKey = `${pname}[${key}]`;
               if (typeof queryParamObj[key] === 'object') {
                 if (Array.isArray(queryParamObj[key])) {
                   if (paramSerializeStyle === 'spaceDelimited') {
-                    queryParam.append(key, queryParamObj[key].join(' '));
+                    queryParam.append(pKey, queryParamObj[key].join(' '));
                   } else if (paramSerializeStyle === 'pipeDelimited') {
-                    queryParam.append(key, queryParamObj[key].join('|'));
+                    queryParam.append(pKey, queryParamObj[key].join('|'));
                   } else {
                     if (paramSerializeExplode === 'true') { // eslint-disable-line no-lonely-if
                       queryParamObj[key].forEach((v) => {
-                        queryParam.append(key, v);
+                        queryParam.append(pKey, v);
                       });
                     } else {
-                      queryParam.append(key, queryParamObj[key]);
+                      queryParam.append(pKey, queryParamObj[key]);
                     }
                   }
                 }
               } else {
-                queryParam.append(key, queryParamObj[key]);
+                queryParam.append(pKey, queryParamObj[key]);
               }
             }
           }
         } catch (err) {
-          console.log('RapiDoc: unable to parse %s into object', el.value); // eslint-disable-line no-console
+          console.error('RapiDoc: unable to parse %s into object', el.value); // eslint-disable-line no-console
         }
         if (queryParam.toString()) {
           urlQueryParamsMap.set(el.dataset.pname, queryParam);
@@ -1246,7 +1273,6 @@ export default class ApiRequest extends LitElement {
     }
     let urlQueryParamString = '';
     if (urlQueryParamsMap.size) {
-      urlQueryParamString = '?';
       urlQueryParamsMap.forEach((val, pname) => {
         if (queryParamsWithReservedCharsAllowed.includes(pname)) {
           urlQueryParamString += `${pname}=`;
@@ -1258,7 +1284,9 @@ export default class ApiRequest extends LitElement {
       });
       urlQueryParamString = urlQueryParamString.slice(0, -1);
     }
-    fetchUrl = `${fetchUrl}${urlQueryParamString}`;
+    if (urlQueryParamString.length !== 0) {
+      fetchUrl = `${fetchUrl}${fetchUrl.includes('?') ? '&' : '?'}${urlQueryParamString}`;
+    }
 
     // Add authentication Query-Param if provided
     this.api_keys
@@ -1267,23 +1295,21 @@ export default class ApiRequest extends LitElement {
         fetchUrl = `${fetchUrl}${fetchUrl.includes('?') ? '&' : '?'}${v.name}=${encodeURIComponent(v.finalKeyValue)}`;
       });
 
-    // Final URL for API call
     fetchUrl = `${this.serverUrl.replace(/\/$/, '')}${fetchUrl}`;
-    if (fetchUrl.startsWith('http') === false) {
-      const url = new URL(fetchUrl, window.location.href);
-      curlUrl = url.href;
-    } else {
-      curlUrl = fetchUrl;
-    }
-    curl = `curl -X ${this.method.toUpperCase()} "${curlUrl}" \\\n`;
+    return fetchUrl;
+  }
+
+  buildFetchHeaders(requestPanelEl) {
+    const respEl = this.closest('.expanded-req-resp-container, .req-resp-container')?.getElementsByTagName('api-response')[0];
+    const headerParamEls = [...requestPanelEl.querySelectorAll("[data-ptype='header']")];
+    const requestBodyContainerEl = requestPanelEl.querySelector('.request-body-container');
+    const acceptHeader = respEl?.selectedMimeType;
     const reqHeaders = new Headers();
     if (acceptHeader) {
       // Uses the acceptHeader from Response panel
       reqHeaders.append('Accept', acceptHeader);
-      curlHeaders += ` -H "Accept: ${acceptHeader}" \\\n`;
     } else if (this.accept) {
       reqHeaders.append('Accept', this.accept);
-      curlHeaders += ` -H "Accept: ${this.accept}" \\\n`;
     }
 
     // Add Authentication Header if provided
@@ -1291,18 +1317,32 @@ export default class ApiRequest extends LitElement {
       .filter((v) => (v.in === 'header'))
       .forEach((v) => {
         reqHeaders.append(v.name, v.finalKeyValue);
-        curlHeaders += ` -H "${v.name}: ${v.finalKeyValue}" \\\n`;
       });
 
     // Add Header Params
     headerParamEls.map((el) => {
       if (el.value) {
         reqHeaders.append(el.dataset.pname, el.value);
-        curlHeaders += ` -H "${el.dataset.pname}: ${el.value}" \\\n`;
       }
     });
 
-    // Request Body Params
+    if (requestBodyContainerEl) {
+      const requestBodyType = requestBodyContainerEl.dataset.selectedRequestBodyType;
+      // Common for all request-body
+      if (!requestBodyType.includes('form-data')) {
+        // For multipart/form-data dont set the content-type to allow creation of browser generated part boundaries
+        reqHeaders.append('Content-Type', requestBodyType);
+      }
+    }
+
+    return reqHeaders;
+  }
+
+  buildFetchBodyOptions(requestPanelEl) {
+    const requestBodyContainerEl = requestPanelEl.querySelector('.request-body-container');
+    const fetchOptions = {
+      method: this.method.toUpperCase(),
+    };
     if (requestBodyContainerEl) {
       const requestBodyType = requestBodyContainerEl.dataset.selectedRequestBodyType;
       if (requestBodyType.includes('form-urlencoded')) {
@@ -1328,7 +1368,6 @@ export default class ApiRequest extends LitElement {
               formUrlDynParams.append(prop, JSON.stringify(tmpObj[prop]));
             }
             fetchOptions.body = formUrlDynParams;
-            curlData = ` -d ${formUrlDynParams.toString()} \\\n`;
           }
         } else {
           // url-encoded Form Params (regular)
@@ -1347,7 +1386,6 @@ export default class ApiRequest extends LitElement {
               }
             });
           fetchOptions.body = formUrlParams;
-          curlData = ` -d ${formUrlParams.toString()} \\\n`;
         }
       } else if (requestBodyType.includes('form-data')) {
         const formDataParams = new FormData();
@@ -1356,15 +1394,10 @@ export default class ApiRequest extends LitElement {
           if (el.dataset.array === 'false') {
             if (el.type === 'file' && el.files[0]) {
               formDataParams.append(el.dataset.pname, el.files[0], el.files[0].name);
-              curlForm += ` -F "${el.dataset.pname}=@${el.files[0].name}" \\\n`;
             } else if (el.value) {
               formDataParams.append(el.dataset.pname, el.value);
-              curlForm += ` -F "${el.dataset.pname}=${el.value}" \\\n`;
             }
           } else if (el.value && Array.isArray(el.value)) {
-            el.value.forEach((v) => {
-              curlForm = `${curlForm} -F "${el.dataset.pname}[]=${v}" \\\n`;
-            });
             formDataParams.append(el.dataset.pname, el.value.join(','));
           }
         });
@@ -1373,34 +1406,27 @@ export default class ApiRequest extends LitElement {
         const bodyParamFileEl = requestPanelEl.querySelector('.request-body-param-file');
         if (bodyParamFileEl?.files[0]) {
           fetchOptions.body = bodyParamFileEl.files[0]; // eslint-disable-line prefer-destructuring
-          curlData = ` --data-binary @${bodyParamFileEl.files[0].name} \\\n`;
         }
       } else if (requestBodyType.includes('json') || requestBodyType.includes('xml') || requestBodyType.includes('text')) {
         const exampleTextAreaEl = requestPanelEl.querySelector('.request-body-param-user-input');
         if (exampleTextAreaEl?.value) {
           fetchOptions.body = exampleTextAreaEl.value;
-          if (requestBodyType.includes('json')) {
-            try {
-              curlData = ` -d '${JSON.stringify(JSON.parse(exampleTextAreaEl.value))}' \\\n`;
-            } catch (err) {
-              // Ignore.
-            }
-          }
-          if (!curlData) {
-            curlData = ` -d '${exampleTextAreaEl.value.replace(/'/g, '\'"\'"\'')}' \\\n`;
-          }
         }
       }
-      // Common for all request-body
-      if (!requestBodyType.includes('form-data')) {
-        // For multipart/form-data dont set the content-type to allow creation of browser generated part boundaries
-        reqHeaders.append('Content-Type', requestBodyType);
-      }
-      curlHeaders += ` -H "Content-Type: ${requestBodyType}" \\\n`;
     }
+
+    return fetchOptions;
+  }
+
+  async onTryClick(e) {
+    const tryBtnEl = e.target;
+    const requestPanelEl = tryBtnEl.closest('.request-panel');
+    const fetchUrl = this.buildFetchURL(requestPanelEl);
+    const fetchOptions = this.buildFetchBodyOptions(requestPanelEl);
+    const reqHeaders = this.buildFetchHeaders(requestPanelEl);
     this.responseUrl = '';
     this.responseHeaders = [];
-    this.curlSyntax = '';
+    this.curlSyntax = this.generateCURLSyntax(fetchUrl, reqHeaders, fetchOptions, requestPanelEl);
     this.responseStatus = 'success';
     this.responseIsBlob = false;
 
@@ -1409,22 +1435,28 @@ export default class ApiRequest extends LitElement {
       URL.revokeObjectURL(this.responseBlobUrl);
       this.responseBlobUrl = '';
     }
-    this.curlSyntax = `${curl}${curlHeaders}${curlData}${curlForm}`;
     if (this.fetchCredentials) {
       fetchOptions.credentials = this.fetchCredentials;
     }
     const controller = new AbortController();
     const { signal } = controller;
     fetchOptions.headers = reqHeaders;
-    const fetchRequest = new Request(fetchUrl, fetchOptions);
+    const tempRequest = { url: fetchUrl, ...fetchOptions };
     this.dispatchEvent(new CustomEvent('before-try', {
       bubbles: true,
       composed: true,
       detail: {
-        request: fetchRequest,
+        request: tempRequest,
         controller,
       },
     }));
+    const updatedFetchOptions = {
+      method: tempRequest.method,
+      headers: tempRequest.headers,
+      credentials: tempRequest.credentials,
+      body: tempRequest.body,
+    };
+    const fetchRequest = new Request(tempRequest.url, updatedFetchOptions);
 
     let fetchResponse;
     let responseClone;
@@ -1439,6 +1471,23 @@ export default class ApiRequest extends LitElement {
       const startTime = performance.now();
       fetchResponse = await fetch(fetchRequest, { signal });
       const endTime = performance.now();
+      // Allow to modify response
+      /*
+      let resolveModifiedResponse; // Create a promise that will be resolved from the event listener
+      const modifiedResponsePromise = new Promise((resolve) => {
+        resolveModifiedResponse = resolve;
+      });
+      this.dispatchEvent(new CustomEvent('fetched-try', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          request: fetchRequest,
+          response: fetchResponse,
+          resolveModifiedResponse, // pass the resolver function
+        },
+      }));
+      fetchResponse = await modifiedResponsePromise; // Wait for the modified response
+      */
       responseClone = fetchResponse.clone(); // create a response clone to allow reading response body again (response.json, response.text etc)
       tryBtnEl.disabled = false;
       this.responseMessage = html`${fetchResponse.statusText ? `${fetchResponse.statusText}:${fetchResponse.status}` : fetchResponse.status} <div style="color:var(--light-fg)"> Took ${Math.round(endTime - startTime)} milliseconds </div>`;
@@ -1478,6 +1527,9 @@ export default class ApiRequest extends LitElement {
         } else if (/^font\/|tar$|zip$|7z$|rtf$|msword$|excel$|\/pdf$|\/octet-stream$|^application\/vnd\./.test(contentType)) {
           this.responseIsBlob = true;
           this.responseBlobType = 'download';
+        } else if (/^image/.test(contentType)) {
+          this.responseIsBlob = true;
+          this.responseBlobType = 'image';
         } else if (/^audio|^image|^video/.test(contentType)) {
           this.responseIsBlob = true;
           this.responseBlobType = 'view';
@@ -1522,6 +1574,7 @@ export default class ApiRequest extends LitElement {
           },
         }));
         this.responseMessage = 'Request Aborted';
+        this.responseText = 'Request Aborted';
       } else {
         this.dispatchEvent(new CustomEvent('after-try', {
           bubbles: true,
@@ -1537,6 +1590,96 @@ export default class ApiRequest extends LitElement {
     this.requestUpdate();
   }
 
+  liveCURLSyntaxUpdate(requestPanelEl) {
+    this.applyCURLSyntax(requestPanelEl);
+    this.requestUpdate();
+  }
+
+  onGenerateCURLClick(e) {
+    const requestPanelEl = this.getRequestPanel(e);
+    this.applyCURLSyntax(requestPanelEl);
+  }
+
+  getRequestPanel(e) {
+    return e.target.closest('.request-panel');
+  }
+
+  applyCURLSyntax(requestPanelEl) {
+    const fetchUrl = this.buildFetchURL(requestPanelEl);
+    const fetchOptions = this.buildFetchBodyOptions(requestPanelEl);
+    const fetchHeaders = this.buildFetchHeaders(requestPanelEl);
+
+    this.curlSyntax = this.generateCURLSyntax(fetchUrl, fetchHeaders, fetchOptions, requestPanelEl);
+  }
+
+  generateCURLSyntax(fetchUrl, fetchHeaders, fetchOptions, requestPanelEl) {
+    let curlUrl;
+    let curl = '';
+    let curlHeaders = '';
+    let curlData = '';
+    let curlForm = '';
+    const requestBodyContainerEl = requestPanelEl.querySelector('.request-body-container');
+
+    if (fetchUrl.startsWith('http') === false) {
+      const url = new URL(fetchUrl, window.location.href);
+      curlUrl = url.href;
+    } else {
+      curlUrl = fetchUrl;
+    }
+
+    curl = `curl -X ${this.method.toUpperCase()} "${curlUrl}" \\\n`;
+
+    fetchHeaders.forEach((value, key) => {
+      let tempHeaderArray = value.split(',');
+      tempHeaderArray = tempHeaderArray.map((el) => el.trim()).filter((string, index) => tempHeaderArray.indexOf(string) === index);
+      fetchHeaders.set(key, tempHeaderArray.join(', '));
+    });
+
+    curlHeaders = Array.from(fetchHeaders).map(([key, value]) => ` -H "${key}: ${value}"`).join('\\\n');
+    if (curlHeaders) {
+      curlHeaders = `${curlHeaders} \\\n`;
+    }
+    if (fetchOptions.body instanceof URLSearchParams) {
+      curlData = ` -d ${fetchOptions.body.toString()} \\\n`;
+    } else if (fetchOptions.body instanceof File) {
+      curlData = ` --data-binary @${fetchOptions.body.name} \\\n`;
+    } else if (fetchOptions.body instanceof FormData) {
+      curlForm = Array.from(fetchOptions.body).reduce((aggregator, [key, value]) => {
+        if (value instanceof File) {
+          return [...aggregator, ` -F "${key}=@${value.name}"`];
+        }
+
+        const multiple = value.match(/([^,],)/gm);
+
+        if (multiple) {
+          const multipleResults = multiple.map((one) => `-F "${key}[]=${one}"`);
+
+          return [...aggregator, ...multipleResults];
+        }
+
+        return [...aggregator, ` -F "${key}=${value}"`];
+      }, []).join('\\\n');
+    } else if (requestBodyContainerEl && requestBodyContainerEl.dataset.selectedRequestBodyType) {
+      const requestBodyType = requestBodyContainerEl.dataset.selectedRequestBodyType;
+      const exampleTextAreaEl = requestPanelEl.querySelector('.request-body-param-user-input');
+      if (exampleTextAreaEl?.value) {
+        fetchOptions.body = exampleTextAreaEl.value;
+        if (requestBodyType.includes('json')) {
+          try {
+            curlData = ` -d '${JSON.stringify(JSON.parse(exampleTextAreaEl.value))}' \\\n`;
+          } catch (err) {
+            // Ignore.
+          }
+        }
+        if (!curlData) {
+          curlData = ` -d '${exampleTextAreaEl.value.replace(/'/g, '\'"\'"\'')}' \\\n`;
+        }
+      }
+    }
+
+    return `${curl}${curlHeaders}${curlData}${curlForm}`;
+  }
+
   onAddRemoveFileInput(e, pname, ptype) {
     if (e.target.tagName.toLowerCase() !== 'button') {
       return;
@@ -1592,7 +1735,8 @@ export default class ApiRequest extends LitElement {
   }
 
   disconnectedCallback() {
-    // Cleanup ObjectURL forthe blob data if this component created one
+    this.curlSyntax = '';
+    // Cleanup ObjectURL for the blob data if this component created one
     if (this.responseBlobUrl) {
       URL.revokeObjectURL(this.responseBlobUrl);
       this.responseBlobUrl = '';