@vaneui/md 0.0.3-alpha.20250730172254.8352948 → 0.0.3-alpha.20250803164622.cc5ccbc

package/dist/index.js

@@ -1,8 +1,8 @@
 'use strict';
 
+var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var ui = require('@vaneui/ui');
-var React = require('react');
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -8462,7 +8462,7 @@ function validateTree(content, config) {
 
 // index.ts
 var tokenizer = new Tokenizer();
-function mergeConfig(config = {}) {
+function mergeConfig$1(config = {}) {
   return {
     ...config,
     tags: {
@@ -8490,14 +8490,14 @@ function resolve2(content, config) {
   return content.resolve(config);
 }
 function transform2(nodes, options) {
-  const config = mergeConfig(options);
+  const config = mergeConfig$1(options);
   const content = resolve2(nodes, config);
   if (Array.isArray(content))
     return content.flatMap((child) => child.transform(config));
   return content.transform(config);
 }
 function validate(content, options) {
-  const config = mergeConfig(options);
+  const config = mergeConfig$1(options);
   return validateTree(content, config);
 }
 function createElement(name, attributes = {}, ...children) {
@@ -8531,8 +8531,17 @@ Markdoc.createElement = createElement;
 Markdoc.truthy = truthy;
 Markdoc.format = format;
 
+const MdDocument = (props) => {
+    return jsxRuntime.jsx(ui.Col, { ...props });
+};
+
+const MdInline = (props) => {
+    const { children, ...rest } = props;
+    return jsxRuntime.jsx("span", { ...rest, children: children });
+};
+
 const MdHeading = (props) => {
-    const { level, ...rest } = props;
+    const { level, children, ...rest } = props;
     const tag = `h${level}`;
     let size = {};
     switch (level) {
@@ -8549,66 +8558,315 @@ const MdHeading = (props) => {
             size = { sm: true };
             break;
         case 5:
+        case 6:
             size = { xs: true };
             break;
     }
-    return jsxRuntime.jsx(ui.Title, { ...rest, ...size, tag: tag });
+    return jsxRuntime.jsx(ui.Title, { ...rest, ...size, tag: tag, children: children });
+};
+
+const MdParagraph = (props) => {
+    const { children, ...rest } = props;
+    return jsxRuntime.jsx(ui.Text, { ...rest, tag: "p", children: children });
+};
+
+const MdText = (props) => {
+    const { content, children, ...rest } = props;
+    return jsxRuntime.jsx(ui.Text, { ...rest, tag: "span", children: content || children });
+};
+
+const MdStrong = (props) => {
+    const { children, ...rest } = props;
+    return jsxRuntime.jsx(ui.Text, { ...rest, tag: "strong", bold: true, children: children });
+};
+
+const MdEm = (props) => {
+    const { children, ...rest } = props;
+    return jsxRuntime.jsx(ui.Text, { ...rest, tag: "em", italic: true, children: children });
 };
+
+const MdS = (props) => {
+    const { children, ...rest } = props;
+    return jsxRuntime.jsx(ui.Text, { ...rest, tag: "s", style: { textDecoration: 'line-through' }, children: children });
+};
+
+const MdCode = (props) => {
+    const { content, children, ...rest } = props;
+    return jsxRuntime.jsx(ui.Badge, { ...rest, children: content || children });
+};
+
 const MdLink = (props) => {
-    const { href, title, ...rest } = props;
-    return jsxRuntime.jsx(ui.Link, { link: true, ...rest, href: href, title: title, tag: ui.Link });
+    const { href, title, children, ...rest } = props;
+    return jsxRuntime.jsx(ui.Link, { ...rest, href: href, title: title, children: children });
 };
-const MdImg = (props) => {
+
+const MdImage = (props) => {
     const { src, alt, title, ...rest } = props;
-    return (jsxRuntime.jsx("img", { ...rest, title: title, src: src, alt: alt, className: "w-fit rounded-lg" }));
+    return (jsxRuntime.jsx("img", { ...rest, title: title, src: src, alt: alt || "", style: { display: 'block', maxWidth: '100%', height: 'auto', borderRadius: '0.5rem' } }));
 };
-const MdContainer = (props) => jsxRuntime.jsx(ui.Col, { ...props });
-const MdList = (props) => jsxRuntime.jsx(ui.List, { ...props });
-const Md = ({ content, frontmatter }) => {
-    const ast = Markdoc.parse(content);
-    const config = {
-        nodes: {
-            document: {
-                render: "MdContainer",
-            },
-            heading: {
-                render: "MdHeading",
-                attributes: {
-                    level: { type: Number },
-                },
-            },
-            link: {
-                render: "MdLink",
-                attributes: {
-                    href: { type: String },
-                    title: { type: String },
-                },
-            },
-            list: {
-                render: "MdList",
-            },
-            image: {
-                render: "MdImg",
-                attributes: {
-                    src: { type: String },
-                    alt: { type: String },
-                    title: { type: String },
-                },
-            },
+
+const MdList = (props) => {
+    const { children, ordered, ...rest } = props;
+    // Use the ordered attribute to determine list type
+    const listProps = ordered
+        ? { decimal: true }
+        : { disc: true };
+    return jsxRuntime.jsx(ui.List, { ...rest, ...listProps, children: children });
+};
+
+const MdItem = (props) => {
+    const { children, ...rest } = props;
+    return jsxRuntime.jsx(ui.ListItem, { ...rest, children: children });
+};
+
+const MdBlockquote = (props) => {
+    const { children, ...rest } = props;
+    return (jsxRuntime.jsx(ui.Card, { ...rest, style: { borderLeft: '4px solid #d1d5db', paddingLeft: '1rem' }, children: children }));
+};
+
+const MdHr = (props) => {
+    return jsxRuntime.jsx(ui.Divider, { ...props });
+};
+
+const MdFence = (props) => {
+    const { content, language, ...rest } = props;
+    return (jsxRuntime.jsx(ui.Card, { ...rest, children: jsxRuntime.jsx("pre", { style: { margin: 0, fontFamily: 'monospace', fontSize: '0.875rem' }, children: jsxRuntime.jsx("code", { className: language ? `language-${language}` : "", children: content }) }) }));
+};
+
+const MdTable = (props) => {
+    const { children, ...rest } = props;
+    return (jsxRuntime.jsx(ui.Card, { style: { overflow: 'auto', margin: '1rem 0' }, children: jsxRuntime.jsx("table", { ...rest, style: { width: '100%', borderCollapse: 'collapse' }, children: children }) }));
+};
+
+const MdThead = (props) => {
+    const { children, ...rest } = props;
+    return jsxRuntime.jsx("thead", { ...rest, children: children });
+};
+
+const MdTbody = (props) => {
+    const { children, ...rest } = props;
+    return jsxRuntime.jsx("tbody", { ...rest, children: children });
+};
+
+const MdTr = (props) => {
+    const { children, ...rest } = props;
+    return jsxRuntime.jsx("tr", { ...rest, children: children });
+};
+
+const MdTd = (props) => {
+    const { children, align, colspan, rowspan, ...rest } = props;
+    return (jsxRuntime.jsx("td", { ...rest, style: { textAlign: align }, colSpan: colspan, rowSpan: rowspan, children: children }));
+};
+
+const MdTh = (props) => {
+    const { children, align, width, ...rest } = props;
+    return (jsxRuntime.jsx("th", { ...rest, style: { textAlign: align, width }, children: children }));
+};
+
+const MdHardbreak = () => {
+    return jsxRuntime.jsx("br", {});
+};
+
+const MdSoftbreak = () => {
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " });
+};
+
+const MdError = (props) => {
+    const { children, ...rest } = props;
+    return (jsxRuntime.jsxs(ui.Card, { ...rest, style: { backgroundColor: '#fef2f2', borderColor: '#fecaca', color: '#dc2626', margin: '1rem 0' }, children: [jsxRuntime.jsx(ui.Text, { bold: true, children: "Error:" }), " ", children] }));
+};
+
+// Default node configuration for Markdoc
+const defaultNodesConfig = {
+    document: {
+        render: "MdDocument",
+    },
+    heading: {
+        render: "MdHeading",
+        attributes: {
+            level: { type: Number, required: true },
+        },
+    },
+    paragraph: {
+        render: "MdParagraph",
+    },
+    hr: {
+        render: "MdHr",
+    },
+    image: {
+        render: "MdImage",
+        attributes: {
+            src: { type: String, required: true },
+            alt: { type: String },
+            title: { type: String },
+        },
+    },
+    fence: {
+        render: "MdFence",
+        attributes: {
+            content: { type: String },
+            language: { type: String },
+        },
+    },
+    blockquote: {
+        render: "MdBlockquote",
+    },
+    list: {
+        render: "MdList",
+        attributes: {
+            ordered: { type: Boolean },
         },
-        variables: { markdoc: { frontmatter } }
+    },
+    item: {
+        render: "MdItem",
+    },
+    table: {
+        render: "MdTable",
+    },
+    thead: {
+        render: "MdThead",
+    },
+    tbody: {
+        render: "MdTbody",
+    },
+    tr: {
+        render: "MdTr",
+    },
+    td: {
+        render: "MdTd",
+        attributes: {
+            align: { type: String },
+            colspan: { type: Number },
+            rowspan: { type: Number },
+        },
+    },
+    th: {
+        render: "MdTh",
+        attributes: {
+            align: { type: String },
+            width: { type: String },
+        },
+    },
+    strong: {
+        render: "MdStrong",
+    },
+    em: {
+        render: "MdEm",
+    },
+    s: {
+        render: "MdS",
+    },
+    link: {
+        render: "MdLink",
+        attributes: {
+            href: { type: String, required: true },
+            title: { type: String },
+        },
+    },
+    code: {
+        render: "MdCode",
+        attributes: {
+            content: { type: String }
+        }
+    },
+    hardbreak: {
+        render: "MdHardbreak",
+    },
+    softbreak: {
+        render: "MdSoftbreak",
+    },
+    error: {
+        render: "MdError",
+    },
+};
+// Default component mapping
+const defaultComponents = {
+    MdDocument: MdDocument,
+    MdHeading: MdHeading,
+    MdParagraph: MdParagraph,
+    MdHr: MdHr,
+    MdImage: MdImage,
+    MdFence: MdFence,
+    MdBlockquote: MdBlockquote,
+    MdList: MdList,
+    MdItem: MdItem,
+    MdTable: MdTable,
+    MdThead: MdThead,
+    MdTbody: MdTbody,
+    MdTr: MdTr,
+    MdTd: MdTd,
+    MdTh: MdTh,
+    MdInline: MdInline,
+    MdText: MdText,
+    MdStrong: MdStrong,
+    MdEm: MdEm,
+    MdS: MdS,
+    MdLink: MdLink,
+    MdCode: MdCode,
+    MdHardbreak: MdHardbreak,
+    MdSoftbreak: MdSoftbreak,
+    MdError: MdError,
+};
+
+// Helper function to merge configurations
+function mergeConfig(defaultConfig, userConfig) {
+    if (!userConfig)
+        return defaultConfig;
+    return {
+        nodes: { ...defaultConfig.nodes, ...userConfig.nodes },
+        components: { ...defaultConfig.components, ...userConfig.components },
+        variables: { ...defaultConfig.variables, ...userConfig.variables },
+        tags: { ...defaultConfig.tags, ...userConfig.tags },
+        functions: { ...defaultConfig.functions, ...userConfig.functions },
     };
-    const transformed = Markdoc.transform(ast, config);
+}
+const Md = ({ content, frontmatter, config: userConfig }) => {
+    const ast = Markdoc.parse(content);
+    // Merge user config with defaults
+    const mergedConfig = mergeConfig({
+        nodes: defaultNodesConfig,
+        components: defaultComponents,
+        variables: { markdoc: { frontmatter } },
+    }, userConfig);
+    // Create Markdoc config
+    const markdocConfig = {
+        nodes: mergedConfig.nodes,
+        tags: mergedConfig.tags,
+        functions: mergedConfig.functions,
+        variables: mergedConfig.variables,
+    };
+    const transformed = Markdoc.transform(ast, markdocConfig);
     return Markdoc.renderers.react(transformed, React, {
-        components: {
-            MdHeading: MdHeading,
-            MdContainer: MdContainer,
-            MdLink: MdLink,
-            MdList: MdList,
-            MdImg: MdImg,
-        },
+        components: mergedConfig.components,
     });
 };
 
 exports.Md = Md;
+exports.MdBlockquote = MdBlockquote;
+exports.MdCode = MdCode;
+exports.MdDocument = MdDocument;
+exports.MdEm = MdEm;
+exports.MdError = MdError;
+exports.MdFence = MdFence;
+exports.MdHardbreak = MdHardbreak;
+exports.MdHeading = MdHeading;
+exports.MdHr = MdHr;
+exports.MdImage = MdImage;
+exports.MdInline = MdInline;
+exports.MdItem = MdItem;
+exports.MdLink = MdLink;
+exports.MdList = MdList;
+exports.MdParagraph = MdParagraph;
+exports.MdS = MdS;
+exports.MdSoftbreak = MdSoftbreak;
+exports.MdStrong = MdStrong;
+exports.MdTable = MdTable;
+exports.MdTbody = MdTbody;
+exports.MdTd = MdTd;
+exports.MdText = MdText;
+exports.MdTh = MdTh;
+exports.MdThead = MdThead;
+exports.MdTr = MdTr;
+exports.defaultComponents = defaultComponents;
+exports.defaultNodesConfig = defaultNodesConfig;
 //# sourceMappingURL=index.js.map