diff --git a/src/core/plugins/json-schema-2020-12/components/JSONSchema/JSONSchema.jsx b/src/core/plugins/json-schema-2020-12/components/JSONSchema/JSONSchema.jsx
index cfd7c0be..d11d1181 100644
--- a/src/core/plugins/json-schema-2020-12/components/JSONSchema/JSONSchema.jsx
+++ b/src/core/plugins/json-schema-2020-12/components/JSONSchema/JSONSchema.jsx
@@ -33,6 +33,7 @@ const JSONSchema = ({ schema, name }) => {
const renderedSchemas = useRenderedSchemas(schema)
const Accordion = useComponent("Accordion")
const Keyword$schema = useComponent("Keyword$schema")
+ const Keyword$vocabulary = useComponent("Keyword$vocabulary")
const KeywordProperties = useComponent("KeywordProperties")
const KeywordType = useComponent("KeywordType")
const KeywordFormat = useComponent("KeywordFormat")
@@ -97,6 +98,7 @@ const JSONSchema = ({ schema, name }) => {
)}
+
)}
diff --git a/src/core/plugins/json-schema-2020-12/components/_all.scss b/src/core/plugins/json-schema-2020-12/components/_all.scss
index 60f423e5..0956d7d8 100644
--- a/src/core/plugins/json-schema-2020-12/components/_all.scss
+++ b/src/core/plugins/json-schema-2020-12/components/_all.scss
@@ -1,6 +1,7 @@
@import './JSONSchema/json-schema';
@import './Accordion/accordion';
@import './ExpandDeepButton/expand-deep-button';
+@import './keywords/$vocabulary/$vocabulary';
@import './keywords/Type/type';
@import './keywords/Format/format';
@import './keywords/Description/description';
diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/$vocabulary/$vocabulary.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/$vocabulary/$vocabulary.jsx
new file mode 100644
index 00000000..f6f0b536
--- /dev/null
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/$vocabulary/$vocabulary.jsx
@@ -0,0 +1,50 @@
+/**
+ * @prettier
+ */
+import React, { useCallback, useState } from "react"
+import classNames from "classnames"
+
+import { schema } from "../../../prop-types"
+import { useComponent, useIsExpandedDeeply } from "../../../hooks"
+
+const $vocabulary = ({ schema }) => {
+ if (!schema?.$vocabulary) return null
+ if (typeof schema.$vocabulary !== "object") return null
+
+ const isExpandedDeeply = useIsExpandedDeeply()
+ const [expanded, setExpanded] = useState(isExpandedDeeply)
+ const Accordion = useComponent("Accordion")
+
+ const handleExpansion = useCallback(() => {
+ setExpanded((prev) => !prev)
+ }, [])
+
+ return (
+
+
+ $vocabulary
+
+
+ {expanded &&
+ Object.entries(schema.$vocabulary).map(([uri, enabled]) => (
+ -
+
+ {uri}
+
+
+ ))}
+
+
+ )
+}
+
+$vocabulary.propTypes = {
+ schema: schema.isRequired,
+}
+
+export default $vocabulary
diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/$vocabulary/_$vocabulary.scss b/src/core/plugins/json-schema-2020-12/components/keywords/$vocabulary/_$vocabulary.scss
new file mode 100644
index 00000000..8bb1f25b
--- /dev/null
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/$vocabulary/_$vocabulary.scss
@@ -0,0 +1,14 @@
+.json-schema-2020-12 {
+ &__\$vocabulary {
+ ul {
+ margin: 0 0 0 20px;
+ border-left: 1px dashed rgba($section-models-model-container-background-color, 0.1);
+ }
+ }
+
+ &__\$vocabulary-uri {
+ &--disabled {
+ text-decoration: line-through;
+ }
+ }
+}
diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/Description/_description.scss b/src/core/plugins/json-schema-2020-12/components/keywords/Description/_description.scss
index 291e1663..98fb434f 100644
--- a/src/core/plugins/json-schema-2020-12/components/keywords/Description/_description.scss
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/Description/_description.scss
@@ -2,4 +2,8 @@
color: #6b6b6b;
font-size: 12px;
margin-left: 20px;
+
+ & p {
+ margin: 0;
+ }
}
diff --git a/src/core/plugins/json-schema-2020-12/fn.js b/src/core/plugins/json-schema-2020-12/fn.js
index 64ce503e..6b6024cc 100644
--- a/src/core/plugins/json-schema-2020-12/fn.js
+++ b/src/core/plugins/json-schema-2020-12/fn.js
@@ -112,5 +112,10 @@ export const getType = (schema, processedSchemas = new WeakSet()) => {
export const isBooleanJSONSchema = (schema) => typeof schema === "boolean"
export const isExpandable = (schema) => {
- return schema?.description || schema?.properties || schema?.$schema
+ return (
+ schema?.$schema ||
+ schema?.$vocabulary ||
+ schema?.description ||
+ schema?.properties
+ )
}
diff --git a/src/core/plugins/json-schema-2020-12/hoc.jsx b/src/core/plugins/json-schema-2020-12/hoc.jsx
index e025886b..9cbe91c0 100644
--- a/src/core/plugins/json-schema-2020-12/hoc.jsx
+++ b/src/core/plugins/json-schema-2020-12/hoc.jsx
@@ -5,6 +5,7 @@ import React from "react"
import JSONSchema from "./components/JSONSchema/JSONSchema"
import Keyword$schema from "./components/keywords/$schema"
+import Keyword$vocabulary from "./components/keywords/$vocabulary/$vocabulary"
import KeywordProperties from "./components/keywords/Properties"
import KeywordType from "./components/keywords/Type/Type"
import KeywordFormat from "./components/keywords/Format/Format"
@@ -27,6 +28,7 @@ export const withJSONSchemaContext = (Component, overrides = {}) => {
components: {
JSONSchema,
Keyword$schema,
+ Keyword$vocabulary,
KeywordProperties,
KeywordType,
KeywordFormat,
diff --git a/src/core/plugins/json-schema-2020-12/index.js b/src/core/plugins/json-schema-2020-12/index.js
index 35d2188d..d55f6f7d 100644
--- a/src/core/plugins/json-schema-2020-12/index.js
+++ b/src/core/plugins/json-schema-2020-12/index.js
@@ -4,6 +4,7 @@
import JSONSchema from "./components/JSONSchema/JSONSchema"
import KeywordProperties from "./components/keywords/Properties"
import Keyword$schema from "./components/keywords/$schema"
+import Keyword$vocabulary from "./components/keywords/$vocabulary/$vocabulary"
import KeywordType from "./components/keywords/Type/Type"
import KeywordFormat from "./components/keywords/Format/Format"
import KeywordTitle from "./components/keywords/Title/Title"
@@ -18,6 +19,7 @@ const JSONSchema202012Plugin = () => ({
components: {
JSONSchema202012: JSONSchema,
JSONSchema202012Keyword$schema: Keyword$schema,
+ JSONSchema202012Keyword$vocabulary: Keyword$vocabulary,
JSONSchema202012KeywordProperties: KeywordProperties,
JSONSchema202012KeywordType: KeywordType,
JSONSchema202012KeywordFormat: KeywordFormat,
diff --git a/src/core/plugins/oas31/wrap-components/models.jsx b/src/core/plugins/oas31/wrap-components/models.jsx
index bb5cf7f0..15173512 100644
--- a/src/core/plugins/oas31/wrap-components/models.jsx
+++ b/src/core/plugins/oas31/wrap-components/models.jsx
@@ -10,6 +10,7 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
const Models = getComponent("OAS31Models", true)
const JSONSchema = getComponent("JSONSchema202012")
const Keyword$schema = getComponent("JSONSchema202012Keyword$schema")
+ const Keyword$vocabulary = getComponent("JSONSchema202012Keyword$vocabulary")
const KeywordProperties = getComponent("JSONSchema202012KeywordProperties")
const KeywordType = getComponent("JSONSchema202012KeywordType")
const KeywordFormat = getComponent("JSONSchema202012KeywordFormat")
@@ -30,6 +31,7 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
components: {
JSONSchema,
Keyword$schema,
+ Keyword$vocabulary,
KeywordProperties,
KeywordType,
KeywordFormat,