feat: apply cumulative update to address various issues (#10324)

src/core/plugins/json-schema-2020-12/components/Accordion/_accordion.scss

@@ -14,13 +14,13 @@
     vertical-align: bottom;
 
     &--expanded {
-      transition: transform .15s ease-in;
+      transition: transform 0.15s ease-in;
       transform: rotate(-90deg);
       transform-origin: 50% 50%;
     }
 
     &--collapsed {
-      transition: transform .15s ease-in;
+      transition: transform 0.15s ease-in;
       transform: rotate(0deg);
       transform-origin: 50% 50%;
     }
@@ -31,4 +31,3 @@
     }
   }
 }
-

src/core/plugins/json-schema-2020-12/components/ExpandDeepButton/_expand-deep-button.scss

@@ -1,5 +1,8 @@
+@use "./../../../../../style/variables" as *;
+@use "./../../../../../style/type";
+
 .json-schema-2020-12-expand-deep-button {
-  @include text_headline($section-models-model-title-font-color);
+  @include type.text_headline($section-models-model-title-font-color);
   font-size: 12px;
   color: rgb(175, 174, 174);
   border: none;

src/core/plugins/json-schema-2020-12/components/JSONSchema/JSONSchema.jsx

@@ -1,7 +1,7 @@
 /**
  * @prettier
  */
-import React, { forwardRef, useState, useCallback, useEffect } from "react"
+import React, { forwardRef, useCallback } from "react"
 import PropTypes from "prop-types"
 import classNames from "classnames"
 
@@ -12,23 +12,32 @@ import {
   useFn,
   useIsEmbedded,
   useIsExpanded,
-  useIsExpandedDeeply,
   useIsCircular,
   useRenderedSchemas,
+  usePath,
 } from "../../hooks"
 import {
   JSONSchemaLevelContext,
-  JSONSchemaDeepExpansionContext,
   JSONSchemaCyclesContext,
+  JSONSchemaPathContext,
 } from "../../context"
 
 const JSONSchema = forwardRef(
-  ({ schema, name = "", dependentRequired = [], onExpand = () => {} }, ref) => {
+  (
+    {
+      schema,
+      name = "",
+      dependentRequired = [],
+      onExpand = () => {},
+      identifier = "",
+    },
+    ref
+  ) => {
     const fn = useFn()
-    const isExpanded = useIsExpanded()
-    const isExpandedDeeply = useIsExpandedDeeply()
-    const [expanded, setExpanded] = useState(isExpanded || isExpandedDeeply)
-    const [expandedDeeply, setExpandedDeeply] = useState(isExpandedDeeply)
+    // this implementation assumes that $id is always non-relative URI
+    const pathToken = identifier || schema.$id || name
+    const { path } = usePath(pathToken)
+    const { isExpanded, setExpanded, setCollapsed } = useIsExpanded(pathToken)
     const [level, nextLevel] = useLevel()
     const isEmbedded = useIsEmbedded()
     const isExpandable = fn.isExpandable(schema) || dependentRequired.length > 0
@@ -78,42 +87,39 @@ const JSONSchema = forwardRef(
     const KeywordDeprecated = useComponent("KeywordDeprecated")
     const KeywordReadOnly = useComponent("KeywordReadOnly")
     const KeywordWriteOnly = useComponent("KeywordWriteOnly")
+    const KeywordExamples = useComponent("KeywordExamples")
+    const ExtensionKeywords = useComponent("ExtensionKeywords")
     const ExpandDeepButton = useComponent("ExpandDeepButton")
 
-    /**
-     * Effects handlers.
-     */
-    useEffect(() => {
-      setExpandedDeeply(isExpandedDeeply)
-    }, [isExpandedDeeply])
-
-    useEffect(() => {
-      setExpandedDeeply(expandedDeeply)
-    }, [expandedDeeply])
-
     /**
      * Event handlers.
      */
     const handleExpansion = useCallback(
       (e, expandedNew) => {
-        setExpanded(expandedNew)
-        !expandedNew && setExpandedDeeply(false)
+        if (expandedNew) {
+          setExpanded()
+        } else {
+          setCollapsed()
+        }
         onExpand(e, expandedNew, false)
       },
-      [onExpand]
+      [onExpand, setExpanded, setCollapsed]
     )
     const handleExpansionDeep = useCallback(
       (e, expandedDeepNew) => {
-        setExpanded(expandedDeepNew)
-        setExpandedDeeply(expandedDeepNew)
+        if (expandedDeepNew) {
+          setExpanded({ deep: true })
+        } else {
+          setCollapsed({ deep: true })
+        }
         onExpand(e, expandedDeepNew, true)
       },
-      [onExpand]
+      [onExpand, setExpanded, setCollapsed]
     )
 
     return (
-      <JSONSchemaLevelContext.Provider value={nextLevel}>
-        <JSONSchemaDeepExpansionContext.Provider value={expandedDeeply}>
+      <JSONSchemaPathContext.Provider value={path}>
+        <JSONSchemaLevelContext.Provider value={nextLevel}>
           <JSONSchemaCyclesContext.Provider value={renderedSchemas}>
             <article
               ref={ref}
@@ -126,11 +132,11 @@ const JSONSchema = forwardRef(
               <div className="json-schema-2020-12-head">
                 {isExpandable && !isCircular ? (
                   <>
-                    <Accordion expanded={expanded} onChange={handleExpansion}>
+                    <Accordion expanded={isExpanded} onChange={handleExpansion}>
                       <KeywordTitle title={name} schema={schema} />
                     </Accordion>
                     <ExpandDeepButton
-                      expanded={expanded}
+                      expanded={isExpanded}
                       onClick={handleExpansionDeep}
                     />
                   </>
@@ -151,10 +157,10 @@ const JSONSchema = forwardRef(
               </div>
               <div
                 className={classNames("json-schema-2020-12-body", {
-                  "json-schema-2020-12-body--collapsed": !expanded,
+                  "json-schema-2020-12-body--collapsed": !isExpanded,
                 })}
               >
-                {expanded && (
+                {isExpanded && (
                   <>
                     <KeywordDescription schema={schema} />
                     {!isCircular && isExpandable && (
@@ -186,6 +192,7 @@ const JSONSchema = forwardRef(
                       dependentRequired={dependentRequired}
                     />
                     <KeywordDefault schema={schema} />
+                    <KeywordExamples schema={schema} />
                     <Keyword$schema schema={schema} />
                     <Keyword$vocabulary schema={schema} />
                     <Keyword$id schema={schema} />
@@ -197,13 +204,14 @@ const JSONSchema = forwardRef(
                     )}
                     <Keyword$dynamicRef schema={schema} />
                     <Keyword$comment schema={schema} />
+                    <ExtensionKeywords schema={schema} />
                   </>
                 )}
               </div>
             </article>
           </JSONSchemaCyclesContext.Provider>
-        </JSONSchemaDeepExpansionContext.Provider>
-      </JSONSchemaLevelContext.Provider>
+        </JSONSchemaLevelContext.Provider>
+      </JSONSchemaPathContext.Provider>
     )
   }
 )
@@ -213,6 +221,7 @@ JSONSchema.propTypes = {
   schema: propTypes.schema.isRequired,
   dependentRequired: PropTypes.arrayOf(PropTypes.string),
   onExpand: PropTypes.func,
+  identifier: PropTypes.string,
 }
 
 export default JSONSchema

src/core/plugins/json-schema-2020-12/components/JSONSchema/_json-schema.scss

@@ -1,8 +1,14 @@
+@use "./../../../../../style/variables" as *;
+@use "./../../components/mixins";
+
 .json-schema-2020-12 {
   margin: 0 20px 15px 20px;
   border-radius: 4px;
   padding: 12px 0 12px 20px;
-  background-color: rgba($section-models-model-container-background-color, .05);
+  background-color: rgba(
+    $section-models-model-container-background-color,
+    0.05
+  );
 
   &:first-of-type {
     margin: 20px;
@@ -18,7 +24,7 @@
   }
 
   &-body {
-    @include expansion-border;
+    @include mixins.expansion-border;
     margin: 2px 0;
 
     &--collapsed {
@@ -26,5 +32,3 @@
     }
   }
 }
-
-

src/core/plugins/json-schema-2020-12/components/JSONViewer/JSONViewer.jsx

@@ -0,0 +1,153 @@
+/**
+ * @prettier
+ */
+import React, { useCallback } from "react"
+import PropTypes from "prop-types"
+import classNames from "classnames"
+
+import {
+  useComponent,
+  useIsExpanded,
+  useFn,
+  usePath,
+  useLevel,
+} from "../../hooks"
+import { JSONSchemaLevelContext, JSONSchemaPathContext } from "../../context"
+import { isEmptyObject, isEmptyArray } from "../../fn"
+
+const JSONViewer = ({ name, value, className }) => {
+  const fn = useFn()
+  const { path } = usePath(name)
+  const { isExpanded, setExpanded, setCollapsed } = useIsExpanded(name)
+  const [level, nextLevel] = useLevel()
+  const Accordion = useComponent("Accordion")
+  const ExpandDeepButton = useComponent("ExpandDeepButton")
+  const isPrimitive =
+    typeof value === "string" ||
+    typeof value === "number" ||
+    typeof value === "bigint" ||
+    typeof value === "boolean" ||
+    typeof value === "symbol" ||
+    value == null
+  const isEmpty = isEmptyObject(value) || isEmptyArray(value)
+
+  /**
+   * Event handlers.
+   */
+  const handleExpansion = useCallback(() => {
+    if (isExpanded) {
+      setCollapsed()
+    } else {
+      setExpanded()
+    }
+  }, [isExpanded, setExpanded, setCollapsed])
+  const handleExpansionDeep = useCallback(
+    (e, expandedDeepNew) => {
+      if (expandedDeepNew) {
+        setExpanded({ deep: true })
+      } else {
+        setCollapsed({ deep: true })
+      }
+    },
+    [setExpanded, setCollapsed]
+  )
+
+  /**
+   * Rendering.
+   */
+  if (isPrimitive) {
+    return (
+      <div className={classNames("json-schema-2020-12-json-viewer", className)}>
+        <span className="json-schema-2020-12-json-viewer__name json-schema-2020-12-json-viewer__name--secondary">
+          {name}
+        </span>
+        <span className="json-schema-2020-12-json-viewer__value json-schema-2020-12-json-viewer__value--secondary">
+          {fn.stringify(value)}
+        </span>
+      </div>
+    )
+  }
+
+  if (isEmpty) {
+    return (
+      <div className={classNames("json-schema-2020-12-json-viewer", className)}>
+        <span className="json-schema-2020-12-json-viewer__name json-schema-2020-12-json-viewer__name--secondary">
+          {name}
+        </span>
+        <strong className="json-schema-2020-12__attribute json-schema-2020-12__attribute--primary">
+          {Array.isArray(value) ? "empty array" : "empty object"}
+        </strong>
+      </div>
+    )
+  }
+
+  return (
+    <JSONSchemaPathContext.Provider value={path}>
+      <JSONSchemaLevelContext.Provider value={nextLevel}>
+        <div
+          className={classNames("json-schema-2020-12-json-viewer", className)}
+          data-json-schema-level={level}
+        >
+          <Accordion expanded={isExpanded} onChange={handleExpansion}>
+            <span className="json-schema-2020-12-json-viewer__name json-schema-2020-12-json-viewer__name--secondary">
+              {name}
+            </span>
+          </Accordion>
+          <ExpandDeepButton
+            expanded={isExpanded}
+            onClick={handleExpansionDeep}
+          />
+          <strong className="json-schema-2020-12__attribute json-schema-2020-12__attribute--primary">
+            {Array.isArray(value) ? "array" : "object"}
+          </strong>
+          <ul
+            className={classNames("json-schema-2020-12-json-viewer__children", {
+              "json-schema-2020-12-json-viewer__children--collapsed":
+                !isExpanded,
+            })}
+          >
+            {isExpanded && (
+              <>
+                {Array.isArray(value)
+                  ? value.map((item, index) => (
+                      <li
+                        key={`#${index}`}
+                        className="json-schema-2020-12-property"
+                      >
+                        <JSONViewer
+                          name={`#${index}`}
+                          value={item}
+                          className={className}
+                        />
+                      </li>
+                    ))
+                  : Object.entries(value).map(
+                      ([propertyName, propertyValue]) => (
+                        <li
+                          key={propertyName}
+                          className="json-schema-2020-12-property"
+                        >
+                          <JSONViewer
+                            name={propertyName}
+                            value={propertyValue}
+                            className={className}
+                          />
+                        </li>
+                      )
+                    )}
+              </>
+            )}
+          </ul>
+        </div>
+      </JSONSchemaLevelContext.Provider>
+    </JSONSchemaPathContext.Provider>
+  )
+}
+
+JSONViewer.propTypes = {
+  name: PropTypes.string.isRequired,
+  value: PropTypes.any.isRequired,
+  className: PropTypes.string,
+}
+
+export default JSONViewer

src/core/plugins/json-schema-2020-12/components/JSONViewer/_json-viewer.scss

@@ -0,0 +1,11 @@
+@use "./../mixins";
+@use "./../keywords/all";
+
+.json-schema-2020-12-json-viewer {
+  @include mixins.json-schema-2020-12-keyword;
+}
+
+.json-schema-2020-12-json-viewer__name--secondary
+  + .json-schema-2020-12-json-viewer__value--secondary::before {
+  content: "=";
+}

src/core/plugins/json-schema-2020-12/components/_all.scss

@@ -1,9 +1,4 @@
-@mixin expansion-border {
-  margin: 0 0 0 20px;
-  border-left: 1px dashed rgba($section-models-model-container-background-color, 0.1);
-}
-
-@import './JSONSchema/json-schema';
-@import './Accordion/accordion';
-@import './ExpandDeepButton/expand-deep-button';
-@import './keywords/all';
+@use "./JSONViewer/json-viewer";
+@use "./JSONSchema/json-schema";
+@use "./Accordion/accordion";
+@use "./ExpandDeepButton/expand-deep-button";

src/core/plugins/json-schema-2020-12/components/_mixins.scss

@@ -0,0 +1,82 @@
+@use "./../../../../style/variables" as *;
+@use "./../../../../style/type";
+
+@mixin expansion-border {
+  margin: 0 0 0 20px;
+  border-left: 1px dashed
+    rgba($section-models-model-container-background-color, 0.1);
+}
+
+@mixin json-schema-2020-12-keyword--primary {
+  color: $text-code-default-font-color;
+  font-style: normal;
+}
+
+@mixin json-schema-2020-12-keyword--extension {
+  color: #929292;
+  font-style: italic;
+}
+
+@mixin json-schema-2020-12-keyword {
+  margin: 5px 0 5px 0;
+
+  &__children {
+    @include expansion-border;
+    padding: 0;
+
+    &--collapsed {
+      display: none;
+    }
+  }
+
+  &__name {
+    font-size: 12px;
+    margin-left: 20px;
+    font-weight: bold;
+
+    &--primary {
+      @include json-schema-2020-12-keyword--primary;
+    }
+
+    &--secondary {
+      color: #6b6b6b;
+      font-style: italic;
+    }
+
+    &--extension {
+      @include json-schema-2020-12-keyword--extension;
+    }
+  }
+
+  &__value {
+    color: #6b6b6b;
+    font-style: italic;
+    font-size: 12px;
+    font-weight: normal;
+
+    &--primary {
+      @include json-schema-2020-12-keyword--primary;
+    }
+
+    &--secondary {
+      color: #6b6b6b;
+      font-style: italic;
+    }
+
+    &--extension {
+      @include json-schema-2020-12-keyword--extension;
+    }
+
+    &--warning {
+      @include type.text_code();
+      font-style: normal;
+      display: inline-block;
+      margin-left: 10px;
+      line-height: 1.5;
+      padding: 1px 4px 1px 4px;
+      border-radius: 4px;
+      color: red;
+      border: 1px dashed red;
+    }
+  }
+}

src/core/plugins/json-schema-2020-12/components/keywords/$defs.jsx

@@ -1,19 +1,19 @@
 /**
  * @prettier
  */
-import React, { useCallback, useState } from "react"
+import React, { useCallback } from "react"
 import classNames from "classnames"
 
 import { schema } from "../../prop-types"
-import { useComponent, useIsExpanded, useIsExpandedDeeply } from "../../hooks"
-import { JSONSchemaDeepExpansionContext } from "../../context"
+import { useComponent, useIsExpanded, usePath, useLevel } from "../../hooks"
+import { JSONSchemaLevelContext, JSONSchemaPathContext } from "../../context"
 
 const $defs = ({ schema }) => {
   const $defs = schema?.$defs || {}
-  const isExpanded = useIsExpanded()
-  const isExpandedDeeply = useIsExpandedDeeply()
-  const [expanded, setExpanded] = useState(isExpanded || isExpandedDeeply)
-  const [expandedDeeply, setExpandedDeeply] = useState(false)
+  const pathToken = "$defs"
+  const { path } = usePath(pathToken)
+  const { isExpanded, setExpanded, setCollapsed } = useIsExpanded(pathToken)
+  const [level, nextLevel] = useLevel()
   const Accordion = useComponent("Accordion")
   const ExpandDeepButton = useComponent("ExpandDeepButton")
   const JSONSchema = useComponent("JSONSchema")
@@ -22,12 +22,22 @@ const $defs = ({ schema }) => {
    * Event handlers.
    */
   const handleExpansion = useCallback(() => {
-    setExpanded((prev) => !prev)
-  }, [])
-  const handleExpansionDeep = useCallback((e, expandedDeepNew) => {
-    setExpanded(expandedDeepNew)
-    setExpandedDeeply(expandedDeepNew)
-  }, [])
+    if (isExpanded) {
+      setCollapsed()
+    } else {
+      setExpanded()
+    }
+  }, [isExpanded, setExpanded, setCollapsed])
+  const handleExpansionDeep = useCallback(
+    (e, expandedDeepNew) => {
+      if (expandedDeepNew) {
+        setExpanded({ deep: true })
+      } else {
+        setCollapsed({ deep: true })
+      }
+    },
+    [setExpanded, setCollapsed]
+  )
 
   /**
    * Rendering.
@@ -37,34 +47,42 @@ const $defs = ({ schema }) => {
   }
 
   return (
-    <JSONSchemaDeepExpansionContext.Provider value={expandedDeeply}>
-      <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--$defs">
-        <Accordion expanded={expanded} onChange={handleExpansion}>
-          <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--secondary">
-            $defs
-          </span>
-        </Accordion>
-        <ExpandDeepButton expanded={expanded} onClick={handleExpansionDeep} />
-        <strong className="json-schema-2020-12__attribute json-schema-2020-12__attribute--primary">
-          object
-        </strong>
-        <ul
-          className={classNames("json-schema-2020-12-keyword__children", {
-            "json-schema-2020-12-keyword__children--collapsed": !expanded,
-          })}
+    <JSONSchemaPathContext.Provider value={path}>
+      <JSONSchemaLevelContext.Provider value={nextLevel}>
+        <div
+          className="json-schema-2020-12-keyword json-schema-2020-12-keyword--$defs"
+          data-json-schema-level={level}
         >
-          {expanded && (
-            <>
-              {Object.entries($defs).map(([schemaName, schema]) => (
-                <li key={schemaName} className="json-schema-2020-12-property">
-                  <JSONSchema name={schemaName} schema={schema} />
-                </li>
-              ))}
-            </>
-          )}
-        </ul>
-      </div>
-    </JSONSchemaDeepExpansionContext.Provider>
+          <Accordion expanded={isExpanded} onChange={handleExpansion}>
+            <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--secondary">
+              $defs
+            </span>
+          </Accordion>
+          <ExpandDeepButton
+            expanded={isExpanded}
+            onClick={handleExpansionDeep}
+          />
+          <strong className="json-schema-2020-12__attribute json-schema-2020-12__attribute--primary">
+            object
+          </strong>
+          <ul
+            className={classNames("json-schema-2020-12-keyword__children", {
+              "json-schema-2020-12-keyword__children--collapsed": !isExpanded,
+            })}
+          >
+            {isExpanded && (
+              <>
+                {Object.entries($defs).map(([schemaName, schema]) => (
+                  <li key={schemaName} className="json-schema-2020-12-property">
+                    <JSONSchema name={schemaName} schema={schema} />
+                  </li>
+                ))}
+              </>
+            )}
+          </ul>
+        </div>
+      </JSONSchemaLevelContext.Provider>
+    </JSONSchemaPathContext.Provider>
   )
 }
 

src/core/plugins/json-schema-2020-12/components/keywords/$vocabulary/$vocabulary.jsx

@@ -1,25 +1,26 @@
 /**
  * @prettier
  */
-import React, { useCallback, useState } from "react"
+import React, { useCallback } from "react"
 import classNames from "classnames"
 
 import { schema } from "../../../prop-types"
-import {
-  useComponent,
-  useIsExpanded,
-  useIsExpandedDeeply,
-} from "../../../hooks"
+import { useComponent, useIsExpanded, usePath } from "../../../hooks"
+import { JSONSchemaPathContext } from "../../../context"
 
 const $vocabulary = ({ schema }) => {
-  const isExpanded = useIsExpanded()
-  const isExpandedDeeply = useIsExpandedDeeply()
-  const [expanded, setExpanded] = useState(isExpanded || isExpandedDeeply)
+  const pathToken = "$vocabulary"
+  const { path } = usePath(pathToken)
+  const { isExpanded, setExpanded, setCollapsed } = useIsExpanded(pathToken)
   const Accordion = useComponent("Accordion")
 
   const handleExpansion = useCallback(() => {
-    setExpanded((prev) => !prev)
-  }, [])
+    if (isExpanded) {
+      setCollapsed()
+    } else {
+      setExpanded()
+    }
+  }, [isExpanded, setExpanded, setCollapsed])
 
   /**
    * Rendering.
@@ -28,31 +29,33 @@ const $vocabulary = ({ schema }) => {
   if (typeof schema.$vocabulary !== "object") return null
 
   return (
-    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--$vocabulary">
-      <Accordion expanded={expanded} onChange={handleExpansion}>
-        <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--secondary">
-          $vocabulary
-        </span>
-      </Accordion>
-      <strong className="json-schema-2020-12__attribute json-schema-2020-12__attribute--primary">
-        object
-      </strong>
-      <ul>
-        {expanded &&
-          Object.entries(schema.$vocabulary).map(([uri, enabled]) => (
-            <li
-              key={uri}
-              className={classNames("json-schema-2020-12-$vocabulary-uri", {
-                "json-schema-2020-12-$vocabulary-uri--disabled": !enabled,
-              })}
-            >
-              <span className="json-schema-2020-12-keyword__value json-schema-2020-12-keyword__value--secondary">
-                {uri}
-              </span>
-            </li>
-          ))}
-      </ul>
-    </div>
+    <JSONSchemaPathContext.Provider value={path}>
+      <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--$vocabulary">
+        <Accordion expanded={isExpanded} onChange={handleExpansion}>
+          <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--secondary">
+            $vocabulary
+          </span>
+        </Accordion>
+        <strong className="json-schema-2020-12__attribute json-schema-2020-12__attribute--primary">
+          object
+        </strong>
+        <ul>
+          {isExpanded &&
+            Object.entries(schema.$vocabulary).map(([uri, enabled]) => (
+              <li
+                key={uri}
+                className={classNames("json-schema-2020-12-$vocabulary-uri", {
+                  "json-schema-2020-12-$vocabulary-uri--disabled": !enabled,
+                })}
+              >
+                <span className="json-schema-2020-12-keyword__value json-schema-2020-12-keyword__value--secondary">
+                  {uri}
+                </span>
+              </li>
+            ))}
+        </ul>
+      </div>
+    </JSONSchemaPathContext.Provider>
   )
 }
 

src/core/plugins/json-schema-2020-12/components/keywords/$vocabulary/_$vocabulary.scss

@@ -1,7 +1,9 @@
+@use "./../../../components/mixins";
+
 .json-schema-2020-12 {
   &-keyword--\$vocabulary {
     ul {
-      @include expansion-border;
+      @include mixins.expansion-border;
     }
   }
 

src/core/plugins/json-schema-2020-12/components/keywords/AdditionalProperties.jsx

@@ -39,7 +39,11 @@ const AdditionalProperties = ({ schema }) => {
           </span>
         </>
       ) : (
-        <JSONSchema name={name} schema={additionalProperties} />
+        <JSONSchema
+          name={name}
+          schema={additionalProperties}
+          identifier="additionalProperties"
+        />
       )}
     </div>
   )

src/core/plugins/json-schema-2020-12/components/keywords/AllOf.jsx

@@ -1,7 +1,7 @@
 /**
  * @prettier
  */
-import React, { useCallback, useState } from "react"
+import React, { useCallback } from "react"
 import classNames from "classnames"
 
 import { schema } from "../../prop-types"
@@ -9,17 +9,18 @@ import {
   useFn,
   useComponent,
   useIsExpanded,
-  useIsExpandedDeeply,
+  usePath,
+  useLevel,
 } from "../../hooks"
-import { JSONSchemaDeepExpansionContext } from "../../context"
+import { JSONSchemaLevelContext, JSONSchemaPathContext } from "../../context"
 
 const AllOf = ({ schema }) => {
   const allOf = schema?.allOf || []
   const fn = useFn()
-  const isExpanded = useIsExpanded()
-  const isExpandedDeeply = useIsExpandedDeeply()
-  const [expanded, setExpanded] = useState(isExpanded || isExpandedDeeply)
-  const [expandedDeeply, setExpandedDeeply] = useState(false)
+  const pathToken = "allOf"
+  const { path } = usePath(pathToken)
+  const { isExpanded, setExpanded, setCollapsed } = useIsExpanded(pathToken)
+  const [level, nextLevel] = useLevel()
   const Accordion = useComponent("Accordion")
   const ExpandDeepButton = useComponent("ExpandDeepButton")
   const JSONSchema = useComponent("JSONSchema")
@@ -29,12 +30,22 @@ const AllOf = ({ schema }) => {
    * Event handlers.
    */
   const handleExpansion = useCallback(() => {
-    setExpanded((prev) => !prev)
-  }, [])
-  const handleExpansionDeep = useCallback((e, expandedDeepNew) => {
-    setExpanded(expandedDeepNew)
-    setExpandedDeeply(expandedDeepNew)
-  }, [])
+    if (isExpanded) {
+      setCollapsed()
+    } else {
+      setExpanded()
+    }
+  }, [isExpanded, setExpanded, setCollapsed])
+  const handleExpansionDeep = useCallback(
+    (e, expandedDeepNew) => {
+      if (expandedDeepNew) {
+        setExpanded({ deep: true })
+      } else {
+        setCollapsed({ deep: true })
+      }
+    },
+    [setExpanded, setCollapsed]
+  )
 
   /**
    * Rendering.
@@ -44,35 +55,46 @@ const AllOf = ({ schema }) => {
   }
 
   return (
-    <JSONSchemaDeepExpansionContext.Provider value={expandedDeeply}>
-      <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--allOf">
-        <Accordion expanded={expanded} onChange={handleExpansion}>
-          <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
-            All of
-          </span>
-        </Accordion>
-        <ExpandDeepButton expanded={expanded} onClick={handleExpansionDeep} />
-        <KeywordType schema={{ allOf }} />
-        <ul
-          className={classNames("json-schema-2020-12-keyword__children", {
-            "json-schema-2020-12-keyword__children--collapsed": !expanded,
-          })}
+    <JSONSchemaPathContext.Provider value={path}>
+      <JSONSchemaLevelContext.Provider value={nextLevel}>
+        <div
+          className="json-schema-2020-12-keyword json-schema-2020-12-keyword--allOf"
+          data-json-schema-level={level}
         >
-          {expanded && (
-            <>
-              {allOf.map((schema, index) => (
-                <li key={`#${index}`} className="json-schema-2020-12-property">
-                  <JSONSchema
-                    name={`#${index} ${fn.getTitle(schema)}`}
-                    schema={schema}
-                  />
-                </li>
-              ))}
-            </>
-          )}
-        </ul>
-      </div>
-    </JSONSchemaDeepExpansionContext.Provider>
+          <Accordion expanded={isExpanded} onChange={handleExpansion}>
+            <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
+              All of
+            </span>
+          </Accordion>
+          <ExpandDeepButton
+            expanded={isExpanded}
+            onClick={handleExpansionDeep}
+          />
+          <KeywordType schema={{ allOf }} />
+          <ul
+            className={classNames("json-schema-2020-12-keyword__children", {
+              "json-schema-2020-12-keyword__children--collapsed": !isExpanded,
+            })}
+          >
+            {isExpanded && (
+              <>
+                {allOf.map((schema, index) => (
+                  <li
+                    key={`#${index}`}
+                    className="json-schema-2020-12-property"
+                  >
+                    <JSONSchema
+                      name={`#${index} ${fn.getTitle(schema)}`}
+                      schema={schema}
+                    />
+                  </li>
+                ))}
+              </>
+            )}
+          </ul>
+        </div>
+      </JSONSchemaLevelContext.Provider>
+    </JSONSchemaPathContext.Provider>
   )
 }
 

src/core/plugins/json-schema-2020-12/components/keywords/AnyOf.jsx

@@ -1,7 +1,7 @@
 /**
  * @prettier
  */
-import React, { useCallback, useState } from "react"
+import React, { useCallback } from "react"
 import classNames from "classnames"
 
 import { schema } from "../../prop-types"
@@ -9,17 +9,18 @@ import {
   useFn,
   useComponent,
   useIsExpanded,
-  useIsExpandedDeeply,
+  usePath,
+  useLevel,
 } from "../../hooks"
-import { JSONSchemaDeepExpansionContext } from "../../context"
+import { JSONSchemaLevelContext, JSONSchemaPathContext } from "../../context"
 
 const AnyOf = ({ schema }) => {
   const anyOf = schema?.anyOf || []
   const fn = useFn()
-  const isExpanded = useIsExpanded()
-  const isExpandedDeeply = useIsExpandedDeeply()
-  const [expanded, setExpanded] = useState(isExpanded || isExpandedDeeply)
-  const [expandedDeeply, setExpandedDeeply] = useState(false)
+  const pathToken = "anyOf"
+  const { path } = usePath(pathToken)
+  const { isExpanded, setExpanded, setCollapsed } = useIsExpanded(pathToken)
+  const [level, nextLevel] = useLevel()
   const Accordion = useComponent("Accordion")
   const ExpandDeepButton = useComponent("ExpandDeepButton")
   const JSONSchema = useComponent("JSONSchema")
@@ -29,12 +30,22 @@ const AnyOf = ({ schema }) => {
    * Event handlers.
    */
   const handleExpansion = useCallback(() => {
-    setExpanded((prev) => !prev)
-  }, [])
-  const handleExpansionDeep = useCallback((e, expandedDeepNew) => {
-    setExpanded(expandedDeepNew)
-    setExpandedDeeply(expandedDeepNew)
-  }, [])
+    if (isExpanded) {
+      setCollapsed()
+    } else {
+      setExpanded()
+    }
+  }, [isExpanded, setExpanded, setCollapsed])
+  const handleExpansionDeep = useCallback(
+    (e, expandedDeepNew) => {
+      if (expandedDeepNew) {
+        setExpanded({ deep: true })
+      } else {
+        setCollapsed({ deep: true })
+      }
+    },
+    [setExpanded, setCollapsed]
+  )
 
   /**
    * Rendering.
@@ -44,35 +55,46 @@ const AnyOf = ({ schema }) => {
   }
 
   return (
-    <JSONSchemaDeepExpansionContext.Provider value={expandedDeeply}>
-      <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--anyOf">
-        <Accordion expanded={expanded} onChange={handleExpansion}>
-          <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
-            Any of
-          </span>
-        </Accordion>
-        <ExpandDeepButton expanded={expanded} onClick={handleExpansionDeep} />
-        <KeywordType schema={{ anyOf }} />
-        <ul
-          className={classNames("json-schema-2020-12-keyword__children", {
-            "json-schema-2020-12-keyword__children--collapsed": !expanded,
-          })}
+    <JSONSchemaPathContext.Provider value={path}>
+      <JSONSchemaLevelContext.Provider value={nextLevel}>
+        <div
+          className="json-schema-2020-12-keyword json-schema-2020-12-keyword--anyOf"
+          data-json-schema-level={level}
         >
-          {expanded && (
-            <>
-              {anyOf.map((schema, index) => (
-                <li key={`#${index}`} className="json-schema-2020-12-property">
-                  <JSONSchema
-                    name={`#${index} ${fn.getTitle(schema)}`}
-                    schema={schema}
-                  />
-                </li>
-              ))}
-            </>
-          )}
-        </ul>
-      </div>
-    </JSONSchemaDeepExpansionContext.Provider>
+          <Accordion expanded={isExpanded} onChange={handleExpansion}>
+            <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
+              Any of
+            </span>
+          </Accordion>
+          <ExpandDeepButton
+            expanded={isExpanded}
+            onClick={handleExpansionDeep}
+          />
+          <KeywordType schema={{ anyOf }} />
+          <ul
+            className={classNames("json-schema-2020-12-keyword__children", {
+              "json-schema-2020-12-keyword__children--collapsed": !isExpanded,
+            })}
+          >
+            {isExpanded && (
+              <>
+                {anyOf.map((schema, index) => (
+                  <li
+                    key={`#${index}`}
+                    className="json-schema-2020-12-property"
+                  >
+                    <JSONSchema
+                      name={`#${index} ${fn.getTitle(schema)}`}
+                      schema={schema}
+                    />
+                  </li>
+                ))}
+              </>
+            )}
+          </ul>
+        </div>
+      </JSONSchemaLevelContext.Provider>
+    </JSONSchemaPathContext.Provider>
   )
 }
 

src/core/plugins/json-schema-2020-12/components/keywords/Const.jsx

@@ -1,30 +0,0 @@
-/**
- * @prettier
- */
-import React from "react"
-
-import { schema } from "../../prop-types"
-import { useFn } from "../../hooks"
-
-const Const = ({ schema }) => {
-  const fn = useFn()
-
-  if (!fn.hasKeyword(schema, "const")) return null
-
-  return (
-    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--const">
-      <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
-        Const
-      </span>
-      <span className="json-schema-2020-12-keyword__value json-schema-2020-12-keyword__value--const">
-        {fn.stringify(schema.const)}
-      </span>
-    </div>
-  )
-}
-
-Const.propTypes = {
-  schema: schema.isRequired,
-}
-
-export default Const

src/core/plugins/json-schema-2020-12/components/keywords/Const/Const.jsx

@@ -0,0 +1,28 @@
+/**
+ * @prettier
+ */
+import React from "react"
+
+import { schema } from "../../../prop-types"
+import { useComponent, useFn } from "../../../hooks"
+
+const Const = ({ schema }) => {
+  const fn = useFn()
+  const JSONViewer = useComponent("JSONViewer")
+
+  if (!fn.hasKeyword(schema, "const")) return null
+
+  return (
+    <JSONViewer
+      name="Const"
+      value={schema.const}
+      className="json-schema-2020-12-keyword json-schema-2020-12-keyword--const"
+    />
+  )
+}
+
+Const.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default Const

src/core/plugins/json-schema-2020-12/components/keywords/Const/_const.scss

@@ -0,0 +1,11 @@
+@use "./../../mixins";
+
+.json-schema-2020-12-keyword--const {
+  .json-schema-2020-12-json-viewer__name {
+    @include mixins.json-schema-2020-12-keyword--primary;
+  }
+
+  .json-schema-2020-12-json-viewer__value {
+    @include mixins.json-schema-2020-12-keyword--primary;
+  }
+}

src/core/plugins/json-schema-2020-12/components/keywords/Constraint/_constraint.scss

@@ -1,14 +1,16 @@
+@use "./../../../../../../style/type";
+
 .json-schema-2020-12__constraint {
-  @include text_code();
+  @include type.text_code();
   margin-left: 10px;
   line-height: 1.5;
   padding: 1px 3px;
   color: white;
-  background-color: #805AD5;
+  background-color: #805ad5;
   border-radius: 4px;
 
   &--string {
     color: white;
-    background-color: #D69E2E;
+    background-color: #d69e2e;
   }
 }

src/core/plugins/json-schema-2020-12/components/keywords/Contains.jsx

@@ -23,7 +23,7 @@ const Contains = ({ schema }) => {
 
   return (
     <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--contains">
-      <JSONSchema name={name} schema={schema.contains} />
+      <JSONSchema name={name} schema={schema.contains} identifier="contains" />
     </div>
   )
 }

src/core/plugins/json-schema-2020-12/components/keywords/ContentSchema.jsx

@@ -23,7 +23,11 @@ const ContentSchema = ({ schema }) => {
 
   return (
     <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--contentSchema">
-      <JSONSchema name={name} schema={schema.contentSchema} />
+      <JSONSchema
+        name={name}
+        schema={schema.contentSchema}
+        identifier="contentSchema"
+      />
     </div>
   )
 }

src/core/plugins/json-schema-2020-12/components/keywords/Default.jsx

@@ -1,30 +0,0 @@
-/**
- * @prettier
- */
-import React from "react"
-
-import { schema } from "../../prop-types"
-import { useFn } from "../../hooks"
-
-const Default = ({ schema }) => {
-  const fn = useFn()
-
-  if (!fn.hasKeyword(schema, "default")) return null
-
-  return (
-    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--default">
-      <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
-        Default
-      </span>
-      <span className="json-schema-2020-12-keyword__value json-schema-2020-12-keyword__value--const">
-        {fn.stringify(schema.default)}
-      </span>
-    </div>
-  )
-}
-
-Default.propTypes = {
-  schema: schema.isRequired,
-}
-
-export default Default

src/core/plugins/json-schema-2020-12/components/keywords/Default/Default.jsx

@@ -0,0 +1,28 @@
+/**
+ * @prettier
+ */
+import React from "react"
+
+import { schema } from "../../../prop-types"
+import { useComponent, useFn } from "../../../hooks"
+
+const Default = ({ schema }) => {
+  const fn = useFn()
+  const JSONViewer = useComponent("JSONViewer")
+
+  if (!fn.hasKeyword(schema, "default")) return null
+
+  return (
+    <JSONViewer
+      name="Default"
+      value={schema.default}
+      className="json-schema-2020-12-keyword json-schema-2020-12-keyword--default"
+    />
+  )
+}
+
+Default.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default Default

src/core/plugins/json-schema-2020-12/components/keywords/Default/_default.scss

@@ -0,0 +1,11 @@
+@use "./../../mixins";
+
+.json-schema-2020-12-keyword--default {
+  .json-schema-2020-12-json-viewer__name {
+    @include mixins.json-schema-2020-12-keyword--primary;
+  }
+
+  .json-schema-2020-12-json-viewer__value {
+    @include mixins.json-schema-2020-12-keyword--primary;
+  }
+}

src/core/plugins/json-schema-2020-12/components/keywords/DependentSchemas.jsx

@@ -1,19 +1,19 @@
 /**
  * @prettier
  */
-import React, { useCallback, useState } from "react"
+import React, { useCallback } from "react"
 import classNames from "classnames"
 
 import { schema } from "../../prop-types"
-import { useComponent, useIsExpanded, useIsExpandedDeeply } from "../../hooks"
-import { JSONSchemaDeepExpansionContext } from "../../context"
+import { useComponent, useIsExpanded, useLevel, usePath } from "../../hooks"
+import { JSONSchemaLevelContext, JSONSchemaPathContext } from "../../context"
 
 const DependentSchemas = ({ schema }) => {
   const dependentSchemas = schema?.dependentSchemas || []
-  const isExpanded = useIsExpanded()
-  const isExpandedDeeply = useIsExpandedDeeply()
-  const [expanded, setExpanded] = useState(isExpanded || isExpandedDeeply)
-  const [expandedDeeply, setExpandedDeeply] = useState(false)
+  const pathToken = "dependentSchemas"
+  const { path } = usePath(pathToken)
+  const { isExpanded, setExpanded, setCollapsed } = useIsExpanded(pathToken)
+  const [level, nextLevel] = useLevel()
   const Accordion = useComponent("Accordion")
   const ExpandDeepButton = useComponent("ExpandDeepButton")
   const JSONSchema = useComponent("JSONSchema")
@@ -22,12 +22,22 @@ const DependentSchemas = ({ schema }) => {
    * Event handlers.
    */
   const handleExpansion = useCallback(() => {
-    setExpanded((prev) => !prev)
-  }, [])
-  const handleExpansionDeep = useCallback((e, expandedDeepNew) => {
-    setExpanded(expandedDeepNew)
-    setExpandedDeeply(expandedDeepNew)
-  }, [])
+    if (isExpanded) {
+      setCollapsed()
+    } else {
+      setExpanded()
+    }
+  }, [isExpanded, setExpanded, setCollapsed])
+  const handleExpansionDeep = useCallback(
+    (e, expandedDeepNew) => {
+      if (expandedDeepNew) {
+        setExpanded({ deep: true })
+      } else {
+        setCollapsed({ deep: true })
+      }
+    },
+    [setExpanded, setCollapsed]
+  )
 
   /**
    * Rendering.
@@ -36,34 +46,47 @@ const DependentSchemas = ({ schema }) => {
   if (Object.keys(dependentSchemas).length === 0) return null
 
   return (
-    <JSONSchemaDeepExpansionContext.Provider value={expandedDeeply}>
-      <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--dependentSchemas">
-        <Accordion expanded={expanded} onChange={handleExpansion}>
-          <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
-            Dependent schemas
-          </span>
-        </Accordion>
-        <ExpandDeepButton expanded={expanded} onClick={handleExpansionDeep} />
-        <strong className="json-schema-2020-12__attribute json-schema-2020-12__attribute--primary">
-          object
-        </strong>
-        <ul
-          className={classNames("json-schema-2020-12-keyword__children", {
-            "json-schema-2020-12-keyword__children--collapsed": !expanded,
-          })}
+    <JSONSchemaPathContext.Provider value={path}>
+      <JSONSchemaLevelContext.Provider value={nextLevel}>
+        <div
+          className="json-schema-2020-12-keyword json-schema-2020-12-keyword--dependentSchemas"
+          data-json-schema-level={level}
         >
-          {expanded && (
-            <>
-              {Object.entries(dependentSchemas).map(([schemaName, schema]) => (
-                <li key={schemaName} className="json-schema-2020-12-property">
-                  <JSONSchema name={schemaName} schema={schema} />
-                </li>
-              ))}
-            </>
-          )}
-        </ul>
-      </div>
-    </JSONSchemaDeepExpansionContext.Provider>
+          <Accordion expanded={isExpanded} onChange={handleExpansion}>
+            <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
+              Dependent schemas
+            </span>
+          </Accordion>
+          <ExpandDeepButton
+            expanded={isExpanded}
+            onClick={handleExpansionDeep}
+          />
+          <strong className="json-schema-2020-12__attribute json-schema-2020-12__attribute--primary">
+            object
+          </strong>
+          <ul
+            className={classNames("json-schema-2020-12-keyword__children", {
+              "json-schema-2020-12-keyword__children--collapsed": !isExpanded,
+            })}
+          >
+            {isExpanded && (
+              <>
+                {Object.entries(dependentSchemas).map(
+                  ([schemaName, schema]) => (
+                    <li
+                      key={schemaName}
+                      className="json-schema-2020-12-property"
+                    >
+                      <JSONSchema name={schemaName} schema={schema} />
+                    </li>
+                  )
+                )}
+              </>
+            )}
+          </ul>
+        </div>
+      </JSONSchemaLevelContext.Provider>
+    </JSONSchemaPathContext.Provider>
   )
 }
 

src/core/plugins/json-schema-2020-12/components/keywords/Else.jsx

@@ -23,7 +23,7 @@ const Else = ({ schema }) => {
 
   return (
     <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--if">
-      <JSONSchema name={name} schema={schema.else} />
+      <JSONSchema name={name} schema={schema.else} identifier="else" />
     </div>
   )
 }

src/core/plugins/json-schema-2020-12/components/keywords/Enum/Enum.jsx

@@ -4,32 +4,19 @@
 import React from "react"
 
 import { schema } from "../../../prop-types"
-import { useFn } from "../../../hooks"
+import { useComponent } from "../../../hooks"
 
 const Enum = ({ schema }) => {
-  const fn = useFn()
+  const JSONViewer = useComponent("JSONViewer")
 
   if (!Array.isArray(schema?.enum)) return null
 
   return (
-    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--enum">
-      <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
-        Allowed values
-      </span>
-      <ul>
-        {schema.enum.map((element) => {
-          const strigifiedElement = fn.stringify(element)
-
-          return (
-            <li key={strigifiedElement}>
-              <span className="json-schema-2020-12-keyword__value json-schema-2020-12-keyword__value--const">
-                {strigifiedElement}
-              </span>
-            </li>
-          )
-        })}
-      </ul>
-    </div>
+    <JSONViewer
+      name="Enum"
+      value={schema.enum}
+      className="json-schema-2020-12-keyword json-schema-2020-12-keyword--enum"
+    />
   )
 }
 

src/core/plugins/json-schema-2020-12/components/keywords/Enum/_enum.scss

@@ -1,12 +1,11 @@
-.json-schema-2020-12-keyword--enum {
-  & > ul {
-    display: inline-block;
-    padding: 0;
-    margin: 0;
+@use "./../../mixins";
 
-    li {
-      display: inline;
-      list-style-type: none;
-    }
+.json-schema-2020-12-keyword--enum {
+  .json-schema-2020-12-json-viewer__name {
+    @include mixins.json-schema-2020-12-keyword--primary;
+  }
+
+  .json-schema-2020-12-json-viewer__value {
+    @include mixins.json-schema-2020-12-keyword--primary;
   }
 }

src/core/plugins/json-schema-2020-12/components/keywords/Examples/Examples.jsx

@@ -0,0 +1,30 @@
+/**
+ * @prettier
+ */
+import React from "react"
+
+import { schema } from "../../../prop-types"
+import { useComponent } from "../../../hooks"
+
+const Examples = ({ schema }) => {
+  const examples = schema?.examples || []
+  const JSONViewer = useComponent("JSONViewer")
+
+  if (!Array.isArray(examples) || examples.length === 0) {
+    return null
+  }
+
+  return (
+    <JSONViewer
+      name="Examples"
+      value={schema.examples}
+      className="json-schema-2020-12-keyword json-schema-2020-12-keyword--examples"
+    />
+  )
+}
+
+Examples.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default Examples

src/core/plugins/json-schema-2020-12/components/keywords/Examples/_examples.scss

@@ -0,0 +1,11 @@
+@use "./../../mixins";
+
+.json-schema-2020-12-keyword--examples {
+  .json-schema-2020-12-json-viewer__name {
+    @include mixins.json-schema-2020-12-keyword--primary;
+  }
+
+  .json-schema-2020-12-json-viewer__value {
+    @include mixins.json-schema-2020-12-keyword--primary;
+  }
+}

src/core/plugins/json-schema-2020-12/components/keywords/ExtensionKeywords/ExtensionKeywords.jsx

@@ -0,0 +1,103 @@
+/**
+ * @prettier
+ */
+import React, { useCallback } from "react"
+import classNames from "classnames"
+
+import { schema } from "../../../prop-types"
+
+import {
+  useComponent,
+  useIsExpanded,
+  useFn,
+  usePath,
+  useLevel,
+  useConfig,
+} from "../../../hooks"
+import { JSONSchemaLevelContext, JSONSchemaPathContext } from "../../../context"
+
+const ExtensionKeywords = ({ schema }) => {
+  const fn = useFn()
+  const pathToken = "ExtensionKeywords"
+  const { path } = usePath(pathToken)
+  const { isExpanded, setExpanded, setCollapsed } = useIsExpanded(pathToken)
+  const [level, nextLevel] = useLevel()
+  const Accordion = useComponent("Accordion")
+  const ExpandDeepButton = useComponent("ExpandDeepButton")
+  const JSONViewer = useComponent("JSONViewer")
+  const { showExtensionKeywords } = useConfig("showExtensionKeywords")
+  const extensionKeywords = fn.getExtensionKeywords(schema)
+
+  /**
+   * Event handlers.
+   */
+  const handleExpansion = useCallback(() => {
+    if (isExpanded) {
+      setCollapsed()
+    } else {
+      setExpanded()
+    }
+  }, [isExpanded, setExpanded, setCollapsed])
+  const handleExpansionDeep = useCallback(
+    (e, expandedDeepNew) => {
+      if (expandedDeepNew) {
+        setExpanded({ deep: true })
+      } else {
+        setCollapsed({ deep: true })
+      }
+    },
+    [setExpanded, setCollapsed]
+  )
+
+  /**
+   * Rendering.
+   */
+  if (!showExtensionKeywords || extensionKeywords.length === 0) {
+    return null
+  }
+
+  return (
+    <JSONSchemaPathContext.Provider value={path}>
+      <JSONSchemaLevelContext.Provider value={nextLevel}>
+        <div
+          className="json-schema-2020-12-keyword json-schema-2020-12-keyword--extension-keywords"
+          data-json-schema-level={level}
+        >
+          <Accordion expanded={isExpanded} onChange={handleExpansion}>
+            <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--extension">
+              Extension Keywords
+            </span>
+          </Accordion>
+          <ExpandDeepButton
+            expanded={isExpanded}
+            onClick={handleExpansionDeep}
+          />
+          <ul
+            className={classNames("json-schema-2020-12-keyword__children", {
+              "json-schema-2020-12-keyword__children--collapsed": !isExpanded,
+            })}
+          >
+            {isExpanded && (
+              <>
+                {extensionKeywords.map((keyword) => (
+                  <JSONViewer
+                    key={keyword}
+                    name={keyword}
+                    value={schema[keyword]}
+                    className="json-schema-2020-12-json-viewer-extension-keyword"
+                  />
+                ))}
+              </>
+            )}
+          </ul>
+        </div>
+      </JSONSchemaLevelContext.Provider>
+    </JSONSchemaPathContext.Provider>
+  )
+}
+
+ExtensionKeywords.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default ExtensionKeywords

src/core/plugins/json-schema-2020-12/components/keywords/ExtensionKeywords/_extension-keywords.scss

@@ -0,0 +1,11 @@
+@use "./../../mixins";
+
+.json-schema-2020-12-json-viewer-extension-keyword {
+  .json-schema-2020-12-json-viewer__name {
+    @include mixins.json-schema-2020-12-keyword--extension;
+  }
+
+  .json-schema-2020-12-json-viewer__value {
+    @include mixins.json-schema-2020-12-keyword--extension;
+  }
+}

src/core/plugins/json-schema-2020-12/components/keywords/If.jsx

@@ -23,7 +23,7 @@ const If = ({ schema }) => {
 
   return (
     <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--if">
-      <JSONSchema name={name} schema={schema.if} />
+      <JSONSchema name={name} schema={schema.if} identifier="if" />
     </div>
   )
 }

src/core/plugins/json-schema-2020-12/components/keywords/Items.jsx

@@ -23,7 +23,7 @@ const Items = ({ schema }) => {
 
   return (
     <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--items">
-      <JSONSchema name={name} schema={schema.items} />
+      <JSONSchema name={name} schema={schema.items} identifier="items" />
     </div>
   )
 }

src/core/plugins/json-schema-2020-12/components/keywords/Not.jsx

@@ -23,7 +23,7 @@ const Not = ({ schema }) => {
 
   return (
     <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--not">
-      <JSONSchema name={name} schema={schema.not} />
+      <JSONSchema name={name} schema={schema.not} identifier="not" />
     </div>
   )
 }

src/core/plugins/json-schema-2020-12/components/keywords/OneOf.jsx

@@ -1,7 +1,7 @@
 /**
  * @prettier
  */
-import React, { useCallback, useState } from "react"
+import React, { useCallback } from "react"
 import classNames from "classnames"
 
 import { schema } from "../../prop-types"
@@ -9,17 +9,18 @@ import {
   useFn,
   useComponent,
   useIsExpanded,
-  useIsExpandedDeeply,
+  usePath,
+  useLevel,
 } from "../../hooks"
-import { JSONSchemaDeepExpansionContext } from "../../context"
+import { JSONSchemaLevelContext, JSONSchemaPathContext } from "../../context"
 
 const OneOf = ({ schema }) => {
   const oneOf = schema?.oneOf || []
   const fn = useFn()
-  const isExpanded = useIsExpanded()
-  const isExpandedDeeply = useIsExpandedDeeply()
-  const [expanded, setExpanded] = useState(isExpanded || isExpandedDeeply)
-  const [expandedDeeply, setExpandedDeeply] = useState(false)
+  const pathToken = "oneOf"
+  const { path } = usePath(pathToken)
+  const { isExpanded, setExpanded, setCollapsed } = useIsExpanded(pathToken)
+  const [level, nextLevel] = useLevel()
   const Accordion = useComponent("Accordion")
   const ExpandDeepButton = useComponent("ExpandDeepButton")
   const JSONSchema = useComponent("JSONSchema")
@@ -29,12 +30,22 @@ const OneOf = ({ schema }) => {
    * Event handlers.
    */
   const handleExpansion = useCallback(() => {
-    setExpanded((prev) => !prev)
-  }, [])
-  const handleExpansionDeep = useCallback((e, expandedDeepNew) => {
-    setExpanded(expandedDeepNew)
-    setExpandedDeeply(expandedDeepNew)
-  }, [])
+    if (isExpanded) {
+      setCollapsed()
+    } else {
+      setExpanded()
+    }
+  }, [isExpanded, setExpanded, setCollapsed])
+  const handleExpansionDeep = useCallback(
+    (e, expandedDeepNew) => {
+      if (expandedDeepNew) {
+        setExpanded({ deep: true })
+      } else {
+        setCollapsed({ deep: true })
+      }
+    },
+    [setExpanded, setCollapsed]
+  )
 
   /**
    * Rendering.
@@ -44,35 +55,46 @@ const OneOf = ({ schema }) => {
   }
 
   return (
-    <JSONSchemaDeepExpansionContext.Provider value={expandedDeeply}>
-      <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--oneOf">
-        <Accordion expanded={expanded} onChange={handleExpansion}>
-          <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
-            One of
-          </span>
-        </Accordion>
-        <ExpandDeepButton expanded={expanded} onClick={handleExpansionDeep} />
-        <KeywordType schema={{ oneOf }} />
-        <ul
-          className={classNames("json-schema-2020-12-keyword__children", {
-            "json-schema-2020-12-keyword__children--collapsed": !expanded,
-          })}
+    <JSONSchemaPathContext.Provider value={path}>
+      <JSONSchemaLevelContext.Provider value={nextLevel}>
+        <div
+          className="json-schema-2020-12-keyword json-schema-2020-12-keyword--oneOf"
+          data-json-schema-level={level}
         >
-          {expanded && (
-            <>
-              {oneOf.map((schema, index) => (
-                <li key={`#${index}`} className="json-schema-2020-12-property">
-                  <JSONSchema
-                    name={`#${index} ${fn.getTitle(schema)}`}
-                    schema={schema}
-                  />
-                </li>
-              ))}
-            </>
-          )}
-        </ul>
-      </div>
-    </JSONSchemaDeepExpansionContext.Provider>
+          <Accordion expanded={isExpanded} onChange={handleExpansion}>
+            <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
+              One of
+            </span>
+          </Accordion>
+          <ExpandDeepButton
+            expanded={isExpanded}
+            onClick={handleExpansionDeep}
+          />
+          <KeywordType schema={{ oneOf }} />
+          <ul
+            className={classNames("json-schema-2020-12-keyword__children", {
+              "json-schema-2020-12-keyword__children--collapsed": !isExpanded,
+            })}
+          >
+            {isExpanded && (
+              <>
+                {oneOf.map((schema, index) => (
+                  <li
+                    key={`#${index}`}
+                    className="json-schema-2020-12-property"
+                  >
+                    <JSONSchema
+                      name={`#${index} ${fn.getTitle(schema)}`}
+                      schema={schema}
+                    />
+                  </li>
+                ))}
+              </>
+            )}
+          </ul>
+        </div>
+      </JSONSchemaLevelContext.Provider>
+    </JSONSchemaPathContext.Provider>
   )
 }
 

src/core/plugins/json-schema-2020-12/components/keywords/PatternProperties/PatternProperties.jsx

@@ -4,11 +4,13 @@
 import React from "react"
 
 import { schema } from "../../../prop-types"
-import { useComponent } from "../../../hooks"
+import { useComponent, usePath } from "../../../hooks"
+import { JSONSchemaPathContext } from "../../../context"
 
 const PatternProperties = ({ schema }) => {
   const patternProperties = schema?.patternProperties || {}
   const JSONSchema = useComponent("JSONSchema")
+  const { path } = usePath("patternProperties")
 
   /**
    * Rendering.
@@ -18,15 +20,17 @@ const PatternProperties = ({ schema }) => {
   }
 
   return (
-    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--patternProperties">
-      <ul>
-        {Object.entries(patternProperties).map(([propertyName, schema]) => (
-          <li key={propertyName} className="json-schema-2020-12-property">
-            <JSONSchema name={propertyName} schema={schema} />
-          </li>
-        ))}
-      </ul>
-    </div>
+    <JSONSchemaPathContext.Provider value={path}>
+      <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--patternProperties">
+        <ul>
+          {Object.entries(patternProperties).map(([propertyName, schema]) => (
+            <li key={propertyName} className="json-schema-2020-12-property">
+              <JSONSchema name={propertyName} schema={schema} />
+            </li>
+          ))}
+        </ul>
+      </div>
+    </JSONSchemaPathContext.Provider>
   )
 }
 

src/core/plugins/json-schema-2020-12/components/keywords/PatternProperties/_pattern-properties.scss

@@ -1,3 +1,5 @@
+@use "./../../../../../../style/variables" as *;
+
 .json-schema-2020-12 {
   &-keyword--patternProperties {
     ul {

src/core/plugins/json-schema-2020-12/components/keywords/PrefixItems.jsx

@@ -1,25 +1,26 @@
 /**
  * @prettier
  */
-import React, { useCallback, useState } from "react"
+import React, { useCallback } from "react"
 import classNames from "classnames"
 
 import { schema } from "../../prop-types"
 import {
   useFn,
   useComponent,
-  useIsExpandedDeeply,
   useIsExpanded,
+  usePath,
+  useLevel,
 } from "../../hooks"
-import { JSONSchemaDeepExpansionContext } from "../../context"
+import { JSONSchemaLevelContext, JSONSchemaPathContext } from "../../context"
 
 const PrefixItems = ({ schema }) => {
   const prefixItems = schema?.prefixItems || []
   const fn = useFn()
-  const isExpanded = useIsExpanded()
-  const isExpandedDeeply = useIsExpandedDeeply()
-  const [expanded, setExpanded] = useState(isExpanded || isExpandedDeeply)
-  const [expandedDeeply, setExpandedDeeply] = useState(false)
+  const pathToken = "prefixItems"
+  const { path } = usePath(pathToken)
+  const { isExpanded, setExpanded, setCollapsed } = useIsExpanded(pathToken)
+  const [level, nextLevel] = useLevel()
   const Accordion = useComponent("Accordion")
   const ExpandDeepButton = useComponent("ExpandDeepButton")
   const JSONSchema = useComponent("JSONSchema")
@@ -29,12 +30,22 @@ const PrefixItems = ({ schema }) => {
    * Event handlers.
    */
   const handleExpansion = useCallback(() => {
-    setExpanded((prev) => !prev)
-  }, [])
-  const handleExpansionDeep = useCallback((e, expandedDeepNew) => {
-    setExpanded(expandedDeepNew)
-    setExpandedDeeply(expandedDeepNew)
-  }, [])
+    if (isExpanded) {
+      setCollapsed()
+    } else {
+      setExpanded()
+    }
+  }, [isExpanded, setExpanded, setCollapsed])
+  const handleExpansionDeep = useCallback(
+    (e, expandedDeepNew) => {
+      if (expandedDeepNew) {
+        setExpanded({ deep: true })
+      } else {
+        setCollapsed({ deep: true })
+      }
+    },
+    [setExpanded, setCollapsed]
+  )
 
   /**
    * Rendering.
@@ -44,35 +55,46 @@ const PrefixItems = ({ schema }) => {
   }
 
   return (
-    <JSONSchemaDeepExpansionContext.Provider value={expandedDeeply}>
-      <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--prefixItems">
-        <Accordion expanded={expanded} onChange={handleExpansion}>
-          <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
-            Prefix items
-          </span>
-        </Accordion>
-        <ExpandDeepButton expanded={expanded} onClick={handleExpansionDeep} />
-        <KeywordType schema={{ prefixItems }} />
-        <ul
-          className={classNames("json-schema-2020-12-keyword__children", {
-            "json-schema-2020-12-keyword__children--collapsed": !expanded,
-          })}
+    <JSONSchemaPathContext.Provider value={path}>
+      <JSONSchemaLevelContext.Provider value={nextLevel}>
+        <div
+          className="json-schema-2020-12-keyword json-schema-2020-12-keyword--prefixItems"
+          data-json-schema-level={level}
         >
-          {expanded && (
-            <>
-              {prefixItems.map((schema, index) => (
-                <li key={`#${index}`} className="json-schema-2020-12-property">
-                  <JSONSchema
-                    name={`#${index} ${fn.getTitle(schema)}`}
-                    schema={schema}
-                  />
-                </li>
-              ))}
-            </>
-          )}
-        </ul>
-      </div>
-    </JSONSchemaDeepExpansionContext.Provider>
+          <Accordion expanded={isExpanded} onChange={handleExpansion}>
+            <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
+              Prefix items
+            </span>
+          </Accordion>
+          <ExpandDeepButton
+            expanded={isExpanded}
+            onClick={handleExpansionDeep}
+          />
+          <KeywordType schema={{ prefixItems }} />
+          <ul
+            className={classNames("json-schema-2020-12-keyword__children", {
+              "json-schema-2020-12-keyword__children--collapsed": !isExpanded,
+            })}
+          >
+            {isExpanded && (
+              <>
+                {prefixItems.map((schema, index) => (
+                  <li
+                    key={`#${index}`}
+                    className="json-schema-2020-12-property"
+                  >
+                    <JSONSchema
+                      name={`#${index} ${fn.getTitle(schema)}`}
+                      schema={schema}
+                    />
+                  </li>
+                ))}
+              </>
+            )}
+          </ul>
+        </div>
+      </JSONSchemaLevelContext.Provider>
+    </JSONSchemaPathContext.Provider>
   )
 }
 

src/core/plugins/json-schema-2020-12/components/keywords/Properties/Properties.jsx

@@ -5,13 +5,15 @@ import React from "react"
 import classNames from "classnames"
 
 import { schema } from "../../../prop-types"
-import { useFn, useComponent } from "../../../hooks"
+import { useFn, useComponent, usePath } from "../../../hooks"
+import { JSONSchemaPathContext } from "../../../context"
 
 const Properties = ({ schema }) => {
   const fn = useFn()
   const properties = schema?.properties || {}
   const required = Array.isArray(schema?.required) ? schema.required : []
   const JSONSchema = useComponent("JSONSchema")
+  const { path } = usePath("properties")
 
   /**
    * Rendering.
@@ -21,32 +23,34 @@ const Properties = ({ schema }) => {
   }
 
   return (
-    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--properties">
-      <ul>
-        {Object.entries(properties).map(([propertyName, propertySchema]) => {
-          const isRequired = required.includes(propertyName)
-          const dependentRequired = fn.getDependentRequired(
-            propertyName,
-            schema
-          )
+    <JSONSchemaPathContext.Provider value={path}>
+      <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--properties">
+        <ul>
+          {Object.entries(properties).map(([propertyName, propertySchema]) => {
+            const isRequired = required.includes(propertyName)
+            const dependentRequired = fn.getDependentRequired(
+              propertyName,
+              schema
+            )
 
-          return (
-            <li
-              key={propertyName}
-              className={classNames("json-schema-2020-12-property", {
-                "json-schema-2020-12-property--required": isRequired,
-              })}
-            >
-              <JSONSchema
-                name={propertyName}
-                schema={propertySchema}
-                dependentRequired={dependentRequired}
-              />
-            </li>
-          )
-        })}
-      </ul>
-    </div>
+            return (
+              <li
+                key={propertyName}
+                className={classNames("json-schema-2020-12-property", {
+                  "json-schema-2020-12-property--required": isRequired,
+                })}
+              >
+                <JSONSchema
+                  name={propertyName}
+                  schema={propertySchema}
+                  dependentRequired={dependentRequired}
+                />
+              </li>
+            )
+          })}
+        </ul>
+      </div>
+    </JSONSchemaPathContext.Provider>
   )
 }
 

src/core/plugins/json-schema-2020-12/components/keywords/Properties/_properties.scss

@@ -11,8 +11,11 @@
     list-style-type: none;
 
     &--required {
-      & > .json-schema-2020-12:first-of-type > .json-schema-2020-12-head .json-schema-2020-12__title:after {
-        content: '*';
+      &
+        > .json-schema-2020-12:first-of-type
+        > .json-schema-2020-12-head
+        .json-schema-2020-12__title:after {
+        content: "*";
         color: red;
         font-weight: bold;
       }

src/core/plugins/json-schema-2020-12/components/keywords/PropertyNames.jsx

@@ -23,7 +23,11 @@ const PropertyNames = ({ schema }) => {
 
   return (
     <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--propertyNames">
-      <JSONSchema name={name} schema={propertyNames} />
+      <JSONSchema
+        name={name}
+        schema={propertyNames}
+        identifier="propertyNames"
+      />
     </div>
   )
 }

src/core/plugins/json-schema-2020-12/components/keywords/Then.jsx

@@ -23,7 +23,7 @@ const Then = ({ schema }) => {
 
   return (
     <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--then">
-      <JSONSchema name={name} schema={schema.then} />
+      <JSONSchema name={name} schema={schema.then} identifier="then" />
     </div>
   )
 }

src/core/plugins/json-schema-2020-12/components/keywords/Title/_title.scss

@@ -1,6 +1,9 @@
+@use "./../../../../../../style/variables" as *;
+@use "./../../../../../../style/type";
+
 .json-schema-2020-12 {
   &__title {
-    @include text_headline($section-models-model-title-font-color);
+    @include type.text_headline($section-models-model-title-font-color);
     display: inline-block;
     font-weight: bold;
     font-size: 12px;
@@ -15,7 +18,7 @@
     margin: 7px 0;
 
     .json-schema-2020-12__title {
-      @include text_code();
+      @include type.text_code();
       font-size: 12px;
       vertical-align: middle;
     }

src/core/plugins/json-schema-2020-12/components/keywords/UnevaluatedItems.jsx

@@ -24,7 +24,11 @@ const UnevaluatedItems = ({ schema }) => {
 
   return (
     <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--unevaluatedItems">
-      <JSONSchema name={name} schema={unevaluatedItems} />
+      <JSONSchema
+        name={name}
+        schema={unevaluatedItems}
+        identifier="unevaluatedItems"
+      />
     </div>
   )
 }

src/core/plugins/json-schema-2020-12/components/keywords/UnevaluatedProperties.jsx

@@ -24,7 +24,11 @@ const UnevaluatedProperties = ({ schema }) => {
 
   return (
     <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--unevaluatedProperties">
-      <JSONSchema name={name} schema={unevaluatedProperties} />
+      <JSONSchema
+        name={name}
+        schema={unevaluatedProperties}
+        identifier="unevaluatedProperties"
+      />
     </div>
   )
 }

src/core/plugins/json-schema-2020-12/components/keywords/_all.scss

@@ -1,68 +1,25 @@
+@use "./../../../../../style/variables" as *;
+@use "./../mixins";
+@use "./$vocabulary/$vocabulary" as vocabulary;
+@use "./Const/const";
+@use "./Constraint/constraint";
+@use "./Default/default";
+@use "./DependentRequired/dependent-required";
+@use "./Description/description";
+@use "./Enum/enum";
+@use "./Examples/examples";
+@use "./ExtensionKeywords/extension-keywords";
+@use "./PatternProperties/pattern-properties";
+@use "./Properties/properties";
+@use "./Title/title";
+
 .json-schema-2020-12-keyword {
-  margin: 5px 0 5px 0;
-
-  &__children {
-    @include expansion-border;
-    padding: 0;
-
-    &--collapsed {
-      display: none;
-    }
-  }
-
-  &__name {
-    font-size: 12px;
-    margin-left: 20px;
-    font-weight: bold;
-
-    &--primary {
-      color: $text-code-default-font-color;
-      font-style: normal;
-    }
-
-    &--secondary {
-      color: #6b6b6b;
-      font-style: italic;
-    }
-  }
-
-  &__value {
-    color: #6b6b6b;
-    font-style: italic;
-    font-size: 12px;
-    font-weight: normal;
-
-    &--primary {
-      color: $text-code-default-font-color;
-      font-style: normal;
-    }
-
-    &--secondary {
-      color: #6b6b6b;
-      font-style: italic;
-    }
-
-    &--const {
-      @include text_code();
-      color: #6b6b6b;
-      font-style: normal;
-      display: inline-block;
-      margin-left: 10px;
-      line-height: 1.5;
-      padding: 1px 4px 1px 4px;
-      border: 1px dashed #6b6b6b;
-      border-radius: 4px;
-    }
-
-    &--warning {
-      @extend .json-schema-2020-12-keyword__value--const;
-      color: red;
-      border: 1px dashed red;
-    }
-  }
+  @include mixins.json-schema-2020-12-keyword;
 }
-.json-schema-2020-12-keyword__name--secondary + .json-schema-2020-12-keyword__value--secondary::before {
-  content: '='
+
+.json-schema-2020-12-keyword__name--secondary
+  + .json-schema-2020-12-keyword__value--secondary::before {
+  content: "=";
 }
 
 .json-schema-2020-12__attribute {
@@ -72,7 +29,7 @@
   text-transform: lowercase;
   padding-left: 10px;
 
-  &--primary  {
+  &--primary {
     color: $prop-type-font-color;
   }
 
@@ -84,12 +41,3 @@
     color: red;
   }
 }
-
-@import './$vocabulary/$vocabulary';
-@import './Description/description';
-@import './Title/title';
-@import './Properties/properties';
-@import './PatternProperties/pattern-properties';
-@import './Enum/enum';
-@import './Constraint/constraint';
-@import './DependentRequired/dependent-required';

src/core/plugins/json-schema-2020-12/context.js

@@ -9,7 +9,6 @@ JSONSchemaContext.displayName = "JSONSchemaContext"
 export const JSONSchemaLevelContext = createContext(0)
 JSONSchemaLevelContext.displayName = "JSONSchemaLevelContext"
 
-export const JSONSchemaDeepExpansionContext = createContext(false)
-JSONSchemaDeepExpansionContext.displayName = "JSONSchemaDeepExpansionContext"
-
 export const JSONSchemaCyclesContext = createContext(new Set())
+
+export const JSONSchemaPathContext = createContext([])

src/core/plugins/json-schema-2020-12/enum.js

@@ -0,0 +1,10 @@
+/**
+ * @prettier
+ */
+export class JSONSchemaIsExpandedState {
+  static Collapsed = "collapsed"
+
+  static Expanded = "expanded"
+
+  static DeeplyExpanded = "deeply-expanded"
+}

src/core/plugins/json-schema-2020-12/fn.js

@@ -1,8 +1,6 @@
 /**
  * @prettier
  */
-import { useFn } from "./hooks"
-
 export const upperFirst = (value) => {
   if (typeof value === "string") {
     return `${value.charAt(0).toUpperCase()}${value.slice(1)}`
@@ -13,148 +11,156 @@ export const upperFirst = (value) => {
 /**
  * Lookup can be `basic` or `extended`. By default the lookup is `extended`.
  */
-export const getTitle = (schema, { lookup = "extended" } = {}) => {
-  const fn = useFn()
+export const makeGetTitle = (fnAccessor) => {
+  const getTitle = (schema, { lookup = "extended" } = {}) => {
+    const fn = fnAccessor()
 
-  if (schema?.title != null) return fn.upperFirst(String(schema.title))
-  if (lookup === "extended") {
-    if (schema?.$anchor != null) return fn.upperFirst(String(schema.$anchor))
-    if (schema?.$id != null) return String(schema.$id)
+    if (schema?.title != null) return fn.upperFirst(String(schema.title))
+    if (lookup === "extended") {
+      if (schema?.$anchor != null) return fn.upperFirst(String(schema.$anchor))
+      if (schema?.$id != null) return String(schema.$id)
+    }
+
+    return ""
   }
 
-  return ""
+  return getTitle
 }
 
-export const getType = (schema, processedSchemas = new WeakSet()) => {
-  const fn = useFn()
+export const makeGetType = (fnAccessor) => {
+  const getType = (schema, processedSchemas = new WeakSet()) => {
+    const fn = fnAccessor()
 
-  if (schema == null) {
-    return "any"
-  }
-
-  if (fn.isBooleanJSONSchema(schema)) {
-    return schema ? "any" : "never"
-  }
-
-  if (typeof schema !== "object") {
-    return "any"
-  }
-
-  if (processedSchemas.has(schema)) {
-    return "any" // detect a cycle
-  }
-  processedSchemas.add(schema)
-
-  const { type, prefixItems, items } = schema
-
-  const getArrayType = () => {
-    if (Array.isArray(prefixItems)) {
-      const prefixItemsTypes = prefixItems.map((itemSchema) =>
-        getType(itemSchema, processedSchemas)
-      )
-      const itemsType = items ? getType(items, processedSchemas) : "any"
-      return `array<[${prefixItemsTypes.join(", ")}], ${itemsType}>`
-    } else if (items) {
-      const itemsType = getType(items, processedSchemas)
-      return `array<${itemsType}>`
-    } else {
-      return "array<any>"
+    if (schema == null) {
+      return "any"
     }
-  }
 
-  const inferType = () => {
-    if (
-      Object.hasOwn(schema, "prefixItems") ||
-      Object.hasOwn(schema, "items") ||
-      Object.hasOwn(schema, "contains")
-    ) {
-      return getArrayType()
-    } else if (
-      Object.hasOwn(schema, "properties") ||
-      Object.hasOwn(schema, "additionalProperties") ||
-      Object.hasOwn(schema, "patternProperties")
-    ) {
-      return "object"
-    } else if (["int32", "int64"].includes(schema.format)) {
-      // OpenAPI 3.1.0 integer custom formats
-      return "integer"
-    } else if (["float", "double"].includes(schema.format)) {
-      // OpenAPI 3.1.0 number custom formats
-      return "number"
-    } else if (
-      Object.hasOwn(schema, "minimum") ||
-      Object.hasOwn(schema, "maximum") ||
-      Object.hasOwn(schema, "exclusiveMinimum") ||
-      Object.hasOwn(schema, "exclusiveMaximum") ||
-      Object.hasOwn(schema, "multipleOf")
-    ) {
-      return "number | integer"
-    } else if (
-      Object.hasOwn(schema, "pattern") ||
-      Object.hasOwn(schema, "format") ||
-      Object.hasOwn(schema, "minLength") ||
-      Object.hasOwn(schema, "maxLength")
-    ) {
-      return "string"
-    } else if (typeof schema.const !== "undefined") {
-      if (schema.const === null) {
-        return "null"
-      } else if (typeof schema.const === "boolean") {
-        return "boolean"
-      } else if (typeof schema.const === "number") {
-        return Number.isInteger(schema.const) ? "integer" : "number"
-      } else if (typeof schema.const === "string") {
-        return "string"
-      } else if (Array.isArray(schema.const)) {
+    if (fn.isBooleanJSONSchema(schema)) {
+      return schema ? "any" : "never"
+    }
+
+    if (typeof schema !== "object") {
+      return "any"
+    }
+
+    if (processedSchemas.has(schema)) {
+      return "any" // detect a cycle
+    }
+    processedSchemas.add(schema)
+
+    const { type, prefixItems, items } = schema
+
+    const getArrayType = () => {
+      if (Array.isArray(prefixItems)) {
+        const prefixItemsTypes = prefixItems.map((itemSchema) =>
+          getType(itemSchema, processedSchemas)
+        )
+        const itemsType = items ? getType(items, processedSchemas) : "any"
+        return `array<[${prefixItemsTypes.join(", ")}], ${itemsType}>`
+      } else if (items) {
+        const itemsType = getType(items, processedSchemas)
+        return `array<${itemsType}>`
+      } else {
         return "array<any>"
-      } else if (typeof schema.const === "object") {
-        return "object"
       }
     }
-    return null
-  }
 
-  if (schema.not && getType(schema.not) === "any") {
-    return "never"
-  }
-
-  const typeString = Array.isArray(type)
-    ? type.map((t) => (t === "array" ? getArrayType() : t)).join(" | ")
-    : type === "array"
-      ? getArrayType()
-      : [
-            "null",
-            "boolean",
-            "object",
-            "array",
-            "number",
-            "integer",
-            "string",
-          ].includes(type)
-        ? type
-        : inferType()
-
-  const handleCombiningKeywords = (keyword, separator) => {
-    if (Array.isArray(schema[keyword])) {
-      const combinedTypes = schema[keyword].map((subSchema) =>
-        getType(subSchema, processedSchemas)
-      )
-      return `(${combinedTypes.join(separator)})`
+    const inferType = () => {
+      if (
+        Object.hasOwn(schema, "prefixItems") ||
+        Object.hasOwn(schema, "items") ||
+        Object.hasOwn(schema, "contains")
+      ) {
+        return getArrayType()
+      } else if (
+        Object.hasOwn(schema, "properties") ||
+        Object.hasOwn(schema, "additionalProperties") ||
+        Object.hasOwn(schema, "patternProperties")
+      ) {
+        return "object"
+      } else if (["int32", "int64"].includes(schema.format)) {
+        // OpenAPI 3.1.0 integer custom formats
+        return "integer"
+      } else if (["float", "double"].includes(schema.format)) {
+        // OpenAPI 3.1.0 number custom formats
+        return "number"
+      } else if (
+        Object.hasOwn(schema, "minimum") ||
+        Object.hasOwn(schema, "maximum") ||
+        Object.hasOwn(schema, "exclusiveMinimum") ||
+        Object.hasOwn(schema, "exclusiveMaximum") ||
+        Object.hasOwn(schema, "multipleOf")
+      ) {
+        return "number | integer"
+      } else if (
+        Object.hasOwn(schema, "pattern") ||
+        Object.hasOwn(schema, "format") ||
+        Object.hasOwn(schema, "minLength") ||
+        Object.hasOwn(schema, "maxLength")
+      ) {
+        return "string"
+      } else if (typeof schema.const !== "undefined") {
+        if (schema.const === null) {
+          return "null"
+        } else if (typeof schema.const === "boolean") {
+          return "boolean"
+        } else if (typeof schema.const === "number") {
+          return Number.isInteger(schema.const) ? "integer" : "number"
+        } else if (typeof schema.const === "string") {
+          return "string"
+        } else if (Array.isArray(schema.const)) {
+          return "array<any>"
+        } else if (typeof schema.const === "object") {
+          return "object"
+        }
+      }
+      return null
     }
-    return null
+
+    if (schema.not && getType(schema.not) === "any") {
+      return "never"
+    }
+
+    const typeString = Array.isArray(type)
+      ? type.map((t) => (t === "array" ? getArrayType() : t)).join(" | ")
+      : type === "array"
+        ? getArrayType()
+        : [
+              "null",
+              "boolean",
+              "object",
+              "array",
+              "number",
+              "integer",
+              "string",
+            ].includes(type)
+          ? type
+          : inferType()
+
+    const handleCombiningKeywords = (keyword, separator) => {
+      if (Array.isArray(schema[keyword])) {
+        const combinedTypes = schema[keyword].map((subSchema) =>
+          getType(subSchema, processedSchemas)
+        )
+        return `(${combinedTypes.join(separator)})`
+      }
+      return null
+    }
+
+    const oneOfString = handleCombiningKeywords("oneOf", " | ")
+    const anyOfString = handleCombiningKeywords("anyOf", " | ")
+    const allOfString = handleCombiningKeywords("allOf", " & ")
+
+    const combinedStrings = [typeString, oneOfString, anyOfString, allOfString]
+      .filter(Boolean)
+      .join(" | ")
+
+    processedSchemas.delete(schema)
+
+    return combinedStrings || "any"
   }
 
-  const oneOfString = handleCombiningKeywords("oneOf", " | ")
-  const anyOfString = handleCombiningKeywords("anyOf", " | ")
-  const allOfString = handleCombiningKeywords("allOf", " & ")
-
-  const combinedStrings = [typeString, oneOfString, anyOfString, allOfString]
-    .filter(Boolean)
-    .join(" | ")
-
-  processedSchemas.delete(schema)
-
-  return combinedStrings || "any"
+  return getType
 }
 
 export const isBooleanJSONSchema = (schema) => typeof schema === "boolean"
@@ -164,42 +170,48 @@ export const hasKeyword = (schema, keyword) =>
   typeof schema === "object" &&
   Object.hasOwn(schema, keyword)
 
-export const isExpandable = (schema) => {
-  const fn = useFn()
+export const makeIsExpandable = (fnAccessor) => {
+  const isExpandable = (schema) => {
+    const fn = fnAccessor()
 
-  return (
-    schema?.$schema ||
-    schema?.$vocabulary ||
-    schema?.$id ||
-    schema?.$anchor ||
-    schema?.$dynamicAnchor ||
-    schema?.$ref ||
-    schema?.$dynamicRef ||
-    schema?.$defs ||
-    schema?.$comment ||
-    schema?.allOf ||
-    schema?.anyOf ||
-    schema?.oneOf ||
-    fn.hasKeyword(schema, "not") ||
-    fn.hasKeyword(schema, "if") ||
-    fn.hasKeyword(schema, "then") ||
-    fn.hasKeyword(schema, "else") ||
-    schema?.dependentSchemas ||
-    schema?.prefixItems ||
-    fn.hasKeyword(schema, "items") ||
-    fn.hasKeyword(schema, "contains") ||
-    schema?.properties ||
-    schema?.patternProperties ||
-    fn.hasKeyword(schema, "additionalProperties") ||
-    fn.hasKeyword(schema, "propertyNames") ||
-    fn.hasKeyword(schema, "unevaluatedItems") ||
-    fn.hasKeyword(schema, "unevaluatedProperties") ||
-    schema?.description ||
-    schema?.enum ||
-    fn.hasKeyword(schema, "const") ||
-    fn.hasKeyword(schema, "contentSchema") ||
-    fn.hasKeyword(schema, "default")
-  )
+    return (
+      schema?.$schema ||
+      schema?.$vocabulary ||
+      schema?.$id ||
+      schema?.$anchor ||
+      schema?.$dynamicAnchor ||
+      schema?.$ref ||
+      schema?.$dynamicRef ||
+      schema?.$defs ||
+      schema?.$comment ||
+      schema?.allOf ||
+      schema?.anyOf ||
+      schema?.oneOf ||
+      fn.hasKeyword(schema, "not") ||
+      fn.hasKeyword(schema, "if") ||
+      fn.hasKeyword(schema, "then") ||
+      fn.hasKeyword(schema, "else") ||
+      schema?.dependentSchemas ||
+      schema?.prefixItems ||
+      fn.hasKeyword(schema, "items") ||
+      fn.hasKeyword(schema, "contains") ||
+      schema?.properties ||
+      schema?.patternProperties ||
+      fn.hasKeyword(schema, "additionalProperties") ||
+      fn.hasKeyword(schema, "propertyNames") ||
+      fn.hasKeyword(schema, "unevaluatedItems") ||
+      fn.hasKeyword(schema, "unevaluatedProperties") ||
+      schema?.description ||
+      schema?.enum ||
+      fn.hasKeyword(schema, "const") ||
+      fn.hasKeyword(schema, "contentSchema") ||
+      fn.hasKeyword(schema, "default") ||
+      schema?.examples ||
+      fn.getExtensionKeywords(schema).length > 0
+    )
+  }
+
+  return isExpandable
 }
 
 export const stringify = (value) => {
@@ -339,13 +351,16 @@ export const stringifyConstraints = (schema) => {
 
   // validation Keywords for Arrays
   const arrayRange = stringifyConstraintRange(
-    schema?.hasUniqueItems ? "unique items" : "items",
+    schema?.uniqueItems ? "unique items" : "items",
     schema?.minItems,
     schema?.maxItems
   )
   if (arrayRange !== null) {
     constraints.push({ scope: "array", value: arrayRange })
   }
+  if (schema?.uniqueItems && !arrayRange) {
+    constraints.push({ scope: "array", value: "unique" })
+  }
   const containsRange = stringifyConstraintRange(
     "contained items",
     schema?.minContains,
@@ -382,3 +397,108 @@ export const getDependentRequired = (propertyName, schema) => {
     }, new Set())
   )
 }
+
+export const isPlainObject = (value) =>
+  typeof value === "object" &&
+  value !== null &&
+  !Array.isArray(value) &&
+  (Object.getPrototypeOf(value) === null ||
+    Object.getPrototypeOf(value) === Object.prototype)
+
+export const isEmptyObject = (value) =>
+  isPlainObject(value) && Object.keys(value).length === 0
+
+export const isEmptyArray = (value) =>
+  Array.isArray(value) && value.length === 0
+
+export const difference = (value, comparisonValue) => {
+  const comparisonSet = new Set(comparisonValue)
+  return value.filter((item) => !comparisonSet.has(item))
+}
+
+export const getSchemaKeywords = () => {
+  return [
+    // core vocabulary
+    "$schema",
+    "$vocabulary",
+    "$id",
+    "$anchor",
+    "$dynamicAnchor",
+    "$dynamicRef",
+    "$ref",
+    "$defs",
+    "$comment",
+    // applicator vocabulary
+    "allOf",
+    "anyOf",
+    "oneOf",
+    "not",
+    "if",
+    "then",
+    "else",
+    "dependentSchemas",
+    "prefixItems",
+    "items",
+    "contains",
+    "properties",
+    "patternProperties",
+    "additionalProperties",
+    "propertyNames",
+    // unevaluated Locations vocabulary
+    "unevaluatedItems",
+    "unevaluatedProperties",
+    // validation vocabulary
+    // validation Keywords for Any Instance Type
+    "type",
+    "enum",
+    "const",
+    // validation Keywords for Numeric Instances (number and integer)
+    "multipleOf",
+    "maximum",
+    "exclusiveMaximum",
+    "minimum",
+    "exclusiveMinimum",
+    // validation Keywords for Strings
+    "maxLength",
+    "minLength",
+    "pattern",
+    // validation Keywords for Arrays
+    "maxItems",
+    "minItems",
+    "uniqueItems",
+    "maxContains",
+    "minContains",
+    // validation Keywords for Objects
+    "maxProperties",
+    "minProperties",
+    "required",
+    "dependentRequired",
+    // basic Meta-Data Annotations vocabulary
+    "title",
+    "description",
+    "default",
+    "deprecated",
+    "readOnly",
+    "writeOnly",
+    "examples",
+    // semantic Content With "format" vocabulary
+    "format",
+    // contents of String-Encoded Data vocabulary
+    "contentEncoding",
+    "contentMediaType",
+    "contentSchema",
+  ]
+}
+
+export const makeGetExtensionKeywords = (fnAccessor) => {
+  const getExtensionKeywords = (schema) => {
+    const fn = fnAccessor()
+    const keywords = fn.getSchemaKeywords()
+
+    return isPlainObject(schema)
+      ? difference(Object.keys(schema), keywords)
+      : []
+  }
+
+  return getExtensionKeywords
+}

src/core/plugins/json-schema-2020-12/hoc.jsx

@@ -32,30 +32,36 @@ import KeywordUnevaluatedItems from "./components/keywords/UnevaluatedItems"
 import KeywordUnevaluatedProperties from "./components/keywords/UnevaluatedProperties"
 import KeywordType from "./components/keywords/Type"
 import KeywordEnum from "./components/keywords/Enum/Enum"
-import KeywordConst from "./components/keywords/Const"
+import KeywordConst from "./components/keywords/Const/Const"
 import KeywordConstraint from "./components/keywords/Constraint/Constraint"
 import KeywordDependentRequired from "./components/keywords/DependentRequired/DependentRequired"
 import KeywordContentSchema from "./components/keywords/ContentSchema"
 import KeywordTitle from "./components/keywords/Title/Title"
 import KeywordDescription from "./components/keywords/Description/Description"
-import KeywordDefault from "./components/keywords/Default"
+import KeywordDefault from "./components/keywords/Default/Default"
 import KeywordDeprecated from "./components/keywords/Deprecated"
 import KeywordReadOnly from "./components/keywords/ReadOnly"
 import KeywordWriteOnly from "./components/keywords/WriteOnly"
+import KeywordExamples from "./components/keywords/Examples/Examples"
+import ExtensionKeywords from "./components/keywords/ExtensionKeywords/ExtensionKeywords"
+import JSONViewer from "./components/JSONViewer/JSONViewer"
 import Accordion from "./components/Accordion/Accordion"
 import ExpandDeepButton from "./components/ExpandDeepButton/ExpandDeepButton"
 import ChevronRightIcon from "./components/icons/ChevronRight"
 import { JSONSchemaContext } from "./context"
+import { useFn } from "./hooks"
 import {
-  getTitle,
+  makeGetTitle,
   isBooleanJSONSchema,
   upperFirst,
-  getType,
+  makeGetType,
   hasKeyword,
-  isExpandable,
+  makeIsExpandable,
   stringify,
   stringifyConstraints,
   getDependentRequired,
+  getSchemaKeywords,
+  makeGetExtensionKeywords,
 } from "./fn"
 
 export const withJSONSchemaContext = (Component, overrides = {}) => {
@@ -100,6 +106,9 @@ export const withJSONSchemaContext = (Component, overrides = {}) => {
       KeywordDeprecated,
       KeywordReadOnly,
       KeywordWriteOnly,
+      KeywordExamples,
+      ExtensionKeywords,
+      JSONViewer,
       Accordion,
       ExpandDeepButton,
       ChevronRightIcon,
@@ -116,20 +125,24 @@ export const withJSONSchemaContext = (Component, overrides = {}) => {
        * 3 -> [0]...(3)
        */
       defaultExpandedLevels: 0, // 2 = 0...2
+      showExtensionKeywords: true,
       ...overrides.config,
     },
     fn: {
       upperFirst,
-      getTitle,
-      getType,
+      getTitle: makeGetTitle(useFn),
+      getType: makeGetType(useFn),
       isBooleanJSONSchema,
       hasKeyword,
-      isExpandable,
+      isExpandable: makeIsExpandable(useFn),
       stringify,
       stringifyConstraints,
       getDependentRequired,
+      getSchemaKeywords,
+      getExtensionKeywords: makeGetExtensionKeywords(useFn),
       ...overrides.fn,
     },
+    state: { paths: {} },
   }
 
   const HOC = (props) => (
@@ -144,3 +157,140 @@ export const withJSONSchemaContext = (Component, overrides = {}) => {
 
   return HOC
 }
+
+export const makeWithJSONSchemaSystemContext =
+  ({ getSystem }) =>
+  (Component, overrides = {}) => {
+    const { getComponent, getConfigs } = getSystem()
+    const configs = getConfigs()
+
+    const JSONSchema = getComponent("JSONSchema202012")
+    const Keyword$schema = getComponent("JSONSchema202012Keyword$schema")
+    const Keyword$vocabulary = getComponent(
+      "JSONSchema202012Keyword$vocabulary"
+    )
+    const Keyword$id = getComponent("JSONSchema202012Keyword$id")
+    const Keyword$anchor = getComponent("JSONSchema202012Keyword$anchor")
+    const Keyword$dynamicAnchor = getComponent(
+      "JSONSchema202012Keyword$dynamicAnchor"
+    )
+    const Keyword$ref = getComponent("JSONSchema202012Keyword$ref")
+    const Keyword$dynamicRef = getComponent(
+      "JSONSchema202012Keyword$dynamicRef"
+    )
+    const Keyword$defs = getComponent("JSONSchema202012Keyword$defs")
+    const Keyword$comment = getComponent("JSONSchema202012Keyword$comment")
+    const KeywordAllOf = getComponent("JSONSchema202012KeywordAllOf")
+    const KeywordAnyOf = getComponent("JSONSchema202012KeywordAnyOf")
+    const KeywordOneOf = getComponent("JSONSchema202012KeywordOneOf")
+    const KeywordNot = getComponent("JSONSchema202012KeywordNot")
+    const KeywordIf = getComponent("JSONSchema202012KeywordIf")
+    const KeywordThen = getComponent("JSONSchema202012KeywordThen")
+    const KeywordElse = getComponent("JSONSchema202012KeywordElse")
+    const KeywordDependentSchemas = getComponent(
+      "JSONSchema202012KeywordDependentSchemas"
+    )
+    const KeywordPrefixItems = getComponent(
+      "JSONSchema202012KeywordPrefixItems"
+    )
+    const KeywordItems = getComponent("JSONSchema202012KeywordItems")
+    const KeywordContains = getComponent("JSONSchema202012KeywordContains")
+    const KeywordProperties = getComponent("JSONSchema202012KeywordProperties")
+    const KeywordPatternProperties = getComponent(
+      "JSONSchema202012KeywordPatternProperties"
+    )
+    const KeywordAdditionalProperties = getComponent(
+      "JSONSchema202012KeywordAdditionalProperties"
+    )
+    const KeywordPropertyNames = getComponent(
+      "JSONSchema202012KeywordPropertyNames"
+    )
+    const KeywordUnevaluatedItems = getComponent(
+      "JSONSchema202012KeywordUnevaluatedItems"
+    )
+    const KeywordUnevaluatedProperties = getComponent(
+      "JSONSchema202012KeywordUnevaluatedProperties"
+    )
+    const KeywordType = getComponent("JSONSchema202012KeywordType")
+    const KeywordEnum = getComponent("JSONSchema202012KeywordEnum")
+    const KeywordConst = getComponent("JSONSchema202012KeywordConst")
+    const KeywordConstraint = getComponent("JSONSchema202012KeywordConstraint")
+    const KeywordDependentRequired = getComponent(
+      "JSONSchema202012KeywordDependentRequired"
+    )
+    const KeywordContentSchema = getComponent(
+      "JSONSchema202012KeywordContentSchema"
+    )
+    const KeywordTitle = getComponent("JSONSchema202012KeywordTitle")
+    const KeywordDescription = getComponent(
+      "JSONSchema202012KeywordDescription"
+    )
+    const KeywordDefault = getComponent("JSONSchema202012KeywordDefault")
+    const KeywordDeprecated = getComponent("JSONSchema202012KeywordDeprecated")
+    const KeywordReadOnly = getComponent("JSONSchema202012KeywordReadOnly")
+    const KeywordWriteOnly = getComponent("JSONSchema202012KeywordWriteOnly")
+    const KeywordExamples = getComponent("JSONSchema202012KeywordExamples")
+    const ExtensionKeywords = getComponent("JSONSchema202012ExtensionKeywords")
+    const JSONViewer = getComponent("JSONSchema202012JSONViewer")
+    const Accordion = getComponent("JSONSchema202012Accordion")
+    const ExpandDeepButton = getComponent("JSONSchema202012ExpandDeepButton")
+    const ChevronRightIcon = getComponent("JSONSchema202012ChevronRightIcon")
+
+    return withJSONSchemaContext(Component, {
+      components: {
+        JSONSchema,
+        Keyword$schema,
+        Keyword$vocabulary,
+        Keyword$id,
+        Keyword$anchor,
+        Keyword$dynamicAnchor,
+        Keyword$ref,
+        Keyword$dynamicRef,
+        Keyword$defs,
+        Keyword$comment,
+        KeywordAllOf,
+        KeywordAnyOf,
+        KeywordOneOf,
+        KeywordNot,
+        KeywordIf,
+        KeywordThen,
+        KeywordElse,
+        KeywordDependentSchemas,
+        KeywordPrefixItems,
+        KeywordItems,
+        KeywordContains,
+        KeywordProperties,
+        KeywordPatternProperties,
+        KeywordAdditionalProperties,
+        KeywordPropertyNames,
+        KeywordUnevaluatedItems,
+        KeywordUnevaluatedProperties,
+        KeywordType,
+        KeywordEnum,
+        KeywordConst,
+        KeywordConstraint,
+        KeywordDependentRequired,
+        KeywordContentSchema,
+        KeywordTitle,
+        KeywordDescription,
+        KeywordDefault,
+        KeywordDeprecated,
+        KeywordReadOnly,
+        KeywordWriteOnly,
+        KeywordExamples,
+        ExtensionKeywords,
+        JSONViewer,
+        Accordion,
+        ExpandDeepButton,
+        ChevronRightIcon,
+        ...overrides.components,
+      },
+      config: {
+        showExtensionKeywords: configs.showExtensions,
+        ...overrides.config,
+      },
+      fn: {
+        ...overrides.fn,
+      },
+    })
+  }

src/core/plugins/json-schema-2020-12/hooks.js

@@ -1,14 +1,15 @@
 /**
  * @prettier
  */
-import { useContext } from "react"
+import { useCallback, useContext, useEffect, useState } from "react"
 
 import {
   JSONSchemaContext,
   JSONSchemaLevelContext,
-  JSONSchemaDeepExpansionContext,
   JSONSchemaCyclesContext,
+  JSONSchemaPathContext,
 } from "./context"
+import { JSONSchemaIsExpandedState } from "./enum"
 
 export const useConfig = () => {
   const { config } = useContext(JSONSchemaContext)
@@ -26,6 +27,17 @@ export const useFn = (fnName = undefined) => {
   return typeof fnName !== "undefined" ? fn[fnName] : fn
 }
 
+export const useJSONSchemaContextState = () => {
+  const [, setFakeState] = useState(null)
+  const { state } = useContext(JSONSchemaContext)
+  const setState = (updateFn) => {
+    updateFn(state)
+    setFakeState({})
+  }
+
+  return { state, setState }
+}
+
 export const useLevel = () => {
   const level = useContext(JSONSchemaLevelContext)
 
@@ -38,15 +50,84 @@ export const useIsEmbedded = () => {
   return level > 0
 }
 
-export const useIsExpanded = () => {
-  const [level] = useLevel()
-  const { defaultExpandedLevels } = useConfig()
+export const usePath = (pathToken) => {
+  const path = useContext(JSONSchemaPathContext)
+  const { setState } = useJSONSchemaContextState()
+  const currentPath =
+    typeof pathToken === "string" ? [...path, pathToken] : path
 
-  return defaultExpandedLevels - level > 0
+  const pathMutator = (value, options = { deep: false }) => {
+    const startPath = currentPath.toString()
+    const updateFn = (state) => {
+      state.paths[startPath] = value
+
+      if (value === JSONSchemaIsExpandedState.Collapsed) {
+        Object.keys(state.paths).forEach((key) => {
+          if (
+            key.startsWith(startPath) &&
+            state.paths[key] === JSONSchemaIsExpandedState.DeeplyExpanded
+          ) {
+            state.paths[key] = JSONSchemaIsExpandedState.Expanded
+          }
+        })
+      }
+    }
+    const updateDeepFn = (state) => {
+      Object.keys(state.paths).forEach((key) => {
+        if (key.startsWith(startPath)) {
+          state.paths[key] = value
+        }
+      })
+    }
+
+    if (options.deep) {
+      setState(updateDeepFn)
+    } else {
+      setState(updateFn)
+    }
+  }
+
+  return { path: currentPath, pathMutator }
 }
 
-export const useIsExpandedDeeply = () => {
-  return useContext(JSONSchemaDeepExpansionContext)
+export const useIsExpanded = (name) => {
+  const [level] = useLevel()
+  const { defaultExpandedLevels } = useConfig()
+  const { path, pathMutator } = usePath(name)
+  const { path: parentPath } = usePath()
+  const { state } = useJSONSchemaContextState()
+  const currentState = state.paths[path.toString()]
+  const parentState =
+    state.paths[parentPath.toString()] ??
+    state.paths[parentPath.slice(0, -1).toString()]
+  const isExpandedState =
+    currentState ??
+    (defaultExpandedLevels - level > 0
+      ? JSONSchemaIsExpandedState.Expanded
+      : JSONSchemaIsExpandedState.Collapsed)
+  const isExpanded = isExpandedState !== JSONSchemaIsExpandedState.Collapsed
+
+  useEffect(() => {
+    pathMutator(
+      parentState === JSONSchemaIsExpandedState.DeeplyExpanded
+        ? JSONSchemaIsExpandedState.DeeplyExpanded
+        : isExpandedState
+    )
+  }, [parentState])
+
+  const setExpanded = useCallback((options = { deep: false }) => {
+    pathMutator(
+      options.deep
+        ? JSONSchemaIsExpandedState.DeeplyExpanded
+        : JSONSchemaIsExpandedState.Expanded
+    )
+  }, [])
+
+  const setCollapsed = useCallback((options = { deep: false }) => {
+    pathMutator(JSONSchemaIsExpandedState.Collapsed, options)
+  }, [])
+
+  return { isExpanded, setExpanded, setCollapsed }
 }
 
 export const useRenderedSchemas = (schema = undefined) => {

src/core/plugins/json-schema-2020-12/index.js

@@ -30,82 +30,122 @@ import KeywordUnevaluatedItems from "./components/keywords/UnevaluatedItems"
 import KeywordUnevaluatedProperties from "./components/keywords/UnevaluatedProperties"
 import KeywordType from "./components/keywords/Type"
 import KeywordEnum from "./components/keywords/Enum/Enum"
-import KeywordConst from "./components/keywords/Const"
+import KeywordConst from "./components/keywords/Const/Const"
 import KeywordConstraint from "./components/keywords/Constraint/Constraint"
 import KeywordDependentRequired from "./components/keywords/DependentRequired/DependentRequired"
 import KeywordContentSchema from "./components/keywords/ContentSchema"
 import KeywordTitle from "./components/keywords/Title/Title"
 import KeywordDescription from "./components/keywords/Description/Description"
-import KeywordDefault from "./components/keywords/Default"
+import KeywordDefault from "./components/keywords/Default/Default"
 import KeywordDeprecated from "./components/keywords/Deprecated"
 import KeywordReadOnly from "./components/keywords/ReadOnly"
 import KeywordWriteOnly from "./components/keywords/WriteOnly"
+import KeywordExamples from "./components/keywords/Examples/Examples"
+import ExtensionKeywords from "./components/keywords/ExtensionKeywords/ExtensionKeywords"
+import JSONViewer from "./components/JSONViewer/JSONViewer"
 import Accordion from "./components/Accordion/Accordion"
 import ExpandDeepButton from "./components/ExpandDeepButton/ExpandDeepButton"
 import ChevronRightIcon from "./components/icons/ChevronRight"
-import { upperFirst, hasKeyword, isExpandable } from "./fn"
-import { JSONSchemaDeepExpansionContext } from "./context"
-import { useFn, useConfig, useComponent, useIsExpandedDeeply } from "./hooks"
-import { withJSONSchemaContext } from "./hoc"
+import {
+  upperFirst,
+  hasKeyword,
+  makeGetTitle,
+  makeGetType,
+  makeIsExpandable,
+  isBooleanJSONSchema,
+  getSchemaKeywords,
+  makeGetExtensionKeywords,
+} from "./fn"
+import { JSONSchemaPathContext, JSONSchemaLevelContext } from "./context"
+import {
+  useFn,
+  useConfig,
+  useComponent,
+  useIsExpanded,
+  usePath,
+  useLevel,
+} from "./hooks"
+import { withJSONSchemaContext, makeWithJSONSchemaSystemContext } from "./hoc"
 
-const JSONSchema202012Plugin = () => ({
-  components: {
-    JSONSchema202012: JSONSchema,
-    JSONSchema202012Keyword$schema: Keyword$schema,
-    JSONSchema202012Keyword$vocabulary: Keyword$vocabulary,
-    JSONSchema202012Keyword$id: Keyword$id,
-    JSONSchema202012Keyword$anchor: Keyword$anchor,
-    JSONSchema202012Keyword$dynamicAnchor: Keyword$dynamicAnchor,
-    JSONSchema202012Keyword$ref: Keyword$ref,
-    JSONSchema202012Keyword$dynamicRef: Keyword$dynamicRef,
-    JSONSchema202012Keyword$defs: Keyword$defs,
-    JSONSchema202012Keyword$comment: Keyword$comment,
-    JSONSchema202012KeywordAllOf: KeywordAllOf,
-    JSONSchema202012KeywordAnyOf: KeywordAnyOf,
-    JSONSchema202012KeywordOneOf: KeywordOneOf,
-    JSONSchema202012KeywordNot: KeywordNot,
-    JSONSchema202012KeywordIf: KeywordIf,
-    JSONSchema202012KeywordThen: KeywordThen,
-    JSONSchema202012KeywordElse: KeywordElse,
-    JSONSchema202012KeywordDependentSchemas: KeywordDependentSchemas,
-    JSONSchema202012KeywordPrefixItems: KeywordPrefixItems,
-    JSONSchema202012KeywordItems: KeywordItems,
-    JSONSchema202012KeywordContains: KeywordContains,
-    JSONSchema202012KeywordProperties: KeywordProperties,
-    JSONSchema202012KeywordPatternProperties: KeywordPatternProperties,
-    JSONSchema202012KeywordAdditionalProperties: KeywordAdditionalProperties,
-    JSONSchema202012KeywordPropertyNames: KeywordPropertyNames,
-    JSONSchema202012KeywordUnevaluatedItems: KeywordUnevaluatedItems,
-    JSONSchema202012KeywordUnevaluatedProperties: KeywordUnevaluatedProperties,
-    JSONSchema202012KeywordType: KeywordType,
-    JSONSchema202012KeywordEnum: KeywordEnum,
-    JSONSchema202012KeywordConst: KeywordConst,
-    JSONSchema202012KeywordConstraint: KeywordConstraint,
-    JSONSchema202012KeywordDependentRequired: KeywordDependentRequired,
-    JSONSchema202012KeywordContentSchema: KeywordContentSchema,
-    JSONSchema202012KeywordTitle: KeywordTitle,
-    JSONSchema202012KeywordDescription: KeywordDescription,
-    JSONSchema202012KeywordDefault: KeywordDefault,
-    JSONSchema202012KeywordDeprecated: KeywordDeprecated,
-    JSONSchema202012KeywordReadOnly: KeywordReadOnly,
-    JSONSchema202012KeywordWriteOnly: KeywordWriteOnly,
-    JSONSchema202012Accordion: Accordion,
-    JSONSchema202012ExpandDeepButton: ExpandDeepButton,
-    JSONSchema202012ChevronRightIcon: ChevronRightIcon,
-    withJSONSchema202012Context: withJSONSchemaContext,
-    JSONSchema202012DeepExpansionContext: () => JSONSchemaDeepExpansionContext,
-  },
-  fn: {
-    upperFirst,
-    jsonSchema202012: {
-      isExpandable,
-      hasKeyword,
-      useFn,
-      useConfig,
-      useComponent,
-      useIsExpandedDeeply,
+const JSONSchema202012Plugin = ({ getSystem, fn }) => {
+  const fnAccessor = () => ({
+    upperFirst: fn.upperFirst,
+    ...fn.jsonSchema202012,
+  })
+
+  return {
+    components: {
+      JSONSchema202012: JSONSchema,
+      JSONSchema202012Keyword$schema: Keyword$schema,
+      JSONSchema202012Keyword$vocabulary: Keyword$vocabulary,
+      JSONSchema202012Keyword$id: Keyword$id,
+      JSONSchema202012Keyword$anchor: Keyword$anchor,
+      JSONSchema202012Keyword$dynamicAnchor: Keyword$dynamicAnchor,
+      JSONSchema202012Keyword$ref: Keyword$ref,
+      JSONSchema202012Keyword$dynamicRef: Keyword$dynamicRef,
+      JSONSchema202012Keyword$defs: Keyword$defs,
+      JSONSchema202012Keyword$comment: Keyword$comment,
+      JSONSchema202012KeywordAllOf: KeywordAllOf,
+      JSONSchema202012KeywordAnyOf: KeywordAnyOf,
+      JSONSchema202012KeywordOneOf: KeywordOneOf,
+      JSONSchema202012KeywordNot: KeywordNot,
+      JSONSchema202012KeywordIf: KeywordIf,
+      JSONSchema202012KeywordThen: KeywordThen,
+      JSONSchema202012KeywordElse: KeywordElse,
+      JSONSchema202012KeywordDependentSchemas: KeywordDependentSchemas,
+      JSONSchema202012KeywordPrefixItems: KeywordPrefixItems,
+      JSONSchema202012KeywordItems: KeywordItems,
+      JSONSchema202012KeywordContains: KeywordContains,
+      JSONSchema202012KeywordProperties: KeywordProperties,
+      JSONSchema202012KeywordPatternProperties: KeywordPatternProperties,
+      JSONSchema202012KeywordAdditionalProperties: KeywordAdditionalProperties,
+      JSONSchema202012KeywordPropertyNames: KeywordPropertyNames,
+      JSONSchema202012KeywordUnevaluatedItems: KeywordUnevaluatedItems,
+      JSONSchema202012KeywordUnevaluatedProperties:
+        KeywordUnevaluatedProperties,
+      JSONSchema202012KeywordType: KeywordType,
+      JSONSchema202012KeywordEnum: KeywordEnum,
+      JSONSchema202012KeywordConst: KeywordConst,
+      JSONSchema202012KeywordConstraint: KeywordConstraint,
+      JSONSchema202012KeywordDependentRequired: KeywordDependentRequired,
+      JSONSchema202012KeywordContentSchema: KeywordContentSchema,
+      JSONSchema202012KeywordTitle: KeywordTitle,
+      JSONSchema202012KeywordDescription: KeywordDescription,
+      JSONSchema202012KeywordDefault: KeywordDefault,
+      JSONSchema202012KeywordDeprecated: KeywordDeprecated,
+      JSONSchema202012KeywordReadOnly: KeywordReadOnly,
+      JSONSchema202012KeywordWriteOnly: KeywordWriteOnly,
+      JSONSchema202012KeywordExamples: KeywordExamples,
+      JSONSchema202012ExtensionKeywords: ExtensionKeywords,
+      JSONSchema202012JSONViewer: JSONViewer,
+      JSONSchema202012Accordion: Accordion,
+      JSONSchema202012ExpandDeepButton: ExpandDeepButton,
+      JSONSchema202012ChevronRightIcon: ChevronRightIcon,
+      withJSONSchema202012Context: withJSONSchemaContext,
+      withJSONSchema202012SystemContext:
+        makeWithJSONSchemaSystemContext(getSystem()),
+      JSONSchema202012PathContext: () => JSONSchemaPathContext,
+      JSONSchema202012LevelContext: () => JSONSchemaLevelContext,
     },
-  },
-})
+    fn: {
+      upperFirst,
+      jsonSchema202012: {
+        getTitle: makeGetTitle(fnAccessor),
+        getType: makeGetType(fnAccessor),
+        isExpandable: makeIsExpandable(fnAccessor),
+        isBooleanJSONSchema,
+        hasKeyword,
+        useFn,
+        useConfig,
+        useComponent,
+        useIsExpanded,
+        usePath,
+        useLevel,
+        getSchemaKeywords,
+        getExtensionKeywords: makeGetExtensionKeywords(fnAccessor),
+      },
+    },
+  }
+}
 
 export default JSONSchema202012Plugin