rapidoc 9.3.2 → 9.3.4

package/src/utils/schema-utils.js

@@ -1,3 +1,23 @@
+// Takes a value as input and provides a printable string to replresent null values, spaces, blankstring etc
+export function getPrintableVal(val) {
+  if (val === undefined) {
+    return '';
+  }
+  if (val === null) {
+    return 'null';
+  }
+  if (val === '') {
+    return '∅';
+  }
+  if (typeof val === 'boolean' || typeof val === 'number') {
+    return `${val}`;
+  }
+  if (Array.isArray(val)) {
+    return val.map((v) => (v === null ? 'null' : v === '' ? '∅' : v.toString().replace(/^ +| +$/g, (m) => '●'.repeat(m.length)) || '')).join(', ');
+  }
+  return val.toString().replace(/^ +| +$/g, (m) => '●'.repeat(m.length)) || '';
+}
+
 /* Generates an schema object containing type and constraint info */
 export function getTypeInfo(schema) {
   if (!schema) {
@@ -13,12 +33,14 @@ export function getTypeInfo(schema) {
     dataType = `{recursive: ${schemaNode}} `;
   } else if (schema.type) {
     dataType = Array.isArray(schema.type) ? schema.type.join(schema.length === 2 ? ' or ' : '┃') : schema.type;
-    if (schema.format || schema.enum) {
-      dataType = dataType.replace('string', schema.enum ? 'enum' : schema.format);
+    if (schema.format || schema.enum || schema.const) {
+      dataType = dataType.replace('string', schema.enum ? 'enum' : schema.const ? 'const' : schema.format);
     }
     if (schema.nullable) {
       dataType += '┃null';
     }
+  } else if (schema.const) {
+    dataType = 'const';
   } else if (Object.keys(schema).length === 0) {
     dataType = 'any';
   } else {
@@ -32,7 +54,7 @@ export function getTypeInfo(schema) {
     readOrWriteOnly: (schema.readOnly ? '🆁' : schema.writeOnly ? '🆆' : ''),
     deprecated: schema.deprecated ? '❌' : '',
     examples: schema.examples || schema.example,
-    default: schema.default != null ? `${schema.default}` : '',
+    default: getPrintableVal(schema.default),
     description: schema.description || '',
     constrain: '',
     allowedValues: '',
@@ -45,16 +67,24 @@ export function getTypeInfo(schema) {
   } else if (info.type === '{missing-type-info}' || info.type === 'any') {
     info.description = info.description || '';
   }
-
   // Set Allowed Values
-  info.allowedValues = Array.isArray(schema.enum) ? schema.enum.join('┃') : '';
+  info.allowedValues = schema.const
+    ? schema.const
+    : Array.isArray(schema.enum)
+      ? schema.enum.map((v) => (getPrintableVal(v))).join('┃')
+      : '';
+
   if (dataType === 'array' && schema.items) {
     const arrayItemType = schema.items?.type;
-    const arrayItemDefault = schema.items?.default !== undefined ? schema.items.default : '';
+    const arrayItemDefault = getPrintableVal(schema.items.default);
 
     info.arrayType = `${schema.type} of ${Array.isArray(arrayItemType) ? arrayItemType.join('') : arrayItemType}`;
     info.default = arrayItemDefault;
-    info.allowedValues = Array.isArray(schema.items?.enum) ? schema.items.enum.join('┃') : '';
+    info.allowedValues = schema.items.const
+      ? schema.const
+      : Array.isArray(schema.items?.enum)
+        ? schema.items.enum.map((v) => (getPrintableVal(v))).join('┃')
+        : '';
   }
   if (dataType.match(/integer|number/g)) {
     if (schema.minimum !== undefined || schema.exclusiveMinimum !== undefined) {
@@ -80,49 +110,88 @@ export function getTypeInfo(schema) {
   info.html = `${info.type}~|~${info.readOrWriteOnly}~|~${info.constrain}~|~${info.default}~|~${info.allowedValues}~|~${info.pattern}~|~${info.description}~|~${schema.title || ''}~|~${info.deprecated ? 'deprecated' : ''}`;
   return info;
 }
+
 export function nestExampleIfPresent(example) {
+  if (typeof example === 'boolean' || typeof example === 'number') {
+    return {
+      Example: { value: `${example}` },
+    };
+  }
+  if (example === '') {
+    return {
+      Example: { value: '' },
+    };
+  }
   return example ? { Example: { value: example } } : example;
 }
+
+/**
+ *  Normalize example object in the following format (List of object which is used to render example links and fill the input boxes)
+ *  [{
+ *     exampleVal  : 'value to be rendered on the input control (text-box)',
+ *     exampleList : [
+ *       value         : '',
+ *       printableValue: '',
+ *       summary       : '',
+ *       description   : ''
+ *     ]
+ *  }]
+ * */
 export function normalizeExamples(examples, dataType = 'string') {
-  let exampleVal;
-  let exampleList;
-  if (examples) {
-    if (examples.constructor === Object) {
-      const exampleValAndDescr = Object.values(examples);
-      exampleVal = exampleValAndDescr.length > 0
-        ? typeof exampleValAndDescr[0].value === 'boolean' || typeof exampleValAndDescr[0].value === 'number'
-          ? exampleValAndDescr[0].value.toString()
-          : exampleValAndDescr[0].value
-        : '';
-      exampleList = Object.values(examples).map((v) => ({
-        value: typeof v.value === 'boolean' || typeof v.value === 'number' ? v.value.toString() : v.value,
-        description: v.description || v.summary || v.value,
+  if (!examples) {
+    return {
+      exampleVal: '',
+      exampleList: [],
+    };
+  }
+  if (examples.constructor === Object) {
+    const exampleList = Object.values(examples)
+      .filter((v) => (v['x-example-show-value'] !== false))
+      .map((v) => ({
+        value: (typeof v.value === 'boolean' || typeof v.value === 'number' ? `${v.value}` : (v.value || '')),
+        printableValue: getPrintableVal(v.value),
+        summary: v.summary || '',
+        description: v.description || '',
       }));
-    } else {
-      // This is non standard way to provide example but will support for now
-      if (!Array.isArray(examples)) {
-        examples = examples ? [examples] : [];
-      }
-      if (examples.length > 0) {
-        if (dataType === 'array') {
-          [exampleVal] = examples;
-          exampleList = examples.map((v) => ({ value: v, description: Array.isArray(v) ? v.join(' , ') : v }));
-        } else {
-          exampleVal = examples[0].toString();
-          exampleList = examples.map((v) => ({ value: v.toString(), description: v }));
-        }
-      }
-    }
+    const exampleVal = exampleList.length > 0
+      ? exampleList[0].value.toString()
+      : '';
+    return { exampleVal, exampleList };
+  }
+
+  // This is non-standard way to provide example but will support for now
+  if (!Array.isArray(examples)) {
+    examples = examples ? [examples] : [];
+  }
+
+  if (examples.length === 0) {
     return {
-      exampleVal,
-      exampleList,
+      exampleVal: '',
+      exampleList: [],
     };
   }
-  return {
-    exampleVal: '',
-    exampleList: [],
-  };
+
+  if (dataType === 'array') {
+    const [exampleVal] = examples;
+    const exampleList = examples.map((v) => ({
+      value: v,
+      printableValue: getPrintableVal(v),
+    }));
+    return { exampleVal, exampleList };
+  }
+
+  const exampleVal = examples[0].toString();
+  const exampleList = examples.map((v) => ({
+    value: v.toString(),
+    printableValue: getPrintableVal(v),
+  }));
+  return { exampleVal, exampleList };
 }
+
+export function anyExampleWithSummaryOrDescription(examples) {
+  return examples.some((x) => x.summary?.length > 0 || x.description?.length > 0);
+}
+
 export function getSampleValueByType(schemaObj) {
   const example = schemaObj.examples
     ? schemaObj.examples[0]
@@ -132,6 +201,17 @@ export function getSampleValueByType(schemaObj) {
   if (example === '') { return ''; }
   if (example === null) { return null; }
   if (example === 0) { return 0; }
+  if (example === false) { return false; }
+  if (example instanceof Date) {
+    switch (schemaObj.format.toLowerCase()) {
+      case 'date':
+        return example.toISOString().split('T')[0];
+      case 'time':
+        return example.toISOString().split('T')[1];
+      default:
+        return example.toISOString();
+    }
+  }
   if (example) { return example; }
 
   if (Object.keys(schemaObj).length === 0) {
@@ -141,6 +221,12 @@ export function getSampleValueByType(schemaObj) {
     // Indicates a Circular ref
     return schemaObj.$ref;
   }
+  if (schemaObj.const === false || schemaObj.const === 0 || schemaObj.const === null || schemaObj.const === '') {
+    return schemaObj.const;
+  }
+  if (schemaObj.const) {
+    return schemaObj.const;
+  }
   const typeValue = Array.isArray(schemaObj.type) ? schemaObj.type[0] : schemaObj.type;
   if (!typeValue) {
     return '?';
@@ -166,6 +252,7 @@ export function getSampleValueByType(schemaObj) {
   if (typeValue.match(/^null/g)) { return null; }
   if (typeValue.match(/^string/g)) {
     if (schemaObj.enum) { return schemaObj.enum[0]; }
+    if (schemaObj.const) { return schemaObj.const; }
     if (schemaObj.pattern) { return schemaObj.pattern; }
     if (schemaObj.format) {
       const u = `${Date.now().toString(16)}${Math.random().toString(16)}0`.repeat(16);
@@ -221,9 +308,9 @@ json2xml- TestCase
   <root>
     <prop1>simple</prop1>
     <prop2>
-      <0> a </0>
-      <1> b </1>
-      <2> c </2>
+      <0>a</0>
+      <1>b</1>
+      <2>c</2>
     </prop2>
     <prop3>
       <ob1>val-1</ob1>
@@ -238,12 +325,22 @@ export function json2xml(obj, level = 1) {
     return `\n${indent}${obj.toString()}`;
   }
   for (const prop in obj) {
+    const tagNameOrProp = (obj[prop]['::XML_TAG'] || prop);
+    let tagName = '';
     if (Array.isArray(obj[prop])) {
-      xmlText = `${xmlText}\n${indent}<${prop}> ${json2xml(obj[prop], level + 1)}\n${indent}</${prop}>`;
+      tagName = tagNameOrProp[0]['::XML_TAG'] || `${prop}`;
+    } else {
+      tagName = tagNameOrProp;
+    }
+    if (prop.startsWith('::')) {
+      continue;
+    }
+    if (Array.isArray(obj[prop])) {
+      xmlText = `${xmlText}\n${indent}<${tagName}>${json2xml(obj[prop], level + 1)}\n${indent}</${tagName}>`;
     } else if (typeof obj[prop] === 'object') {
-      xmlText = `${xmlText}\n${indent}<${prop}> ${json2xml(obj[prop], level + 1)}\n${indent}</${prop}>`;
+      xmlText = `${xmlText}\n${indent}<${tagName}>${json2xml(obj[prop], level + 1)}\n${indent}</${tagName}>`;
     } else {
-      xmlText = `${xmlText}\n${indent}<${prop}> ${obj[prop].toString()} </${prop}>`;
+      xmlText = `${xmlText}\n${indent}<${tagName}>${obj[prop].toString()}</${tagName}>`;
     }
   }
   return xmlText;
@@ -259,6 +356,12 @@ function addSchemaInfoToExample(schema, obj) {
   if (schema.description) {
     obj['::DESCRIPTION'] = schema.description;
   }
+  if (schema.xml?.name) {
+    obj['::XML_TAG'] = schema.xml?.name;
+  }
+  if (schema.xml?.wrapped) {
+    obj['::XML_WRAP'] = schema.xml?.wrapped.toString();
+  }
 }
 
 function removeTitlesAndDescriptions(obj) {
@@ -267,6 +370,8 @@ function removeTitlesAndDescriptions(obj) {
   }
   delete obj['::TITLE'];
   delete obj['::DESCRIPTION'];
+  delete obj['::XML_TAG'];
+  delete obj['::XML_WRAP'];
   for (const k in obj) {
     removeTitlesAndDescriptions(obj[k]);
   }
@@ -305,11 +410,10 @@ export function schemaToSampleObj(schema, config = { }) {
   if (!schema) {
     return;
   }
-
   if (schema.allOf) {
     const objWithAllProps = {};
 
-    if (schema.allOf.length === 1 && !schema.allOf[0].properties && !schema.allOf[0].items) {
+    if (schema.allOf.length === 1 && !schema.allOf[0]?.properties && !schema.allOf[0]?.items) {
       // If allOf has single item and the type is not an object or array, then its a primitive
       if (schema.allOf[0].$ref) {
         return '{  }';
@@ -342,7 +446,11 @@ export function schemaToSampleObj(schema, config = { }) {
     const objWithSchemaProps = {};
     if (schema.properties) {
       for (const propertyName in schema.properties) {
-        objWithSchemaProps[propertyName] = getSampleValueByType(schema.properties[propertyName]);
+        if (schema.properties[propertyName].properties || schema.properties[propertyName].properties?.items) {
+          objWithSchemaProps[propertyName] = schemaToSampleObj(schema.properties[propertyName], config);
+        } else {
+          objWithSchemaProps[propertyName] = getSampleValueByType(schema.properties[propertyName]);
+        }
       }
     }
 
@@ -456,11 +564,21 @@ export function schemaToSampleObj(schema, config = { }) {
             addPropertyExampleToObjectExamples([schema.properties[propertyName].items.example], obj, propertyName);
           } else {
             const itemSamples = schemaToSampleObj(schema.properties[propertyName].items, config);
-            const arraySamples = [];
-            for (const key in itemSamples) {
-              arraySamples[key] = [itemSamples[key]];
+            if (config.useXmlTagForProp) {
+              const xmlTagName = schema.properties[propertyName].xml?.name || propertyName;
+              if (schema.properties[propertyName].xml?.wrapped) {
+                const wrappedItemSample = JSON.parse(`{ "${xmlTagName}" : { "${xmlTagName}" : ${JSON.stringify(itemSamples['example-0'])} } }`);
+                obj = mergePropertyExamples(obj, xmlTagName, wrappedItemSample);
+              } else {
+                obj = mergePropertyExamples(obj, xmlTagName, itemSamples);
+              }
+            } else {
+              const arraySamples = [];
+              for (const key in itemSamples) {
+                arraySamples[key] = [itemSamples[key]];
+              }
+              obj = mergePropertyExamples(obj, propertyName, arraySamples);
             }
-            obj = mergePropertyExamples(obj, propertyName, arraySamples);
           }
           continue;
         }
@@ -492,26 +610,29 @@ export function schemaToSampleObj(schema, config = { }) {
 }
 
 function generateMarkdownForArrayAndObjectDescription(schema, level = 0) {
-  let markdown = '';
+  let markdown = ((schema.description || schema.title) && (schema.minItems || schema.maxItems)) ? '<span class="descr-expand-toggle">➔</span>' : '';
   if (schema.title) {
-    markdown = `**${schema.title}:** `;
-  }
-  if (schema.description) {
-    markdown = `${markdown} ${schema.description} ${schema.minItems || schema.maxItems ? '<span class="more-content">⤵</span><br/>' : ''}`;
+    if (schema.description) {
+      markdown = `${markdown} <b>${schema.title}:</b> ${schema.description}<br/>`;
+    } else {
+      markdown = `${markdown} ${schema.title}<br/>`;
+    }
+  } else if (schema.description) {
+    markdown = `${markdown} ${schema.description}<br/>`;
   }
   if (schema.minItems) {
-    markdown = `${markdown} **Min Items:** ${schema.minItems}`;
+    markdown = `${markdown} <b>Min Items:</b> ${schema.minItems}`;
   }
   if (schema.maxItems) {
-    markdown = `${markdown} **Max Items:** ${schema.maxItems}`;
+    markdown = `${markdown} <b>Max Items:</b> ${schema.maxItems}`;
   }
   if (level > 0 && schema.items?.description) {
     let itemsMarkdown = '';
     if (schema.items.minProperties) {
-      itemsMarkdown = `**Min Properties:** ${schema.items.minProperties}`;
+      itemsMarkdown = `<b>Min Properties:</b> ${schema.items.minProperties}`;
     }
     if (schema.items.maxProperties) {
-      itemsMarkdown = `${itemsMarkdown} **Max Properties:** ${schema.items.maxProperties}`;
+      itemsMarkdown = `${itemsMarkdown} <b>Max Properties:</b> ${schema.items.maxProperties}`;
     }
     markdown = `${markdown} ⮕ ${itemsMarkdown} [ ${schema.items.description} ] `;
   }
@@ -576,11 +697,13 @@ export function schemaInObjectNotation(schema, obj, level = 0, suffix = '') {
       if (v.type === 'object' || v.properties || v.allOf || v.anyOf || v.oneOf) {
         const partialObj = schemaInObjectNotation(v, {});
         objWithAnyOfProps[`::OPTION~${index + 1}${v.title ? `~${v.title}` : ''}`] = partialObj;
+        objWithAnyOfProps[`::OPTION~${index + 1}${v.title ? `~${v.title}` : ''}`]['::readwrite'] = ''; // xxx-options cannot be read or write only
         objWithAnyOfProps['::type'] = 'xxx-of-option';
       } else if (v.type === 'array' || v.items) {
         // This else-if block never seems to get executed
         const partialObj = schemaInObjectNotation(v, {});
         objWithAnyOfProps[`::OPTION~${index + 1}${v.title ? `~${v.title}` : ''}`] = partialObj;
+        objWithAnyOfProps[`::OPTION~${index + 1}${v.title ? `~${v.title}` : ''}`]['::readwrite'] = ''; // xxx-options cannot be read or write only
         objWithAnyOfProps['::type'] = 'xxx-of-array';
       } else {
         const prop = `::OPTION~${index + 1}${v.title ? `~${v.title}` : ''}`;
@@ -589,7 +712,8 @@ export function schemaInObjectNotation(schema, obj, level = 0, suffix = '') {
       }
     });
     obj[(schema.anyOf ? `::ANY~OF ${suffix}` : `::ONE~OF ${suffix}`)] = objWithAnyOfProps;
-    obj['::type'] = 'xxx-of';
+    // obj['::type'] = 'object';
+    obj['::type'] = 'object';
   } else if (Array.isArray(schema.type)) {
     // When a property has multiple types, then check further if any of the types are array or object, if yes then modify the schema using one-of
     // Clone the schema - as it will be modified to replace multi-data-types with one-of;
@@ -619,7 +743,7 @@ export function schemaInObjectNotation(schema, obj, level = 0, suffix = '') {
       }
     }
     if (complexTypes.length > 0) {
-      obj['::type'] = 'xxx-of';
+      obj['::type'] = 'object';
       const multiTypeOptions = {
         '::type': 'xxx-of-option',
       };
@@ -664,6 +788,9 @@ export function schemaInObjectNotation(schema, obj, level = 0, suffix = '') {
     obj['::title'] = schema.title || '';
     obj['::description'] = generateMarkdownForArrayAndObjectDescription(schema, level);
     obj['::type'] = 'object';
+    if ((Array.isArray(schema.type) && schema.type.includes('null')) || schema.nullable) {
+      obj['::dataTypeLabel'] = 'object or null';
+    }
     obj['::deprecated'] = schema.deprecated || false;
     obj['::readwrite'] = schema.readOnly ? 'readonly' : schema.writeOnly ? 'writeonly' : '';
     for (const key in schema.properties) {
@@ -673,13 +800,19 @@ export function schemaInObjectNotation(schema, obj, level = 0, suffix = '') {
         obj[key] = schemaInObjectNotation(schema.properties[key], {}, (level + 1));
       }
     }
+    for (const key in schema.patternProperties) {
+      obj[`[pattern: ${key}]`] = schemaInObjectNotation(schema.patternProperties[key], obj, (level + 1));
+    }
     if (schema.additionalProperties) {
-      obj['<any-key>'] = schemaInObjectNotation(schema.additionalProperties, {});
+      obj['[any-key]'] = schemaInObjectNotation(schema.additionalProperties, {});
     }
   } else if (schema.type === 'array' || schema.items) { // If Array
     obj['::title'] = schema.title || '';
     obj['::description'] = generateMarkdownForArrayAndObjectDescription(schema, level);
     obj['::type'] = 'array';
+    if ((Array.isArray(schema.type) && schema.type.includes('null')) || schema.nullable) {
+      obj['::dataTypeLabel'] = 'array or null';
+    }
     obj['::deprecated'] = schema.deprecated || false;
     obj['::readwrite'] = schema.readOnly ? 'readonly' : schema.writeOnly ? 'writeonly' : '';
     if (schema.items?.items) {
@@ -712,7 +845,8 @@ export function generateExample(schema, mimeType, examples = '', example = '', i
           egContent = examples[eg].value;
           if (typeof examples[eg].value === 'string') {
             try {
-              const fixedJsonString = examples[eg].value.replace((/([\w]+)(:)/g), '"$1"$2').replace((/'/g), '"');
+              // const fixedJsonString = examples[eg].value.replace((/([\w]+)(:)/g), '"$1"$2').replace((/'/g), '"');
+              const fixedJsonString = examples[eg].value;
               egContent = JSON.parse(fixedJsonString);
               egFormat = 'json';
             } catch (err) {
@@ -770,7 +904,8 @@ export function generateExample(schema, mimeType, examples = '', example = '', i
   // If schema-level examples are not provided or includeGeneratedExample === true then generate one based on the schema field types
   if (finalExamples.length === 0 || includeGeneratedExample === true) {
     if (schema) {
-      if (schema.example) { // Note: schema.examples (plurals) is not allowed as per spec
+      if (schema.example) {
+        // Note: Deprecated: The 'example' property has been deprecated in 3.1.0 in favor of the JSON Schema 'examples' keyword
         finalExamples.push({
           exampleId: 'Example',
           exampleSummary: '',
@@ -785,22 +920,13 @@ export function generateExample(schema, mimeType, examples = '', example = '', i
         let exampleFormat = '';
         let exampleValue = '';
         if (mimeType?.toLowerCase().includes('xml')) {
-          xmlRootStart = (schema.xml && schema.xml.name) ? `<${schema.xml.name}>` : '<root>';
-          xmlRootEnd = (schema.xml && schema.xml.name) ? `</${schema.xml.name}>` : '</root>';
+          xmlRootStart = schema.xml?.name ? `<${schema.xml.name} ${schema.xml.namespace ? `xmlns="${schema.xml.namespace}"` : ''}>` : '<root>';
+          xmlRootEnd = schema.xml?.name ? `</${schema.xml.name}>` : '</root>';
           exampleFormat = 'text';
         } else {
           exampleFormat = outputType;
         }
-
-        const samples = schemaToSampleObj(
-          schema,
-          {
-            includeReadOnly,
-            includeWriteOnly,
-            deprecated: true,
-          },
-        );
-
+        const samples = schemaToSampleObj(schema, { includeReadOnly, includeWriteOnly, deprecated: true, useXmlTagForProp: mimeType?.toLowerCase().includes('xml') });
         let i = 0;
         for (const samplesKey in samples) {
           if (!samples[samplesKey]) {
@@ -808,11 +934,10 @@ export function generateExample(schema, mimeType, examples = '', example = '', i
           }
           const summary = samples[samplesKey]['::TITLE'] || `Example ${++i}`;
           const description = samples[samplesKey]['::DESCRIPTION'] || '';
-          removeTitlesAndDescriptions(samples[samplesKey]);
-
           if (mimeType?.toLowerCase().includes('xml')) {
-            exampleValue = `${xmlRootStart}${json2xml(samples[samplesKey])}\n${xmlRootEnd}`;
+            exampleValue = `<?xml version="1.0" encoding="UTF-8"?>\n${xmlRootStart}${json2xml(samples[samplesKey], 1)}\n${xmlRootEnd}`;
           } else {
+            removeTitlesAndDescriptions(samples[samplesKey]);
             exampleValue = outputType === 'text' ? JSON.stringify(samples[samplesKey], null, 2) : samples[samplesKey];
           }
 

package/src/utils/spec-parser.js

@@ -347,6 +347,7 @@ function groupByTags(openApiSpec, sortEndpointsBy, generateMissingTags = false,
             expandedAtLeastOnce: false,
             summary: (pathOrHookObj.summary || ''),
             description: (pathOrHookObj.description || ''),
+            externalDocs: pathOrHookObj.externalDocs,
             shortSummary,
             method: methodName,
             path: pathOrHookName,

package/src/utils/theme.js

@@ -7,7 +7,7 @@ export default function setTheme(baseTheme, theme = {}) {
   // Common Theme colors
   const primaryColor = theme.primaryColor ? theme.primaryColor : baseTheme === 'dark' ? '#f76b39' : '#ff591e';
   const primaryColorInvert = ColorUtils.color.invert(primaryColor);
-  const primaryColorTrans = ColorUtils.color.opacity(primaryColor, '0.8');
+  const primaryColorTrans = ColorUtils.color.opacity(primaryColor, '0.4');
 
   // Dark and Light Theme colors
   if (baseTheme === 'dark') {
@@ -31,6 +31,8 @@ export default function setTheme(baseTheme, theme = {}) {
     const navHoverBgColor = theme.navHoverBgColor ? theme.navHoverBgColor : ColorUtils.color.brightness(navBgColor, -15);
     const navHoverTextColor = theme.navHoverTextColor ? theme.navHoverTextColor : ColorUtils.color.invert(navBgColor);
     const navAccentColor = theme.navAccentColor ? theme.navAccentColor : ColorUtils.color.brightness(primaryColor, 25);
+    const navAccentTextColor = theme.navAccentTextColor ? theme.navAccenttextColor : ColorUtils.color.invert(navAccentColor);
+
     const overlayBg = 'rgba(80, 80, 80, 0.4)';
 
     newTheme = {
@@ -54,7 +56,7 @@ export default function setTheme(baseTheme, theme = {}) {
       navHoverBgColor,
       navHoverTextColor,
       navAccentColor,
-
+      navAccentTextColor,
       headerColor,
       headerColorInvert: ColorUtils.color.invert(headerColor),
       headerColorDarker: ColorUtils.color.brightness(headerColor, -20),
@@ -123,6 +125,7 @@ export default function setTheme(baseTheme, theme = {}) {
     const navHoverBgColor = theme.navHoverBgColor ? theme.navHoverBgColor : ColorUtils.color.brightness(navBgColor, -15);
     const navHoverTextColor = theme.navHoverTextColor ? theme.navHoverTextColor : ColorUtils.color.invert(navBgColor);
     const navAccentColor = theme.navAccentColor ? theme.navAccentColor : ColorUtils.color.brightness(primaryColor, 25);
+    const navAccentTextColor = theme.navAccentTextColor ? theme.navAccenttextColor : ColorUtils.color.invert(navAccentColor);
     const overlayBg = 'rgba(0, 0, 0, 0.4)';
 
     newTheme = {
@@ -146,7 +149,7 @@ export default function setTheme(baseTheme, theme = {}) {
       navHoverBgColor,
       navHoverTextColor,
       navAccentColor,
-
+      navAccentTextColor,
       headerColor,
       headerColorInvert: ColorUtils.color.invert(headerColor),
       headerColorDarker: ColorUtils.color.brightness(headerColor, -20),
@@ -206,11 +209,13 @@ export default function setTheme(baseTheme, theme = {}) {
       : '7px 16px 7px 10px')};
     
     --resp-area-height: ${this.responseAreaHeight};
-    --font-size-small:  ${this.fontSize === 'default' ? '12px' : (this.fontSize === 'large' ? '13px' : '14px')};
-    --font-size-mono:   ${this.fontSize === 'default' ? '13px' : (this.fontSize === 'large' ? '14px' : '15px')};
+    --font-size-small: ${this.fontSize === 'default' ? '12px' : (this.fontSize === 'large' ? '13px' : '14px')};
+    --font-size-mono: ${this.fontSize === 'default' ? '13px' : (this.fontSize === 'large' ? '14px' : '15px')};
     --font-size-regular: ${this.fontSize === 'default' ? '14px' : (this.fontSize === 'large' ? '15px' : '16px')};
     --dialog-z-index: 1000;
 
+    --focus-shadow: 0 0 0 1px transparent, 0 0 0 3px ${newTheme.primaryColorTrans};
+
     /* Theme specific styles */  
     --bg:${newTheme.bg1};
     --bg2:${newTheme.bg2};
@@ -259,6 +264,7 @@ export default function setTheme(baseTheme, theme = {}) {
     --nav-hover-bg-color:${newTheme.navHoverBgColor};
     --nav-hover-text-color:${newTheme.navHoverTextColor};
     --nav-accent-color:${newTheme.navAccentColor};
+    --nav-accent-text-color:${newTheme.navAccentTextColor};
 
     /* Nav API Method Colors*/
     --nav-get-color:${newTheme.blue};

package/webpack.config.js

@@ -31,7 +31,8 @@ const rapidocBanner = `
 * License: MIT
 * Repo   : https://github.com/rapi-doc/RapiDoc
 * Author : Mrinmoy Majumdar
-*`;
+*/
+`;
 
 const commonPlugins = [
   new webpack.ProvidePlugin({ Buffer: ['buffer', 'Buffer'] }),