@redocly/theme
Version:
Shared UI components lib
100 lines (99 loc) • 6.72 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CodeBlock = CodeBlock;
const react_1 = __importStar(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const utils_1 = require("../../core/utils");
const hooks_1 = require("../../core/hooks");
const ReportDialog_1 = require("../../components/Feedback/ReportDialog");
const CodeBlockContainer_1 = require("../../components/CodeBlock/CodeBlockContainer");
const CodeBlockControls_1 = require("../../components/CodeBlock/CodeBlockControls");
function CodeBlock(_a) {
var _b, _c, _d, _e, _f, _g;
var { lang, source, externalSource, header, dataTestId = 'source-code', codeBlockRef, highlightedHtml, withLineNumbers, startLineNumber, className, codeBlockMaxHeight, tabs, hideCodeColors, wrapContents = false, children } = _a, rest = __rest(_a, ["lang", "source", "externalSource", "header", "dataTestId", "codeBlockRef", "highlightedHtml", "withLineNumbers", "startLineNumber", "className", "codeBlockMaxHeight", "tabs", "hideCodeColors", "wrapContents", "children"]);
const [sourceCode, setSourceCode] = (0, react_1.useState)((_d = (source || ((_c = (_b = externalSource === null || externalSource === void 0 ? void 0 : externalSource.sample) === null || _b === void 0 ? void 0 : _b.get) === null || _c === void 0 ? void 0 : _c.call(_b, externalSource)))) !== null && _d !== void 0 ? _d : '');
const { useCodeHighlight } = (0, hooks_1.useThemeHooks)();
const { highlight } = useCodeHighlight() || {};
const highlightedCode = highlightedHtml
? withLineNumbers
? (0, utils_1.addLineNumbers)(highlightedHtml, startLineNumber)
: highlightedHtml
: children
? null
: highlight === null || highlight === void 0 ? void 0 : highlight(sourceCode, lang, {
withLineNumbers,
startLineNumber,
highlight: rest['data-highlight'],
});
// The same initial value should be returned for ssr and frontend to avoid issues
// Because we don't have session storage in ssr and can't get the security details there
// Issue for more details https://github.com/Redocly/reference-docs/issues/888
(0, react_1.useEffect)(() => {
var _a, _b;
const _source = source || ((_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));
if (_source) {
setSourceCode(_source);
}
}, [source, externalSource]);
const { reportDialog, reportButton } = (0, hooks_1.useReportDialog)();
(0, hooks_1.useModalScrollLock)(Boolean(reportDialog.visible));
const controls = (header === null || header === void 0 ? void 0 : header.controls) && Object.assign(Object.assign({}, header === null || header === void 0 ? void 0 : header.controls), { report: Object.assign(Object.assign({}, (_e = header === null || header === void 0 ? void 0 : header.controls) === null || _e === void 0 ? void 0 : _e.report), { props: reportButton.props }), copy: ((_f = header === null || header === void 0 ? void 0 : header.controls) === null || _f === void 0 ? void 0 : _f.copy) ? Object.assign(Object.assign({}, (_g = header === null || header === void 0 ? void 0 : header.controls) === null || _g === void 0 ? void 0 : _g.copy), { data: sourceCode }) : undefined });
return (react_1.default.createElement(CodeBlockWrapper, { "data-component-name": "CodeBlock/CodeBlock", className: className },
react_1.default.createElement(ContainerWrapper, null,
react_1.default.createElement(CodeBlockControls_1.CodeBlockControls, { tabs: tabs, className: header === null || header === void 0 ? void 0 : header.className, title: header === null || header === void 0 ? void 0 : header.title, controls: controls }),
react_1.default.createElement(CodeBlockContainer_1.CodeBlockContainer, { ref: codeBlockRef, withLineNumbers: withLineNumbers, dangerouslySetInnerHTML: highlightedCode
? {
__html: highlightedCode,
}
: undefined, suppressHydrationWarning // TODO: investigate issue
: true, "data-testid": dataTestId, hideCodeColors: hideCodeColors, maxHeight: codeBlockMaxHeight, wrapContents: wrapContents, tabIndex: 0 }, children),
reportDialog.visible && (react_1.default.createElement(ReportDialog_1.ReportDialog, Object.assign({}, reportDialog.props, { location: sourceCode, lang: lang }))))));
}
const ContainerWrapper = styled_components_1.default.div `
display: grid; // prevents content to overstretch
`;
const CodeBlockWrapper = styled_components_1.default.div `
border: 1px solid var(--border-color-secondary);
border-radius: var(--border-radius);
background-color: var(--code-block-bg-color);
margin: 0 0 var(--spacing-sm);
--md-pre-margin: 0;
`;
//# sourceMappingURL=CodeBlock.js.map