@redocly/theme 0.2.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Markdown/MarkdownWrapper.js +1 -1
- package/SourceCode/SourceCode.js +54 -9
- package/TableOfContent/TableOfContent.js +7 -18
- package/TableOfContent/utils.d.ts +4 -0
- package/TableOfContent/utils.js +65 -0
- package/package.json +1 -1
- package/src/Markdown/MarkdownWrapper.tsx +24 -0
- package/src/SourceCode/SourceCode.tsx +16 -5
- package/src/TableOfContent/TableOfContent.tsx +11 -18
- package/src/TableOfContent/utils.ts +45 -0
|
@@ -39,5 +39,5 @@ function headingAnchor(className) {
|
|
|
39
39
|
exports.headingAnchor = headingAnchor;
|
|
40
40
|
exports.MarkdownWrapper = styled_components_1.default.main.attrs(function () { return ({
|
|
41
41
|
'data-component-name': 'Markdown/MarkdownWrapper',
|
|
42
|
-
}); })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-weight: var(--font-weight-regular);\n padding: 0;\n\n color: var(--color-content);\n font-size: var(--font-size-base);\n font-family: var(--font-family-base);\n line-height: var(--line-height-base);\n\n a:not([role='button']) {\n text-decoration: var(--link-decoration);\n color: var(--link-color);\n\n &:visited {\n color: var(--link-color);\n }\n\n &:hover {\n color: var(--link-color-hover);\n }\n }\n\n img {\n max-width: 100%;\n }\n\n h1.md,\n h2.md,\n h3.md,\n h4.md,\n h5.md,\n h6.md {\n font-weight: var(--h-font-weight);\n font-family: var(--h-font-family);\n position: relative;\n\n scroll-margin-top: 60px;\n }\n\n strong {\n font-weight: var(--font-weight-bold);\n }\n\n hr {\n border-top: 1px solid var(--global-border-color);\n }\n\n details {\n margin: 1.125em 0;\n\n summary {\n color: var(--color-content);\n font-weight: var(--font-weight-regular);\n outline: 0;\n padding: 0;\n cursor: pointer;\n }\n\n > :not(summary):first-of-type {\n margin-top: 1.25em;\n }\n\n > *:last-child {\n margin-bottom: 1.25em;\n }\n }\n\n ", ";\n\n .code-snippets-tabs {\n .snippets-tabs-headers {\n font-size: 0.9em;\n\n font-family: var(--h-font-family);\n\n .tab-header {\n text-align: center;\n padding: 0.2em 0.5em;\n display: inline-block;\n cursor: pointer;\n color: var(--color-content-secondary);\n\n &.active {\n color: var(--h-color);\n font-weight: var(--font-weight-bold);\n }\n }\n }\n\n .tab-content {\n margin-top: 4px;\n display: none;\n\n pre {\n margin-top: 0;\n }\n\n &.active {\n display: block;\n }\n }\n }\n\n p {\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n h1.md {\n ", ";\n margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;\n ", ";\n\n &:first-child {\n margin-top: 0;\n }\n }\n\n h2.md {\n ", ";\n margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;\n ", ";\n }\n\n h3.md {\n ", ";\n margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;\n ", ";\n }\n\n h4.md {\n ", ";\n margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;\n ", ";\n }\n\n h5.md {\n ", ";\n margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;\n ", ";\n }\n\n h6.md {\n ", ";\n margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;\n ", ";\n }\n\n code {\n color: var(--inline-code-color);\n background-color: var(--inline-code-background-color);\n\n border-radius: 2px;\n border: 1px solid var(--global-border-color);\n padding: 0.1em 0.25em 0.2em;\n font-weight: var(--code-font-weight);\n word-break: break-word;\n font-size: var(--code-font-size);\n font-family: var(--code-font-family);\n }\n\n blockquote {\n margin: var(--bloquote-margin-vertical) var(--bloquote-margin-horizontal);\n padding: var(--bloquote-padding-vertical) var(--bloquote-padding-horizontal);\n border-left: 4px solid var(--global-border-color);\n background-color: var(--bloquote-background-color);\n color: var(--color-content);\n\n & > p:first-child {\n margin-top: 0;\n }\n }\n\n img {\n max-width: 100%;\n box-sizing: content-box;\n margin: 0 auto;\n\n &:only-child {\n display: block;\n }\n }\n\n > ul,\n > p ul {\n > ol,\n > p ol {\n padding-left: 2em;\n margin: 0 0 1em;\n\n ul,\n ol {\n margin-bottom: 0;\n margin-top: 0;\n }\n }\n }\n"], ["\n font-weight: var(--font-weight-regular);\n padding: 0;\n\n color: var(--color-content);\n font-size: var(--font-size-base);\n font-family: var(--font-family-base);\n line-height: var(--line-height-base);\n\n a:not([role='button']) {\n text-decoration: var(--link-decoration);\n color: var(--link-color);\n\n &:visited {\n color: var(--link-color);\n }\n\n &:hover {\n color: var(--link-color-hover);\n }\n }\n\n img {\n max-width: 100%;\n }\n\n h1.md,\n h2.md,\n h3.md,\n h4.md,\n h5.md,\n h6.md {\n font-weight: var(--h-font-weight);\n font-family: var(--h-font-family);\n position: relative;\n\n scroll-margin-top: 60px;\n }\n\n strong {\n font-weight: var(--font-weight-bold);\n }\n\n hr {\n border-top: 1px solid var(--global-border-color);\n }\n\n details {\n margin: 1.125em 0;\n\n summary {\n color: var(--color-content);\n font-weight: var(--font-weight-regular);\n outline: 0;\n padding: 0;\n cursor: pointer;\n }\n\n > :not(summary):first-of-type {\n margin-top: 1.25em;\n }\n\n > *:last-child {\n margin-bottom: 1.25em;\n }\n }\n\n ", ";\n\n .code-snippets-tabs {\n .snippets-tabs-headers {\n font-size: 0.9em;\n\n font-family: var(--h-font-family);\n\n .tab-header {\n text-align: center;\n padding: 0.2em 0.5em;\n display: inline-block;\n cursor: pointer;\n color: var(--color-content-secondary);\n\n &.active {\n color: var(--h-color);\n font-weight: var(--font-weight-bold);\n }\n }\n }\n\n .tab-content {\n margin-top: 4px;\n display: none;\n\n pre {\n margin-top: 0;\n }\n\n &.active {\n display: block;\n }\n }\n }\n\n p {\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n h1.md {\n ", ";\n margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;\n ", ";\n\n &:first-child {\n margin-top: 0;\n }\n }\n\n h2.md {\n ", ";\n margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;\n ", ";\n }\n\n h3.md {\n ", ";\n margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;\n ", ";\n }\n\n h4.md {\n ", ";\n margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;\n ", ";\n }\n\n h5.md {\n ", ";\n margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;\n ", ";\n }\n\n h6.md {\n ", ";\n margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;\n ", ";\n }\n\n code {\n color: var(--inline-code-color);\n background-color: var(--inline-code-background-color);\n\n border-radius: 2px;\n border: 1px solid var(--global-border-color);\n padding: 0.1em 0.25em 0.2em;\n font-weight: var(--code-font-weight);\n word-break: break-word;\n font-size: var(--code-font-size);\n font-family: var(--code-font-family);\n }\n\n blockquote {\n margin: var(--bloquote-margin-vertical) var(--bloquote-margin-horizontal);\n padding: var(--bloquote-padding-vertical) var(--bloquote-padding-horizontal);\n border-left: 4px solid var(--global-border-color);\n background-color: var(--bloquote-background-color);\n color: var(--color-content);\n\n & > p:first-child {\n margin-top: 0;\n }\n }\n\n img {\n max-width: 100%;\n box-sizing: content-box;\n margin: 0 auto;\n\n &:only-child {\n display: block;\n }\n }\n\n > ul,\n > p ul {\n > ol,\n > p ol {\n padding-left: 2em;\n margin: 0 0 1em;\n\n ul,\n ol {\n margin-bottom: 0;\n margin-top: 0;\n }\n }\n }\n"])), exports.baseTable, (0, utils_1.typography)('h1', 'h'), headingAnchor(), (0, utils_1.typography)('h2', 'h'), headingAnchor(), (0, utils_1.typography)('h3', 'h'), headingAnchor(), (0, utils_1.typography)('h4', 'h'), headingAnchor(), (0, utils_1.typography)('h5', 'h'), headingAnchor(), (0, utils_1.typography)('h6', 'h'), headingAnchor());
|
|
42
|
+
}); })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-weight: var(--font-weight-regular);\n padding: 0;\n\n color: var(--color-content);\n font-size: var(--font-size-base);\n font-family: var(--font-family-base);\n line-height: var(--line-height-base);\n\n a:not([role='button']) {\n text-decoration: var(--link-decoration);\n color: var(--link-color);\n\n &:visited {\n color: var(--link-color);\n }\n\n &:hover {\n color: var(--link-color-hover);\n }\n }\n\n img {\n max-width: 100%;\n }\n\n h1.md,\n h2.md,\n h3.md,\n h4.md,\n h5.md,\n h6.md {\n font-weight: var(--h-font-weight);\n font-family: var(--h-font-family);\n position: relative;\n\n scroll-margin-top: 60px;\n }\n\n strong {\n font-weight: var(--font-weight-bold);\n }\n\n hr {\n border-top: 1px solid var(--global-border-color);\n }\n\n details {\n margin: 1.125em 0;\n\n summary {\n color: var(--color-content);\n font-weight: var(--font-weight-regular);\n outline: 0;\n padding: 0;\n cursor: pointer;\n }\n\n > :not(summary):first-of-type {\n margin-top: 1.25em;\n }\n\n > *:last-child {\n margin-bottom: 1.25em;\n }\n }\n\n ", ";\n\n .code-snippets-tabs {\n .snippets-tabs-headers {\n font-size: 0.9em;\n\n font-family: var(--h-font-family);\n\n .tab-header {\n text-align: center;\n padding: 0.2em 0.5em;\n display: inline-block;\n cursor: pointer;\n color: var(--color-content-secondary);\n\n &.active {\n color: var(--h-color);\n font-weight: var(--font-weight-bold);\n }\n }\n }\n\n .tab-content {\n margin-top: 4px;\n display: none;\n\n pre {\n margin-top: 0;\n }\n\n &.active {\n display: block;\n }\n }\n }\n\n p {\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n h1.md {\n ", ";\n margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;\n ", ";\n\n &:first-child {\n margin-top: 0;\n }\n }\n\n h2.md {\n ", ";\n margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;\n ", ";\n }\n\n h3.md {\n ", ";\n margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;\n ", ";\n }\n\n h4.md {\n ", ";\n margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;\n ", ";\n }\n\n h5.md {\n ", ";\n margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;\n ", ";\n }\n\n h6.md {\n ", ";\n margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;\n ", ";\n }\n\n h1.md code {\n font-size: var(--h1-font-size);\n }\n\n h2.md code {\n font-size: var(--h2-font-size);\n }\n\n h3.md code {\n font-size: var(--h3-font-size);\n }\n\n h4.md code {\n font-size: var(--h4-font-size);\n }\n\n h5.md code {\n font-size: var(--h5-font-size);\n }\n\n h6.md code {\n font-size: var(--h6-font-size);\n }\n\n code {\n color: var(--inline-code-color);\n background-color: var(--inline-code-background-color);\n\n border-radius: 2px;\n border: 1px solid var(--global-border-color);\n padding: 0.1em 0.25em 0.2em;\n font-weight: var(--code-font-weight);\n word-break: break-word;\n font-size: var(--code-font-size);\n font-family: var(--code-font-family);\n }\n\n blockquote {\n margin: var(--bloquote-margin-vertical) var(--bloquote-margin-horizontal);\n padding: var(--bloquote-padding-vertical) var(--bloquote-padding-horizontal);\n border-left: 4px solid var(--global-border-color);\n background-color: var(--bloquote-background-color);\n color: var(--color-content);\n\n & > p:first-child {\n margin-top: 0;\n }\n }\n\n img {\n max-width: 100%;\n box-sizing: content-box;\n margin: 0 auto;\n\n &:only-child {\n display: block;\n }\n }\n\n > ul,\n > p ul {\n > ol,\n > p ol {\n padding-left: 2em;\n margin: 0 0 1em;\n\n ul,\n ol {\n margin-bottom: 0;\n margin-top: 0;\n }\n }\n }\n"], ["\n font-weight: var(--font-weight-regular);\n padding: 0;\n\n color: var(--color-content);\n font-size: var(--font-size-base);\n font-family: var(--font-family-base);\n line-height: var(--line-height-base);\n\n a:not([role='button']) {\n text-decoration: var(--link-decoration);\n color: var(--link-color);\n\n &:visited {\n color: var(--link-color);\n }\n\n &:hover {\n color: var(--link-color-hover);\n }\n }\n\n img {\n max-width: 100%;\n }\n\n h1.md,\n h2.md,\n h3.md,\n h4.md,\n h5.md,\n h6.md {\n font-weight: var(--h-font-weight);\n font-family: var(--h-font-family);\n position: relative;\n\n scroll-margin-top: 60px;\n }\n\n strong {\n font-weight: var(--font-weight-bold);\n }\n\n hr {\n border-top: 1px solid var(--global-border-color);\n }\n\n details {\n margin: 1.125em 0;\n\n summary {\n color: var(--color-content);\n font-weight: var(--font-weight-regular);\n outline: 0;\n padding: 0;\n cursor: pointer;\n }\n\n > :not(summary):first-of-type {\n margin-top: 1.25em;\n }\n\n > *:last-child {\n margin-bottom: 1.25em;\n }\n }\n\n ", ";\n\n .code-snippets-tabs {\n .snippets-tabs-headers {\n font-size: 0.9em;\n\n font-family: var(--h-font-family);\n\n .tab-header {\n text-align: center;\n padding: 0.2em 0.5em;\n display: inline-block;\n cursor: pointer;\n color: var(--color-content-secondary);\n\n &.active {\n color: var(--h-color);\n font-weight: var(--font-weight-bold);\n }\n }\n }\n\n .tab-content {\n margin-top: 4px;\n display: none;\n\n pre {\n margin-top: 0;\n }\n\n &.active {\n display: block;\n }\n }\n }\n\n p {\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n h1.md {\n ", ";\n margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;\n ", ";\n\n &:first-child {\n margin-top: 0;\n }\n }\n\n h2.md {\n ", ";\n margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;\n ", ";\n }\n\n h3.md {\n ", ";\n margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;\n ", ";\n }\n\n h4.md {\n ", ";\n margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;\n ", ";\n }\n\n h5.md {\n ", ";\n margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;\n ", ";\n }\n\n h6.md {\n ", ";\n margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;\n ", ";\n }\n\n h1.md code {\n font-size: var(--h1-font-size);\n }\n\n h2.md code {\n font-size: var(--h2-font-size);\n }\n\n h3.md code {\n font-size: var(--h3-font-size);\n }\n\n h4.md code {\n font-size: var(--h4-font-size);\n }\n\n h5.md code {\n font-size: var(--h5-font-size);\n }\n\n h6.md code {\n font-size: var(--h6-font-size);\n }\n\n code {\n color: var(--inline-code-color);\n background-color: var(--inline-code-background-color);\n\n border-radius: 2px;\n border: 1px solid var(--global-border-color);\n padding: 0.1em 0.25em 0.2em;\n font-weight: var(--code-font-weight);\n word-break: break-word;\n font-size: var(--code-font-size);\n font-family: var(--code-font-family);\n }\n\n blockquote {\n margin: var(--bloquote-margin-vertical) var(--bloquote-margin-horizontal);\n padding: var(--bloquote-padding-vertical) var(--bloquote-padding-horizontal);\n border-left: 4px solid var(--global-border-color);\n background-color: var(--bloquote-background-color);\n color: var(--color-content);\n\n & > p:first-child {\n margin-top: 0;\n }\n }\n\n img {\n max-width: 100%;\n box-sizing: content-box;\n margin: 0 auto;\n\n &:only-child {\n display: block;\n }\n }\n\n > ul,\n > p ul {\n > ol,\n > p ol {\n padding-left: 2em;\n margin: 0 0 1em;\n\n ul,\n ol {\n margin-bottom: 0;\n margin-top: 0;\n }\n }\n }\n"])), exports.baseTable, (0, utils_1.typography)('h1', 'h'), headingAnchor(), (0, utils_1.typography)('h2', 'h'), headingAnchor(), (0, utils_1.typography)('h3', 'h'), headingAnchor(), (0, utils_1.typography)('h4', 'h'), headingAnchor(), (0, utils_1.typography)('h5', 'h'), headingAnchor(), (0, utils_1.typography)('h6', 'h'), headingAnchor());
|
|
43
43
|
var templateObject_1, templateObject_2, templateObject_3;
|
package/SourceCode/SourceCode.js
CHANGED
|
@@ -1,10 +1,46 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var
|
|
3
|
-
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __read = (this && this.__read) || function (o, n) {
|
|
26
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
27
|
+
if (!m) return o;
|
|
28
|
+
var i = m.call(o), r, ar = [], e;
|
|
29
|
+
try {
|
|
30
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
31
|
+
}
|
|
32
|
+
catch (error) { e = { error: error }; }
|
|
33
|
+
finally {
|
|
34
|
+
try {
|
|
35
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
36
|
+
}
|
|
37
|
+
finally { if (e) throw e.error; }
|
|
38
|
+
}
|
|
39
|
+
return ar;
|
|
4
40
|
};
|
|
5
41
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
42
|
exports.SourceCode = exports.Code = void 0;
|
|
7
|
-
var react_1 =
|
|
43
|
+
var react_1 = __importStar(require("react"));
|
|
8
44
|
var utils_1 = require("../utils");
|
|
9
45
|
var SamplesPanelControls_1 = require("../SamplesPanelControls");
|
|
10
46
|
var CopyButton_1 = require("../CopyButton");
|
|
@@ -19,17 +55,26 @@ function Code(_a) {
|
|
|
19
55
|
}
|
|
20
56
|
exports.Code = Code;
|
|
21
57
|
function SourceCode(_a) {
|
|
22
|
-
var _b,
|
|
23
|
-
var
|
|
24
|
-
|
|
58
|
+
var lang = _a.lang, source = _a.source, externalSource = _a.externalSource, withCopyButton = _a.withCopyButton, _b = _a.dataTestId, dataTestId = _b === void 0 ? 'source-code' : _b, withLineNumbers = _a.withLineNumbers, startLineNumber = _a.startLineNumber;
|
|
59
|
+
var _c = __read((0, react_1.useState)(source !== null && source !== void 0 ? source : ''), 2), sourceCode = _c[0], setSourceCode = _c[1];
|
|
60
|
+
// The same initial value should be returned for ssr and frontend to avoid issues
|
|
61
|
+
// Because we don't have session storage in ssr and can't get the security details there
|
|
62
|
+
// Issue for more details https://github.com/Redocly/reference-docs/issues/888
|
|
63
|
+
(0, react_1.useEffect)(function () {
|
|
64
|
+
var _a, _b, _c;
|
|
65
|
+
var _externalSource = (_c = (_b = (_a = externalSource === null || externalSource === void 0 ? void 0 : externalSource.sample) === null || _a === void 0 ? void 0 : _a.get) === null || _b === void 0 ? void 0 : _b.call(_a, externalSource)) !== null && _c !== void 0 ? _c : '';
|
|
66
|
+
if (_externalSource) {
|
|
67
|
+
setSourceCode(_externalSource);
|
|
68
|
+
}
|
|
69
|
+
}, [externalSource]);
|
|
25
70
|
if (withCopyButton) {
|
|
26
|
-
return (react_1.default.createElement(CopyButton_1.CopyButtonWrapper, { data:
|
|
71
|
+
return (react_1.default.createElement(CopyButton_1.CopyButtonWrapper, { data: sourceCode, "data-component-name": "SourceCode/SourceCode" }, function (_a) {
|
|
27
72
|
var renderCopyButton = _a.renderCopyButton;
|
|
28
73
|
return (react_1.default.createElement(SamplesPanelControls_1.SampleControlsWrap, null,
|
|
29
74
|
react_1.default.createElement(SamplesPanelControls_1.SampleControls, { "data-cy": "copy-button" }, renderCopyButton()),
|
|
30
|
-
react_1.default.createElement(Code, { lang: lang, source:
|
|
75
|
+
react_1.default.createElement(Code, { lang: lang, source: sourceCode, withLineNumbers: withLineNumbers, startLineNumber: startLineNumber, dataTestId: dataTestId })));
|
|
31
76
|
}));
|
|
32
77
|
}
|
|
33
|
-
return (react_1.default.createElement(Code, { dataTestId: dataTestId, lang: lang, source:
|
|
78
|
+
return (react_1.default.createElement(Code, { dataTestId: dataTestId, lang: lang, source: sourceCode, withLineNumbers: withLineNumbers, startLineNumber: startLineNumber, "data-component-name": "SourceCode/SourceCode" }));
|
|
34
79
|
}
|
|
35
80
|
exports.SourceCode = SourceCode;
|
|
@@ -33,6 +33,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
33
33
|
exports.TableOfContent = void 0;
|
|
34
34
|
var react_1 = __importStar(require("react"));
|
|
35
35
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
36
|
+
var utils_1 = require("./utils");
|
|
36
37
|
var useFullHeight_1 = require("../hooks/useFullHeight");
|
|
37
38
|
var hooks_1 = require("../mocks/hooks");
|
|
38
39
|
var useActiveHeading_1 = require("../hooks/useActiveHeading");
|
|
@@ -43,15 +44,9 @@ function TableOfContent(props) {
|
|
|
43
44
|
var sidebar = (0, react_1.useRef)(null);
|
|
44
45
|
(0, useFullHeight_1.useFullHeight)(sidebar);
|
|
45
46
|
var toc = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME).toc;
|
|
46
|
-
var
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
}
|
|
50
|
-
return headings
|
|
51
|
-
.filter(function (header) { return header && tocMaxDepth >= header.depth; })
|
|
52
|
-
.map(function (header) { return header === null || header === void 0 ? void 0 : header.id; });
|
|
53
|
-
};
|
|
54
|
-
var activeHeadingId = (0, useActiveHeading_1.useActiveHeading)(contentWrapper, getDisplayedHeaderIds());
|
|
47
|
+
var displayedHeadings = (0, utils_1.getDisplayedHeadings)(headings, tocMaxDepth);
|
|
48
|
+
var leastDepth = (0, utils_1.getLeastDepth)(displayedHeadings);
|
|
49
|
+
var activeHeadingId = (0, useActiveHeading_1.useActiveHeading)(contentWrapper, (0, utils_1.getDisplayedHeadingsIds)(displayedHeadings));
|
|
55
50
|
if (toc === null || toc === void 0 ? void 0 : toc.hide) {
|
|
56
51
|
return null;
|
|
57
52
|
}
|
|
@@ -64,26 +59,20 @@ function TableOfContent(props) {
|
|
|
64
59
|
return (react_1.default.createElement(react_1.default.Fragment, null, headings && (react_1.default.createElement(TableOfContentMenu, { "data-component-name": "TableOfContent/TableOfContent" },
|
|
65
60
|
react_1.default.createElement(TableOfContentItems, { ref: sidebar },
|
|
66
61
|
react_1.default.createElement(TocHeader, null, ((_a = toc === null || toc === void 0 ? void 0 : toc.header) === null || _a === void 0 ? void 0 : _a.label) || 'On this page'),
|
|
67
|
-
|
|
62
|
+
displayedHeadings.map(function (heading, idx) {
|
|
68
63
|
// TODO: not sure about !heading
|
|
69
64
|
if (!heading) {
|
|
70
65
|
return null;
|
|
71
66
|
}
|
|
72
|
-
if (idx === 0 && heading.depth === 1) {
|
|
73
|
-
return null;
|
|
74
|
-
}
|
|
75
|
-
if (heading.depth && heading.depth > tocMaxDepth) {
|
|
76
|
-
return null;
|
|
77
|
-
}
|
|
78
67
|
var href = '#' + heading.id;
|
|
79
|
-
return (react_1.default.createElement(MenuItem, { key: href + idx, href: href, depth: heading.depth || 0, className: activeHeadingId === heading.id ? 'active' : '', dangerouslySetInnerHTML: { __html: heading.value || '' }, "data-cy": "toc-".concat(heading.value) }));
|
|
68
|
+
return (react_1.default.createElement(MenuItem, { key: href + idx, href: href, depth: heading.depth - leastDepth + 1 || 0, className: activeHeadingId === heading.id ? 'active' : '', dangerouslySetInnerHTML: { __html: heading.value || '' }, "data-cy": "toc-".concat(heading.value) }));
|
|
80
69
|
}))))));
|
|
81
70
|
}
|
|
82
71
|
exports.TableOfContent = TableOfContent;
|
|
83
72
|
var TocHeader = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-size: 0.8em;\n padding: 10px 15px;\n font-weight: bold;\n text-transform: uppercase;\n"], ["\n font-size: 0.8em;\n padding: 10px 15px;\n font-weight: bold;\n text-transform: uppercase;\n"])));
|
|
84
73
|
var MenuItem = styled_components_1.default.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n color: var(--color-content);\n cursor: pointer;\n font-size: 0.8em;\n padding: 10px 15px;\n padding-left: ", "px;\n transition: background-color 0.3s, color 0.3s;\n text-decoration: none;\n word-break: break-word;\n font-family: var(--h-font-family);\n\n :hover,\n &.active {\n color: var(--sidebar-item-active-color);\n background-color: var(--sidebar-item-active-background-color);\n }\n\n :empty {\n padding: 0;\n }\n"], ["\n display: block;\n color: var(--color-content);\n cursor: pointer;\n font-size: 0.8em;\n padding: 10px 15px;\n padding-left: ", "px;\n transition: background-color 0.3s, color 0.3s;\n text-decoration: none;\n word-break: break-word;\n font-family: var(--h-font-family);\n\n :hover,\n &.active {\n color: var(--sidebar-item-active-color);\n background-color: var(--sidebar-item-active-background-color);\n }\n\n :empty {\n padding: 0;\n }\n"])), function (_a) {
|
|
85
74
|
var depth = _a.depth;
|
|
86
|
-
return
|
|
75
|
+
return depth * 15;
|
|
87
76
|
});
|
|
88
77
|
var TableOfContentMenu = styled_components_1.default.aside(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-size: 1rem;\n background-color: transparent;\n flex-shrink: 0;\n display: none !important;\n font-family: var(--font-family-base);\n\n ", " {\n width: var(--toc-width);\n display: block !important;\n }\n"], ["\n font-size: 1rem;\n background-color: transparent;\n flex-shrink: 0;\n display: none !important;\n font-family: var(--font-family-base);\n\n ", " {\n width: var(--toc-width);\n display: block !important;\n }\n"])), function (_a) {
|
|
89
78
|
var theme = _a.theme;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { MdHeading } from '@theme/types/portal';
|
|
2
|
+
export declare function getDisplayedHeadings(headings: Array<MdHeading | null> | null | undefined, tocMaxDepth: number): Array<MdHeading | null>;
|
|
3
|
+
export declare function getDisplayedHeadingsIds(headings: Array<MdHeading | null> | null | undefined): Array<string | undefined>;
|
|
4
|
+
export declare function getLeastDepth(headings: Array<MdHeading | null> | null | undefined): number;
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __values = (this && this.__values) || function(o) {
|
|
3
|
+
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
|
|
4
|
+
if (m) return m.call(o);
|
|
5
|
+
if (o && typeof o.length === "number") return {
|
|
6
|
+
next: function () {
|
|
7
|
+
if (o && i >= o.length) o = void 0;
|
|
8
|
+
return { value: o && o[i++], done: !o };
|
|
9
|
+
}
|
|
10
|
+
};
|
|
11
|
+
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
|
|
12
|
+
};
|
|
13
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
+
exports.getLeastDepth = exports.getDisplayedHeadingsIds = exports.getDisplayedHeadings = void 0;
|
|
15
|
+
function getDisplayedHeadings(headings, tocMaxDepth) {
|
|
16
|
+
if (!headings) {
|
|
17
|
+
return [];
|
|
18
|
+
}
|
|
19
|
+
return headings.filter(function (heading, idx) {
|
|
20
|
+
if (!heading) {
|
|
21
|
+
return false;
|
|
22
|
+
}
|
|
23
|
+
if (idx === 0 && heading.depth === 1) {
|
|
24
|
+
return false;
|
|
25
|
+
}
|
|
26
|
+
if (heading.depth && heading.depth > tocMaxDepth) {
|
|
27
|
+
return false;
|
|
28
|
+
}
|
|
29
|
+
return true;
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
exports.getDisplayedHeadings = getDisplayedHeadings;
|
|
33
|
+
function getDisplayedHeadingsIds(headings) {
|
|
34
|
+
if (!headings) {
|
|
35
|
+
return [];
|
|
36
|
+
}
|
|
37
|
+
return headings.map(function (header) { return header === null || header === void 0 ? void 0 : header.id; });
|
|
38
|
+
}
|
|
39
|
+
exports.getDisplayedHeadingsIds = getDisplayedHeadingsIds;
|
|
40
|
+
function getLeastDepth(headings) {
|
|
41
|
+
var e_1, _a;
|
|
42
|
+
if (!headings || headings.length === 0) {
|
|
43
|
+
return 1;
|
|
44
|
+
}
|
|
45
|
+
var depth = null;
|
|
46
|
+
try {
|
|
47
|
+
for (var headings_1 = __values(headings), headings_1_1 = headings_1.next(); !headings_1_1.done; headings_1_1 = headings_1.next()) {
|
|
48
|
+
var heading = headings_1_1.value;
|
|
49
|
+
if (!heading)
|
|
50
|
+
continue;
|
|
51
|
+
if (depth === null || depth > heading.depth) {
|
|
52
|
+
depth = heading.depth;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
57
|
+
finally {
|
|
58
|
+
try {
|
|
59
|
+
if (headings_1_1 && !headings_1_1.done && (_a = headings_1.return)) _a.call(headings_1);
|
|
60
|
+
}
|
|
61
|
+
finally { if (e_1) throw e_1.error; }
|
|
62
|
+
}
|
|
63
|
+
return depth !== null && depth !== void 0 ? depth : 1;
|
|
64
|
+
}
|
|
65
|
+
exports.getLeastDepth = getLeastDepth;
|
package/package.json
CHANGED
|
@@ -246,6 +246,30 @@ export const MarkdownWrapper = styled.main.attrs(() => ({
|
|
|
246
246
|
${headingAnchor()};
|
|
247
247
|
}
|
|
248
248
|
|
|
249
|
+
h1.md code {
|
|
250
|
+
font-size: var(--h1-font-size);
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
h2.md code {
|
|
254
|
+
font-size: var(--h2-font-size);
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
h3.md code {
|
|
258
|
+
font-size: var(--h3-font-size);
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
h4.md code {
|
|
262
|
+
font-size: var(--h4-font-size);
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
h5.md code {
|
|
266
|
+
font-size: var(--h5-font-size);
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
h6.md code {
|
|
270
|
+
font-size: var(--h6-font-size);
|
|
271
|
+
}
|
|
272
|
+
|
|
249
273
|
code {
|
|
250
274
|
color: var(--inline-code-color);
|
|
251
275
|
background-color: var(--inline-code-background-color);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useEffect, useState } from 'react';
|
|
2
2
|
|
|
3
3
|
import { highlight, addLineNumbers } from '@theme/utils';
|
|
4
4
|
import {
|
|
@@ -72,16 +72,27 @@ export function SourceCode({
|
|
|
72
72
|
withLineNumbers,
|
|
73
73
|
startLineNumber,
|
|
74
74
|
}: SourceCodeProps): JSX.Element {
|
|
75
|
-
const
|
|
75
|
+
const [sourceCode, setSourceCode] = useState<string>(source ?? '');
|
|
76
|
+
|
|
77
|
+
// The same initial value should be returned for ssr and frontend to avoid issues
|
|
78
|
+
// Because we don't have session storage in ssr and can't get the security details there
|
|
79
|
+
// Issue for more details https://github.com/Redocly/reference-docs/issues/888
|
|
80
|
+
useEffect(() => {
|
|
81
|
+
const _externalSource = externalSource?.sample?.get?.(externalSource) ?? '';
|
|
82
|
+
if (_externalSource) {
|
|
83
|
+
setSourceCode(_externalSource);
|
|
84
|
+
}
|
|
85
|
+
}, [externalSource]);
|
|
86
|
+
|
|
76
87
|
if (withCopyButton) {
|
|
77
88
|
return (
|
|
78
|
-
<CopyButtonWrapper data={
|
|
89
|
+
<CopyButtonWrapper data={sourceCode} data-component-name="SourceCode/SourceCode">
|
|
79
90
|
{({ renderCopyButton }) => (
|
|
80
91
|
<SampleControlsWrap>
|
|
81
92
|
<SampleControls data-cy="copy-button">{renderCopyButton()}</SampleControls>
|
|
82
93
|
<Code
|
|
83
94
|
lang={lang}
|
|
84
|
-
source={
|
|
95
|
+
source={sourceCode}
|
|
85
96
|
withLineNumbers={withLineNumbers}
|
|
86
97
|
startLineNumber={startLineNumber}
|
|
87
98
|
dataTestId={dataTestId}
|
|
@@ -96,7 +107,7 @@ export function SourceCode({
|
|
|
96
107
|
<Code
|
|
97
108
|
dataTestId={dataTestId}
|
|
98
109
|
lang={lang}
|
|
99
|
-
source={
|
|
110
|
+
source={sourceCode}
|
|
100
111
|
withLineNumbers={withLineNumbers}
|
|
101
112
|
startLineNumber={startLineNumber}
|
|
102
113
|
data-component-name="SourceCode/SourceCode"
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import React, { useRef } from 'react';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
|
|
4
|
+
import { getDisplayedHeadingsIds, getDisplayedHeadings, getLeastDepth } from './utils';
|
|
5
|
+
|
|
4
6
|
import { useFullHeight } from '@theme/hooks/useFullHeight';
|
|
5
7
|
import { useThemeSettings } from '@portal/hooks';
|
|
6
8
|
import { useActiveHeading } from '@theme/hooks/useActiveHeading';
|
|
@@ -20,16 +22,13 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
|
|
|
20
22
|
useFullHeight(sidebar);
|
|
21
23
|
const { toc } = useThemeSettings(DEFAULT_THEME_NAME);
|
|
22
24
|
|
|
23
|
-
const
|
|
24
|
-
|
|
25
|
-
return [];
|
|
26
|
-
}
|
|
27
|
-
return headings
|
|
28
|
-
.filter((header) => header && tocMaxDepth >= header.depth)
|
|
29
|
-
.map((header) => header?.id);
|
|
30
|
-
};
|
|
25
|
+
const displayedHeadings = getDisplayedHeadings(headings, tocMaxDepth);
|
|
26
|
+
const leastDepth = getLeastDepth(displayedHeadings);
|
|
31
27
|
|
|
32
|
-
const activeHeadingId = useActiveHeading(
|
|
28
|
+
const activeHeadingId = useActiveHeading(
|
|
29
|
+
contentWrapper,
|
|
30
|
+
getDisplayedHeadingsIds(displayedHeadings),
|
|
31
|
+
);
|
|
33
32
|
|
|
34
33
|
if (toc?.hide) {
|
|
35
34
|
return null;
|
|
@@ -47,23 +46,17 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
|
|
|
47
46
|
<TableOfContentMenu data-component-name="TableOfContent/TableOfContent">
|
|
48
47
|
<TableOfContentItems ref={sidebar}>
|
|
49
48
|
<TocHeader>{toc?.header?.label || 'On this page'}</TocHeader>
|
|
50
|
-
{
|
|
49
|
+
{displayedHeadings.map((heading: MdHeading | null, idx: number) => {
|
|
51
50
|
// TODO: not sure about !heading
|
|
52
51
|
if (!heading) {
|
|
53
52
|
return null;
|
|
54
53
|
}
|
|
55
|
-
if (idx === 0 && heading.depth === 1) {
|
|
56
|
-
return null;
|
|
57
|
-
}
|
|
58
|
-
if (heading.depth && heading.depth > tocMaxDepth) {
|
|
59
|
-
return null;
|
|
60
|
-
}
|
|
61
54
|
const href = '#' + heading.id;
|
|
62
55
|
return (
|
|
63
56
|
<MenuItem
|
|
64
57
|
key={href + idx}
|
|
65
58
|
href={href}
|
|
66
|
-
depth={heading.depth || 0}
|
|
59
|
+
depth={heading.depth - leastDepth + 1 || 0}
|
|
67
60
|
className={activeHeadingId === heading.id ? 'active' : ''}
|
|
68
61
|
dangerouslySetInnerHTML={{ __html: heading.value || '' }}
|
|
69
62
|
data-cy={`toc-${heading.value}`}
|
|
@@ -90,7 +83,7 @@ const MenuItem = styled.a<{ depth: number }>`
|
|
|
90
83
|
cursor: pointer;
|
|
91
84
|
font-size: 0.8em;
|
|
92
85
|
padding: 10px 15px;
|
|
93
|
-
padding-left: ${({ depth }) =>
|
|
86
|
+
padding-left: ${({ depth }) => depth * 15}px;
|
|
94
87
|
transition: background-color 0.3s, color 0.3s;
|
|
95
88
|
text-decoration: none;
|
|
96
89
|
word-break: break-word;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { MdHeading } from '@theme/types/portal';
|
|
2
|
+
|
|
3
|
+
export function getDisplayedHeadings(
|
|
4
|
+
headings: Array<MdHeading | null> | null | undefined,
|
|
5
|
+
tocMaxDepth: number,
|
|
6
|
+
): Array<MdHeading | null> {
|
|
7
|
+
if (!headings) {
|
|
8
|
+
return [];
|
|
9
|
+
}
|
|
10
|
+
return headings.filter((heading, idx) => {
|
|
11
|
+
if (!heading) {
|
|
12
|
+
return false;
|
|
13
|
+
}
|
|
14
|
+
if (idx === 0 && heading.depth === 1) {
|
|
15
|
+
return false;
|
|
16
|
+
}
|
|
17
|
+
if (heading.depth && heading.depth > tocMaxDepth) {
|
|
18
|
+
return false;
|
|
19
|
+
}
|
|
20
|
+
return true;
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export function getDisplayedHeadingsIds(
|
|
25
|
+
headings: Array<MdHeading | null> | null | undefined,
|
|
26
|
+
): Array<string | undefined> {
|
|
27
|
+
if (!headings) {
|
|
28
|
+
return [];
|
|
29
|
+
}
|
|
30
|
+
return headings.map((header) => header?.id);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export function getLeastDepth(headings: Array<MdHeading | null> | null | undefined): number {
|
|
34
|
+
if (!headings || headings.length === 0) {
|
|
35
|
+
return 1;
|
|
36
|
+
}
|
|
37
|
+
let depth = null;
|
|
38
|
+
for (const heading of headings) {
|
|
39
|
+
if (!heading) continue;
|
|
40
|
+
if (depth === null || depth > heading.depth) {
|
|
41
|
+
depth = heading.depth;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
return depth ?? 1;
|
|
45
|
+
}
|