rapidoc 9.2.0 → 9.3.0

package/.github/FUNDING.yml

@@ -0,0 +1,13 @@
+# These are supported funding model platforms
+
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: rapidoc
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+custom: ['paypal.me/mrin'] # Replace with up to 4 custom sponsorship URLs e.g., 

package/CONTRIBUTING.md

@@ -22,7 +22,7 @@
 
 For development 
 ```shell
-git clone https://github.com/mrin9/RapiDoc.git
+git clone https://github.com/rapi-doc/RapiDoc.git
 yarn install
 yarn serve
 # open http://localhost:8080

package/README.md

@@ -1,10 +1,13 @@
-<img alt="MrinDoc logo" src="https://github.com/mrin9/RapiDoc/blob/master/logo.png" width="60px" />
+<img alt="MrinDoc logo" src="https://github.com/rapi-doc/RapiDoc/blob/master/logo.png" width="60px" />
 
 
 <p align="center">
     <img src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square"/>
-    <img src="https://img.shields.io/github/size/mrin9/rapidoc/dist/rapidoc-min.js.svg?colorB=blue&label=minified&style=flat-square">
-    <img src="https://img.shields.io/github/size/mrin9/rapidoc/dist/rapidoc-min.js.gz.svg?colorB=blue&label=zip&style=flat-square">
+    <img src="https://img.shields.io/github/size/rapi-doc/rapidoc/dist/rapidoc-min.js.svg?colorB=blue&label=minified&style=flat-square">
+    <img src="https://img.shields.io/github/size/rapi-doc/rapidoc/dist/rapidoc-min.js.gz.svg?colorB=blue&label=zip&style=flat-square">
+    <a href="https://discord.gg/X9evUeFY" alt="Join us on Discord">
+        <img src="https://img.shields.io/discord/848913990360629268?style=flat-square" />
+    </a>
     <a href="https://www.webcomponents.org/element/rapidoc" alt="published on webcomponents.org">
         <img src="https://img.shields.io/badge/webcomponents.org-rapidoc-blue.svg?style=social"/>
     </a>
@@ -13,6 +16,10 @@
 # RapiDoc
 Custom Element for Open-API spec viewing
 
+Join the [RapiDoc community on Discord](https://discord.gg/X9evUeFY)
+
+Sponsored by [Zuplo](https://zuplo.link/rapidoc-2) - Get a Stripe-like API experience for your customers in minutes - documentation, rate-limiting and API-key auth in minutes. 
+
 ## Features
 - Supports Swagger 2.0, OpenAPI 3.x.x 
 - Works with any framework or with no framework
@@ -42,10 +49,10 @@ Custom Element for Open-API spec viewing
 
 
 ## Documentation
-[Check out the usage and demos](https://mrin9.github.io/RapiDoc/)
+[Check out the usage and demos](https://rapi-doc.github.io/RapiDoc/)
 
 ## Examples
-[Examples and Test cases](https://mrin9.github.io/RapiDoc/list.html)
+[Examples and Test cases](https://rapi-doc.github.io/RapiDoc/list.html)
 
 
 ## Build Process
@@ -62,7 +69,7 @@ npm run serve
 ```
 
 ## Roadmap
-- Upgrade to use `lit 2`
+- ✅ Upgrade to use `lit 2`
 - Pre Rendering / Server Side Rendering (SSR) of RapiDoc
 - Improve PDF generation of OpenAPI spec Using RapiPDF
 - Create a Command Line interface (CLI) to make it automation friendly

package/index.html

@@ -28,24 +28,26 @@
     https://assets.zuora.com/zuora-documentation/swagger.yaml <<< Large spec with lot of markdown
     ./specs/petstore_anyof.yaml <<< contains complex one-of with inline primitives and recursive objects
     ./specs/oneof1.yaml  <<< nested oneof
+    https://cesdev.eng.sonicwall.com/api/q/openapi
 -->
 <rapi-doc 
-  spec-url = "./specs/aaa.yaml" 
+  spec-url = "./specs/data-types.yaml" 
   id="thedoc" 
   theme = "dark"
   render-style="read" 
-  schema-style="tree"
-  use-path-in-nav-bar="true"
+  schema-style="table"
+  show-method-in-nav-bar = "true"
+  use-path-in-nav-bar = "true"
   show-components = "true"
   show-info = "true"
   show-header = "true"
   allow-search = "false"  
   allow-advanced-search = "true"
   allow-spec-url-load="false"
-  allow-spec-file-load="false"
   allow-spec-file-download="true"
   allow-server-selection = "true"
   allow-authentication	= "true"
+  use-summary-to-list-example = "true"
   update-route="false"
   match-type="regex"
   persist-auth="true"

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "rapidoc",
-  "version": "9.2.0",
+  "version": "9.3.0",
   "description": "RapiDoc - Open API spec viewer with built in console",
   "author": "Mrinmoy Majumdar <mrin9@yahoo.com>",
+  "homepage": "https://rapidocweb.com",
   "repository": {
     "type": "git",
-    "url": "https://github.com/mrin9/RapiDoc.git"
+    "url": "https://github.com/rapi-doc/RapiDoc.git"
   },
   "license": "MIT",
   "keywords": [
@@ -35,9 +36,9 @@
     "@apitools/openapi-parser": "^0.0.24",
     "base64-arraybuffer": "^1.0.2",
     "buffer": "^6.0.3",
-    "lit": "^2.2.0",
-    "marked": "^4.0.12",
-    "prismjs": "^1.26.0"
+    "lit": "^2.2.4",
+    "marked": "^4.0.16",
+    "prismjs": "^1.28.0"
   },
   "scripts": {
     "build": "NODE_ENV=production webpack --mode=production",
@@ -49,18 +50,18 @@
     "lint-fix": "./node_modules/eslint/bin/eslint.js --fix ./src/**"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.5",
+    "@babel/core": "^7.18.0",
     "@babel/eslint-parser": "^7.17.0",
-    "@babel/preset-env": "^7.16.11",
-    "babel-loader": "^8.2.3",
+    "@babel/preset-env": "^7.18.0",
+    "babel-loader": "^8.2.5",
     "babel-plugin-template-html-minifier": "^4.1.0",
     "clean-webpack-plugin": "^4.0.0",
-    "compression-webpack-plugin": "^9.2.0",
-    "css-loader": "^6.6.0",
-    "eslint": "^8.9.0",
+    "compression-webpack-plugin": "^10.0.0",
+    "css-loader": "^6.7.1",
+    "eslint": "^8.16.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-import-resolver-webpack": "^0.13.2",
-    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-webpack-plugin": "3.1.1",
     "file-loader": "^6.2.0",
     "filemanager-webpack-plugin": "^6.1.7",
@@ -69,10 +70,10 @@
     "style-loader": "^3.3.1",
     "terser-webpack-plugin": "^5.3.1",
     "unminified-webpack-plugin": "^3.0.0",
-    "webpack": "^5.69.1",
+    "webpack": "^5.72.1",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.7.4"
+    "webpack-dev-server": "^4.9.0"
   },
   "engines": {
     "node": ">=10.21.0"

package/src/components/api-request.js

@@ -52,6 +52,7 @@ export default class ApiRequest extends LitElement {
       responseStatus: { type: String, attribute: false },
       responseUrl: { type: String, attribute: false },
       fillRequestFieldsWithExample: { type: String, attribute: 'fill-request-fields-with-example' },
+      useSummaryToListExamples: { type: String, attribute: 'use-summary-to-list-example' },
       allowTry: { type: String, attribute: 'allow-try' },
       renderStyle: { type: String, attribute: 'render-style' },
       schemaStyle: { type: String, attribute: 'schema-style' },
@@ -68,6 +69,7 @@ export default class ApiRequest extends LitElement {
       schemaDescriptionExpanded: { type: String, attribute: 'schema-description-expanded' },
       allowSchemaDescriptionExpandToggle: { type: String, attribute: 'allow-schema-description-expand-toggle' },
       schemaHideReadOnly: { type: String, attribute: 'schema-hide-read-only' },
+      schemaHideWriteOnly: { type: String, attribute: 'schema-hide-write-only' },
       fetchCredentials: { type: String, attribute: 'fetch-credentials' },
 
       // properties for internal tracking
@@ -98,12 +100,12 @@ export default class ApiRequest extends LitElement {
           text-align: right;
           line-height: var(--font-size-small);
         }
-        .param-name{
+        .param-name {
           color: var(--fg); 
           font-family: var(--font-mono);
         }
         .param-name.deprecated { 
-          text-decoration: line-through;
+          color: var(--red);
         }
         .param-type{
           color: var(--light-fg); 
@@ -245,7 +247,12 @@ export default class ApiRequest extends LitElement {
               }
             }
           }"
-          >${v.value && Array.isArray(v.value) ? (v.value?.join(', ')) : (v.value || '')}</a>
+          >
+          ${this.useSummaryToListExamples === 'true'
+            ? v.description || v.summary || (v.value && Array.isArray(v.value) ? (v.value?.join(', ')) : (v.value || ''))
+            : v.value && Array.isArray(v.value) ? (v.value?.join(', ')) : (v.value || '')
+          }
+          </a>
           ${paramType === 'array' ? '] ' : ''}
         `)}
       `
@@ -316,18 +323,20 @@ export default class ApiRequest extends LitElement {
           serializeStyle || 'json',
           '',
           '',
-          true,
-          true,
+          !(this.schemaHideReadOnly && (this.schemaHideReadOnly.includes(this.method) || this.schemaHideReadOnly === 'true')),
+          !(this.schemaHideWriteOnly && (this.schemaHideWriteOnly.includes(this.method) || this.schemaHideWriteOnly === 'true')),
           'text',
           false,
         )[0].exampleValue;
       }
       const labelColWidth = 'read focused'.includes(this.renderStyle) ? '200px' : '160px';
       tableRows.push(html`
-      <tr> 
+      <tr title="${param.deprecated ? 'Deprecated' : ''}"> 
         <td rowspan="${this.allowTry === 'true' ? '1' : '2'}" style="width:${labelColWidth}; min-width:100px;">
-          <div class="param-name">
-            ${param.required ? html`<span style='color:var(--red)'>*</span>` : ''}${param.name}
+          <div class="param-name ${param.deprecated ? 'deprecated' : ''}" >
+            ${param.deprecated ? html`<span style='color:var(--red);'>✗</span>` : ''}
+            ${param.required ? html`<span style='color:var(--red)'>*</span>` : ''}
+            ${param.name}
           </div>
           <div class="param-type">
             ${paramSchema.type === 'array'
@@ -338,7 +347,7 @@ export default class ApiRequest extends LitElement {
         </td>  
         ${this.allowTry === 'true'
           ? html`
-            <td style="min-width:100px;">
+            <td style="min-width:100px;" colspan="${paramSchema.default || paramSchema.constrain || paramSchema.allowedValues || paramSchema.pattern ? '1' : '2'}">
               ${paramSchema.type === 'array'
                 ? html`
                   <tag-input class="request-param" 
@@ -393,7 +402,10 @@ export default class ApiRequest extends LitElement {
                               schema-description-expanded = "${this.schemaDescriptionExpanded}"
                               allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
                               schema-hide-read-only = "${this.schemaHideReadOnly.includes(this.method)}"
-                              schema-hide-write-only = "false"
+                              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"
                             > </schema-tree>
                           </div>`
                         }
@@ -406,8 +418,9 @@ export default class ApiRequest extends LitElement {
                       data-pname="${param.name}" 
                       data-example="${Array.isArray(example.exampleVal) ? example.exampleVal.join('~|~') : example.exampleVal}"
                       data-param-allow-reserved = "${paramAllowReserved}"
+                      data-x-fill-example = "${param['x-fill-example'] || 'yes'}"
                       data-array="false"
-                      .value="${live(this.fillRequestFieldsWithExample === 'true' ? example.exampleVal : '')}"
+                      .value="${param['x-fill-example'] === 'no' ? '' : live(this.fillRequestFieldsWithExample === 'true' ? example.exampleVal : '')}"
                     />`
                 }
             </td>`
@@ -440,12 +453,12 @@ export default class ApiRequest extends LitElement {
                   }`)}
               </div>
             </td>`
-          : ''
+          : html`<td></td>`
         }
       </tr>
       <tr>
         ${this.allowTry === 'true' ? html`<td style="border:none"> </td>` : ''}
-        <td colspan="2" style="border:none;">
+        <td colspan="2" style="border:none">
           <span class="m-markdown-small">${unsafeHTML(marked(param.description || ''))}</span>
           ${this.exampleListTemplate.call(this, param.name, paramSchema.type, example.exampleList)}
         </td>
@@ -546,8 +559,8 @@ export default class ApiRequest extends LitElement {
             reqBody.mimeType,
             reqBody.examples,
             reqBody.example,
-            false,
-            true,
+            !(this.schemaHideReadOnly && (this.schemaHideReadOnly.includes(this.method) || this.schemaHideReadOnly === 'true')),
+            !(this.schemaHideWriteOnly && (this.schemaHideWriteOnly.includes(this.method) || this.schemaHideWriteOnly === 'true')),
             'text',
             false,
           );
@@ -605,8 +618,8 @@ export default class ApiRequest extends LitElement {
             reqBody.mimeType,
             reqBody.examples,
             reqBody.example,
-            false,
-            true,
+            !(this.schemaHideReadOnly && (this.schemaHideReadOnly.includes(this.method) || this.schemaHideReadOnly === 'true')),
+            !(this.schemaHideWriteOnly && (this.schemaHideWriteOnly.includes(this.method) || this.schemaHideWriteOnly === 'true')),
             'text',
             false,
           );
@@ -637,8 +650,9 @@ export default class ApiRequest extends LitElement {
               schema-expand-level = "${this.schemaExpandLevel}"
               schema-description-expanded = "${this.schemaDescriptionExpanded}"
               allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
-              schema-hide-read-only = "${this.schemaHideReadOnly.includes(this.method)}"
-              schema-hide-write-only = "false"
+              schema-hide-read-only = "${this.schemaHideReadOnly}"
+              schema-hide-write-only = "${this.schemaHideWriteOnly}"
+              exportparts = "schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
             > </schema-table>
           `;
         } else if (this.schemaStyle === 'tree') {
@@ -651,8 +665,9 @@ export default class ApiRequest extends LitElement {
               schema-expand-level = "${this.schemaExpandLevel}"
               schema-description-expanded = "${this.schemaDescriptionExpanded}"
               allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
-              schema-hide-read-only = "true"
-              schema-hide-write-only = "false"
+              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>
           `;
         }
@@ -697,8 +712,8 @@ export default class ApiRequest extends LitElement {
       'json',
       fieldSchema.examples,
       fieldSchema.example,
-      false,
-      true,
+      !(this.schemaHideReadOnly && (this.schemaHideReadOnly.includes(this.method) || this.schemaHideReadOnly === 'true')),
+      !(this.schemaHideWriteOnly && (this.schemaHideWriteOnly.includes(this.method) || this.schemaHideWriteOnly === 'true')),
       'text',
       false,
     );
@@ -772,7 +787,7 @@ export default class ApiRequest extends LitElement {
         const labelColWidth = 'read focused'.includes(this.renderStyle) ? '200px' : '160px';
         const example = normalizeExamples((paramSchema.examples || paramSchema.example), paramSchema.type);
         formDataTableRows.push(html`
-        <tr> 
+        <tr title="${fieldSchema.deprecated ? 'Deprecated' : ''}"> 
           <td style="width:${labelColWidth}; min-width:100px;">
             <div class="param-name ${fieldSchema.deprecated ? 'deprecated' : ''}">
               ${fieldName}${(schema.required?.includes(fieldName) || fieldSchema.required) ? html`<span style='color:var(--red);'>*</span>` : ''}
@@ -935,19 +950,19 @@ export default class ApiRequest extends LitElement {
               }
             </div>`
           : html`
-            <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'};" >
+            <div class="tab-content col m-markdown" style="flex:1; display:${this.activeResponseTab === 'response' ? 'flex' : 'none'};" >
               <button class="toolbar-btn" style="position:absolute; top:12px; right:8px" @click='${(e) => { copyToClipboard(this.responseText, e); }}' part="btn btn-fill"> Copy </button>
-              <pre style="white-space:pre; max-height:400px; overflow:auto">${responseFormat
+              <pre style="white-space:pre; min-height:50px; height:400px; resize:vertical; overflow:auto">${responseFormat
                 ? html`<code>${unsafeHTML(Prism.highlight(this.responseText, Prism.languages[responseFormat], responseFormat))}</code>`
                 : `${this.responseText}`
               }</pre>
             </div>`
         }
-        <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'headers' ? 'flex' : 'none'};" >
+        <div class="tab-content col m-markdown" style="flex:1; display:${this.activeResponseTab === 'headers' ? 'flex' : 'none'};" >
           <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'};">
+        <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>
@@ -1392,7 +1407,7 @@ export default class ApiRequest extends LitElement {
         }
         if (this.responseIsBlob) {
           const contentDisposition = fetchResponse.headers.get('content-disposition');
-          this.respContentDisposition = contentDisposition ? contentDisposition.split('filename=')[1].replace(/\\"/g, '') : 'filename';
+          this.respContentDisposition = contentDisposition ? contentDisposition.split('filename=')[1].replace(/"|'/g, '') : 'filename';
           respBlob = await fetchResponse.blob();
           this.responseBlobUrl = URL.createObjectURL(respBlob);
         }

package/src/components/api-response.js

@@ -34,6 +34,7 @@ export default class ApiResponse extends LitElement {
       schemaExpandLevel: { type: Number, attribute: 'schema-expand-level' },
       schemaDescriptionExpanded: { type: String, attribute: 'schema-description-expanded' },
       allowSchemaDescriptionExpandToggle: { type: String, attribute: 'allow-schema-description-expand-toggle' },
+      schemaHideReadOnly: { type: String, attribute: 'schema-hide-read-only' },
       schemaHideWriteOnly: { type: String, attribute: 'schema-hide-write-only' },
     };
   }
@@ -118,8 +119,8 @@ export default class ApiResponse extends LitElement {
           mimeResp,
           mimeRespObj.examples,
           mimeRespObj.example,
-          true,
-          false,
+          !(this.schemaHideReadOnly && (this.schemaHideReadOnly.includes(this.method) || this.schemaHideReadOnly === 'true')),
+          !(this.schemaHideWriteOnly && (this.schemaHideWriteOnly.includes(this.method) || this.schemaHideWriteOnly === 'true')),
           mimeResp.includes('json') ? 'json' : 'text',
         );
         allMimeResp[mimeResp] = {
@@ -309,7 +310,7 @@ export default class ApiResponse extends LitElement {
             schema-expand-level = "${this.schemaExpandLevel}"
             schema-description-expanded = "${this.schemaDescriptionExpanded}"
             allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
-            schema-hide-read-only = "false"
+            schema-hide-read-only = "${this.schemaHideReadOnly}"
             schema-hide-write-only = "${this.schemaHideWriteOnly}"
           > </schema-tree> `
         : html`
@@ -319,7 +320,7 @@ export default class ApiResponse extends LitElement {
             schema-expand-level = "${this.schemaExpandLevel}"
             schema-description-expanded = "${this.schemaDescriptionExpanded}"
             allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
-            schema-hide-read-only = "false"
+            schema-hide-read-only = "${this.schemaHideReadOnly}"
             schema-hide-write-only = "${this.schemaHideWriteOnly}"
           > </schema-tree>`
       }`;

package/src/components/json-tree.js

@@ -35,18 +35,29 @@ export default class JsonTree extends LitElement {
         text-align: left;
       }
 
-      .open-bracket{
+      .open-bracket {
         display:inline-block;
         padding: 0 20px 0 0;
         cursor:pointer;
         border: 1px solid transparent;
         border-radius:3px;
       }
-      .open-bracket:hover{
+      .close-bracket {
+        border: 1px solid transparent;
+        border-radius:3px;
+        display:inline-block;
+      }
+      .open-bracket:hover {
         color:var(--primary-color);
         background-color:var(--hover-color);
         border: 1px solid var(--border-color);
       }
+      .open-bracket.expanded:hover ~ .inside-bracket {
+        border-left: 1px solid var(--fg3);
+      }
+      .open-bracket.expanded:hover ~ .close-bracket {
+        color:var(--primary-color);
+      }
       .inside-bracket{
         padding-left:12px;
         border-left:1px dotted var(--border-color);

package/src/components/schema-table.js

@@ -47,7 +47,7 @@ export default class SchemaTable extends LitElement {
         width: 240px;
       }
       .key.deprecated .key-label {
-        text-decoration: line-through;
+        color: var(--red);
       }
 
       .table .key-type {
@@ -92,7 +92,7 @@ export default class SchemaTable extends LitElement {
           ${this.allowSchemaDescriptionExpandToggle === 'true'
             ? html`
               <div style="flex:1"></div>
-              <div class='toolbar-item' @click='${() => { this.schemaDescriptionExpanded = (this.schemaDescriptionExpanded === 'true' ? 'false' : 'true'); }}'> 
+              <div part="schema-multiline-toggle" class='toolbar-item' @click='${() => { this.schemaDescriptionExpanded = (this.schemaDescriptionExpanded === 'true' ? 'false' : 'true'); }}'> 
                 ${this.schemaDescriptionExpanded === 'true' ? 'Single line description' : 'Multiline description'}
               </div>
             `
@@ -100,7 +100,7 @@ export default class SchemaTable extends LitElement {
           }
         </div>
         ${this.data?.['::description']
-          ? html`<span class='m-markdown'> ${unsafeHTML(marked(this.data['::description'] || ''))}</span>`
+          ? html`<span part="schema-description" class='m-markdown'> ${unsafeHTML(marked(this.data['::description'] || ''))}</span>`
           : ''
         }
         <div style = 'border:1px solid var(--light-border-color)'>
@@ -130,7 +130,7 @@ export default class SchemaTable extends LitElement {
           return;
         }
       }
-      if (data['::readwrite'] === 'readonly') {
+      if (data && data['::readwrite'] === 'readonly') {
         return;
       }
     }
@@ -140,17 +140,27 @@ export default class SchemaTable extends LitElement {
           return;
         }
       }
-      if (data['::readwrite'] === 'writeonly') {
+      if (data && data['::readwrite'] === 'writeonly') {
         return;
       }
     }
+    if (!data) {
+      return html`<div class="null" style="display:inline;">
+        <span style='margin-left:${(schemaLevel + 1) * 16}px'> &nbsp; </span>
+        <span class="key-label xxx-of-key"> ${key.replace('::OPTION~', '')}</span>
+        ${
+          dataType === 'array'
+            ? html`<span class='mono-font'> [ ] </span>`
+            : dataType === 'object'
+              ? html`<span class='mono-font'> { } </span>`
+              : html`<span class='mono-font'> schema undefined </span>`
+        }
+      </div>`;
+    }
 
     const newSchemaLevel = data['::type']?.startsWith('xxx-of') ? schemaLevel : (schemaLevel + 1);
     const newIndentLevel = dataType === 'xxx-of-option' || data['::type'] === 'xxx-of-option' || key.startsWith('::OPTION') ? indentLevel : (indentLevel + 1);
     const leftPadding = 16 * newIndentLevel; // 2 space indentation at each level
-    if (!data) {
-      return html`<div class="null" style="display:inline;">null</div>`;
-    }
     if (Object.keys(data).length === 0) {
       return html`<span class="td key object" style='padding-left:${leftPadding}px'>${key}</span>`;
     }
@@ -188,7 +198,7 @@ export default class SchemaTable extends LitElement {
       return html`
         ${newSchemaLevel >= 0 && key
           ? html`
-            <div class='tr ${newSchemaLevel <= this.schemaExpandLevel ? 'expanded' : 'collapsed'} ${data['::type']}' data-obj='${keyLabel}'>
+            <div class='tr ${newSchemaLevel <= this.schemaExpandLevel ? 'expanded' : 'collapsed'} ${data['::type']}' data-obj='${keyLabel}' title="${data['::deprecated'] ? 'Deprecated' : ''}">
               <div class="td key ${data['::deprecated'] ? 'deprecated' : ''}" style='padding-left:${leftPadding}px'>
                 ${(keyLabel || keyDescr)
                   ? html`
@@ -204,8 +214,8 @@ export default class SchemaTable extends LitElement {
                 ${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' || key.startsWith('::OPTION')
                   ? html`<span class="xxx-of-key" style="margin-left:-6px">${keyLabel}</span><span class="${isOneOfLabel ? 'xxx-of-key' : 'xxx-of-descr'}">${keyDescr}</span>`
                   : keyLabel.endsWith('*')
-                    ? html`<span class="key-label" style="display:inline-block; margin-left:-6px;"> ${keyLabel.substring(0, keyLabel.length - 1)}</span><span style='color:var(--red);'>*</span>`
-                    : html`<span class="key-label" style="display:inline-block; margin-left:-6px;">${keyLabel === '::props' ? '' : keyLabel}</span>`
+                    ? html`<span class="key-label" style="display:inline-block; margin-left:-6px;">${data['::deprecated'] ? '✗' : ''} ${keyLabel.substring(0, keyLabel.length - 1)}</span><span style='color:var(--red);'>*</span>`
+                    : html`<span class="key-label" style="display:inline-block; margin-left:-6px;">${data['::deprecated'] ? '✗' : ''} ${keyLabel === '::props' ? '' : keyLabel}</span>`
                 }
                 ${data['::type'] === 'xxx-of' && dataType === 'array' ? html`<span style="color:var(--primary-color)">ARRAY</span>` : ''} 
               </div>
@@ -287,23 +297,35 @@ export default class SchemaTable extends LitElement {
         </div>`;
     }
     return html`
-      <div class = "tr primitive">
+      <div class = "tr primitive" title="${deprecated ? 'Deprecated' : ''}">
         <div class="td key ${deprecated}" style='padding-left:${leftPadding}px'>
+          ${deprecated ? html`<span style='color:var(--red);'>✗</span>` : ''}
           ${keyLabel?.endsWith('*')
-            ? html`<span class="key-label">${keyLabel.substring(0, keyLabel.length - 1)}</span><span style='color:var(--red);'>*</span>`
+            ? html`
+              <span class="key-label">${keyLabel.substring(0, keyLabel.length - 1)}</span>
+              <span style='color:var(--red);'>*</span>`
             : key.startsWith('::OPTION')
               ? html`<span class='xxx-of-key'>${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>`
               : html`${keyLabel ? html`<span class="key-label"> ${keyLabel}</span>` : html`<span class="xxx-of-descr">${schemaTitle}</span>`}`
           }
         </div>
         ${dataTypeHtml}
-        <div class='td key-descr'>
+        <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>`
+                : ''}`
+              : ''
+          }
           ${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>` : ''}
           ${pattern ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px;'> <span class='bold-text'>Pattern: </span>${pattern}</div>` : ''}
-          ${schemaDescription ? html`<span class="m-markdown-small">${unsafeHTML(marked(`${schemaTitle ? `**${schemaTitle}:**` : ''} ${schemaDescription}`))}</span>` : ''}
         </div>
       </div>
     `;