rapidoc 9.3.3 → 9.3.4

package/src/components/api-response.js

@@ -9,6 +9,7 @@ import InputStyles from '~/styles/input-styles';
 import TabStyles from '~/styles/tab-styles';
 import BorderStyles from '~/styles/border-styles';
 import CustomStyles from '~/styles/custom-styles';
+import '~/components/json-tree';
 import '~/components/schema-tree';
 import '~/components/schema-table';
 
@@ -49,6 +50,8 @@ export default class ApiResponse extends LitElement {
       InputStyles,
       BorderStyles,
       css`
+      :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); }
       .resp-head{
         vertical-align: middle;
         padding:16px 0 8px;
@@ -207,20 +210,20 @@ export default class ApiResponse extends LitElement {
   responseHeaderListTemplate(respHeaders) {
     return html`
       <div style="padding:16px 0 8px 0" class="resp-headers small-font-size bold-text">RESPONSE HEADERS</div> 
-      <table style="border-collapse: collapse; margin-bottom:16px; border:1px solid var(--border-color); border-radius: var(--border-radius)" class="small-font-size mono-font">
+      <table role="presentation" style="border-collapse: collapse; margin-bottom:16px; border:1px solid var(--border-color); border-radius: var(--border-radius)" class="small-font-size mono-font">
         ${respHeaders.map((v) => html`
           <tr>
             <td style="padding:8px; vertical-align: baseline; min-width:120px; border-top: 1px solid var(--light-border-color); text-overflow: ellipsis;">
               ${v.name || ''}
             </td> 
             <td style="padding:4px; vertical-align: baseline; padding:0 5px; border-top: 1px solid var(--light-border-color); text-overflow: ellipsis;">
-              ${v.schema.type || ''}
+              ${v.schema?.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>
             </td>
             <td style="padding:8px; vertical-align: baseline; border-top: 1px solid var(--light-border-color); text-overflow: ellipsis;">
-              ${v.schema.example || ''}
+              ${v.schema?.example || ''}
             </td>
           </tr>
         `)}
@@ -229,7 +232,7 @@ export default class ApiResponse extends LitElement {
 
   mimeTypeDropdownTemplate(mimeTypes) {
     return html`
-      <select @change="${(e) => { this.selectedMimeType = e.target.value; }}" style='margin-bottom: -1px; z-index:1'>
+      <select aria-label='mime types' @change="${(e) => { this.selectedMimeType = e.target.value; }}" style='margin-bottom: -1px; z-index:1'>
         ${mimeTypes.map((mimeType) => html`<option value='${mimeType}' ?selected = '${mimeType === this.selectedMimeType}'> ${mimeType} </option>`)}
       </select>`;
   }
@@ -270,7 +273,7 @@ export default class ApiResponse extends LitElement {
           }`
         : html`
           <span class = 'example-panel ${this.renderStyle === 'read' ? 'border pad-8-16' : 'border-top pad-top-8'}'>
-            <select style="min-width:100px; max-width:100%" @change='${(e) => this.onSelectExample(e)}'>
+            <select aria-label='response examples' style="min-width:100px; max-width:100%" @change='${(e) => this.onSelectExample(e)}'>
               ${mimeRespDetails.examples.map((v) => html`<option value="${v.exampleId}" ?selected=${v.exampleId === mimeRespDetails.selectedExample} > 
                 ${v.exampleSummary.length > 80 ? v.exampleId : v.exampleSummary} 
               </option>`)}
@@ -306,22 +309,20 @@ export default class ApiResponse extends LitElement {
       ${this.schemaStyle === 'table'
         ? html`
           <schema-table
-            render-style = "${this.renderStyle}"
             .data = "${mimeRespDetails.schemaTree}"
             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"
-          > </schema-tree> `
+          > </schema-table> `
         : html`
           <schema-tree
-            render-style = "${this.renderStyle}"
             .data = '${mimeRespDetails.schemaTree}'
             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"

package/src/components/json-tree.js

@@ -22,6 +22,8 @@ export default class JsonTree extends LitElement {
       :host{
         display:flex;
       }
+      :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); }
       .json-tree {
         position: relative;
         font-family: var(--font-mono);
@@ -31,6 +33,7 @@ export default class JsonTree extends LitElement {
         word-break: break-all;
         flex:1;
         line-height: calc(var(--font-size-small) + 6px);
+        min-height: 40px;
         direction: ltr; 
         text-align: left;
       }
@@ -58,8 +61,9 @@ export default class JsonTree extends LitElement {
       .open-bracket.expanded:hover ~ .close-bracket {
         color:var(--primary-color);
       }
-      .inside-bracket{
+      .inside-bracket {
         padding-left:12px;
+        overflow: hidden;
         border-left:1px dotted var(--border-color);
       }
       .open-bracket.collapsed + .inside-bracket,
@@ -87,11 +91,11 @@ export default class JsonTree extends LitElement {
   /* eslint-disable indent */
   render() {
     return html`
-      <div class = "json-tree" >
+      <div class = "json-tree"  @click='${(e) => { if (e.target.classList.contains('btn-copy')) { copyToClipboard(JSON.stringify(this.data, null, 2), e); } else { this.toggleExpand(e); } }}'>
         <div class='toolbar'> 
-          <button class="toolbar-btn" part="btn btn-fill btn-copy" @click='${(e) => { copyToClipboard(JSON.stringify(this.data, null, 2), e); }}'> Copy </button>
+          <button class="toolbar-btn btn-copy" part="btn btn-fill btn-copy"> Copy </button>
         </div>
-        ${this.generateTree(this.data, true)}
+          ${this.generateTree(this.data, true)}
       </div>  
     `;
   }
@@ -106,7 +110,7 @@ export default class JsonTree extends LitElement {
         return html`${(Array.isArray(data) ? '[ ],' : '{ },')}`;
       }
       return html`
-      <div class="open-bracket expanded ${detailType === 'array' ? 'array' : 'object'} " @click="${this.toggleExpand}" > ${detailType === 'array' ? '[' : '{'}</div>
+      <div class="open-bracket expanded ${detailType === 'array' ? 'array' : 'object'}" > ${detailType === 'array' ? '[' : '{'}</div>
       <div class="inside-bracket">
         ${Object.keys(data).map((key, i, a) => html`
           <div class="item"> 
@@ -118,7 +122,6 @@ export default class JsonTree extends LitElement {
       <div class="close-bracket">${detailType === 'array' ? ']' : '}'}${isLast ? '' : ','}</div>
       `;
     }
-
     return (typeof data === 'string' || data instanceof Date)
       ? html`<span class="${typeof data}">"${data}"</span>${isLast ? '' : ','}`
       : html`<span class="${typeof data}">${data}</span>${isLast ? '' : ','}`;
@@ -127,12 +130,14 @@ export default class JsonTree extends LitElement {
 
   toggleExpand(e) {
     const openBracketEl = e.target;
-    if (openBracketEl.classList.contains('expanded')) {
-      openBracketEl.classList.replace('expanded', 'collapsed');
-      e.target.innerHTML = e.target.classList.contains('array') ? '[...]' : '{...}';
-    } else {
-      openBracketEl.classList.replace('collapsed', 'expanded');
-      e.target.innerHTML = e.target.classList.contains('array') ? '[' : '{';
+    if (e.target.classList.contains('open-bracket')) {
+      if (openBracketEl.classList.contains('expanded')) {
+        openBracketEl.classList.replace('expanded', 'collapsed');
+        e.target.innerHTML = e.target.classList.contains('array') ? '[...]' : '{...}';
+      } else {
+        openBracketEl.classList.replace('collapsed', 'expanded');
+        e.target.innerHTML = e.target.classList.contains('array') ? '[' : '{';
+      }
     }
   }
 }

package/src/components/schema-table.js

@@ -46,6 +46,9 @@ export default class SchemaTable extends LitElement {
       .table .key {
         width: 240px;
       }
+      .key .key-label {
+        font-size: var(--font-size-mono);
+      }
       .key.deprecated .key-label {
         color: var(--red);
       }
@@ -54,8 +57,8 @@ export default class SchemaTable extends LitElement {
         white-space: normal;
         width: 150px;
       }
-      .collapsed-descr .tr {
-        max-height: calc(var(--font-size-small) + var(--font-size-small) + 4px);
+      .collapsed-all-descr .tr:not(.expanded-descr) {
+        max-height: calc(var(--font-size-small) + var(--font-size-small));
       }
 
       .obj-toggle {
@@ -86,23 +89,20 @@ export default class SchemaTable extends LitElement {
   /* eslint-disable indent */
   render() {
     return html`
-      <div class="table ${this.schemaDescriptionExpanded === 'true' ? 'expanded-descr' : 'collapsed-descr'}">
+      <div class="table ${this.schemaDescriptionExpanded === 'true' ? 'expanded-all-descr' : 'collapsed-all-descr'}" @click="${(e) => this.handleAllEvents(e)}">
         <div class='toolbar'>
           <div class="toolbar-item schema-root-type ${this.data?.['::type'] || ''} "> ${this.data?.['::type'] || ''} </div>
           ${this.allowSchemaDescriptionExpandToggle === 'true'
             ? html`
               <div style="flex:1"></div>
-              <div part="schema-multiline-toggle" class='toolbar-item' @click='${() => { this.schemaDescriptionExpanded = (this.schemaDescriptionExpanded === 'true' ? 'false' : 'true'); }}'> 
+              <div part="schema-multiline-toggle" class='toolbar-item schema-multiline-toggle' > 
                 ${this.schemaDescriptionExpanded === 'true' ? 'Single line description' : 'Multiline description'}
               </div>
             `
             : ''
           }
         </div>
-        ${this.data?.['::description']
-          ? html`<span part="schema-description" class='m-markdown'> ${unsafeHTML(marked(this.data['::description'] || ''))}</span>`
-          : ''
-        }
+        <span part="schema-description" class='m-markdown'> ${unsafeHTML(marked(this.data?.['::description'] || ''))} </span>
         <div style = 'border:1px solid var(--light-border-color)'>
           <div style='display:flex; background-color: var(--bg2); padding:8px 4px; border-bottom:1px solid var(--light-border-color);'>
             <div class='key' style='font-family:var(--font-regular); font-weight:bold; color:var(--fg);'> Field </div>
@@ -202,11 +202,7 @@ export default class SchemaTable extends LitElement {
               <div class="td key ${data['::deprecated'] ? 'deprecated' : ''}" style='padding-left:${leftPadding}px'>
                 ${(keyLabel || keyDescr)
                   ? html`
-                    <span 
-                      class='obj-toggle ${newSchemaLevel < this.schemaExpandLevel ? 'expanded' : 'collapsed'}'
-                      data-obj='${keyLabel}'
-                      @click= ${(e) => this.toggleObjectExpand(e, keyLabel)} 
-                    >
+                    <span class='obj-toggle ${newSchemaLevel < this.schemaExpandLevel ? 'expanded' : 'collapsed'}' data-obj='${keyLabel}'>
                       ${schemaLevel < this.schemaExpandLevel ? '-' : '+'}
                     </span>`
                   : ''
@@ -226,18 +222,17 @@ export default class SchemaTable extends LitElement {
               <div class='td key-descr m-markdown-small' style='line-height:1.7'>${unsafeHTML(marked(description || ''))}</div>
             </div>`
           : html`
-              ${data['::type'] === 'array' && dataType === 'array'
-                ? html`
-                  <div class='tr'> 
-                    <div class='td key'></div> 
-                    <div class='td key-type'>
-                      ${arrayType && arrayType !== 'object' ? `${dataType} of ${arrayType}` : dataType}
-                    </div> 
-                    <div class='td key-descr'></div> 
-                  </div>`
-                : ''
-              }
-          `
+            ${data['::type'] === 'array' && dataType === 'array'
+              ? html`
+                <div class='tr'> 
+                  <div class='td key'></div> 
+                  <div class='td key-type'>
+                    ${arrayType && arrayType !== 'object' ? `${dataType} of ${arrayType}` : dataType}
+                  </div> 
+                  <div class='td key-descr'></div> 
+                </div>`
+              : ''
+            }`
         }
         <div class='object-body'>
         ${Array.isArray(data) && data[0]
@@ -262,7 +257,7 @@ export default class SchemaTable extends LitElement {
                   data[dataKey]['::type'],
                   data[dataKey]['::array-type'] || '',
                   dataKey,
-                  data[dataKey]['::description'],
+                  data[dataKey]?.['::description'] || '',
                   newSchemaLevel,
                   newIndentLevel,
                   data[dataKey]['::readwrite'] ? data[dataKey]['::readwrite'] : '',
@@ -276,6 +271,7 @@ export default class SchemaTable extends LitElement {
     }
 
     // For Primitive Data types
+    // eslint-disable-next-line no-unused-vars
     const [type, readOrWriteOnly, constraint, defaultValue, allowedValues, pattern, schemaDescription, schemaTitle, deprecated] = data.split('~|~');
     if (readOrWriteOnly === '🆁' && this.schemaHideReadOnly === 'true') {
       return;
@@ -284,6 +280,7 @@ export default class SchemaTable extends LitElement {
       return;
     }
     const dataTypeCss = type.replace(/┃.*/g, '').replace(/[^a-zA-Z0-9+]/g, '').substring(0, 4).toLowerCase();
+    const descrExpander = `${constraint || defaultValue || allowedValues || pattern ? '<span class="descr-expand-toggle">➔</span>' : ''}`;
     let dataTypeHtml = '';
     if (dataType === 'array') {
       dataTypeHtml = html` 
@@ -310,21 +307,18 @@ export default class SchemaTable extends LitElement {
           }
         </div>
         ${dataTypeHtml}
-        <div class='td key-descr' @click="${() => { this.schemaDescriptionExpanded = 'true'; }}">
-          ${dataType === 'array' ? html`<span class="m-markdown-small">${unsafeHTML(marked(description))}</span>` : ''}
-          ${schemaDescription
-            ? html`<span class="m-markdown-small">
-              ${unsafeHTML(marked(`${schemaTitle ? `**${schemaTitle}:**` : ''} ${schemaDescription} ${constraint || defaultValue || allowedValues || pattern ? '<span  class="more-content">⤵</span>' : ''}`))}
-              </span>`
-            : schemaTitle
-              ? html`${schemaTitle} ${constraint || defaultValue || allowedValues || pattern
-                ? html`<span class="more-content">⤵</span>`
-                : ''}`
-              : ''
+        <div class='td key-descr' style='font-size: var(--font-size-small)'>
+          ${html`<span class="m-markdown-small">
+            ${unsafeHTML(marked(dataType === 'array'
+              ? `${descrExpander} ${description}`
+              : schemaTitle
+                ? `${descrExpander} <b>${schemaTitle}:</b> ${schemaDescription}`
+                : `${descrExpander} ${schemaDescription}`))}
+          </span>`
           }
-          ${constraint ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px;'> <span class='bold-text'>Constraints: </span> ${constraint}</div>` : ''}
+          ${constraint ? html`<div class='' style='display:inline-block; line-break:anywhere; margin-right:8px;'> <span class='bold-text'>Constraints: </span> ${constraint}</div>` : ''}
           ${defaultValue ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px;'> <span class='bold-text'>Default: </span>${defaultValue}</div>` : ''}
-          ${allowedValues ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px;'> <span class='bold-text'>Allowed: </span>${allowedValues}</div>` : ''}
+          ${allowedValues ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px;'> <span class='bold-text'>${type === 'const' ? 'Value' : 'Allowed'}: </span>${allowedValues}</div>` : ''}
           ${pattern ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px;'> <span class='bold-text'>Pattern: </span>${pattern}</div>` : ''}
         </div>
       </div>
@@ -332,6 +326,20 @@ export default class SchemaTable extends LitElement {
   }
   /* eslint-enable indent */
 
+  handleAllEvents(e) {
+    if (e.target.classList.contains('obj-toggle')) {
+      this.toggleObjectExpand(e);
+    } else if (e.target.classList.contains('schema-multiline-toggle')) {
+      this.schemaDescriptionExpanded = (this.schemaDescriptionExpanded === 'true' ? 'false' : 'true');
+    } else if (e.target.classList.contains('descr-expand-toggle')) {
+      const trEl = e.target.closest('.tr');
+      if (trEl) {
+        trEl.classList.toggle('expanded-descr');
+        trEl.style.maxHeight = trEl.scrollHeight;
+      }
+    }
+  }
+
   toggleObjectExpand(e) {
     const rowEl = e.target.closest('.tr');
     if (rowEl.classList.contains('expanded')) {

package/src/components/schema-tree.js

@@ -41,13 +41,10 @@ export default class SchemaTree extends LitElement {
       .tree .tr:hover{
         background-color:var(--hover-color);
       }
-      .collapsed-descr .tr {
+      .collapsed-all-descr .tr:not(.expanded-descr) {
+        overflow: hidden;
         max-height:calc(var(--font-size-small) + 8px);
       }
-      .collapsed-descr .m-markdown-small p {
-        line-height:calc(var(--font-size-small) + 6px);
-      }
-
       .tree .key {
         max-width: 300px;
       }
@@ -63,7 +60,9 @@ export default class SchemaTree extends LitElement {
       .tr.expanded:hover + .inside-bracket + .close-bracket {
         color: var(--primary-color);
       }
-
+      .inside-bracket.xxx-of-option {
+        border-left: 1px solid transparent;
+      }
       .open-bracket{
         display:inline-block;
         padding: 0 20px 0 0;
@@ -82,17 +81,12 @@ export default class SchemaTree extends LitElement {
       }
       .tr.collapsed + .inside-bracket,
       .tr.collapsed + .inside-bracket + .close-bracket{
+        overflow: hidden;
         display:none;
       }
       .inside-bracket.object,
       .inside-bracket.array {
         border-left: 1px dotted var(--border-color);
-      }
-      .inside-bracket.xxx-of {
-        padding:5px 0px;
-        border-style: dotted;
-        border-width: 0 0 1px 0;
-        border-color:var(--primary-color);
       }`,
       CustomStyles,
     ];
@@ -101,23 +95,19 @@ export default class SchemaTree extends LitElement {
   /* eslint-disable indent */
   render() {
     return html`
-      <div class="tree ${this.schemaDescriptionExpanded === 'true' ? 'expanded-descr' : 'collapsed-descr'}">
+      <div class="tree ${this.schemaDescriptionExpanded === 'true' ? 'expanded-all-descr' : 'collapsed-all-descr'}" @click="${(e) => this.handleAllEvents(e)}">
         <div class="toolbar">
           <div class="toolbar-item schema-root-type ${this.data?.['::type'] || ''} "> ${this.data?.['::type'] || ''} </div>
           ${this.allowSchemaDescriptionExpandToggle === 'true'
             ? html`
               <div style="flex:1"></div>
-              <div part="schema-toolbar-item schema-multiline-toggle" class='toolbar-item' @click='${() => { this.schemaDescriptionExpanded = (this.schemaDescriptionExpanded === 'true' ? 'false' : 'true'); }}'> 
+              <div part="schema-toolbar-item schema-multiline-toggle" class='toolbar-item schema-multiline-toggle'> 
                 ${this.schemaDescriptionExpanded === 'true' ? 'Single line description' : 'Multiline description'}
-              </div>
-            `
+              </div>`
             : ''
           }
         </div>
-        ${this.data?.['::description']
-          ? html`<span part="schema-description" class='m-markdown'> ${unsafeHTML(marked(this.data['::description'] || ''))}</span>`
-          : ''
-        }
+        <span part="schema-description" class='m-markdown'> ${unsafeHTML(marked(this.data?.['::description'] || ''))}</span>
         ${this.data
           ? html`
             ${this.generateTree(
@@ -138,7 +128,7 @@ export default class SchemaTree extends LitElement {
           return;
         }
       }
-      if (data && data['::readwrite'] === 'readonly') {
+      if (data?.['::readwrite'] === 'readonly') {
         return;
       }
     }
@@ -148,7 +138,7 @@ export default class SchemaTree extends LitElement {
           return;
         }
       }
-      if (data && data['::readwrite'] === 'writeonly') {
+      if (data?.['::readwrite'] === 'writeonly') {
         return;
       }
     }
@@ -174,8 +164,7 @@ export default class SchemaTree extends LitElement {
       keyLabel = key.replace('::', '').replace('~', ' ');
     } else if (key.startsWith('::OPTION')) {
       const parts = key.split('~');
-      keyLabel = parts[1]; // eslint-disable-line prefer-destructuring
-      keyDescr = parts[2]; // eslint-disable-line prefer-destructuring
+      [, keyLabel, keyDescr] = parts;
     } else {
       keyLabel = key;
     }
@@ -190,16 +179,16 @@ export default class SchemaTree extends LitElement {
     if (data['::type'] === 'object') {
       if (dataType === 'array') {
         if (schemaLevel < this.schemaExpandLevel) {
-          openBracket = html`<span class="open-bracket array-of-object" @click="${this.toggleObjectExpand}">[{</span>`;
+          openBracket = html`<span class="open-bracket array-of-object" >[{</span>`;
         } else {
-          openBracket = html`<span class="open-bracket array-of-object" @click="${this.toggleObjectExpand}">[{...}]</span>`;
+          openBracket = html`<span class="open-bracket array-of-object">[{...}]</span>`;
         }
         closeBracket = '}]';
       } else {
         if (schemaLevel < this.schemaExpandLevel) {
-          openBracket = html`<span class="open-bracket object" @click="${this.toggleObjectExpand}">{</span>`;
+          openBracket = html`<span class="open-bracket object">{</span>`;
         } else {
-          openBracket = html`<span class="open-bracket object" @click="${this.toggleObjectExpand}">{...}</span>`;
+          openBracket = html`<span class="open-bracket object">{...}</span>`;
         }
         closeBracket = '}';
       }
@@ -207,16 +196,16 @@ export default class SchemaTree extends LitElement {
       if (dataType === 'array') {
         const arrType = arrayType !== 'object' ? arrayType : '';
         if (schemaLevel < this.schemaExpandLevel) {
-          openBracket = html`<span class="open-bracket array-of-array" data-array-type="${arrType}" @click="${this.toggleObjectExpand}">[[ ${arrType} </span>`;
+          openBracket = html`<span class="open-bracket array-of-array" data-array-type="${arrType}">[[ ${arrType} </span>`;
         } else {
-          openBracket = html`<span class="open-bracket array-of-array"  data-array-type="${arrType}" @click="${this.toggleObjectExpand}">[[...]]</span>`;
+          openBracket = html`<span class="open-bracket array-of-array"  data-array-type="${arrType}">[[...]]</span>`;
         }
         closeBracket = ']]';
       } else {
         if (schemaLevel < this.schemaExpandLevel) {
-          openBracket = html`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[</span>`;
+          openBracket = html`<span class="open-bracket array">[</span>`;
         } else {
-          openBracket = html`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[...]</span>`;
+          openBracket = html`<span class="open-bracket array">[...]</span>`;
         }
         closeBracket = ']';
       }
@@ -236,7 +225,6 @@ export default class SchemaTree extends LitElement {
                     </span>`
                   : ''
             }
-            ${data['::type'] === 'xxx-of' && dataType === 'array' ? html`<span style="color:var(--primary-color)">ARRAY</span>` : ''} 
             ${openBracket}
           </div>
           <div class='td key-descr m-markdown-small'>${unsafeHTML(marked(description || ''))}</div>
@@ -264,7 +252,7 @@ export default class SchemaTree extends LitElement {
                     data[dataKey]['::type'],
                     data[dataKey]['::array-type'] || '',
                     dataKey,
-                    data[dataKey]['::description'],
+                    data[dataKey]?.['::description'] || '',
                     newSchemaLevel,
                     newIndentLevel,
                     data[dataKey]['::readwrite'] ? data[dataKey]['::readwrite'] : '',
@@ -282,6 +270,7 @@ export default class SchemaTree extends LitElement {
     }
 
     // For Primitive types and array of Primitives
+    // eslint-disable-next-line no-unused-vars
     const [type, primitiveReadOrWrite, constraint, defaultValue, allowedValues, pattern, schemaDescription, schemaTitle, deprecated] = data.split('~|~');
     if (primitiveReadOrWrite === '🆁' && this.schemaHideReadOnly === 'true') {
       return;
@@ -290,7 +279,7 @@ export default class SchemaTree extends LitElement {
       return;
     }
     const dataTypeCss = type.replace(/┃.*/g, '').replace(/[^a-zA-Z0-9+]/g, '').substring(0, 4).toLowerCase();
-
+    const descrExpander = `${constraint || defaultValue || allowedValues || pattern ? `<span class="descr-expand-toggle ${this.schemaDescriptionExpanded === 'true' ? 'expanded-descr' : ''}">➔</span>` : ''}`;
     let finalReadWriteText = '';
     let finalReadWriteTip = '';
     if (dataType === 'array') {
@@ -302,12 +291,12 @@ export default class SchemaTree extends LitElement {
         finalReadWriteTip = 'Write-Only';
       }
     } else if (primitiveReadOrWrite === '🆁') {
-        finalReadWriteText = '🆁';
-        finalReadWriteTip = 'Read-Only';
-      } else if (primitiveReadOrWrite === '🆆') {
-        finalReadWriteText = '🆆';
-        finalReadWriteTip = 'Write-Only';
-      }
+      finalReadWriteText = '🆁';
+      finalReadWriteTip = 'Read-Only';
+    } else if (primitiveReadOrWrite === '🆆') {
+      finalReadWriteText = '🆆';
+      finalReadWriteTip = 'Write-Only';
+    }
 
     return html`
       <div class = "tr primitive" title="${deprecated ? 'Deprecated' : ''}">
@@ -325,20 +314,20 @@ export default class SchemaTree extends LitElement {
           </span>
         </div>
         <div class='td key-descr'>
-          ${dataType === 'array' ? html`<span class="m-markdown-small">${unsafeHTML(marked(description))}</span>` : ''}
-          ${schemaDescription
-            ? html`<span class="m-markdown-small">
-              ${unsafeHTML(marked(`${schemaTitle ? `**${schemaTitle}:**` : ''} ${schemaDescription} ${constraint || defaultValue || allowedValues || pattern ? '<span class="more-content">⤵</span>' : ''}`))}
+          ${description || schemaTitle || schemaDescription
+            ? html`${html`<span class="m-markdown-small">
+                ${unsafeHTML(marked(dataType === 'array'
+                  ? `${descrExpander} ${description}`
+                  : schemaTitle
+                    ? `${descrExpander} <b>${schemaTitle}:</b> ${schemaDescription}`
+                    : `${descrExpander} ${schemaDescription}`))}
               </span>`
-            : schemaTitle
-              ? html`${schemaTitle} ${constraint || defaultValue || allowedValues || pattern
-                ? html`<span class="more-content">⤵</span>`
-                : ''}`
-              : ''
-          }
+              }`
+            : ''
+          }  
           ${constraint ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px'><span class='bold-text'>Constraints: </span>${constraint}</div>` : ''}
           ${defaultValue ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px'><span class='bold-text'>Default: </span>${defaultValue}</div>` : ''}
-          ${allowedValues ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px'><span class='bold-text'>Allowed: </span>${allowedValues}</div>` : ''}
+          ${allowedValues ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px'><span class='bold-text'>${type === 'const' ? 'Value' : 'Allowed'}: </span>${allowedValues}</div>` : ''}
           ${pattern ? html`<div style='display:inline-block; line-break: anywhere; margin-right:8px'><span class='bold-text'>Pattern: </span>${pattern}</div>` : ''}
         </div>
       </div>
@@ -346,6 +335,20 @@ export default class SchemaTree extends LitElement {
   }
   /* eslint-enable indent */
 
+  handleAllEvents(e) {
+    if (e.target.classList.contains('open-bracket')) {
+      this.toggleObjectExpand(e);
+    } else if (e.target.classList.contains('schema-multiline-toggle')) {
+      this.schemaDescriptionExpanded = (this.schemaDescriptionExpanded === 'true' ? 'false' : 'true');
+    } else if (e.target.classList.contains('descr-expand-toggle')) {
+      const trEl = e.target.closest('.tr');
+      if (trEl) {
+        trEl.classList.toggle('expanded-descr');
+        trEl.style.maxHeight = trEl.scrollHeight;
+      }
+    }
+  }
+
   toggleObjectExpand(e) {
     const rowEl = e.target.closest('.tr');
     if (rowEl.classList.contains('expanded')) {

package/src/components/tag-input.js

@@ -6,12 +6,12 @@ export default class TagInput extends LitElement {
     let tagItemTmpl = '';
     if (Array.isArray(this.value)) {
       tagItemTmpl = html`${this.value
-        .filter((v) => v.trim() !== '')
+        .filter((v) => typeof v === 'string' && v.trim() !== '')
         .map((v) => html`<span class='tag'>${v}</span>`)
       }`;
     }
     return html`
-      <div class='tags' tabindex="0">
+      <div class='tags'>
         ${tagItemTmpl}
         <input type="text" class='editor' @paste="${(e) => this.afterPaste(e)}" @keydown="${this.afterKeyDown}" @blur="${this.onBlur}" placeholder="${this.placeholder || ''}">
       </div>
@@ -84,7 +84,7 @@ export default class TagInput extends LitElement {
 
   static get styles() {
     return [css`
-      .tags{
+      .tags {
         display:flex;
         flex-wrap: wrap;
         outline: none;
@@ -110,7 +110,7 @@ export default class TagInput extends LitElement {
       .tag:hover ~ #cursor {
         display: block;
       }
-      .editor{
+      .editor {
         flex:1;
         border:1px solid transparent;
         color:var(--fg);
@@ -121,6 +121,9 @@ export default class TagInput extends LitElement {
         background:transparent;
         font-size: calc(var(--font-size-small) + 1px);
       }
+      .editor:focus-visible {
+        outline: 1px solid;
+      }
       .editor::placeholder {
         color: var(--placeholder-color);
         opacity:1;

package/src/json-schema-viewer.js

@@ -259,7 +259,7 @@ export default class JsonSchemaViewer extends LitElement {
     super.attributeChangedCallback(name, oldVal, newVal);
   }
 
-  onSepcUrlChange() {
+  onSpecUrlChange() {
     this.setAttribute('spec-url', this.shadowRoot.getElementById('spec-url').value);
   }
 

package/src/rapidoc-mini.js

@@ -264,7 +264,7 @@ export default class RapiDocMini extends LitElement {
     super.attributeChangedCallback(name, oldVal, newVal);
   }
 
-  onSepcUrlChange() {
+  onSpecUrlChange() {
     this.setAttribute('spec-url', this.shadowRoot.getElementById('spec-url').value);
   }