nice-ui/lib/markdown/MdastFlat.js

React design system, components, and utilities

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MdastFlat = void 0;
const React = require("react");
const renderers_1 = require("./renderers");
const nano_theme_1 = require("nano-theme");
const MarkdownFullWidthBlock_1 = require("./util/MarkdownFullWidthBlock");
const context_1 = require("./context");
const parser_1 = require("./parser");
const mdast_flat_1 = require("mdast-flat");
const useMountedState_1 = require("react-use/lib/useMountedState");
const useIsomorphicLayoutEffect_1 = require("react-use/lib/useIsomorphicLayoutEffect");
const { useState, useCallback, useMemo } = React;
const resetClass = (0, nano_theme_1.rule)({
    'h1,h2,h3,h4,h5,h6,p,blockquote,code,pre,table': {
        mar: 0,
        pad: 0,
    },
});
const markdownClass = (0, nano_theme_1.rule)({
    ...nano_theme_1.theme.font.sans,
    lh: 1.6,
    ww: 'break-word',
    'overflow-wrap': 'break-word',
    'word-break': 'break-word',
    '-webkit-hyphens': 'auto',
    hyphens: 'auto',
    mark: {
        bdrad: '.25em',
        bg: '#ff0',
        // bg: '#ff6',
        pad: '0 .125em',
        mar: '0 -.125em',
    },
    a: {
        col: '#006dff',
        bdb: '1px solid rgba(0,137,255,.3)',
        td: 'none',
        '&:hover': {
            color: '#ec1020',
            bdb: '1px solid rgba(244,18,36,.3)',
        },
        '&:has(img)': {
            bdb: 0,
        },
    },
    ul: {
        mar: 0,
        pad: '0 0 0 24px',
    },
});
const MdastFlat = ({ ...props }) => {
    const { placeholdersAfter, placeholdersAfterLength } = props;
    props.renderers ?? (props.renderers = renderers_1.renderers);
    props.maxPlaceholders ?? (props.maxPlaceholders = Infinity);
    props.LoadingBlock ?? (props.LoadingBlock = () => null);
    const theme = (0, nano_theme_1.useTheme)();
    const isMounted = (0, useMountedState_1.default)();
    const [ast, setAst] = useState(props.ast);
    (0, useIsomorphicLayoutEffect_1.default)(() => {
        setAst(props.ast);
    }, [props.ast]);
    const expandBlock = useCallback(async (idx, url) => {
        if (!props.expand)
            return;
        const res = await props.expand(url);
        if (!isMounted)
            return;
        setAst((oldAst) => {
            const newAst = (0, parser_1.md)(res.src || '');
            return (0, mdast_flat_1.replace)(oldAst, idx, newAst);
        });
    }, []);
    const computedPlaceholdersAfter = useMemo(() => {
        if (typeof placeholdersAfterLength !== 'number')
            return 0;
        const root = ast.nodes[0];
        let computedLength = 0;
        let result = 0;
        for (const idx of root.children) {
            const node = ast.nodes[idx];
            computedLength += node.len || 0;
            result++;
            if (computedLength > placeholdersAfterLength) {
                break;
            }
        }
        return result ? Math.min(result, placeholdersAfter || result) : placeholdersAfter;
    }, [ast, placeholdersAfterLength]);
    const { renderers, isFullWidth, hideFootnotes, fontSize } = props;
    if (!renderers)
        return null;
    const contextValue = {
        ast,
        props,
        expandBlock,
        placeholdersAfter: computedPlaceholdersAfter || 0,
    };
    let footnotes = hideFootnotes ? null : renderers.footnotes(renderers, props.ast, 0, props, contextValue);
    if (isFullWidth && footnotes) {
        footnotes = React.createElement(MarkdownFullWidthBlock_1.default, null, footnotes);
    }
    const style = {
        color: theme.g(0.1, 0.9),
    };
    if (fontSize) {
        style.fontSize = fontSize + 'px';
    }
    const Component = props.inline ? 'span' : 'div';
    return (React.createElement(context_1.context.Provider, { value: contextValue },
        React.createElement(Component, { className: props.inline ? undefined : resetClass + markdownClass, style: props.inline ? undefined : style, "data-testid": "Markdown", onDoubleClick: props.onDoubleClick },
            props.inlineChildren
                ? renderers.children(renderers, ast, props.nodeId || 0, props, contextValue)
                : renderers.node(renderers, ast, props.nodeId || 0, props, contextValue),
            footnotes)));
};
exports.MdastFlat = MdastFlat;