Improve error logging when there is a problem rendering url or images.

src/components/api-request.js

@@ -1,12 +1,12 @@
 import { LitElement, html } from 'lit';
-import { marked } from 'marked';
 
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { keyed } from 'lit/directives/keyed.js';
 import formatXml from 'xml-but-prettier';
 
 import { getI18nText } from '../languages/index.js';
 import { schemaInObjectNotation, getTypeInfo, generateExample, isPatternProperty } from '../utils/schema-utils.js';
+import { toMarkdown } from '../utils/common-utils';
 import './schema-tree.js';
 import getRequestFormTable from './request-form-table.js';
 import './tag-input.js';
@@ -230,7 +230,7 @@ export default class ApiRequest extends LitElement {
               ${param.description
                 ? html`
                   <div class="param-description" style="margin-top: 1rem;">
-                      ${unsafeHTML(marked(param.description))}
+                      ${unsafeHTML(toMarkdown(param.description))}
                   </div>`
                 : ''
               }
@@ -312,7 +312,7 @@ export default class ApiRequest extends LitElement {
             <li>
               ${this.renderExample(example, paramType, paramName)}
               ${example.exampleSummary?.length > 0 ? html`<span>&lpar;${example.exampleSummary}&rpar;</span>` : ''}
-              ${example.exampleDescription?.length > 0 ? html`<p>${unsafeHTML(marked(example.exampleDescription))}</p>` : ''}
+              ${example.exampleDescription?.length > 0 ? html`<p>${unsafeHTML(toMarkdown(example.exampleDescription))}</p>` : ''}
             </li>`
         )}
       </ul>`;
@@ -461,7 +461,7 @@ export default class ApiRequest extends LitElement {
           ${displayedBodyExample ? html`
             <div class="example" data-default = '${displayedBodyExample.exampleId}'>
               ${displayedBodyExample.exampleSummary && displayedBodyExample.exampleSummary.length > 80 ? html`<div style="padding: 4px 0"> ${displayedBodyExample.exampleSummary} </div>` : ''}
-              ${displayedBodyExample.exampleDescription ? html`<div class="m-markdown-small" style="padding: 4px 0"> ${unsafeHTML(marked(displayedBodyExample.exampleDescription || ''))} </div>` : ''}
+              ${displayedBodyExample.exampleDescription ? html`<div class="m-markdown-small" style="padding: 4px 0"> ${unsafeHTML(toMarkdown(displayedBodyExample.exampleDescription || ''))} </div>` : ''}
                 <!-- this textarea is for user to edit the example -->
               <slot name="${this.elementId}--request-body">
                 <textarea
@@ -550,7 +550,7 @@ export default class ApiRequest extends LitElement {
           <span style="flex:1"></span>
           ${reqBodyTypeSelectorHtml}
         </div>
-        ${this.request_body.description ? html`<div class="m-markdown" style="margin-bottom:12px">${unsafeHTML(marked(this.request_body.description))}</div>` : ''}
+        ${this.request_body.description ? html`<div class="m-markdown" style="margin-bottom:12px">${unsafeHTML(toMarkdown(this.request_body.description))}</div>` : ''}
         
         ${reqBodySchemaHtml || reqBodyDefaultHtml
           ? html`
@@ -578,7 +578,7 @@ export default class ApiRequest extends LitElement {
   //       data-ptype="${mimeType}"
   //       style="width:100%"
   //     >${exampleValue}</textarea>
-  //     ${schema.description ? html`<span class="m-markdown-small">${unsafeHTML(marked(schema.description))}</span>` : ''}
+  //     ${schema.description ? html`<span class="m-markdown-small">${unsafeHTML(toMarkdown(schema.description))}</span>` : ''}
   //   `;
   // }
 

src/components/api-response.js

@@ -1,7 +1,7 @@
 import { LitElement, html, css } from 'lit';
-import { marked } from 'marked';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { schemaInObjectNotation, generateExample, getTypeInfo } from '../utils/schema-utils.js';
+import { toMarkdown } from '../utils/common-utils.js';
 import { getI18nText } from '../languages/index.js';
 import FontStyles from '../styles/font-styles.js';
 import FlexStyles from '../styles/flex-styles.js';
@@ -184,7 +184,7 @@ export default class ApiResponse extends LitElement {
       ${Object.keys(this.responses).map((status) => html`
         <div style = 'display: ${status === this.selectedStatus ? 'block' : 'none'}' >
           <div class="top-gap">
-            <span class="resp-descr m-markdown ">${unsafeHTML(marked(this.responses[status] && this.responses[status].description || ''))}</span>
+            <span class="resp-descr m-markdown ">${unsafeHTML(toMarkdown(this.responses[status] && this.responses[status].description || ''))}</span>
             ${(this.headersForEachRespStatus[status] && this.headersForEachRespStatus[status].length > 0)
               ? html`${this.responseHeaderListTemplate(this.headersForEachRespStatus[status])}`
               : ''
@@ -235,7 +235,7 @@ export default class ApiResponse extends LitElement {
                 ${typeData?.format || typeData?.type || ''}
               </td> 
               <td style="padding:8px; vertical-align: baseline; border-top: 1px solid var(--light-border-color);text-overflow: ellipsis;">
-                <div class="m-markdown-small regular-font" >${unsafeHTML(marked(v.description || ''))}</div>
+                <div class="m-markdown-small regular-font" >${unsafeHTML(toMarkdown(v.description || ''))}</div>
               </td>
               <td style="padding:8px; vertical-align: baseline; border-top: 1px solid var(--light-border-color); text-overflow: ellipsis;">
                 ${typeData?.example ?? typeData?.default ?? ''}
@@ -272,7 +272,7 @@ export default class ApiResponse extends LitElement {
       ${mimeRespDetails.examples.length === 1
         ? html`
           ${mimeRespDetails.examples[0].exampleSummary && mimeRespDetails.examples[0].exampleSummary.length > 80 ? html`<div style="padding: 4px 0"> ${mimeRespDetails.examples[0].exampleSummary} </div>` : ''}
-          ${mimeRespDetails.examples[0].exampleDescription ? html`<div class="m-markdown-small" style="padding: 4px 0"> ${unsafeHTML(marked(mimeRespDetails.examples[0].exampleDescription || ''))} </div>` : ''}
+          ${mimeRespDetails.examples[0].exampleDescription ? html`<div class="m-markdown-small" style="padding: 4px 0"> ${unsafeHTML(toMarkdown(mimeRespDetails.examples[0].exampleDescription || ''))} </div>` : ''}
           <syntax-highlighter class='example-panel generic-tree pad-top-8' mime-type="${mimeRespDetails.examples[0].exampleType}" .content="${mimeRespDetails.examples[0].exampleValue}"/>`
         : html`
           <span class = 'example-panel generic-tree ${this.renderStyle === 'read' ? 'border pad-8-16' : 'border-top pad-top-8'}'>
@@ -284,7 +284,7 @@ export default class ApiResponse extends LitElement {
             ${mimeRespDetails.examples.map((v) => html`
               <div class="example" data-example = '${v.exampleId}' style = "display: ${v.exampleId === mimeRespDetails.selectedExample ? 'block' : 'none'}">
                 ${v.exampleSummary && v.exampleSummary.length > 80 ? html`<div style="padding: 4px 0"> ${v.exampleSummary} </div>` : ''}
-                ${v.exampleDescription && v.exampleDescription !== v.exampleSummary ? html`<div class="m-markdown-small" style="padding: 4px 0"> ${unsafeHTML(marked(v.exampleDescription || ''))} </div>` : ''}
+                ${v.exampleDescription && v.exampleDescription !== v.exampleSummary ? html`<div class="m-markdown-small" style="padding: 4px 0"> ${unsafeHTML(toMarkdown(v.exampleDescription || ''))} </div>` : ''}
                 <syntax-highlighter mime-type="${v.exampleType}" .content="${v.exampleValue}"/>
               </div>  
             `)}

src/components/request-form-table.js

@@ -1,6 +1,6 @@
 /* eslint-disable indent */
 import { html } from 'lit';
-import { marked } from 'marked';
+import { toMarkdown } from '../utils/common-utils';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { isPatternProperty } from '../utils/schema-utils.js';
 import { map } from 'lit/directives/map.js';
@@ -56,7 +56,7 @@ function generateFormRows(data, options, dataType = 'object', key = '', descript
           <td>
           <!-- Leave empty, there are no objects that make sense in the form data -->
           </td>
-          <td class='key-descr m-markdown-small'>${unsafeHTML(marked(displayLine))}</td>
+          <td class='key-descr m-markdown-small'>${unsafeHTML(toMarkdown(displayLine))}</td>
         </tr>`
         : html`${data['::type'] === 'array' && dataType === 'array' ? html`<tr><td> ${dataType} </td> </tr>` : ''}`
       }
@@ -109,7 +109,7 @@ function generatePrimitiveRow(rowData, parentRecursionOptions) {
       ${dataType === 'array' ? getArrayFormField.call(this, keyLabel, example, defaultValue, format, rowGenerator) : ''}
       ${dataType !== 'array' ? getPrimitiveFormField.call(this, keyLabel, example, defaultValue, format, options, rowGenerator) : ''}
       <td>
-        ${description ? html`<div class="param-description">${unsafeHTML(marked(description))}</div>` : ''}
+        ${description ? html`<div class="param-description">${unsafeHTML(toMarkdown(description))}</div>` : ''}
         ${defaultValue || constraints || allowedValues || pattern
           ? html`
             <div class="param-constraint">
@@ -141,7 +141,7 @@ function generatePrimitiveRow(rowData, parentRecursionOptions) {
     ${schemaDescription || example ? html`<tr class="form-parameter-description">
       <td> </td>
       <td colspan="2" style="margin-top:0; padding:0 5px 8px 5px;"> 
-        <span class="m-markdown-small">${unsafeHTML(marked(schemaDescription || ''))}</span>
+        <span class="m-markdown-small">${unsafeHTML(toMarkdown(schemaDescription || ''))}</span>
         ${example
           ? html`<span>
             <span style="font-weight:bold"> Example: </span>

src/components/schema-table.js

@@ -1,5 +1,5 @@
 import { LitElement, html, css } from 'lit';
-import { marked } from 'marked';
+import { toMarkdown } from '../utils/common-utils';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import FontStyles from '../styles/font-styles.js';
 import SchemaStyles from '../styles/schema-styles.js';
@@ -120,7 +120,7 @@ export default class SchemaTable extends LitElement {
     const { result, keyLabelMaxCharacterLength, typeMaxCharacterLength } = this.data ? this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type']) : {};
     return html`
       ${displayLine
-        ? html`<span class='m-markdown' style="padding-bottom: 8px;"> ${unsafeHTML(marked(displayLine))}</span>`
+        ? html`<span class='m-markdown' style="padding-bottom: 8px;"> ${unsafeHTML(toMarkdown(displayLine))}</span>`
         : ''
       }
       <style>
@@ -252,7 +252,7 @@ export default class SchemaTable extends LitElement {
                 <div class="attributes" title="${flags['🆁'] && 'Read only attribute' || flags['🆆'] && 'Write only attribute' || ''}">${flags['🆁'] || flags['🆆'] || ''}</div>
               </div>
               <div class='td key-descr' part="schema-description">
-                <span class=" m-markdown-small">${unsafeHTML(marked(displayLine))}</span>
+                <span class=" m-markdown-small">${unsafeHTML(toMarkdown(displayLine))}</span>
                 ${data['::metadata']?.constraints?.length
                     ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px'><span class='bold-text'>Constraints: </span>${data['::metadata'].constraints.join(', ')}</div><br>` : ''}
               </div>
@@ -300,7 +300,7 @@ export default class SchemaTable extends LitElement {
         </div>
         <div class='td key-descr' part="schema-description">
           <span class="m-markdown-small" style="vertical-align: middle;">
-            ${unsafeHTML(marked(`${`${(schemaTitle || title) ? `**${schemaTitle || title}${schemaDescription || description ? ':' : ''}**` : ''} ${schemaDescription || description}` || ''}`))}
+            ${unsafeHTML(toMarkdown(`${`${(schemaTitle || title) ? `**${schemaTitle || title}${schemaDescription || description ? ':' : ''}**` : ''} ${schemaDescription || description}` || ''}`))}
           </span>
           ${constraints.length ? html`<div style='display:inline-block; line-break: anywhere; margin-right:8px;'><span class='bold-text'>Constraints: </span>${constraints.join(', ')}</div><br>` : ''}
           ${defaultValue !== '' ? html`<div style='display:inline-block; line-break: anywhere; margin-right:8px'><span class='bold-text'>Default: </span>${defaultValue}</div><br>` : ''}

src/components/schema-tree.js

@@ -1,5 +1,5 @@
 import { LitElement, html, css } from 'lit';
-import { marked } from 'marked';
+import { toMarkdown } from '../utils/common-utils';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { getI18nText } from '../languages/index.js';
 import FontStyles from '../styles/font-styles.js';
@@ -123,7 +123,7 @@ export default class SchemaTree extends LitElement {
     return html`
       <div class="tree ${this.interactive ? 'interactive' : ''}">
         <div class="toolbar">
-          ${displayLine ? html`<span class='m-markdown' style="margin-block-start: 0"> ${unsafeHTML(marked(displayLine))}</span>` : html`<div>&nbsp;</div>`}
+          ${displayLine ? html`<span class='m-markdown' style="margin-block-start: 0"> ${unsafeHTML(toMarkdown(displayLine))}</span>` : html`<div>&nbsp;</div>`}
           <div class="toolbar-item" @click='${() => this.toggleSchemaDescription()}'> 
             ${this.schemaDescriptionExpanded ? getI18nText('schemas.collapse-desc') : getI18nText('schemas.expand-desc')}
           </div>
@@ -243,7 +243,7 @@ export default class SchemaTree extends LitElement {
           </div>
           <div class="td key-descr">
             <span class="m-markdown-small" style="vertical-align: middle;" title="${flags['🆁'] && 'Read only attribute' || flags['🆆'] && 'Write only attribute' || ''}">
-              ${unsafeHTML(marked(displayLine))}
+              ${unsafeHTML(toMarkdown(displayLine))}
             </span>
             ${this.schemaDescriptionExpanded ? html`
               ${data['::metadata']?.constraints?.length ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px'><span class='bold-text'>Constraints: </span>${data['::metadata'].constraints.join(', ')}</div><br>` : ''}` : ''}
@@ -294,7 +294,7 @@ export default class SchemaTree extends LitElement {
         </div>
         <div class="td key-descr">
           <span class="m-markdown-small" style="vertical-align: middle;" title="${readOrWriteOnly === '🆁' && 'Read only attribute' || readOrWriteOnly === '🆆' && 'Write only attribute' || ''}">
-            ${unsafeHTML(marked(`${readOrWriteOnly && `${readOrWriteOnly} ` || ''}${`${(titleString) ? `**${titleString}${descriptionString ? ':' : ''}**` : ''} ${descriptionString}` || ''}`))}
+            ${unsafeHTML(toMarkdown(`${readOrWriteOnly && `${readOrWriteOnly} ` || ''}${`${(titleString) ? `**${titleString}${descriptionString ? ':' : ''}**` : ''} ${descriptionString}` || ''}`))}
           </span>
           ${this.schemaDescriptionExpanded ? html`
             ${constraints.length ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px'><span class='bold-text'>Constraints: </span>${constraints.join(', ')}</div><br>` : ''}

src/templates/components-template.js

@@ -2,7 +2,7 @@
 import { schemaInObjectNotation } from '../utils/schema-utils.js';
 import { html } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { marked } from 'marked';
+import { toMarkdown } from '../utils/common-utils';
 import '../components/schema-tree.js';
 import { getI18nText } from '../languages/index.js';
 
@@ -76,7 +76,7 @@ export default function componentsTemplate() {
       <div id="cmp--${componentInfo.name.toLowerCase()}" class='regular-font section-gap--focused-mode observe-me' style="padding-bottom: 0">
         <div class="title tag">${componentInfo.name}</div>
         <div class="regular-font-size">
-          ${unsafeHTML(`<div class='m-markdown regular-font'>${marked(componentInfo.description ? componentInfo.description : '')}</div>`)}
+          ${unsafeHTML(`<div class='m-markdown regular-font'>${toMarkdown(componentInfo.description ? componentInfo.description : '')}</div>`)}
         </div>
       </div>
       <div class='regular-font section-gap--focused-mode' style="padding-top: 0">

src/templates/endpoint-template.js

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { marked } from 'marked';
+import { toMarkdown } from '../utils/common-utils';
 import '../components/api-request.js';
 import '../components/api-response.js';
 import codeSamplesTemplate from './code-samples-template.js';
@@ -73,7 +73,7 @@ function endpointBodyTemplate(path) {
             <span style="display: flex; flex-wrap: wrap;" part="label-operation-path">${path.path.split('/').filter(t => t.trim()).map(t => html`<span>/${t}</span>`)}</span>
           </div>`
       }
-      ${path.description ? html`<div class="m-markdown"> ${unsafeHTML(marked(path.description))}</div>` : ''}
+      ${path.description ? html`<div class="m-markdown"> ${unsafeHTML(toMarkdown(path.description))}</div>` : ''}
       <slot name="${path.elementId}"></slot>
       <slot name="path-details" data-method="${path.method}" data-path="${path.path}"></slot>
       ${pathSecurityTemplate.call(this, path.security)}
@@ -140,7 +140,7 @@ export default function endpointTemplate() {
         ${tag.description
           ? html`
           <div class="regular-font regular-font-size m-markdown description" style="padding-bottom:12px">
-            ${unsafeHTML(marked(tag.description || ''))}
+            ${unsafeHTML(toMarkdown(tag.description || ''))}
           </div>`
         : ''
         }

src/templates/expanded-endpoint-template.js

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { marked } from 'marked';
+import { getSanitizedUrl, toMarkdown } from '../utils/common-utils';
 import { pathSecurityTemplate } from './security-scheme-template.js';
 import codeSamplesTemplate from './code-samples-template.js';
 import callbackTemplate from './callback-template.js';
@@ -29,12 +29,12 @@ export function expandedEndpointBodyTemplate(path, tagName = '') {
         </div>
         ${path.externalDocs
           ? html`<div class="m-markdown" style="margin-top: 2rem; margin-bottom: 0.5rem; max-width: 300px">
-              ${unsafeHTML(marked(path.externalDocs.description || ''))}
-              <a href="${path.externalDocs.url}">Navigate to documentation ↗</a>
+              ${unsafeHTML(toMarkdown(path.externalDocs.description || ''))}
+              <a href="${getSanitizedUrl(path.externalDocs.url)}">Navigate to documentation ↗</a>
             </div>`
           : ''}
       </div>
-      <div class="m-markdown" style="margin-right: 2rem;"> ${unsafeHTML(marked(path.description || ''))}</div>
+      <div class="m-markdown" style="margin-right: 2rem;"> ${unsafeHTML(toMarkdown(path.description || ''))}</div>
       <slot name="${path.elementId}"></slot>
       <slot name="path-details" data-method="${path.method}" data-path="${path.path}"></slot>
       ${pathSecurityTemplate.call(this, path.security)}
@@ -93,7 +93,7 @@ export function expandedTagTemplate(tagId, subsectionFullId) {
         ${
           unsafeHTML(`
             <div class="m-markdown regular-font">
-            ${marked(tag.description || '')}
+            ${toMarkdown(tag.description || '')}
           </div>`)
         }
         </div>