nice-ui
Version:
React design system, components, and utilities
131 lines (130 loc) • 3.84 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const nano_theme_1 = require("nano-theme");
const renderers_1 = require("../../../markdown/renderers");
const renderParagraph_1 = require("./renderers/renderParagraph");
const renderHeading_1 = require("./renderers/renderHeading");
const renderCode_1 = require("./renderers/renderCode");
const renderLink_1 = require("./renderers/renderLink");
const Contents_1 = require("./components/Contents");
const context_1 = require("./context");
const MdastFlat_1 = require("../../../markdown/MdastFlat");
const renderers = {
...renderers_1.renderers,
paragraph: renderParagraph_1.default,
heading: renderHeading_1.default,
code: renderCode_1.default,
link: renderLink_1.default,
};
const blockClass = (0, nano_theme_1.rule)({
...nano_theme_1.theme.font.sans.mid,
fw: 400,
p: {
...nano_theme_1.theme.font.ui3,
// maxW: '700px',
lh: '1.76em',
},
'.ff-note p': {
lh: '1.5em',
},
[`& .${renderCode_1.introClass.trim()} p`]: {
...nano_theme_1.theme.font.ui1.mid,
lh: '1.5em',
},
'& p+p, & pre+p, & pre+ul, & pre+div, & ul+p, & div:not(.invisible)+p, & ul+div:not(.invisible)': {
padt: '2em',
},
'& p+pre, & p+div, & div+div': {
mart: '2em',
},
'h1+p,h2+p,h3+p,h4+p,h5+p,h6+p': {
padt: '1em',
},
'h1+div,h2+div,h3+div,h4+div,h5+div,h6+div': {
mart: '1em',
},
'h1+ul,h2+ul,h3+ul,h4+ul,h5+ul,h6+ul': {
mart: '1em',
},
'h1+pre,h2+pre,h3+pre,h4+pre,h5+pre,h6+pre': {
mart: '1em',
},
'p+ul': {
padt: '1em',
},
'ul p+ul': {
padt: 0,
},
'h1,h2,h3,h4,h5,h6': {
...nano_theme_1.theme.font.ui1.mid,
fw: 500,
padt: '1.5em',
mar: 0,
lh: 1.2,
},
'h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child': {
padt: 0,
},
h1: {
fz: 36 / 16 + 'em',
},
h2: {
fz: 26 / 16 + 'em',
},
h3: {
fz: 22 / 16 + 'em',
col: nano_theme_1.theme.g(0.1),
},
h4: {
fz: 20 / 16 + 'em',
col: nano_theme_1.theme.g(0.2),
},
h5: {
fz: 18 / 16 + 'em',
col: nano_theme_1.theme.g(0.3),
},
h6: {
fz: 16 / 16 + 'em',
col: nano_theme_1.theme.g(0.4),
},
});
const blockDisplayClass = (0, nano_theme_1.rule)({
h1: {
fz: 40 / 16 + 'em',
},
h2: {
fz: 30 / 16 + 'em',
},
h3: {
fz: 22 / 16 + 'em',
},
h4: {
fz: 20 / 16 + 'em',
},
h5: {
fz: 18 / 16 + 'em',
},
h6: {
fz: 16 / 16 + 'em',
},
});
const blockFont1Class = (0, nano_theme_1.rule)({
...nano_theme_1.theme.font.sans,
p: {
...nano_theme_1.theme.font.sans,
lh: '1.76em',
},
});
const DocsMarkdown = ({ ast, fontSize = 17.8, font1, contents, contentsRight, contentWidth, display, }) => {
const [resolvedAst, setResolvedAst] = React.useState(typeof ast === 'function' ? null : ast);
React.useEffect(() => {
if (typeof ast === 'function') {
ast().then(setResolvedAst);
}
}, [ast]);
return (React.createElement(context_1.context.Provider, { value: { contentWidth } },
!!contents && !!resolvedAst && React.createElement(Contents_1.default, { right: contentsRight, ast: resolvedAst, renderers: renderers }),
React.createElement("div", { className: 'invisible' + blockClass + (font1 ? blockFont1Class : '') + (display ? blockDisplayClass : '') }, !!resolvedAst && React.createElement(MdastFlat_1.MdastFlat, { ast: resolvedAst, renderers: renderers, fontSize: fontSize }))));
};
exports.default = DocsMarkdown;