feat(json-schema-2020-12): add support for keyword

Refs #8513

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

@@ -32,6 +32,7 @@ const JSONSchema = ({ schema, name }) => {
   const isCircular = useIsCircular(schema)
   const renderedSchemas = useRenderedSchemas(schema)
   const Accordion = useComponent("Accordion")
+  const Keyword$schema = useComponent("Keyword$schema")
   const KeywordProperties = useComponent("KeywordProperties")
   const KeywordType = useComponent("KeywordType")
   const KeywordFormat = useComponent("KeywordFormat")
@@ -95,6 +96,7 @@ const JSONSchema = ({ schema, name }) => {
                 {!isCircular && isExpandable && (
                   <KeywordProperties schema={schema} />
                 )}
+                <Keyword$schema schema={schema} />
               </div>
             )}
           </article>

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

@@ -32,12 +32,25 @@
     border-radius: 4px;
   }
 
-  &-note {
+  &-core-keyword {
-    @include text_headline($section-models-model-title-font-color);
-    padding: 10px 0 0 20px;
-    font-size: 11px;
     color: #6b6b6b;
+    font-size: 12px;
+    margin-left: 20px;
+    font-weight: bold;
+
+    &__value {
+      color: #6b6b6b;
+      font-size: 12px;
+      font-weight: normal;
     }
   }
 
+  //&-note {
+  //  @include text_headline($section-models-model-title-font-color);
+  //  padding: 10px 0 0 20px;
+  //  font-size: 11px;
+  //  color: #6b6b6b;
+  //}
+}
+
 

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

@@ -0,0 +1,25 @@
+/**
+ * @prettier
+ */
+import React from "react"
+
+import { schema } from "../../prop-types"
+
+const $schema = ({ schema }) => {
+  if (!schema?.$schema) return null
+
+  return (
+    <div className="json-schema-2020-12__$schema">
+      <span className="json-schema-2020-12-core-keyword">$schema</span>
+      <span className="json-schema-2020-12-core-keyword__value">
+        ={schema.$schema}
+      </span>
+    </div>
+  )
+}
+
+$schema.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default $schema

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

@@ -112,5 +112,5 @@ export const getType = (schema, processedSchemas = new WeakSet()) => {
 export const isBooleanJSONSchema = (schema) => typeof schema === "boolean"
 
 export const isExpandable = (schema) => {
-  return schema?.description || schema?.properties
+  return schema?.description || schema?.properties || schema?.$schema
 }

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

@@ -4,6 +4,7 @@
 import React from "react"
 
 import JSONSchema from "./components/JSONSchema/JSONSchema"
+import Keyword$schema from "./components/keywords/$schema"
 import KeywordProperties from "./components/keywords/Properties"
 import KeywordType from "./components/keywords/Type/Type"
 import KeywordFormat from "./components/keywords/Format/Format"
@@ -25,6 +26,7 @@ export const withJSONSchemaContext = (Component, overrides = {}) => {
   const value = {
     components: {
       JSONSchema,
+      Keyword$schema,
       KeywordProperties,
       KeywordType,
       KeywordFormat,

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

@@ -3,6 +3,7 @@
  */
 import JSONSchema from "./components/JSONSchema/JSONSchema"
 import KeywordProperties from "./components/keywords/Properties"
+import Keyword$schema from "./components/keywords/$schema"
 import KeywordType from "./components/keywords/Type/Type"
 import KeywordFormat from "./components/keywords/Format/Format"
 import KeywordTitle from "./components/keywords/Title/Title"
@@ -16,6 +17,7 @@ import { withJSONSchemaContext } from "./hoc"
 const JSONSchema202012Plugin = () => ({
   components: {
     JSONSchema202012: JSONSchema,
+    JSONSchema202012Keyword$schema: Keyword$schema,
     JSONSchema202012KeywordProperties: KeywordProperties,
     JSONSchema202012KeywordType: KeywordType,
     JSONSchema202012KeywordFormat: KeywordFormat,

src/core/plugins/oas31/wrap-components/models.jsx

@@ -9,6 +9,7 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
   const { getComponent, fn } = getSystem()
   const Models = getComponent("OAS31Models", true)
   const JSONSchema = getComponent("JSONSchema202012")
+  const Keyword$schema = getComponent("JSONSchema202012Keyword$schema")
   const KeywordProperties = getComponent("JSONSchema202012KeywordProperties")
   const KeywordType = getComponent("JSONSchema202012KeywordType")
   const KeywordFormat = getComponent("JSONSchema202012KeywordFormat")
@@ -28,6 +29,7 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
     },
     components: {
       JSONSchema,
+      Keyword$schema,
       KeywordProperties,
       KeywordType,
       KeywordFormat,