@kushagradhawan/kookie-blocks 0.1.14 → 0.1.15
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/dist/cjs/components/markdown/create-markdown-components.js +1 -1
- package/dist/cjs/components/markdown/create-markdown-components.js.map +1 -1
- package/dist/esm/components/markdown/create-markdown-components.js +1 -1
- package/dist/esm/components/markdown/create-markdown-components.js.map +1 -1
- package/package.json +1 -1
- package/src/components/markdown/create-markdown-components.tsx +6 -7
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
"use strict";var u=Object.create;var a=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var M=(o,i)=>{for(var t in i)a(o,t,{get:i[t],enumerable:!0})},p=(o,i,t,s)=>{if(i&&typeof i=="object"||typeof i=="function")for(let e of w(i))!k.call(o,e)&&e!==t&&a(o,e,{get:()=>i[e],enumerable:!(s=C(i,e))||s.enumerable});return o};var f=(o,i,t)=>(t=o!=null?u(y(o)):{},p(i||!o||!o.__esModule?a(t,"default",{value:o,enumerable:!0}):t,o)),P=o=>p(a({},"__esModule",{value:!0}),o);var B={};M(B,{createMarkdownComponents:()=>b});module.exports=P(B);var r=f(require("react")),n=require("@kushagradhawan/kookie-ui"),h=require("../code");function T(o){return o?o.match(/language-([\w-]+)/i)?.[1]??"text":"text"}function H(o){let i="";return o?(typeof o=="string"?i=o:Array.isArray(o)&&(i=o.map(t=>typeof t=="string"?t:"").join("")),i.replace(/^\n+|\n+$/g,"")):i}function b(o={}){const{codeBlockCollapsible:i=!1,imageComponent:t,inlineCodeHighContrast:s=!0}=o;return{h1:({children:e})=>r.default.createElement(n.Heading,{size:"
|
|
1
|
+
"use strict";var u=Object.create;var a=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var M=(o,i)=>{for(var t in i)a(o,t,{get:i[t],enumerable:!0})},p=(o,i,t,s)=>{if(i&&typeof i=="object"||typeof i=="function")for(let e of w(i))!k.call(o,e)&&e!==t&&a(o,e,{get:()=>i[e],enumerable:!(s=C(i,e))||s.enumerable});return o};var f=(o,i,t)=>(t=o!=null?u(y(o)):{},p(i||!o||!o.__esModule?a(t,"default",{value:o,enumerable:!0}):t,o)),P=o=>p(a({},"__esModule",{value:!0}),o);var B={};M(B,{createMarkdownComponents:()=>b});module.exports=P(B);var r=f(require("react")),n=require("@kushagradhawan/kookie-ui"),h=require("../code");function T(o){return o?o.match(/language-([\w-]+)/i)?.[1]??"text":"text"}function H(o){let i="";return o?(typeof o=="string"?i=o:Array.isArray(o)&&(i=o.map(t=>typeof t=="string"?t:"").join("")),i.replace(/^\n+|\n+$/g,"")):i}function b(o={}){const{codeBlockCollapsible:i=!1,imageComponent:t,inlineCodeHighContrast:s=!0}=o;return{h1:({children:e})=>r.default.createElement(n.Heading,{size:"9",weight:"medium",as:"h1",style:{marginTop:"1rem",marginBottom:"0.5rem"}},e),h2:({children:e})=>r.default.createElement(n.Heading,{weight:"medium",size:"6",as:"h2",style:{marginTop:"0.875rem",marginBottom:"0.5rem"}},e),h3:({children:e})=>r.default.createElement(n.Heading,{weight:"medium",size:"5",as:"h3",style:{marginTop:"0.75rem",marginBottom:"0.5rem"}},e),h4:({children:e})=>r.default.createElement(n.Heading,{weight:"medium",size:"4",as:"h4",style:{marginTop:"0.625rem",marginBottom:"0.5rem"}},e),h5:({children:e})=>r.default.createElement(n.Heading,{weight:"medium",size:"3",as:"h5",style:{marginTop:"0.5rem",marginBottom:"0.5rem"}},e),h6:({children:e})=>r.default.createElement(n.Heading,{weight:"medium",size:"2",as:"h6",style:{marginTop:"0.5rem",marginBottom:"0.5rem"}},e),p:({children:e})=>r.default.createElement(n.Text,{size:"3",as:"p",style:{lineHeight:"1.6"}},e),code:({className:e,children:d,inline:m})=>{const l=H(d);return m===!0||m===void 0&&!e&&!l.includes(`
|
|
2
2
|
`)&&l.length<100?r.default.createElement(n.Code,{highContrast:s,size:"3"},l):r.default.createElement(n.Box,{my:"2",style:{minWidth:0}},r.default.createElement(h.CodeBlock,{code:l,language:T(e),collapsible:i}))},ul:({children:e})=>r.default.createElement("ul",{style:{marginTop:"0.5rem",marginBottom:"0.5rem",lineHeight:"1.6",paddingLeft:"1.5rem",listStyleType:"disc"}},e),ol:({children:e})=>r.default.createElement("ol",{style:{marginTop:"0.5rem",marginBottom:"0.5rem",lineHeight:"1.6",paddingLeft:"1.5rem",listStyleType:"decimal"}},e),li:({children:e})=>r.default.createElement("li",{style:{marginBottom:"0.25rem",lineHeight:"1.6"}},e),blockquote:({children:e})=>r.default.createElement(n.Blockquote,null,e),a:({href:e,children:d})=>r.default.createElement("a",{href:e,style:{color:"var(--accent-9)",textDecoration:"underline"}},d),strong:({children:e})=>r.default.createElement(n.Text,{weight:"medium",style:{lineHeight:"1.6"}},e),em:({children:e})=>r.default.createElement(n.Text,{style:{lineHeight:"1.6",fontStyle:"italic"}},e),hr:()=>r.default.createElement("hr",{style:{color:"var(--gray-6)",marginTop:"0.5rem",marginBottom:"0.5rem",height:"1px",width:"100%",opacity:.5}}),pre:({children:e})=>r.default.createElement(r.default.Fragment,null,e),table:({children:e})=>r.default.createElement(n.Box,{my:"2",style:{overflowX:"auto"}},r.default.createElement(n.Table.Root,{size:"2",variant:"ghost"},e)),thead:({children:e})=>r.default.createElement(n.Table.Header,null,e),tbody:({children:e})=>r.default.createElement(n.Table.Body,null,e),tr:({children:e})=>r.default.createElement(n.Table.Row,null,e),th:({children:e})=>r.default.createElement(n.Table.ColumnHeaderCell,null,e),td:({children:e})=>r.default.createElement(n.Table.Cell,null,e),sub:({children:e})=>r.default.createElement("sub",null,e),sup:({children:e})=>r.default.createElement("sup",null,e),br:()=>r.default.createElement("br",null),img:t?e=>{const{src:d,alt:m,width:l,height:g}=e;return!d||typeof d!="string"?null:t({src:d,alt:m??"Image",width:l?String(l):void 0,height:g?String(g):void 0})}:void 0,details:({children:e})=>r.default.createElement("details",{style:{padding:"0.5rem 0"}},e),summary:({children:e})=>r.default.createElement("summary",{style:{cursor:"pointer",fontWeight:500}},e)}}
|
|
3
3
|
//# sourceMappingURL=create-markdown-components.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/markdown/create-markdown-components.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { type ReactNode } from \"react\";\nimport type { Components } from \"react-markdown\";\nimport { Blockquote, Box, Code, Flex, Heading, Text, Table } from \"@kushagradhawan/kookie-ui\";\nimport { CodeBlock } from \"../code\";\nimport type { MarkdownComponentOptions, MarkdownChildrenProps } from \"./types\";\n\n/**\n * Extracts language from className (e.g., \"language-typescript\" -> \"typescript\")\n */\nfunction extractLanguage(className?: string): string {\n if (!className) {\n return \"text\";\n }\n const match = className.match(/language-([\\w-]+)/i);\n return match?.[1] ?? \"text\";\n}\n\n/**\n * Extracts code string from ReactNode children\n */\nfunction extractCode(children?: ReactNode): string {\n let code = \"\";\n if (!children) {\n return code;\n }\n if (typeof children === \"string\") {\n code = children;\n } else if (Array.isArray(children)) {\n code = children.map((child) => (typeof child === \"string\" ? child : \"\")).join(\"\");\n }\n // Trim trailing newlines but preserve internal whitespace\n return code.replace(/^\\n+|\\n+$/g, \"\");\n}\n\n/**\n * Creates markdown component mappings that work with both react-markdown and MDX.\n * Uses KookieUI components for consistent styling across all projects.\n *\n * @param options - Optional configuration for component behavior\n * @returns Component mappings for markdown/MDX renderers\n *\n * @example\n * ```tsx\n * // In react-markdown\n * <ReactMarkdown components={createMarkdownComponents()}>\n * {content}\n * </ReactMarkdown>\n *\n * // In MDX\n * export function useMDXComponents(components: MDXComponents) {\n * return {\n * ...createMarkdownComponents(),\n * ...components,\n * };\n * }\n * ```\n */\nexport function createMarkdownComponents(options: MarkdownComponentOptions = {}): Components {\n const { codeBlockCollapsible = false, imageComponent, inlineCodeHighContrast = true } = options;\n\n return {\n // Headings with consistent visual hierarchy\n h1: ({ children }: MarkdownChildrenProps) => (\n <Heading size=\"
|
|
4
|
+
"sourcesContent": ["import React, { type ReactNode } from \"react\";\nimport type { Components } from \"react-markdown\";\nimport { Blockquote, Box, Code, Flex, Heading, Text, Table } from \"@kushagradhawan/kookie-ui\";\nimport { CodeBlock } from \"../code\";\nimport type { MarkdownComponentOptions, MarkdownChildrenProps } from \"./types\";\n\n/**\n * Extracts language from className (e.g., \"language-typescript\" -> \"typescript\")\n */\nfunction extractLanguage(className?: string): string {\n if (!className) {\n return \"text\";\n }\n const match = className.match(/language-([\\w-]+)/i);\n return match?.[1] ?? \"text\";\n}\n\n/**\n * Extracts code string from ReactNode children\n */\nfunction extractCode(children?: ReactNode): string {\n let code = \"\";\n if (!children) {\n return code;\n }\n if (typeof children === \"string\") {\n code = children;\n } else if (Array.isArray(children)) {\n code = children.map((child) => (typeof child === \"string\" ? child : \"\")).join(\"\");\n }\n // Trim trailing newlines but preserve internal whitespace\n return code.replace(/^\\n+|\\n+$/g, \"\");\n}\n\n/**\n * Creates markdown component mappings that work with both react-markdown and MDX.\n * Uses KookieUI components for consistent styling across all projects.\n *\n * @param options - Optional configuration for component behavior\n * @returns Component mappings for markdown/MDX renderers\n *\n * @example\n * ```tsx\n * // In react-markdown\n * <ReactMarkdown components={createMarkdownComponents()}>\n * {content}\n * </ReactMarkdown>\n *\n * // In MDX\n * export function useMDXComponents(components: MDXComponents) {\n * return {\n * ...createMarkdownComponents(),\n * ...components,\n * };\n * }\n * ```\n */\nexport function createMarkdownComponents(options: MarkdownComponentOptions = {}): Components {\n const { codeBlockCollapsible = false, imageComponent, inlineCodeHighContrast = true } = options;\n\n return {\n // Headings with consistent visual hierarchy (9-6-5-4-3-2)\n h1: ({ children }: MarkdownChildrenProps) => (\n <Heading size=\"9\" weight=\"medium\" as=\"h1\" style={{ marginTop: \"1rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n h2: ({ children }: MarkdownChildrenProps) => (\n <Heading weight=\"medium\" size=\"6\" as=\"h2\" style={{ marginTop: \"0.875rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n h3: ({ children }: MarkdownChildrenProps) => (\n <Heading weight=\"medium\" size=\"5\" as=\"h3\" style={{ marginTop: \"0.75rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n h4: ({ children }: MarkdownChildrenProps) => (\n <Heading weight=\"medium\" size=\"4\" as=\"h4\" style={{ marginTop: \"0.625rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n h5: ({ children }: MarkdownChildrenProps) => (\n <Heading weight=\"medium\" size=\"3\" as=\"h5\" style={{ marginTop: \"0.5rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n h6: ({ children }: MarkdownChildrenProps) => (\n <Heading weight=\"medium\" size=\"2\" as=\"h6\" style={{ marginTop: \"0.5rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n\n // Paragraph text\n p: ({ children }: MarkdownChildrenProps) => (\n <Text size=\"3\" as=\"p\" style={{ lineHeight: \"1.6\" }}>\n {children}\n </Text>\n ),\n\n // Code - inline vs block\n code: ({ className, children, inline }: { className?: string; children?: ReactNode; inline?: boolean }) => {\n const code = extractCode(children);\n\n // Block code: has className (language) OR is not marked as inline\n // Inline code: explicitly marked as inline=true, or no className and short single-line content\n const isInlineCode = inline === true || (inline === undefined && !className && !code.includes(\"\\n\") && code.length < 100);\n\n if (isInlineCode) {\n return (\n <Code highContrast={inlineCodeHighContrast} size=\"3\">\n {code}\n </Code>\n );\n }\n\n return (\n <Box my=\"2\" style={{ minWidth: 0 }}>\n <CodeBlock code={code} language={extractLanguage(className)} collapsible={codeBlockCollapsible} />\n </Box>\n );\n },\n\n // Lists\n ul: ({ children }: MarkdownChildrenProps) => (\n <ul style={{ marginTop: \"0.5rem\", marginBottom: \"0.5rem\", lineHeight: \"1.6\", paddingLeft: \"1.5rem\", listStyleType: \"disc\" }}>{children}</ul>\n ),\n ol: ({ children }: MarkdownChildrenProps) => (\n <ol style={{ marginTop: \"0.5rem\", marginBottom: \"0.5rem\", lineHeight: \"1.6\", paddingLeft: \"1.5rem\", listStyleType: \"decimal\" }}>{children}</ol>\n ),\n li: ({ children }: MarkdownChildrenProps) => <li style={{ marginBottom: \"0.25rem\", lineHeight: \"1.6\" }}>{children}</li>,\n\n // Blockquote\n blockquote: ({ children }: MarkdownChildrenProps) => <Blockquote>{children}</Blockquote>,\n\n // Links\n a: ({ href, children }: { href?: string; children?: ReactNode }) => (\n <a href={href} style={{ color: \"var(--accent-9)\", textDecoration: \"underline\" }}>\n {children}\n </a>\n ),\n\n // Text styling\n strong: ({ children }: MarkdownChildrenProps) => (\n <Text weight=\"medium\" style={{ lineHeight: \"1.6\" }}>\n {children}\n </Text>\n ),\n em: ({ children }: MarkdownChildrenProps) => <Text style={{ lineHeight: \"1.6\", fontStyle: \"italic\" }}>{children}</Text>,\n\n // Horizontal rule\n hr: () => (\n <hr\n style={{\n color: \"var(--gray-6)\",\n marginTop: \"0.5rem\",\n marginBottom: \"0.5rem\",\n height: \"1px\",\n width: \"100%\",\n opacity: 0.5,\n }}\n />\n ),\n\n // Pre wrapper (pass through to let code handle it)\n pre: ({ children }: MarkdownChildrenProps) => <>{children}</>,\n\n // Tables using KookieUI\n table: ({ children }: MarkdownChildrenProps) => (\n <Box my=\"2\" style={{ overflowX: \"auto\" }}>\n <Table.Root size=\"2\" variant=\"ghost\">\n {children}\n </Table.Root>\n </Box>\n ),\n thead: ({ children }: MarkdownChildrenProps) => <Table.Header>{children}</Table.Header>,\n tbody: ({ children }: MarkdownChildrenProps) => <Table.Body>{children}</Table.Body>,\n tr: ({ children }: MarkdownChildrenProps) => <Table.Row>{children}</Table.Row>,\n th: ({ children }: MarkdownChildrenProps) => <Table.ColumnHeaderCell>{children}</Table.ColumnHeaderCell>,\n td: ({ children }: MarkdownChildrenProps) => <Table.Cell>{children}</Table.Cell>,\n\n // HTML elements for raw HTML support\n sub: ({ children }: MarkdownChildrenProps) => <sub>{children}</sub>,\n sup: ({ children }: MarkdownChildrenProps) => <sup>{children}</sup>,\n br: () => <br />,\n\n // Images - use custom component if provided\n img: imageComponent\n ? (props: React.ImgHTMLAttributes<HTMLImageElement>) => {\n const { src, alt, width, height } = props;\n if (!src || typeof src !== \"string\") return null;\n return imageComponent({\n src,\n alt: alt ?? \"Image\",\n width: width ? String(width) : undefined,\n height: height ? String(height) : undefined,\n });\n }\n : undefined,\n\n // Details/Summary for expandable sections\n details: ({ children }: MarkdownChildrenProps) => <details style={{ padding: \"0.5rem 0\" }}>{children}</details>,\n summary: ({ children }: MarkdownChildrenProps) => <summary style={{ cursor: \"pointer\", fontWeight: 500 }}>{children}</summary>,\n };\n}\n"],
|
|
5
5
|
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,8BAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAsC,oBAEtCC,EAAkE,qCAClEC,EAA0B,mBAM1B,SAASC,EAAgBC,EAA4B,CACnD,OAAKA,EAGSA,EAAU,MAAM,oBAAoB,IACnC,CAAC,GAAK,OAHZ,MAIX,CAKA,SAASC,EAAYC,EAA8B,CACjD,IAAIC,EAAO,GACX,OAAKD,GAGD,OAAOA,GAAa,SACtBC,EAAOD,EACE,MAAM,QAAQA,CAAQ,IAC/BC,EAAOD,EAAS,IAAKE,GAAW,OAAOA,GAAU,SAAWA,EAAQ,EAAG,EAAE,KAAK,EAAE,GAG3ED,EAAK,QAAQ,aAAc,EAAE,GAR3BA,CASX,CAyBO,SAAST,EAAyBW,EAAoC,CAAC,EAAe,CAC3F,KAAM,CAAE,qBAAAC,EAAuB,GAAO,eAAAC,EAAgB,uBAAAC,EAAyB,EAAK,EAAIH,EAExF,MAAO,CAEL,GAAI,CAAC,CAAE,SAAAH,CAAS,IACd,EAAAO,QAAA,cAAC,WAAQ,KAAK,IAAI,OAAO,SAAS,GAAG,KAAK,MAAO,CAAE,UAAW,OAAQ,aAAc,QAAS,GAC1FP,CACH,EAEF,GAAI,CAAC,CAAE,SAAAA,CAAS,IACd,EAAAO,QAAA,cAAC,WAAQ,OAAO,SAAS,KAAK,IAAI,GAAG,KAAK,MAAO,CAAE,UAAW,WAAY,aAAc,QAAS,GAC9FP,CACH,EAEF,GAAI,CAAC,CAAE,SAAAA,CAAS,IACd,EAAAO,QAAA,cAAC,WAAQ,OAAO,SAAS,KAAK,IAAI,GAAG,KAAK,MAAO,CAAE,UAAW,UAAW,aAAc,QAAS,GAC7FP,CACH,EAEF,GAAI,CAAC,CAAE,SAAAA,CAAS,IACd,EAAAO,QAAA,cAAC,WAAQ,OAAO,SAAS,KAAK,IAAI,GAAG,KAAK,MAAO,CAAE,UAAW,WAAY,aAAc,QAAS,GAC9FP,CACH,EAEF,GAAI,CAAC,CAAE,SAAAA,CAAS,IACd,EAAAO,QAAA,cAAC,WAAQ,OAAO,SAAS,KAAK,IAAI,GAAG,KAAK,MAAO,CAAE,UAAW,SAAU,aAAc,QAAS,GAC5FP,CACH,EAEF,GAAI,CAAC,CAAE,SAAAA,CAAS,IACd,EAAAO,QAAA,cAAC,WAAQ,OAAO,SAAS,KAAK,IAAI,GAAG,KAAK,MAAO,CAAE,UAAW,SAAU,aAAc,QAAS,GAC5FP,CACH,EAIF,EAAG,CAAC,CAAE,SAAAA,CAAS,IACb,EAAAO,QAAA,cAAC,QAAK,KAAK,IAAI,GAAG,IAAI,MAAO,CAAE,WAAY,KAAM,GAC9CP,CACH,EAIF,KAAM,CAAC,CAAE,UAAAF,EAAW,SAAAE,EAAU,OAAAQ,CAAO,IAAsE,CACzG,MAAMP,EAAOF,EAAYC,CAAQ,EAMjC,OAFqBQ,IAAW,IAASA,IAAW,QAAa,CAACV,GAAa,CAACG,EAAK,SAAS;AAAA,CAAI,GAAKA,EAAK,OAAS,IAIjH,EAAAM,QAAA,cAAC,QAAK,aAAcD,EAAwB,KAAK,KAC9CL,CACH,EAKF,EAAAM,QAAA,cAAC,OAAI,GAAG,IAAI,MAAO,CAAE,SAAU,CAAE,GAC/B,EAAAA,QAAA,cAAC,aAAU,KAAMN,EAAM,SAAUJ,EAAgBC,CAAS,EAAG,YAAaM,EAAsB,CAClG,CAEJ,EAGA,GAAI,CAAC,CAAE,SAAAJ,CAAS,IACd,EAAAO,QAAA,cAAC,MAAG,MAAO,CAAE,UAAW,SAAU,aAAc,SAAU,WAAY,MAAO,YAAa,SAAU,cAAe,MAAO,GAAIP,CAAS,EAEzI,GAAI,CAAC,CAAE,SAAAA,CAAS,IACd,EAAAO,QAAA,cAAC,MAAG,MAAO,CAAE,UAAW,SAAU,aAAc,SAAU,WAAY,MAAO,YAAa,SAAU,cAAe,SAAU,GAAIP,CAAS,EAE5I,GAAI,CAAC,CAAE,SAAAA,CAAS,IAA6B,EAAAO,QAAA,cAAC,MAAG,MAAO,CAAE,aAAc,UAAW,WAAY,KAAM,GAAIP,CAAS,EAGlH,WAAY,CAAC,CAAE,SAAAA,CAAS,IAA6B,EAAAO,QAAA,cAAC,kBAAYP,CAAS,EAG3E,EAAG,CAAC,CAAE,KAAAS,EAAM,SAAAT,CAAS,IACnB,EAAAO,QAAA,cAAC,KAAE,KAAME,EAAM,MAAO,CAAE,MAAO,kBAAmB,eAAgB,WAAY,GAC3ET,CACH,EAIF,OAAQ,CAAC,CAAE,SAAAA,CAAS,IAClB,EAAAO,QAAA,cAAC,QAAK,OAAO,SAAS,MAAO,CAAE,WAAY,KAAM,GAC9CP,CACH,EAEF,GAAI,CAAC,CAAE,SAAAA,CAAS,IAA6B,EAAAO,QAAA,cAAC,QAAK,MAAO,CAAE,WAAY,MAAO,UAAW,QAAS,GAAIP,CAAS,EAGhH,GAAI,IACF,EAAAO,QAAA,cAAC,MACC,MAAO,CACL,MAAO,gBACP,UAAW,SACX,aAAc,SACd,OAAQ,MACR,MAAO,OACP,QAAS,EACX,EACF,EAIF,IAAK,CAAC,CAAE,SAAAP,CAAS,IAA6B,EAAAO,QAAA,gBAAAA,QAAA,cAAGP,CAAS,EAG1D,MAAO,CAAC,CAAE,SAAAA,CAAS,IACjB,EAAAO,QAAA,cAAC,OAAI,GAAG,IAAI,MAAO,CAAE,UAAW,MAAO,GACrC,EAAAA,QAAA,cAAC,QAAM,KAAN,CAAW,KAAK,IAAI,QAAQ,SAC1BP,CACH,CACF,EAEF,MAAO,CAAC,CAAE,SAAAA,CAAS,IAA6B,EAAAO,QAAA,cAAC,QAAM,OAAN,KAAcP,CAAS,EACxE,MAAO,CAAC,CAAE,SAAAA,CAAS,IAA6B,EAAAO,QAAA,cAAC,QAAM,KAAN,KAAYP,CAAS,EACtE,GAAI,CAAC,CAAE,SAAAA,CAAS,IAA6B,EAAAO,QAAA,cAAC,QAAM,IAAN,KAAWP,CAAS,EAClE,GAAI,CAAC,CAAE,SAAAA,CAAS,IAA6B,EAAAO,QAAA,cAAC,QAAM,iBAAN,KAAwBP,CAAS,EAC/E,GAAI,CAAC,CAAE,SAAAA,CAAS,IAA6B,EAAAO,QAAA,cAAC,QAAM,KAAN,KAAYP,CAAS,EAGnE,IAAK,CAAC,CAAE,SAAAA,CAAS,IAA6B,EAAAO,QAAA,cAAC,WAAKP,CAAS,EAC7D,IAAK,CAAC,CAAE,SAAAA,CAAS,IAA6B,EAAAO,QAAA,cAAC,WAAKP,CAAS,EAC7D,GAAI,IAAM,EAAAO,QAAA,cAAC,SAAG,EAGd,IAAKF,EACAK,GAAqD,CACpD,KAAM,CAAE,IAAAC,EAAK,IAAAC,EAAK,MAAAC,EAAO,OAAAC,CAAO,EAAIJ,EACpC,MAAI,CAACC,GAAO,OAAOA,GAAQ,SAAiB,KACrCN,EAAe,CACpB,IAAAM,EACA,IAAKC,GAAO,QACZ,MAAOC,EAAQ,OAAOA,CAAK,EAAI,OAC/B,OAAQC,EAAS,OAAOA,CAAM,EAAI,MACpC,CAAC,CACH,EACA,OAGJ,QAAS,CAAC,CAAE,SAAAd,CAAS,IAA6B,EAAAO,QAAA,cAAC,WAAQ,MAAO,CAAE,QAAS,UAAW,GAAIP,CAAS,EACrG,QAAS,CAAC,CAAE,SAAAA,CAAS,IAA6B,EAAAO,QAAA,cAAC,WAAQ,MAAO,CAAE,OAAQ,UAAW,WAAY,GAAI,GAAIP,CAAS,CACtH,CACF",
|
|
6
6
|
"names": ["create_markdown_components_exports", "__export", "createMarkdownComponents", "__toCommonJS", "import_react", "import_kookie_ui", "import_code", "extractLanguage", "className", "extractCode", "children", "code", "child", "options", "codeBlockCollapsible", "imageComponent", "inlineCodeHighContrast", "React", "inline", "href", "props", "src", "alt", "width", "height"]
|
|
7
7
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import r from"react";import{Blockquote as u,Box as p,Code as C,Heading as d,Text as g,Table as l}from"@kushagradhawan/kookie-ui";import{CodeBlock as w}from"../code";function y(o){return o?o.match(/language-([\w-]+)/i)?.[1]??"text":"text"}function k(o){let n="";return o?(typeof o=="string"?n=o:Array.isArray(o)&&(n=o.map(s=>typeof s=="string"?s:"").join("")),n.replace(/^\n+|\n+$/g,"")):n}function H(o={}){const{codeBlockCollapsible:n=!1,imageComponent:s,inlineCodeHighContrast:h=!0}=o;return{h1:({children:e})=>r.createElement(d,{size:"
|
|
1
|
+
import r from"react";import{Blockquote as u,Box as p,Code as C,Heading as d,Text as g,Table as l}from"@kushagradhawan/kookie-ui";import{CodeBlock as w}from"../code";function y(o){return o?o.match(/language-([\w-]+)/i)?.[1]??"text":"text"}function k(o){let n="";return o?(typeof o=="string"?n=o:Array.isArray(o)&&(n=o.map(s=>typeof s=="string"?s:"").join("")),n.replace(/^\n+|\n+$/g,"")):n}function H(o={}){const{codeBlockCollapsible:n=!1,imageComponent:s,inlineCodeHighContrast:h=!0}=o;return{h1:({children:e})=>r.createElement(d,{size:"9",weight:"medium",as:"h1",style:{marginTop:"1rem",marginBottom:"0.5rem"}},e),h2:({children:e})=>r.createElement(d,{weight:"medium",size:"6",as:"h2",style:{marginTop:"0.875rem",marginBottom:"0.5rem"}},e),h3:({children:e})=>r.createElement(d,{weight:"medium",size:"5",as:"h3",style:{marginTop:"0.75rem",marginBottom:"0.5rem"}},e),h4:({children:e})=>r.createElement(d,{weight:"medium",size:"4",as:"h4",style:{marginTop:"0.625rem",marginBottom:"0.5rem"}},e),h5:({children:e})=>r.createElement(d,{weight:"medium",size:"3",as:"h5",style:{marginTop:"0.5rem",marginBottom:"0.5rem"}},e),h6:({children:e})=>r.createElement(d,{weight:"medium",size:"2",as:"h6",style:{marginTop:"0.5rem",marginBottom:"0.5rem"}},e),p:({children:e})=>r.createElement(g,{size:"3",as:"p",style:{lineHeight:"1.6"}},e),code:({className:e,children:i,inline:m})=>{const t=k(i);return m===!0||m===void 0&&!e&&!t.includes(`
|
|
2
2
|
`)&&t.length<100?r.createElement(C,{highContrast:h,size:"3"},t):r.createElement(p,{my:"2",style:{minWidth:0}},r.createElement(w,{code:t,language:y(e),collapsible:n}))},ul:({children:e})=>r.createElement("ul",{style:{marginTop:"0.5rem",marginBottom:"0.5rem",lineHeight:"1.6",paddingLeft:"1.5rem",listStyleType:"disc"}},e),ol:({children:e})=>r.createElement("ol",{style:{marginTop:"0.5rem",marginBottom:"0.5rem",lineHeight:"1.6",paddingLeft:"1.5rem",listStyleType:"decimal"}},e),li:({children:e})=>r.createElement("li",{style:{marginBottom:"0.25rem",lineHeight:"1.6"}},e),blockquote:({children:e})=>r.createElement(u,null,e),a:({href:e,children:i})=>r.createElement("a",{href:e,style:{color:"var(--accent-9)",textDecoration:"underline"}},i),strong:({children:e})=>r.createElement(g,{weight:"medium",style:{lineHeight:"1.6"}},e),em:({children:e})=>r.createElement(g,{style:{lineHeight:"1.6",fontStyle:"italic"}},e),hr:()=>r.createElement("hr",{style:{color:"var(--gray-6)",marginTop:"0.5rem",marginBottom:"0.5rem",height:"1px",width:"100%",opacity:.5}}),pre:({children:e})=>r.createElement(r.Fragment,null,e),table:({children:e})=>r.createElement(p,{my:"2",style:{overflowX:"auto"}},r.createElement(l.Root,{size:"2",variant:"ghost"},e)),thead:({children:e})=>r.createElement(l.Header,null,e),tbody:({children:e})=>r.createElement(l.Body,null,e),tr:({children:e})=>r.createElement(l.Row,null,e),th:({children:e})=>r.createElement(l.ColumnHeaderCell,null,e),td:({children:e})=>r.createElement(l.Cell,null,e),sub:({children:e})=>r.createElement("sub",null,e),sup:({children:e})=>r.createElement("sup",null,e),br:()=>r.createElement("br",null),img:s?e=>{const{src:i,alt:m,width:t,height:a}=e;return!i||typeof i!="string"?null:s({src:i,alt:m??"Image",width:t?String(t):void 0,height:a?String(a):void 0})}:void 0,details:({children:e})=>r.createElement("details",{style:{padding:"0.5rem 0"}},e),summary:({children:e})=>r.createElement("summary",{style:{cursor:"pointer",fontWeight:500}},e)}}export{H as createMarkdownComponents};
|
|
3
3
|
//# sourceMappingURL=create-markdown-components.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/markdown/create-markdown-components.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { type ReactNode } from \"react\";\nimport type { Components } from \"react-markdown\";\nimport { Blockquote, Box, Code, Flex, Heading, Text, Table } from \"@kushagradhawan/kookie-ui\";\nimport { CodeBlock } from \"../code\";\nimport type { MarkdownComponentOptions, MarkdownChildrenProps } from \"./types\";\n\n/**\n * Extracts language from className (e.g., \"language-typescript\" -> \"typescript\")\n */\nfunction extractLanguage(className?: string): string {\n if (!className) {\n return \"text\";\n }\n const match = className.match(/language-([\\w-]+)/i);\n return match?.[1] ?? \"text\";\n}\n\n/**\n * Extracts code string from ReactNode children\n */\nfunction extractCode(children?: ReactNode): string {\n let code = \"\";\n if (!children) {\n return code;\n }\n if (typeof children === \"string\") {\n code = children;\n } else if (Array.isArray(children)) {\n code = children.map((child) => (typeof child === \"string\" ? child : \"\")).join(\"\");\n }\n // Trim trailing newlines but preserve internal whitespace\n return code.replace(/^\\n+|\\n+$/g, \"\");\n}\n\n/**\n * Creates markdown component mappings that work with both react-markdown and MDX.\n * Uses KookieUI components for consistent styling across all projects.\n *\n * @param options - Optional configuration for component behavior\n * @returns Component mappings for markdown/MDX renderers\n *\n * @example\n * ```tsx\n * // In react-markdown\n * <ReactMarkdown components={createMarkdownComponents()}>\n * {content}\n * </ReactMarkdown>\n *\n * // In MDX\n * export function useMDXComponents(components: MDXComponents) {\n * return {\n * ...createMarkdownComponents(),\n * ...components,\n * };\n * }\n * ```\n */\nexport function createMarkdownComponents(options: MarkdownComponentOptions = {}): Components {\n const { codeBlockCollapsible = false, imageComponent, inlineCodeHighContrast = true } = options;\n\n return {\n // Headings with consistent visual hierarchy\n h1: ({ children }: MarkdownChildrenProps) => (\n <Heading size=\"
|
|
4
|
+
"sourcesContent": ["import React, { type ReactNode } from \"react\";\nimport type { Components } from \"react-markdown\";\nimport { Blockquote, Box, Code, Flex, Heading, Text, Table } from \"@kushagradhawan/kookie-ui\";\nimport { CodeBlock } from \"../code\";\nimport type { MarkdownComponentOptions, MarkdownChildrenProps } from \"./types\";\n\n/**\n * Extracts language from className (e.g., \"language-typescript\" -> \"typescript\")\n */\nfunction extractLanguage(className?: string): string {\n if (!className) {\n return \"text\";\n }\n const match = className.match(/language-([\\w-]+)/i);\n return match?.[1] ?? \"text\";\n}\n\n/**\n * Extracts code string from ReactNode children\n */\nfunction extractCode(children?: ReactNode): string {\n let code = \"\";\n if (!children) {\n return code;\n }\n if (typeof children === \"string\") {\n code = children;\n } else if (Array.isArray(children)) {\n code = children.map((child) => (typeof child === \"string\" ? child : \"\")).join(\"\");\n }\n // Trim trailing newlines but preserve internal whitespace\n return code.replace(/^\\n+|\\n+$/g, \"\");\n}\n\n/**\n * Creates markdown component mappings that work with both react-markdown and MDX.\n * Uses KookieUI components for consistent styling across all projects.\n *\n * @param options - Optional configuration for component behavior\n * @returns Component mappings for markdown/MDX renderers\n *\n * @example\n * ```tsx\n * // In react-markdown\n * <ReactMarkdown components={createMarkdownComponents()}>\n * {content}\n * </ReactMarkdown>\n *\n * // In MDX\n * export function useMDXComponents(components: MDXComponents) {\n * return {\n * ...createMarkdownComponents(),\n * ...components,\n * };\n * }\n * ```\n */\nexport function createMarkdownComponents(options: MarkdownComponentOptions = {}): Components {\n const { codeBlockCollapsible = false, imageComponent, inlineCodeHighContrast = true } = options;\n\n return {\n // Headings with consistent visual hierarchy (9-6-5-4-3-2)\n h1: ({ children }: MarkdownChildrenProps) => (\n <Heading size=\"9\" weight=\"medium\" as=\"h1\" style={{ marginTop: \"1rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n h2: ({ children }: MarkdownChildrenProps) => (\n <Heading weight=\"medium\" size=\"6\" as=\"h2\" style={{ marginTop: \"0.875rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n h3: ({ children }: MarkdownChildrenProps) => (\n <Heading weight=\"medium\" size=\"5\" as=\"h3\" style={{ marginTop: \"0.75rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n h4: ({ children }: MarkdownChildrenProps) => (\n <Heading weight=\"medium\" size=\"4\" as=\"h4\" style={{ marginTop: \"0.625rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n h5: ({ children }: MarkdownChildrenProps) => (\n <Heading weight=\"medium\" size=\"3\" as=\"h5\" style={{ marginTop: \"0.5rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n h6: ({ children }: MarkdownChildrenProps) => (\n <Heading weight=\"medium\" size=\"2\" as=\"h6\" style={{ marginTop: \"0.5rem\", marginBottom: \"0.5rem\" }}>\n {children}\n </Heading>\n ),\n\n // Paragraph text\n p: ({ children }: MarkdownChildrenProps) => (\n <Text size=\"3\" as=\"p\" style={{ lineHeight: \"1.6\" }}>\n {children}\n </Text>\n ),\n\n // Code - inline vs block\n code: ({ className, children, inline }: { className?: string; children?: ReactNode; inline?: boolean }) => {\n const code = extractCode(children);\n\n // Block code: has className (language) OR is not marked as inline\n // Inline code: explicitly marked as inline=true, or no className and short single-line content\n const isInlineCode = inline === true || (inline === undefined && !className && !code.includes(\"\\n\") && code.length < 100);\n\n if (isInlineCode) {\n return (\n <Code highContrast={inlineCodeHighContrast} size=\"3\">\n {code}\n </Code>\n );\n }\n\n return (\n <Box my=\"2\" style={{ minWidth: 0 }}>\n <CodeBlock code={code} language={extractLanguage(className)} collapsible={codeBlockCollapsible} />\n </Box>\n );\n },\n\n // Lists\n ul: ({ children }: MarkdownChildrenProps) => (\n <ul style={{ marginTop: \"0.5rem\", marginBottom: \"0.5rem\", lineHeight: \"1.6\", paddingLeft: \"1.5rem\", listStyleType: \"disc\" }}>{children}</ul>\n ),\n ol: ({ children }: MarkdownChildrenProps) => (\n <ol style={{ marginTop: \"0.5rem\", marginBottom: \"0.5rem\", lineHeight: \"1.6\", paddingLeft: \"1.5rem\", listStyleType: \"decimal\" }}>{children}</ol>\n ),\n li: ({ children }: MarkdownChildrenProps) => <li style={{ marginBottom: \"0.25rem\", lineHeight: \"1.6\" }}>{children}</li>,\n\n // Blockquote\n blockquote: ({ children }: MarkdownChildrenProps) => <Blockquote>{children}</Blockquote>,\n\n // Links\n a: ({ href, children }: { href?: string; children?: ReactNode }) => (\n <a href={href} style={{ color: \"var(--accent-9)\", textDecoration: \"underline\" }}>\n {children}\n </a>\n ),\n\n // Text styling\n strong: ({ children }: MarkdownChildrenProps) => (\n <Text weight=\"medium\" style={{ lineHeight: \"1.6\" }}>\n {children}\n </Text>\n ),\n em: ({ children }: MarkdownChildrenProps) => <Text style={{ lineHeight: \"1.6\", fontStyle: \"italic\" }}>{children}</Text>,\n\n // Horizontal rule\n hr: () => (\n <hr\n style={{\n color: \"var(--gray-6)\",\n marginTop: \"0.5rem\",\n marginBottom: \"0.5rem\",\n height: \"1px\",\n width: \"100%\",\n opacity: 0.5,\n }}\n />\n ),\n\n // Pre wrapper (pass through to let code handle it)\n pre: ({ children }: MarkdownChildrenProps) => <>{children}</>,\n\n // Tables using KookieUI\n table: ({ children }: MarkdownChildrenProps) => (\n <Box my=\"2\" style={{ overflowX: \"auto\" }}>\n <Table.Root size=\"2\" variant=\"ghost\">\n {children}\n </Table.Root>\n </Box>\n ),\n thead: ({ children }: MarkdownChildrenProps) => <Table.Header>{children}</Table.Header>,\n tbody: ({ children }: MarkdownChildrenProps) => <Table.Body>{children}</Table.Body>,\n tr: ({ children }: MarkdownChildrenProps) => <Table.Row>{children}</Table.Row>,\n th: ({ children }: MarkdownChildrenProps) => <Table.ColumnHeaderCell>{children}</Table.ColumnHeaderCell>,\n td: ({ children }: MarkdownChildrenProps) => <Table.Cell>{children}</Table.Cell>,\n\n // HTML elements for raw HTML support\n sub: ({ children }: MarkdownChildrenProps) => <sub>{children}</sub>,\n sup: ({ children }: MarkdownChildrenProps) => <sup>{children}</sup>,\n br: () => <br />,\n\n // Images - use custom component if provided\n img: imageComponent\n ? (props: React.ImgHTMLAttributes<HTMLImageElement>) => {\n const { src, alt, width, height } = props;\n if (!src || typeof src !== \"string\") return null;\n return imageComponent({\n src,\n alt: alt ?? \"Image\",\n width: width ? String(width) : undefined,\n height: height ? String(height) : undefined,\n });\n }\n : undefined,\n\n // Details/Summary for expandable sections\n details: ({ children }: MarkdownChildrenProps) => <details style={{ padding: \"0.5rem 0\" }}>{children}</details>,\n summary: ({ children }: MarkdownChildrenProps) => <summary style={{ cursor: \"pointer\", fontWeight: 500 }}>{children}</summary>,\n };\n}\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["React", "Blockquote", "Box", "Code", "Heading", "Text", "Table", "CodeBlock", "extractLanguage", "className", "extractCode", "children", "code", "child", "createMarkdownComponents", "options", "codeBlockCollapsible", "imageComponent", "inlineCodeHighContrast", "inline", "href", "props", "src", "alt", "width", "height"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -59,24 +59,24 @@ export function createMarkdownComponents(options: MarkdownComponentOptions = {})
|
|
|
59
59
|
const { codeBlockCollapsible = false, imageComponent, inlineCodeHighContrast = true } = options;
|
|
60
60
|
|
|
61
61
|
return {
|
|
62
|
-
// Headings with consistent visual hierarchy
|
|
62
|
+
// Headings with consistent visual hierarchy (9-6-5-4-3-2)
|
|
63
63
|
h1: ({ children }: MarkdownChildrenProps) => (
|
|
64
|
-
<Heading size="
|
|
64
|
+
<Heading size="9" weight="medium" as="h1" style={{ marginTop: "1rem", marginBottom: "0.5rem" }}>
|
|
65
65
|
{children}
|
|
66
66
|
</Heading>
|
|
67
67
|
),
|
|
68
68
|
h2: ({ children }: MarkdownChildrenProps) => (
|
|
69
|
-
<Heading weight="medium" size="
|
|
69
|
+
<Heading weight="medium" size="6" as="h2" style={{ marginTop: "0.875rem", marginBottom: "0.5rem" }}>
|
|
70
70
|
{children}
|
|
71
71
|
</Heading>
|
|
72
72
|
),
|
|
73
73
|
h3: ({ children }: MarkdownChildrenProps) => (
|
|
74
|
-
<Heading weight="medium" size="
|
|
74
|
+
<Heading weight="medium" size="5" as="h3" style={{ marginTop: "0.75rem", marginBottom: "0.5rem" }}>
|
|
75
75
|
{children}
|
|
76
76
|
</Heading>
|
|
77
77
|
),
|
|
78
78
|
h4: ({ children }: MarkdownChildrenProps) => (
|
|
79
|
-
<Heading weight="medium" size="
|
|
79
|
+
<Heading weight="medium" size="4" as="h4" style={{ marginTop: "0.625rem", marginBottom: "0.5rem" }}>
|
|
80
80
|
{children}
|
|
81
81
|
</Heading>
|
|
82
82
|
),
|
|
@@ -86,7 +86,7 @@ export function createMarkdownComponents(options: MarkdownComponentOptions = {})
|
|
|
86
86
|
</Heading>
|
|
87
87
|
),
|
|
88
88
|
h6: ({ children }: MarkdownChildrenProps) => (
|
|
89
|
-
<Heading weight="medium" size="
|
|
89
|
+
<Heading weight="medium" size="2" as="h6" style={{ marginTop: "0.5rem", marginBottom: "0.5rem" }}>
|
|
90
90
|
{children}
|
|
91
91
|
</Heading>
|
|
92
92
|
),
|
|
@@ -203,4 +203,3 @@ export function createMarkdownComponents(options: MarkdownComponentOptions = {})
|
|
|
203
203
|
summary: ({ children }: MarkdownChildrenProps) => <summary style={{ cursor: "pointer", fontWeight: 500 }}>{children}</summary>,
|
|
204
204
|
};
|
|
205
205
|
}
|
|
206
|
-
|