rapidoc 9.1.3 → 9.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rapidoc",
-  "version": "9.1.3",
+  "version": "9.1.4",
   "description": "RapiDoc - Open API spec viewer with built in console",
   "author": "Mrinmoy Majumdar <mrin9@yahoo.com>",
   "repository": {
@@ -29,12 +29,13 @@
   "module": "dist/rapidoc-min.js",
   "mode": "production",
   "dependencies": {
-    "@apitools/openapi-parser": "^0.0.9",
+    "@apitools/openapi-parser": "^0.0.10",
     "base64-arraybuffer": "^1.0.1",
+    "buffer": "^6.0.3",
     "lit-element": "2.5.1",
     "lit-html": "1.4.1",
-    "marked": "^3.0.4",
-    "prismjs": "^1.25.0"
+    "marked": "^4.0.10",
+    "prismjs": "^1.26.0"
   },
   "scripts": {
     "build": "NODE_ENV=production webpack --mode=production",
@@ -46,30 +47,30 @@
     "lint-fix": "./node_modules/eslint/bin/eslint.js --fix ./src/**"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.5",
-    "@babel/eslint-parser": "^7.15.7",
-    "@babel/preset-env": "^7.15.6",
-    "babel-loader": "^8.2.2",
+    "@babel/core": "^7.16.7",
+    "@babel/eslint-parser": "^7.16.5",
+    "@babel/preset-env": "^7.16.8",
+    "babel-loader": "^8.2.3",
     "babel-plugin-template-html-minifier": "^4.1.0",
     "clean-webpack-plugin": "^4.0.0",
-    "compression-webpack-plugin": "^9.0.0",
-    "css-loader": "^6.3.0",
+    "compression-webpack-plugin": "^9.2.0",
+    "css-loader": "^6.5.1",
     "eslint": "^7.32.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-import-resolver-webpack": "^0.13.1",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-import-resolver-webpack": "^0.13.2",
     "eslint-loader": "^4.0.2",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-webpack-plugin": "3.0.1",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-webpack-plugin": "3.1.1",
     "file-loader": "^6.2.0",
     "filemanager-webpack-plugin": "^6.1.7",
-    "html-webpack-plugin": "^5.3.2",
+    "html-webpack-plugin": "^5.5.0",
     "inspectpack": "^4.7.1",
-    "style-loader": "^3.3.0",
-    "terser-webpack-plugin": "^5.2.4",
-    "webpack": "^5.54.0",
-    "webpack-bundle-analyzer": "^4.4.2",
-    "webpack-cli": "^4.8.0",
-    "webpack-dev-server": "^4.3.0"
+    "style-loader": "^3.3.1",
+    "terser-webpack-plugin": "^5.3.0",
+    "webpack": "^5.66.0",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.7.3"
   },
   "engines": {
     "node": ">=10.21.0"

package/src/components/api-request.js

@@ -1,9 +1,10 @@
 import { LitElement, html, css } from 'lit-element';
-import marked from 'marked';
+import { marked } from 'marked';
 import Prism from 'prismjs';
 
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
-// import { live } from 'lit-html/directives/live';
+import { guard } from 'lit-html/directives/guard';
+import { live } from 'lit-html/directives/live';
 import TableStyles from '~/styles/table-styles';
 import FlexStyles from '~/styles/flex-styles';
 import InputStyles from '~/styles/input-styles';
@@ -192,11 +193,11 @@ export default class ApiRequest extends LitElement {
         ${this.callback === 'true' ? 'CALLBACK REQUEST' : 'REQUEST'}
       </div>
       <div>
-        ${this.inputParametersTemplate('path')}
-        ${this.inputParametersTemplate('query')}
+        ${guard([this.parameters, this.activeParameterSchemaTabs], () => this.inputParametersTemplate('path'))}
+        ${guard([this.parameters, this.activeParameterSchemaTabs], () => this.inputParametersTemplate('query'))}
         ${this.requestBodyTemplate()}
-        ${this.inputParametersTemplate('header')}
-        ${this.inputParametersTemplate('cookie')}
+        ${guard([this.parameters, this.activeParameterSchemaTabs], () => this.inputParametersTemplate('header'))}
+        ${guard([this.parameters, this.activeParameterSchemaTabs], () => this.inputParametersTemplate('cookie'))}
         ${this.allowTry === 'false' ? '' : html`${this.apiCallTemplate()}`}
       </div>  
     </div>
@@ -245,7 +246,7 @@ export default class ApiRequest extends LitElement {
               }
             }
           }"
-          >${v.description || v.summary || v.value}</a>
+          >${v.value && Array.isArray(v.value) ? (v.value?.join(', ')) : (v.value || '')}</a>
           ${paramType === 'array' ? '] ' : ''}
         `)}
       `
@@ -284,6 +285,7 @@ export default class ApiRequest extends LitElement {
       // let exampleList = [];
       let paramStyle = 'form';
       let paramExplode = true;
+      let paramAllowReserved = false;
       if (paramType === 'query') {
         if (param.style && 'form spaceDelimited pipeDelimited'.includes(param.style)) {
           paramStyle = param.style;
@@ -293,6 +295,9 @@ export default class ApiRequest extends LitElement {
         if (typeof param.explode === 'boolean') {
           paramExplode = param.explode;
         }
+        if (typeof param.allowReserved === 'boolean') {
+          paramAllowReserved = param.allowReserved;
+        }
       }
 
       // openapi 3.1.0 spec based examples (which must be Object(string : { value:any, summary?: string, description?: string})
@@ -308,10 +313,10 @@ export default class ApiRequest extends LitElement {
       );
       if (!example.exampleVal && paramSchema.type === 'object') {
         example.exampleVal = generateExample(
-          '',
-          '',
           declaredParamSchema,
           serializeStyle || 'json',
+          '',
+          '',
           true,
           true,
           'text',
@@ -344,6 +349,7 @@ export default class ApiRequest extends LitElement {
                     data-example = "${Array.isArray(example.exampleVal) ? example.exampleVal.join('~|~') : example.exampleVal}"
                     data-param-serialize-style = "${paramStyle}"
                     data-param-serialize-explode = "${paramExplode}"
+                    data-param-allow-reserved = "${paramAllowReserved}"
                     data-array = "true"
                     placeholder = "add-multiple &#x21a9;"
                     .value = "${Array.isArray(example.exampleVal) ? example.exampleVal : example.exampleVal}"
@@ -372,6 +378,7 @@ export default class ApiRequest extends LitElement {
                             data-example = "${example.exampleVal}"
                             data-param-serialize-style = "${paramStyle}"
                             data-param-serialize-explode = "${paramExplode}"
+                            data-param-allow-reserved = "${paramAllowReserved}"
                             spellcheck = "false"
                             .textContent = "${this.fillRequestFieldsWithExample === 'true' ? example.exampleVal : ''}"
                             style = "resize:vertical; width:100%; height: ${'read focused'.includes(this.renderStyle) ? '180px' : '120px'};"
@@ -387,7 +394,7 @@ 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 = "false"
                             > </schema-tree>
                           </div>`
                         }
@@ -399,8 +406,9 @@ export default class ApiRequest extends LitElement {
                       data-ptype="${paramType}"
                       data-pname="${param.name}" 
                       data-example="${Array.isArray(example.exampleVal) ? example.exampleVal.join('~|~') : example.exampleVal}"
+                      data-param-allow-reserved = "${paramAllowReserved}"
                       data-array="false"
-                      .value="${this.fillRequestFieldsWithExample === 'true' ? example.exampleVal : ''}"
+                      .value="${live(this.fillRequestFieldsWithExample === 'true' ? example.exampleVal : '')}"
                     />`
                 }
             </td>`
@@ -535,10 +543,10 @@ export default class ApiRequest extends LitElement {
         // Generate Example
         if (reqBody.mimeType === this.selectedRequestBodyType) {
           reqBodyExamples = generateExample(
-            reqBody.examples,
-            reqBody.example,
             reqBody.schema,
             reqBody.mimeType,
+            reqBody.examples,
+            reqBody.example,
             false,
             true,
             'text',
@@ -594,10 +602,10 @@ export default class ApiRequest extends LitElement {
       } else if (this.selectedRequestBodyType.includes('form-urlencoded') || this.selectedRequestBodyType.includes('form-data')) {
         if (reqBody.mimeType === this.selectedRequestBodyType) {
           const ex = generateExample(
-            reqBody.examples,
-            reqBody.example,
             reqBody.schema,
             reqBody.mimeType,
+            reqBody.examples,
+            reqBody.example,
             false,
             true,
             'text',
@@ -607,7 +615,7 @@ export default class ApiRequest extends LitElement {
             reqBodyFormHtml = this.formDataTemplate(reqBody.schema, reqBody.mimeType, (ex[0] ? ex[0].exampleValue : ''));
           }
         }
-      } else if ((RegExp('^audio/|^image/|^video/|^font/|tar$|zip$|7z$|rtf$|msword$|excel$|/pdf$|/octet-stream$').test(this.selectedRequestBodyType))) {
+      } else if ((/^audio\/|^image\/|^video\/|^font\/|tar$|zip$|7z$|rtf$|msword$|excel$|\/pdf$|\/octet-stream$/.test(this.selectedRequestBodyType))) {
         if (reqBody.mimeType === this.selectedRequestBodyType) {
           reqBodyFileInputHtml = html`
             <div class = "small-font-size bold-text row">
@@ -631,21 +639,21 @@ 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 = "false"
             > </schema-table>
           `;
         } else if (this.schemaStyle === 'tree') {
           reqBodySchemaHtml = html`
             ${reqBodySchemaHtml}
             <schema-tree
-              class = '${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)}'
-              style = 'display: ${this.selectedRequestBodyType === reqBody.mimeType ? 'block' : 'none'};'
-              .data = '${schemaAsObj}'
+              class = "${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)}"
+              style = "display: ${this.selectedRequestBodyType === reqBody.mimeType ? 'block' : 'none'};"
+              .data = "${schemaAsObj}"
               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 = "true"
+              schema-hide-write-only = "false"
             > </schema-tree>
           `;
         }
@@ -686,10 +694,10 @@ export default class ApiRequest extends LitElement {
     // This template is used when form-data param should be send as a object (application/json, application/xml)
     const formdataPartSchema = schemaInObjectNotation(fieldSchema, {});
     const formdataPartExample = generateExample(
-      fieldSchema.examples,
-      fieldSchema.example,
       fieldSchema,
       'json',
+      fieldSchema.examples,
+      fieldSchema.example,
       false,
       true,
       'text',
@@ -1061,12 +1069,17 @@ export default class ApiRequest extends LitElement {
     });
 
     // Query Params
-    const urlQueryParam = new URLSearchParams();
+    const urlQueryParamsMap = new Map();
+    const queryParamsWithReservedCharsAllowed = [];
     if (queryParamEls.length > 0) {
       queryParamEls.forEach((el) => {
+        const queryParam = new URLSearchParams();
+        if (el.dataset.paramAllowReserved === 'true') {
+          queryParamsWithReservedCharsAllowed.push(el.dataset.pname);
+        }
         if (el.dataset.array === 'false') {
           if (el.value !== '') {
-            urlQueryParam.append(el.dataset.pname, el.value);
+            queryParam.append(el.dataset.pname, el.value);
           }
         } else {
           const paramSerializeStyle = el.dataset.paramSerializeStyle;
@@ -1075,64 +1088,88 @@ export default class ApiRequest extends LitElement {
           vals = Array.isArray(vals) ? vals.filter((v) => v !== '') : [];
           if (vals.length > 0) {
             if (paramSerializeStyle === 'spaceDelimited') {
-              urlQueryParam.append(el.dataset.pname, vals.join(' ').replace(/^\s|\s$/g, ''));
+              queryParam.append(el.dataset.pname, vals.join(' ').replace(/^\s|\s$/g, ''));
             } else if (paramSerializeStyle === 'pipeDelimited') {
-              urlQueryParam.append(el.dataset.pname, vals.join('|').replace(/^\||\|$/g, ''));
+              queryParam.append(el.dataset.pname, vals.join('|').replace(/^\||\|$/g, ''));
             } else {
               if (paramSerializeExplode === 'true') { // eslint-disable-line no-lonely-if
-                vals.forEach((v) => { urlQueryParam.append(el.dataset.pname, v); });
+                vals.forEach((v) => { queryParam.append(el.dataset.pname, v); });
               } else {
-                urlQueryParam.append(el.dataset.pname, vals.join(',').replace(/^,|,$/g, ''));
+                queryParam.append(el.dataset.pname, vals.join(',').replace(/^,|,$/g, ''));
               }
             }
           }
         }
+        if (queryParam.toString()) {
+          urlQueryParamsMap.set(el.dataset.pname, queryParam);
+        }
       });
     }
 
     // Query Params (Dynamic - create from JSON)
     if (queryParamObjTypeEls.length > 0) {
       queryParamObjTypeEls.map((el) => {
+        const queryParam = new URLSearchParams();
         try {
           let queryParamObj = {};
           const paramSerializeStyle = el.dataset.paramSerializeStyle;
           const paramSerializeExplode = el.dataset.paramSerializeExplode;
           queryParamObj = Object.assign(queryParamObj, JSON.parse(el.value.replace(/\s+/g, ' ')));
+          if (el.dataset.paramAllowReserved === 'true') {
+            queryParamsWithReservedCharsAllowed.push(el.dataset.pname);
+          }
           if ('json xml'.includes(paramSerializeStyle)) {
             if (paramSerializeStyle === 'json') {
-              urlQueryParam.append(el.dataset.pname, JSON.stringify(queryParamObj));
+              queryParam.append(el.dataset.pname, JSON.stringify(queryParamObj));
             } else if (paramSerializeStyle === 'xml') {
-              urlQueryParam.append(el.dataset.pname, json2xml(queryParamObj));
+              queryParam.append(el.dataset.pname, json2xml(queryParamObj));
             }
           } else {
             for (const key in queryParamObj) {
               if (typeof queryParamObj[key] === 'object') {
                 if (Array.isArray(queryParamObj[key])) {
                   if (paramSerializeStyle === 'spaceDelimited') {
-                    urlQueryParam.append(key, queryParamObj[key].join(' '));
+                    queryParam.append(key, queryParamObj[key].join(' '));
                   } else if (paramSerializeStyle === 'pipeDelimited') {
-                    urlQueryParam.append(key, queryParamObj[key].join('|'));
+                    queryParam.append(key, queryParamObj[key].join('|'));
                   } else {
                     if (paramSerializeExplode === 'true') { // eslint-disable-line no-lonely-if
                       queryParamObj[key].forEach((v) => {
-                        urlQueryParam.append(key, v);
+                        queryParam.append(key, v);
                       });
                     } else {
-                      urlQueryParam.append(key, queryParamObj[key]);
+                      queryParam.append(key, queryParamObj[key]);
                     }
                   }
                 }
               } else {
-                urlQueryParam.append(key, queryParamObj[key]);
+                queryParam.append(key, queryParamObj[key]);
               }
             }
           }
         } catch (err) {
           console.log('RapiDoc: unable to parse %s into object', el.value); // eslint-disable-line no-console
         }
+        if (queryParam.toString()) {
+          urlQueryParamsMap.set(el.dataset.pname, queryParam);
+        }
+      });
+    }
+    let urlQueryParamString = '';
+    if (urlQueryParamsMap.size) {
+      urlQueryParamString = '?';
+      urlQueryParamsMap.forEach((val, pname) => {
+        if (queryParamsWithReservedCharsAllowed.includes(pname)) {
+          urlQueryParamString += `${pname}=`;
+          urlQueryParamString += val.getAll(pname).join(`&${pname}=`);
+          urlQueryParamString += '&';
+        } else {
+          urlQueryParamString += `${val.toString()}&`;
+        }
       });
+      urlQueryParamString = urlQueryParamString.slice(0, -1);
     }
-    fetchUrl = `${fetchUrl}${urlQueryParam.toString() ? '?' : ''}${urlQueryParam.toString()}`;
+    fetchUrl = `${fetchUrl}${urlQueryParamString}`;
 
     // Add authentication Query-Param if provided
     this.api_keys
@@ -1243,7 +1280,7 @@ export default class ApiRequest extends LitElement {
           }
         });
         fetchOptions.body = formDataParams;
-      } else if ((RegExp('^audio/|^image/|^video/|^font/|tar$|zip$|7z$|rtf$|msword$|excel$|/pdf$|/octet-stream$').test(requestBodyType))) {
+      } else if (/^audio\/|^image\/|^video\/|^font\/|tar$|zip$|7z$|rtf$|msword$|excel$|\/pdf$|\/octet-stream$/.test(requestBodyType)) {
         const bodyParamFileEl = requestPanelEl.querySelector('.request-body-param-file');
         if (bodyParamFileEl?.files[0]) {
           fetchOptions.body = bodyParamFileEl.files[0];
@@ -1341,10 +1378,10 @@ export default class ApiRequest extends LitElement {
             this.responseText = JSON.stringify(respJson, null, 2);
           }
         // eslint-disable-next-line no-useless-escape
-        } else if (RegExp('^font/|tar$|zip$|7z$|rtf$|msword$|excel$|/pdf$|/octet-stream$|^application\/vnd\.').test(contentType)) {
+        } else if (/^font\/|tar$|zip$|7z$|rtf$|msword$|excel$|\/pdf$|\/octet-stream$|^application\/vnd\./.test(contentType)) {
           this.responseIsBlob = true;
           this.responseBlobType = 'download';
-        } else if (RegExp('^audio|^image|^video').test(contentType)) {
+        } else if (/^audio|^image|^video/.test(contentType)) {
           this.responseIsBlob = true;
           this.responseBlobType = 'view';
         } else {

package/src/components/api-response.js

@@ -1,5 +1,5 @@
 import { LitElement, html, css } from 'lit-element';
-import marked from 'marked';
+import { marked } from 'marked';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
 import { schemaInObjectNotation, generateExample } from '~/utils/schema-utils';
 import FontStyles from '~/styles/font-styles';
@@ -114,10 +114,10 @@ export default class ApiResponse extends LitElement {
         const schemaTree = schemaInObjectNotation(mimeRespObj.schema, {});
         // Generate Example
         const respExamples = generateExample(
-          mimeRespObj.examples,
-          mimeRespObj.example,
           mimeRespObj.schema,
           mimeResp,
+          mimeRespObj.examples,
+          mimeRespObj.example,
           true,
           false,
           mimeResp.includes('json') ? 'json' : 'text',
@@ -302,23 +302,23 @@ export default class ApiResponse extends LitElement {
       ${this.schemaStyle === 'table'
         ? html`
           <schema-table
-            render-style = '${this.renderStyle}'
-            .data = '${mimeRespDetails.schemaTree}'
+            render-style = "${this.renderStyle}"
+            .data = "${mimeRespDetails.schemaTree}"
             schema-expand-level = "${this.schemaExpandLevel}"
             schema-description-expanded = "${this.schemaDescriptionExpanded}"
             allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
-            schema-hide-read-only = false
-            schema-hide-write-only = ${this.schemaHideWriteOnly}
+            schema-hide-read-only = "false"
+            schema-hide-write-only = "${this.schemaHideWriteOnly}"
           > </schema-tree> `
         : html`
           <schema-tree
-            render-style = '${this.renderStyle}'
+            render-style = "${this.renderStyle}"
             .data = '${mimeRespDetails.schemaTree}'
             schema-expand-level = "${this.schemaExpandLevel}"
             schema-description-expanded = "${this.schemaDescriptionExpanded}"
             allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
-            schema-hide-read-only = false
-            schema-hide-write-only = ${this.schemaHideWriteOnly}
+            schema-hide-read-only = "false"
+            schema-hide-write-only = "${this.schemaHideWriteOnly}"
           > </schema-tree>`
       }`;
   }

package/src/components/schema-table.js

@@ -1,5 +1,5 @@
 import { LitElement, html, css } from 'lit-element';
-import marked from 'marked';
+import { marked } from 'marked';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
 import FontStyles from '~/styles/font-styles';
 import SchemaStyles from '~/styles/schema-styles';
@@ -123,11 +123,31 @@ export default class SchemaTable extends LitElement {
     `;
   }
 
-  generateTree(data, dataType = 'object', arrayType = '', key = '', description = '', schemaLevel = 0, indentLevel = 0) {
+  generateTree(data, dataType = 'object', arrayType = '', key = '', description = '', schemaLevel = 0, indentLevel = 0, readOrWrite = '') {
+    if (this.schemaHideReadOnly === 'true') {
+      if (dataType === 'array') {
+        if (readOrWrite === 'readonly') {
+          return;
+        }
+      }
+      if (data['::readwrite'] === 'readonly') {
+        return;
+      }
+    }
+    if (this.schemaHideWriteOnly === 'true') {
+      if (dataType === 'array') {
+        if (readOrWrite === 'writeonly') {
+          return;
+        }
+      }
+      if (data['::readwrite'] === 'writeonly') {
+        return;
+      }
+    }
+
     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>`;
     }
@@ -189,7 +209,10 @@ export default class SchemaTable extends LitElement {
                 }
                 ${data['::type'] === 'xxx-of' && dataType === 'array' ? html`<span style="color:var(--primary-color)">ARRAY</span>` : ''} 
               </div>
-              <div class='td key-type'>${(data['::type'] || '').includes('xxx-of') ? '' : detailObjType}</div>
+              <div class='td key-type' title="${data['::readwrite'] === 'readonly' ? 'Read-Only' : data['::readwrite'] === 'writeonly' ? 'Write-Only' : ''}">
+                ${(data['::type'] || '').includes('xxx-of') ? '' : detailObjType}
+                ${data['::readwrite'] === 'readonly' ? ' 🆁' : data['::readwrite'] === 'writeonly' ? ' 🆆' : ''}
+              </div>
               <div class='td key-descr m-markdown-small' style='line-height:1.7'>${unsafeHTML(marked(description || ''))}</div>
             </div>`
           : html`
@@ -197,7 +220,9 @@ export default class SchemaTable extends LitElement {
                 ? 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-type'>
+                      ${arrayType && arrayType !== 'object' ? `${dataType} of ${arrayType}` : dataType}
+                    </div> 
                     <div class='td key-descr'></div> 
                   </div>`
                 : ''
@@ -206,10 +231,10 @@ export default class SchemaTable extends LitElement {
         }
         <div class='object-body'>
         ${Array.isArray(data) && data[0]
-          ? html`${this.generateTree(data[0], 'xxx-of-option', '', '::ARRAY~OF', '', newSchemaLevel, newIndentLevel)}`
+          ? html`${this.generateTree(data[0], 'xxx-of-option', '', '::ARRAY~OF', '', newSchemaLevel, newIndentLevel, '')}`
           : html`
             ${Object.keys(data).map((dataKey) => html`
-              ${['::description', '::type', '::props', '::deprecated', '::array-type'].includes(dataKey)
+              ${['::description', '::type', '::props', '::deprecated', '::array-type', '::readwrite'].includes(dataKey)
                 ? data[dataKey]['::type'] === 'array' || data[dataKey]['::type'] === 'object'
                   ? html`${this.generateTree(
                     data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey],
@@ -219,6 +244,7 @@ export default class SchemaTable extends LitElement {
                       data[dataKey]['::description'],
                       newSchemaLevel,
                       newIndentLevel,
+                      data[dataKey]['::readwrite'] ? data[dataKey]['::readwrite'] : '',
                     )}`
                   : ''
                 : html`${this.generateTree(
@@ -229,6 +255,7 @@ export default class SchemaTable extends LitElement {
                   data[dataKey]['::description'],
                   newSchemaLevel,
                   newIndentLevel,
+                  data[dataKey]['::readwrite'] ? data[dataKey]['::readwrite'] : '',
                 )}`
               }
             `)}
@@ -239,17 +266,29 @@ export default class SchemaTable extends LitElement {
     }
 
     // For Primitive Data types
-    const [type, readorWriteOnly, constraint, defaultValue, allowedValues, pattern, schemaDescription, schemaTitle, deprecated] = data.split('~|~');
-    if (readorWriteOnly === '🆁' && this.schemaHideReadOnly === 'true') {
+    const [type, readOrWriteOnly, constraint, defaultValue, allowedValues, pattern, schemaDescription, schemaTitle, deprecated] = data.split('~|~');
+    if (readOrWriteOnly === '🆁' && this.schemaHideReadOnly === 'true') {
       return;
     }
-    if (readorWriteOnly === '🆆' && this.schemaHideWriteOnly === 'true') {
+    if (readOrWriteOnly === '🆆' && this.schemaHideWriteOnly === 'true') {
       return;
     }
     const dataTypeCss = type.replace(/┃.*/g, '').replace(/[^a-zA-Z0-9+]/g, '').substring(0, 4).toLowerCase();
+    let dataTypeHtml = '';
+    if (dataType === 'array') {
+      dataTypeHtml = html` 
+        <div class='td key-type ${dataTypeCss}' title="${readOrWrite === 'readonly' ? 'Read-Only' : readOrWriteOnly === 'writeonly' ? 'Write-Only' : ''}">
+          [${type}] ${readOrWrite === 'readonly' ? '🆁' : readOrWrite === 'writeonly' ? '🆆' : ''}
+        </div>`;
+    } else {
+      dataTypeHtml = html` 
+        <div class='td key-type ${dataTypeCss}' title="${readOrWriteOnly === '🆁' ? 'Read-Only' : readOrWriteOnly === '🆆' ? 'Write-Only' : ''}">
+          ${type} ${readOrWriteOnly}
+        </div>`;
+    }
     return html`
       <div class = "tr primitive">
-        <div class="td key ${deprecated}" style='padding-left:${leftPadding}px' >
+        <div class="td key ${deprecated}" style='padding-left:${leftPadding}px'>
           ${keyLabel?.endsWith('*')
             ? html`<span class="key-label">${keyLabel.substring(0, keyLabel.length - 1)}</span><span style='color:var(--red);'>*</span>`
             : key.startsWith('::OPTION')
@@ -257,9 +296,7 @@ export default class SchemaTable extends LitElement {
               : html`${keyLabel ? html`<span class="key-label"> ${keyLabel}</span>` : html`<span class="xxx-of-descr">${schemaTitle}</span>`}`
           }
         </div>
-        <div class='td key-type ${dataTypeCss}'>
-          ${dataType === 'array' ? `[${type}]` : type} 
-          <span style="font-family: var(--font-mono);">${readorWriteOnly} </span> </div>
+        ${dataTypeHtml}
         <div class='td key-descr'>
           ${dataType === 'array' ? html`<span class="m-markdown-small">${unsafeHTML(marked(description))}</span>` : ''}
           ${constraint ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px;'> <span class='bold-text'>Constraints: </span> ${constraint}</div>` : ''}